✨ add forgot password feature

src/components/buttons/loginButton/LoginButton.tsx

@@ -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>
+      <RenderIf isTrue={link? true : false}>
-          {title}
+        <Link href='/dashboard' >
-      </LoginButtonView>
+          <LoginButtonView>
-    </Link>
+            {title}
+          </LoginButtonView>
+        </Link>
+      </RenderIf>
+      <RenderIf isTrue={link? false : true}>
+          <LoginButtonView onClick={() => onClick()}>
+            {title}
+          </LoginButtonView>
+      </RenderIf>
+    </>
   )
 }

src/pages/_app.tsx

@@ -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} />

src/pages/forgotPassword.tsx

@@ -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>
+  )
+}

src/pages/index.tsx

@@ -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>

src/pages/verifyEmail.tsx

@@ -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>
+  )
+}

src/styles/layouts/forgotPassword/ForgotPasswordView.ts

@@ -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;
+  }
+`;

src/styles/layouts/forgotPassword/verifyEmail.ts

@@ -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;
+  }
+`;

src/styles/layouts/login/LoginView.ts

@@ -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;