Select Git revision
PasswordRecoveryPage.js
-
Lucas Eduardo Schoenfelder authoredLucas Eduardo Schoenfelder authored
PasswordRecoveryPage.js 3.17 KiB
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 ValidateUserInput from '../Components/HelperFunctions/FormValidationFunction.js'
import Default from '../Components/PasswordRecoveryComponents/Default.js'
import Success from '../Components/PasswordRecoveryComponents/Success.js'
import CaseError from '../Components/PasswordRecoveryComponents/Error.js'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import {makeAxiosPostRequest} from '../Components/HelperFunctions/getAxiosConfig'
export default function PasswordRecoveryPage (props) {
const [formEmail, setEmail] = useState(
{
key : false,
value : ""
}
)
const handleChange = (e) => {
const userInput = e.target.value
const flag = ValidateUserInput('email', userInput)
setEmail({...formEmail,
key : flag,
value : userInput
})
}
const [aux, setCase] = useState('default')
const handleChangeSwitch = (value) => {
console.log(value)
if (value !== "success") {
setEmail({key : false, value : ""})
}
setCase(value)
};
function handleSuccessfulSubmit (data) {
handleChangeSwitch((data.success ? "success" : "error"))
}
const onSubmit = (e) => {
e.stopPropagation()
const url = `/auth/password`
const payload = {
"email" : formEmail.value,
"redirect_url" : "https://plataformaintegrada.mec.gov.br/recuperar-senha#/alterar-senha"
}
makeAxiosPostRequest(url, payload, handleSuccessfulSubmit, (error) => {console.log(error)})
}
const components = {
default : <Default handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>,
success : <Success email={formEmail.value} changeSwitch={handleChangeSwitch}/>,
error : <CaseError handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>
}
const switchFunction = (value) => {
switch(value) {
case 'success':
return components.success;
case 'error':
return components.error;
default:
return components.default
}
}
return (
<>
<BackgroundDiv>
<div style={{minWidth:"1170px"}}>
<CustomizedBreadcrumbs
values={["Recuperar senha"]}
/>
</div>
<div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}>
<Paper elevation={3}>
<CardDiv>
{switchFunction(aux)}
</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;
`