From 1f8678ecdd04d6075ba44a80241bfa801881781c Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Tue, 11 Feb 2020 17:13:09 -0300
Subject: [PATCH] pagina de recuperar senha quase pronta
---
.../PasswordRecoveryComponents/Default.js | 25 ++++++++
.../PasswordRecoveryComponents/Error.js | 27 ++++++++
.../PasswordRecoveryComponents/Success.js | 14 +++++
src/Pages/PasswordRecoveryPage.js | 62 ++++++++++++++-----
4 files changed, 112 insertions(+), 16 deletions(-)
create mode 100644 src/Components/PasswordRecoveryComponents/Default.js
create mode 100644 src/Components/PasswordRecoveryComponents/Error.js
create mode 100644 src/Components/PasswordRecoveryComponents/Success.js
diff --git a/src/Components/PasswordRecoveryComponents/Default.js b/src/Components/PasswordRecoveryComponents/Default.js
new file mode 100644
index 00000000..3be99525
--- /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 00000000..ba9fc189
--- /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 00000000..558f0bf4
--- /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 e13c5b99..981a14e4 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>
--
GitLab