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

✨ add forgot password feature

Browse Source
This commit is contained in:
joseCorte-exe 2022-05-16 10:44:11 -03:00
parent ec01d4cada
commit 5d28dbe930
8 changed files with 341 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/buttons/loginButton/LoginButton.tsx
View File

@ -1,17 +1,29 @@
import Link from 'next/link'
import React from 'react'
import Link from 'next/link'
import RenderIf from '../../../utils/renderIf'
import { LoginButtonView } from './LoginButtonView'
interface LoginButtonInterface {
title: string
title: string,
link?: boolean | undefined,
onClick?: () => void
}
export default function LoginButton({ title }: LoginButtonInterface) {
export default function LoginButton({ title, link, onClick }: LoginButtonInterface) {
return (
<Link href='/dashboard' >
<LoginButtonView>
{title}
</LoginButtonView>
</Link>
<>
<RenderIf isTrue={link? true : false}>
<Link href='/dashboard' >
<LoginButtonView>
{title}
</LoginButtonView>
</Link>
</RenderIf>
<RenderIf isTrue={link? false : true}>
<LoginButtonView onClick={() => onClick()}>
{title}
</LoginButtonView>
</RenderIf>
</>
)
}

6
src/pages/_app.tsx
View File

@ -12,6 +12,8 @@ import '../styles/globals.ts'
import Home from '.'
import Head from 'next/head'
import VerifyEmail from './verifyEmail'
import ForgotPassword from './forgotPassword'
function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter()
@ -43,9 +45,11 @@ function MyApp({ Component, pageProps }: AppProps) {
<meta name="viewport" content="viewport-fit=cover" />
</Head>
<Home />
<VerifyEmail />
<ForgotPassword />
<GlobalStyle />
{
rota != '/'?
rota != '/' && rota != '/forgotPassword' && rota != '/verifyEmail'?
<>
<Sidebar />
<Component {...pageProps} />

42
src/pages/forgotPassword.tsx Normal file
View File

@ -0,0 +1,42 @@
import React, { useState, useEffect } from 'react'
import Image from 'next/image';
import { useRouter } from 'next/router'
import LoginButton from '../components/buttons/loginButton/LoginButton';
import TextField from '@mui/material/TextField';
import { ForgotPasswordContainer, ForgotPasswordView } from '../styles/layouts/forgotPassword/ForgotPasswordView';
export default function ForgotPassword() {
const router = useRouter()
const rota = router.pathname
const [password, setPassword] = useState<string>('')
const [confirmPassword, setConfirmPassword] = useState<string>('')
useEffect(() => {
setPassword('')
setConfirmPassword('')
}, [rota])
return (
<ForgotPasswordView auth={rota} >
<Image src='/assets/marca1.svg' width={500} height={500} />
<ForgotPasswordContainer>
<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="Senha" onChange={value => setPassword(value.target.value)} variant="outlined"/>
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }} label="Confirmar Senha" onChange={value => setConfirmPassword(value.target.value)} variant="outlined"/>
<LoginButton title='Redefinir Senha' onClick={() => router.push('/')} />
<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.energiasmart.com.br' >www.energiasmart.com.br</a></p>
</ForgotPasswordContainer>
</ForgotPasswordView>
)
}

7
src/pages/index.tsx
View File

@ -18,9 +18,6 @@ import { LoginView, LoginContainer } from '../styles/layouts/login/LoginView';
export default function Home() {
const [state, setstate]=useState(false);
const toggleBtn = ()=> {
setstate(prevState => !prevState);
}
const [values, setValues] = React.useState({
password: '',
showPassword: false,
@ -74,9 +71,9 @@ export default function Home() {
label="Password"
/>
</FormControl>
<span>Esqueceu a senha ?</span>
<Link href='verifyEmail' >Esqueceu a senha ?</Link>
<LoginButton title='ENTRAR' />
<LoginButton title='ENTRAR' link />
<fieldset className="line">
<legend className="text">Ou</legend>

62
src/pages/verifyEmail.tsx Normal file
View File

@ -0,0 +1,62 @@
import React, { useEffect, useState } from 'react'
import Image from 'next/image';
import { useRouter } from 'next/router'
import LoginButton from '../components/buttons/loginButton/LoginButton';
import TextField from '@mui/material/TextField';
import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai';
import { ForgotPasswordContainer, ForgotPasswordView } from '../styles/layouts/forgotPassword/ForgotPasswordView';
import { VerifyEmailContainer, VerifyEmailView } from '../styles/layouts/forgotPassword/verifyEmail';
export default function VerifyEmail() {
const [sent, setSent]=useState(false);
const [code, setCode]=useState<string>('');
const [values, setValues] = React.useState({
password: '',
showPassword: false,
});
const router = useRouter()
const rota = router.pathname
useEffect(() => {
if (code === '0000') {
router.push('/forgotPassword')
}
}, [code])
useEffect(() => {
setCode('')
setSent(false)
}, [rota])
return (
<VerifyEmailView auth={rota} >
<Image src='/assets/marca1.svg' width={500} height={500} />
<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" variant="outlined"/>
{
sent?
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Codigo de verificação" variant="outlined" onChange={value => setCode(value.target.value)} />
:
null
}
<LoginButton title='Enviar Email' onClick={() => setSent(true)} />
<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.energiasmart.com.br' >www.energiasmart.com.br</a></p>
</VerifyEmailContainer>
</VerifyEmailView>
)
}

101
src/styles/layouts/forgotPassword/ForgotPasswordView.ts Normal file
View File

@ -0,0 +1,101 @@
import styled from 'styled-components';
export const ForgotPasswordView = styled.main<{auth: string}>`
display: flex;
display: ${props => props.auth == '/forgotPassword'? null : 'none'};
justify-content: flex-end;
align-items: center;
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
@media (max-width: 1196px) {
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100%;
padding: 100px;
}
`;
export const ForgotPasswordContainer = styled.section`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 40%;
margin-left: 60px;
border-radius: 10px;
background-color: #FFF;
h1{
margin-bottom:5px;
color: #092C4C;
}
h2{
font-weight: 5;
font-size: 21px;
margin-bottom: 3rem;
color: #092C4C;
font-weight: 300;
text-align: center;
}
.line {
border-top: 0.7px solid #E1E1E1;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
width: 90%;
}
.line .text {
padding: 19px 56px;
color: #ABB3BB;
font-size: 14px;
}
span{
display: flex;
align-self: flex-end;
margin-right: 5%;
justify-content: flex-end;
cursor: pointer;
}
a {
:nth-child(5) {
align-self: flex-end;
margin-right: 5%;
margin-bottom: 40px;
color: #5d83fc;
}
}
p{
color: #8B8B8B;
text-align: center;
margin-top: 1px;
}
@media (max-width: 1196px) {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
margin: 0;
}
`;

101
src/styles/layouts/forgotPassword/verifyEmail.ts Normal file
View File

@ -0,0 +1,101 @@
import styled from 'styled-components';
export const VerifyEmailView = styled.main<{auth: string}>`
display: flex;
display: ${props => props.auth == '/verifyEmail'? null : 'none'};
justify-content: flex-end;
align-items: center;
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
@media (max-width: 1196px) {
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100%;
padding: 100px;
}
`;
export const VerifyEmailContainer = styled.section`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 40%;
margin-left: 60px;
border-radius: 10px;
background-color: #FFF;
h1{
margin-bottom:5px;
color: #092C4C;
}
h2{
font-weight: 5;
font-size: 21px;
margin-bottom: 3rem;
color: #092C4C;
font-weight: 300;
text-align: center;
}
.line {
border-top: 0.7px solid #E1E1E1;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
width: 90%;
}
.line .text {
padding: 19px 56px;
color: #ABB3BB;
font-size: 14px;
}
span{
display: flex;
align-self: flex-end;
margin-right: 5%;
justify-content: flex-end;
cursor: pointer;
}
a {
:nth-child(5) {
align-self: flex-end;
margin-right: 5%;
margin-bottom: 40px;
color: #5d83fc;
}
}
p{
color: #8B8B8B;
text-align: center;
margin-top: 1px;
}
@media (max-width: 1196px) {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
margin: 0;
}
`;

8
src/styles/layouts/login/LoginView.ts
View File

@ -75,6 +75,14 @@ export const LoginContainer = styled.section`
justify-content: flex-end;
cursor: pointer;
}
a {
:nth-child(5) {
align-self: flex-end;
margin-right: 5%;
margin-bottom: 40px;
color: #5d83fc;
}
}
p{
color: #8B8B8B;