From cf408cfafd019a6e8eb0468055e5498ae0fda726 Mon Sep 17 00:00:00 2001 From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br> Date: Mon, 5 Jul 2021 21:58:55 -0300 Subject: [PATCH] Fixing password recovery --- src/App.js | 3 + .../PasswordRecoveryComponents/Default.js | 2 +- src/Pages/ChangePasswordPage.js | 132 ++++++++++++++++++ src/Pages/PasswordRecoveryPage.js | 4 +- 4 files changed, 138 insertions(+), 3 deletions(-) create mode 100644 src/Pages/ChangePasswordPage.js diff --git a/src/App.js b/src/App.js index b5a80b2f..b87c9ad2 100644 --- a/src/App.js +++ b/src/App.js @@ -95,6 +95,8 @@ import BlockedUser from "./Admin/Pages/Pages/SubPages/BlockedUsers"; import AppBarAdmin from './Admin/Components/Components/AppBar' import createBrowserHistory from 'history/createBrowserHistory' +import ChangePasswordPage from "./Pages/ChangePasswordPage.js"; + export default function App() { // eslint-disable-next-line const { state, dispatch } = useContext(Store); @@ -210,6 +212,7 @@ export default function App() { <Route path="/participando-da-rede" component={TabNetPart} /> <Route path="/gerenciando-conta" component={TabManageAc} /> <Route path="/plataforma-mec" component={TabPlataformaMEC} /> + <Route path="/recuperar-senha/alterar-senha" component={ChangePasswordPage} /> <Route path="/recuperar-senha" component={PasswordRecoveryPage} /> <Route path="/usuario-publico/:userId" component={PublicUserPage} /> <Route diff --git a/src/Components/PasswordRecoveryComponents/Default.js b/src/Components/PasswordRecoveryComponents/Default.js index ddbb4f43..e7a45389 100644 --- a/src/Components/PasswordRecoveryComponents/Default.js +++ b/src/Components/PasswordRecoveryComponents/Default.js @@ -6,7 +6,7 @@ export default function Default (props) { return ( <div style={{overflow:"hidden", display:"inline-block"}}> <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Vamos encontrar a sua conta</h2> - <form onSubmit={(e) => props.onSubmit(e)}> + <form onSubmit={(e) => { e.preventDefault(); props.onSubmit(e); }}> <FormInput inputType={"text"} name={"email"} diff --git a/src/Pages/ChangePasswordPage.js b/src/Pages/ChangePasswordPage.js new file mode 100644 index 00000000..a2d3a689 --- /dev/null +++ b/src/Pages/ChangePasswordPage.js @@ -0,0 +1,132 @@ +import React, {useState} from "react"; +import {BackgroundDiv} from '../Components/TabPanels/StyledComponents.js' +import Paper from '@material-ui/core/Paper'; +import styled from 'styled-components' +import FormInput from "../Components/FormInput.js" +import {CompletarCadastroButton} from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js' +import ValidateUserInput from '../Components/HelperFunctions/FormValidationFunction.js' +import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js' +import {putRequest} from '../Components/HelperFunctions/getAxiosConfig' + +export default function ChangePasswordPage (props) { + + const [formPassword, setPassword] = useState( + { + key : false, + value : "" + } + ) + + const [formPasswordConfirmation, setPasswordConfirmation] = useState( + { + key : false, + value : "" + } + ) + + const handleChange = (e, field) => { + const userInput = e.target.value; + const flag = ValidateUserInput('password', userInput); + + if (field === "password") { + setPassword({...formPassword, + key : flag, + value : userInput + }) + } else { + setPasswordConfirmation({...formPasswordConfirmation, + key : flag, + value : userInput + }) + } + + } + + const onSubmit = () => { + const flag = ValidateUserInput('confirmation', formPassword.value, formPasswordConfirmation.value); + + if (flag === true) { + //throw error to user - ### arrumar + console.log("senha não bate"); + } else { + //console.log("senha bate"); + if (!formPassword.key && !formPasswordConfirmation.key) { + console.log("senha bate"); + + const urlParams = new URLSearchParams(window.location.search); + const clientId = urlParams.get("client_id"); + const config = urlParams.get("config"); + const expiry = urlParams.get("expiry"); + const resetPassword = urlParams.get("reset_password"); + const token = urlParams.get("token"); + const uid = urlParams.get("uid"); + + const url = `/auth/password` + + const payload = { + "password" : formPassword.value, + "password_confirmation" : formPasswordConfirmation.value, + "client" : clientId, + "config" : config, + "expiry" : expiry, + "reset_password" : resetPassword, + "access-token" : token, + "uid" : uid + } + putRequest(url, payload, () => { window.location.href="/" }, (error) => {console.log(error)}) // ### arrumar + } + } + } + + return ( + <BackgroundDiv> + <div> + <CustomizedBreadcrumbs + values={["Recuperar senha", "Alterar senha"]} + /> + </div> + <div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}> + <Paper elevation={3}> + <CardDiv> + <div style={{overflow:"hidden", display:"inline-block"}}> + <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Confirme a nova senha</h2> + <form onSubmit={(e) => { e.preventDefault(); onSubmit(e); }}> + <FormInput + inputType={"password"} + name={"senha"} + value={formPassword.value} + placeholder={"Senha"} + handleChange={e => handleChange(e, 'password')} + required={true} + error = {formPassword.key} + help = {formPassword.key ? (formPassword.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""} + /> + <br/> + <FormInput + inputType={"password"} + name={"confirme a senha"} + value={formPasswordConfirmation.value} + placeholder={"Confirme a senha"} + handleChange={e => handleChange(e, 'confirmation')} + required={true} + error = {formPasswordConfirmation.key} + help = {formPasswordConfirmation.key ? (formPasswordConfirmation.value.length === 0 ? "Faltou confirmar sua senha." : "A confirmação precisa ter no mínimo 8 caracteres e ser igual a senha.") : ""} + /> + <div style={{display:"flex", justifyContent:"center"}}> + <CompletarCadastroButton type="submit" >ATUALIZAR SENHA</CompletarCadastroButton> + </div> + </form> + </div> + </CardDiv> + </Paper> + </div> + </BackgroundDiv> + ) +} + +const CardDiv = styled.div` + background-color : #fff; + box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); + padding : 30px 60px; + margin : 50px 0; +` \ No newline at end of file diff --git a/src/Pages/PasswordRecoveryPage.js b/src/Pages/PasswordRecoveryPage.js index 010a164b..6093d37d 100644 --- a/src/Pages/PasswordRecoveryPage.js +++ b/src/Pages/PasswordRecoveryPage.js @@ -48,7 +48,7 @@ export default function PasswordRecoveryPage (props) { const payload = { "email" : formEmail.value, - "redirect_url" : "https://plataformaintegrada.mec.gov.br/recuperar-senha#/alterar-senha" + "redirect_url" : "http://localhost:4000/recuperar-senha/alterar-senha" // ### arrumar "https://plataformaintegrada.mec.gov.br/recuperar-senha/alterar-senha" } postRequest(url, payload, handleSuccessfulSubmit, (error) => {console.log(error)}) @@ -77,7 +77,7 @@ export default function PasswordRecoveryPage (props) { return ( <> <BackgroundDiv> - <div style={{minWidth:"1170px"}}> + <div> <CustomizedBreadcrumbs values={["Recuperar senha"]} /> -- GitLab