Skip to content
Snippets Groups Projects
Select Git revision
  • Develop
  • master default protected
  • Develop_copy_to_implement_acessibility
  • Develop_copy_to_implement_acessibility_in_admin
  • vinicius_accessibility_from_copy
  • luis_accesibility_before_develop
  • vinicius_accessiblity
  • Fixing_bugs
  • Otimizando_Vinicius
  • Password_recovery_fix
  • fix_admin_bugs_luis
  • luis_gamefication
  • gamificacaoLucas
  • GameficationAdmin
  • fixHomeScreen
  • Fix_perfil
  • fix_remaining_bugs
  • homologa
  • centraliza-axios
  • Gamification
  • v1.2.0
  • v1.1.1
  • v1.1.0
  • V1.0.1
  • V1.0.0
  • V1.0.0-RC
26 results

PasswordRecoveryPage.js

Blame
  • 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;
    `