diff --git a/src/Components/PasswordRecoveryComponents/Default.js b/src/Components/PasswordRecoveryComponents/Default.js
new file mode 100644
index 0000000000000000000000000000000000000000..3be9952501e3e693998d27ce08743a220939a286
--- /dev/null
+++ b/src/Components/PasswordRecoveryComponents/Default.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import {CompletarCadastroButton} from '../TabPanels/TabPanelSolicitarContaProfessor.js'
+import FormInput from "../FormInput.js"
+
+export default function Default (props) {
+ return (
+ <div style={{overflow:"hidden", display:"inline-block"}}>
+ <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Vamos encontrar a sua conta</h2>
+ <form onSubmit={(e) => props.onSubmit(e)}>
+ <FormInput
+ inputType={"text"}
+ name={"email"}
+ value={props.value}
+ placeholder={"E-mail"}
+ handleChange={e => props.handleChange(e)}
+ required={true}
+ error = {props.error}
+ />
+ <div style={{display:"flex", justifyContent:"center"}}>
+ <CompletarCadastroButton onClick={(e) => props.onSubmit(e, props.value)}>BUSCAR</CompletarCadastroButton>
+ </div>
+ </form>
+ </div>
+ )
+}
diff --git a/src/Components/PasswordRecoveryComponents/Error.js b/src/Components/PasswordRecoveryComponents/Error.js
new file mode 100644
index 0000000000000000000000000000000000000000..ba9fc189ebc8c0a07becf8312fa43d5bd70547b6
--- /dev/null
+++ b/src/Components/PasswordRecoveryComponents/Error.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import {CompletarCadastroButton} from '../TabPanels/TabPanelSolicitarContaProfessor.js'
+import FormInput from "../FormInput.js"
+
+export default function Default (props) {
+ return (
+ <div style={{overflow:"hidden", display:"inline-block"}}>
+ <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Ops! Não encontramos essa conta</h2>
+ <p>{props.email}</p>
+ <p>Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p>
+ <form onSubmit={(e) => props.onSubmit(e)}>
+ <FormInput
+ inputType={"text"}
+ name={"email"}
+ value={props.value}
+ placeholder={"E-mail"}
+ handleChange={e => props.handleChange(e)}
+ required={true}
+ error = {props.error}
+ />
+ <div style={{display:"flex", justifyContent:"center"}}>
+ <CompletarCadastroButton onClick={(e) => props.onSubmit(e, props.value)}>BUSCAR</CompletarCadastroButton>
+ </div>
+ </form>
+ </div>
+ )
+}
diff --git a/src/Components/PasswordRecoveryComponents/Success.js b/src/Components/PasswordRecoveryComponents/Success.js
new file mode 100644
index 0000000000000000000000000000000000000000..558f0bf48615a2ec12c076cd66ba870d3552397e
--- /dev/null
+++ b/src/Components/PasswordRecoveryComponents/Success.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import {CompletarCadastroButton} from '../TabPanels/TabPanelSolicitarContaProfessor.js'
+import FormInput from "../FormInput.js"
+
+export default function Default (props) {
+ return (
+ <div style={{overflow:"hidden", display:"inline-block", fontSize:"14px", textAlign:"start"}}>
+ <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Feito! Confira seu e-mail</h2>
+ <p> Enviamos um link para <span style={{color:"#00bcd4"}}>{props.email}</span> que permite alterar sua senha. </p>
+ <p style={{marginBottom:"30px"}}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p>
+ <p> Não é o seu e-mail? <span style={{color:"#00bcd4", cursor:"pointer"}} onClick={() => {props.changeSwitch('default')}}> Tente Novamente.</span></p>
+ </div>
+ )
+}
diff --git a/src/Pages/PasswordRecoveryPage.js b/src/Pages/PasswordRecoveryPage.js
index e13c5b99ff5a3d3747a40d5d114dfd1efa1bdb7c..981a14e47f44c1955ab57df4a6d713760a52e3d8 100644
--- a/src/Pages/PasswordRecoveryPage.js
+++ b/src/Pages/PasswordRecoveryPage.js
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, {useState, useContext} from 'react'
import {HeaderDiv, BreadcrumbsDiv, StyledBreadcrumbs} from './UserPage.js'
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import {Link} from 'react-router-dom'
@@ -6,8 +6,15 @@ import Paper from '@material-ui/core/Paper';
import styled from 'styled-components'
import FormInput from "../Components/FormInput.js"
import ValidateUserInput from '../Components/FormValidationFunction.js'
+import {CompletarCadastroButton} from '../Components/TabPanels/TabPanelSolicitarContaProfessor.js'
+import Default from '../Components/PasswordRecoveryComponents/Default.js'
+import Success from '../Components/PasswordRecoveryComponents/Success.js'
+import {Store} from '../Store.js'
+import Error from '../Components/PasswordRecoveryComponents/Error.js'
export default function PasswordRecoveryPage (props) {
+ const {state, dispatch} = useContext(Store)
+
const [formEmail, setEmail] = useState(
{
dict : {
@@ -28,6 +35,42 @@ export default function PasswordRecoveryPage (props) {
console.log(formEmail)
}
+ const [aux, setCase] = useState('default')
+ const handleChangeSwitch = (value) => setCase(value);
+
+ const onSubmit = (e, email) => {
+ e.stopPropagation()
+ const query = email
+
+ setEmail({...formEmail, dict : {
+ key : false,
+ value : ''
+ }})
+ handleChangeSwitch('error')
+ }
+
+
+ const components = {
+ default : <Default handleChange={handleChange} onSubmit={onSubmit} value={formEmail.dict.value} error={formEmail.dict.key}/>,
+ success : <Success email={state.currentUser.email} changeSwitch={handleChangeSwitch}/>,
+ error : <Error email={state.currentUser.email} handleChange={handleChange} onSubmit={onSubmit} value={formEmail.dict.value} error={formEmail.dict.key}/>
+ }
+
+ const switchFunction = (value) => {
+ switch(value) {
+ case 'success':
+ return components.success;
+ break;
+ case 'error':
+ return components.error;
+ break;
+ default:
+ return components.default
+ break;
+
+ }
+ }
+
return (
<>
<HeaderDiv>
@@ -44,23 +87,10 @@ export default function PasswordRecoveryPage (props) {
</BreadcrumbsDiv>
</div>
- <div style={{justifyContent:"center", width:"1170px", margin:"auto"}}>
+ <div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}>
<Paper elevation={3}>
<CardDiv>
- <div style={{overflow:"hidden"}}>
- <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Vamos encontrar a sua conta</h2>
- <form>
- <FormInput
- inputType={"text"}
- name={"email"}
- value={formEmail.dict.value}
- placeholder={"E-mail"}
- handleChange={e => handleChange(e)}
- required={true}
- error = {formEmail.dict.key}
- />
- </form>
- </div>
+ {switchFunction(aux)}
</CardDiv>
</Paper>
</div>