Fixing password recovery

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

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"}

src/Pages/ChangePasswordPage.js

+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

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"]}
                     />