Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'administativePages' of https://gitlab.com/kluppsoftware/smart-energia-web into administativePages

Browse Source
This commit is contained in:
Alex Santos 2022-06-29 10:59:21 -03:00
commit 581c75281d
1 changed files with 116 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
src/pages/verifyEmail/index.tsx
View File

@ -5,7 +5,8 @@ import FormData from 'form-data';
import LoginButton from '../../components/buttons/loginButton/LoginButton'; import LoginButton from '../../components/buttons/loginButton/LoginButton';
import TextField from '@mui/material/TextField'; import TextField from '@mui/material/TextField';
import Alert from '@mui/material/Alert'; import Snackbar from '@mui/material/Snackbar'
import MuiAlert, { AlertProps } from '@mui/material/Alert'
import { VerifyEmailContainer, VerifyEmailView } from '../../styles/layouts/forgotPassword/verifyEmail'; import { VerifyEmailContainer, VerifyEmailView } from '../../styles/layouts/forgotPassword/verifyEmail';
import RenderIf from '../../utils/renderIf'; import RenderIf from '../../utils/renderIf';
@ -14,31 +15,51 @@ import { api } from '../../services/api';
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies'; import { parseCookies } from 'nookies';
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
ref
) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
})
export default function VerifyEmail() { export default function VerifyEmail() {
const [sent, setSent]=useState(false); const [sent, setSent]=useState(false);
const [code, setCode]=useState<string>('') const [code, setCode]=useState<string>('')
const [codeStatus, setCodeStatus]=useState<boolean>(null) const [codeStatus, setCodeStatus]=useState<boolean>(null)
const formData = new FormData();
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false); const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
const [openSnackError, setOpenSnackError] = 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 [email, setEmail] = useState<any>();
const [values, setValues] = React.useState({ const [token, setToken] = useState<any>();
password: '', const [password, setPassword] = useState<any>();
showPassword: false, const [password_confirmation, setPassword_confirmation] = useState<any>();
});
const router = useRouter() const router = useRouter()
const rota = router.pathname const rota = router.pathname
useEffect(() => { const handleCloseSnack = (
setCode('') event?: React.SyntheticEvent | Event,
setSent(false) reason?: string
setCodeStatus(null) ) => {
}, [rota]) if (reason === 'clickaway') {
return
}
setOpenSnackError(false)
setOpenSnackSuccess(false)
setOpenSnackErrorPassword(false)
setOpenSnackSuccessPassword(false)
}
function handleSendEmail() { function handleSendEmail() {
formData.append('email', email) api.post('/auth/forgot-password', {
api.post('/auth/forgot-password', formData).then(res => { email
}).then(res => {
setSent(true)
setOpenSnackSuccess(true) setOpenSnackSuccess(true)
}).catch(res => { }).catch(res => {
setOpenSnackError(true) setOpenSnackError(true)
@ -46,36 +67,107 @@ export default function VerifyEmail() {
} }
function verifyConfirmationCode() { function verifyConfirmationCode() {
if (code === '0000') { api.post('/auth/reset-password', {
email,
password,
password_confirmation,
token
}).then(res => {
setSent(true)
setOpenSnackSuccessPassword(true)
setTimeout(() => { setTimeout(() => {
router.push('/forgotPassword') router.push('/')
}, 2500); }, 2000);
setCodeStatus(true) }).catch(res => {
} else { setOpenSnackErrorPassword(true)
setCodeStatus(false) })
}
} }
useEffect(() => {
setCode('')
setSent(false)
setCodeStatus(null)
}, [rota])
return ( return (
<VerifyEmailView auth={rota} > <VerifyEmailView auth={rota} >
<Head> <Head>
<title>Smart Energia - Verificar Email</title> <title>Smart Energia - Verificar Email</title>
</Head> </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('/')} /> <Image style={{cursor:'pointer'}} src='/assets/marca1.png' width={500} height={340} onClick={() => router.push('/')} />
<VerifyEmailContainer> <VerifyEmailContainer>
<h1>Bem-Vindo</h1> <h1>Bem-Vindo</h1>
<h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2> <h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Email" variant="outlined"/> <TextField id="outlined-basic" sx={{ m: 1, width: '90%' }} label="Email" onChange={value => setEmail(value.target.value)} variant="outlined"/>
<RenderIf isTrue={sent? false : true}> <RenderIf isTrue={sent? false : true}>
<LoginButton title='Enviar Email' onClick={() => handleSendEmail()} /> <LoginButton title='Enviar Email' onClick={() => {
handleSendEmail()
}} />
</RenderIf> </RenderIf>
<RenderIf isTrue={sent? true : false}> <RenderIf isTrue={sent? true : false}>
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Nova Senha" variant="outlined"/> <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="Codigo de verificação" variant="outlined" onChange={value => setCode(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()}} /> <LoginButton title='Continuar' onClick={() => {verifyConfirmationCode()}} />
<RenderIf isTrue={codeStatus===true? true : false} > <RenderIf isTrue={codeStatus===true? true : false} >
<Alert severity="success">Codigo de veerificação aceito — aguarde um instante!</Alert> <Alert severity="success">Codigo de veerificação aceito — aguarde um instante!</Alert>
</RenderIf> </RenderIf>
<RenderIf isTrue={codeStatus===false? true : false} > <RenderIf isTrue={codeStatus===false? true : false} >
<Alert severity="warning">Codigo de verificação invalido — tente outro!</Alert> <Alert severity="warning">Codigo de verificação invalido — tente outro!</Alert>
</RenderIf> </RenderIf>
@ -93,20 +185,9 @@ export default function VerifyEmail() {
} }
export const getServerSideProps: GetServerSideProps = async (ctx) => { export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return { return {
props: { props: {
userName
} }
} }
} }