190 lines
5.9 KiB
TypeScript
190 lines
5.9 KiB
TypeScript
import { forwardRef, useEffect, useState } from 'react'
|
|
import Image from 'next/image';
|
|
import { useRouter } from 'next/router'
|
|
import FormData from 'form-data';
|
|
import LoginButton from '../../components/buttons/loginButton/LoginButton';
|
|
import TextField from '@mui/material/TextField';
|
|
|
|
import Snackbar from '@mui/material/Snackbar'
|
|
import MuiAlert, { AlertProps } from '@mui/material/Alert'
|
|
|
|
import { VerifyEmailContainer, VerifyEmailView } from '../../styles/layouts/forgotPassword/verifyEmail';
|
|
import RenderIf from '../../utils/renderIf';
|
|
import Head from 'next/head';
|
|
import { api } from '../../services/api';
|
|
import { GetServerSideProps } from 'next';
|
|
import { parseCookies } from 'nookies';
|
|
|
|
const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
|
props,
|
|
ref
|
|
) {
|
|
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
|
|
})
|
|
|
|
export default function VerifyEmail() {
|
|
const [sent, setSent]=useState(false);
|
|
const [code, setCode]=useState<string>('')
|
|
|
|
const [codeStatus, setCodeStatus]=useState<boolean>(null)
|
|
|
|
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
|
|
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
|
|
const [openSnackSuccessPassword, setOpenSnackSuccessPassword] = useState<boolean>(false);
|
|
const [openSnackErrorPassword, setOpenSnackErrorPassword] = useState<boolean>(false);
|
|
|
|
const [email, setEmail] = useState<any>();
|
|
const [token, setToken] = useState<any>();
|
|
const [password, setPassword] = useState<any>();
|
|
const [password_confirmation, setPassword_confirmation] = useState<any>();
|
|
|
|
const router = useRouter()
|
|
const rota = router.pathname
|
|
|
|
const handleCloseSnack = (
|
|
event?: React.SyntheticEvent | Event,
|
|
reason?: string
|
|
) => {
|
|
if (reason === 'clickaway') {
|
|
return
|
|
}
|
|
|
|
setOpenSnackError(false)
|
|
setOpenSnackSuccess(false)
|
|
setOpenSnackErrorPassword(false)
|
|
setOpenSnackSuccessPassword(false)
|
|
}
|
|
|
|
function handleSendEmail() {
|
|
api.post('/auth/forgot-password', {
|
|
email
|
|
}).then(res => {
|
|
setSent(true)
|
|
setOpenSnackSuccess(true)
|
|
}).catch(() => setOpenSnackError(true))
|
|
}
|
|
|
|
function verifyConfirmationCode() {
|
|
api.post('/auth/reset-password', {
|
|
email,
|
|
password,
|
|
password_confirmation,
|
|
token
|
|
}).then(res => {
|
|
setSent(true)
|
|
setOpenSnackSuccessPassword(true)
|
|
setTimeout(() => {
|
|
router.push('/')
|
|
}, 2000);
|
|
}).catch(() => setOpenSnackErrorPassword(true))
|
|
}
|
|
|
|
useEffect(() => {
|
|
setCode('')
|
|
setSent(false)
|
|
setCodeStatus(null)
|
|
}, [rota])
|
|
|
|
return (
|
|
<VerifyEmailView auth={rota} >
|
|
<Head>
|
|
<title>Smart Energia - Verificar Email</title>
|
|
</Head>
|
|
<Snackbar
|
|
open={openSnackSuccess}
|
|
autoHideDuration={4000}
|
|
onClose={handleCloseSnack}
|
|
>
|
|
<Alert
|
|
onClose={handleCloseSnack}
|
|
severity="success"
|
|
sx={{ width: '100%' }}
|
|
>
|
|
Email enviado com sucesso!
|
|
</Alert>
|
|
</Snackbar>
|
|
<Snackbar
|
|
open={openSnackError}
|
|
autoHideDuration={4000}
|
|
onClose={handleCloseSnack}
|
|
>
|
|
<Alert
|
|
onClose={handleCloseSnack}
|
|
severity="error"
|
|
sx={{ width: '100%' }}
|
|
>
|
|
Email não enviado!
|
|
</Alert>
|
|
</Snackbar>
|
|
<Snackbar
|
|
open={openSnackSuccessPassword}
|
|
autoHideDuration={4000}
|
|
onClose={handleCloseSnack}
|
|
>
|
|
<Alert
|
|
onClose={handleCloseSnack}
|
|
severity="success"
|
|
sx={{ width: '100%' }}
|
|
>
|
|
Senha alterada com sucesso!
|
|
</Alert>
|
|
</Snackbar>
|
|
<Snackbar
|
|
open={openSnackErrorPassword}
|
|
autoHideDuration={4000}
|
|
onClose={handleCloseSnack}
|
|
>
|
|
<Alert
|
|
onClose={handleCloseSnack}
|
|
severity="error"
|
|
sx={{ width: '100%' }}
|
|
>
|
|
Senha não alterada!
|
|
</Alert>
|
|
</Snackbar>
|
|
|
|
<Image style={{cursor:'pointer'}} src='/assets/marca1.png' width={500} height={340} onClick={() => router.push('/')} />
|
|
<VerifyEmailContainer>
|
|
<h1>Bem-Vindo</h1>
|
|
<h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
|
|
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }} label="Email" onChange={value => setEmail(value.target.value)} variant="outlined"/>
|
|
<RenderIf isTrue={sent? false : true}>
|
|
<LoginButton title='Enviar Email' onClick={() => {
|
|
handleSendEmail()
|
|
}} />
|
|
</RenderIf>
|
|
|
|
<RenderIf isTrue={sent? true : false}>
|
|
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Nova Senha" variant="outlined" onChange={value => setPassword(value.target.value)}/>
|
|
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Confirme sua senha" variant="outlined" onChange={value => setPassword_confirmation(value.target.value)}/>
|
|
|
|
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Codigo de verificação" variant="outlined" onChange={value => setToken(value.target.value)}/>
|
|
<LoginButton title='Continuar' onClick={() => {verifyConfirmationCode()}} />
|
|
<RenderIf isTrue={codeStatus===true? true : false} >
|
|
<Alert severity="success">Codigo de veerificação aceito — aguarde um instante!</Alert>
|
|
</RenderIf>
|
|
|
|
<RenderIf isTrue={codeStatus===false? true : false} >
|
|
<Alert severity="warning">Codigo de verificação invalido — tente outro!</Alert>
|
|
</RenderIf>
|
|
</RenderIf>
|
|
|
|
<fieldset className="line">
|
|
<legend className="text">Ou</legend>
|
|
</fieldset>
|
|
|
|
<p><a href='tel:+55(41)3012-5900' >+55(41) 3012-5900</a><br/><a href='https://www.smartenergia.com.br' >www.smartenergia.com.br</a></p>
|
|
|
|
</VerifyEmailContainer>
|
|
</VerifyEmailView>
|
|
)
|
|
}
|
|
|
|
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
|
|
|
return {
|
|
props: {
|
|
}
|
|
}
|
|
}
|