From 1ed4116a08f2f6af77b33786205fb83f0ff135af Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Tue, 11 Feb 2020 11:08:23 -0300
Subject: [PATCH] componente funcional validacao de input adicionado
---
src/App.js | 3 +-
src/Components/FormValidationFunction.js | 45 +++++++++++
src/Components/LoginContainerFunction.js | 24 +-----
src/Components/SignUpContainerFunction.js | 35 ++-------
.../TabPanels/TabPanelEditarPerfil.js | 22 +-----
.../TabPanels/TabPanelGerenciarConta.js | 30 +-------
src/Pages/PasswordRecoveryPage.js | 77 +++++++++++++++++++
src/Pages/RecuperarSenha.js | 0
8 files changed, 142 insertions(+), 94 deletions(-)
create mode 100644 src/Components/FormValidationFunction.js
create mode 100644 src/Pages/PasswordRecoveryPage.js
delete mode 100644 src/Pages/RecuperarSenha.js
diff --git a/src/App.js b/src/App.js
index 3ad7a3b8..d2251d22 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,7 +24,7 @@ import EcFooter from './Components/EcFooter';
import GNUAGPLfooter from './Components/AGPLFooter';
import UserPage from './Pages/UserPage';
import UserTerms from './Pages/UserTerms';
-
+import PasswordRecoveryPage from './Pages/PasswordRecoveryPage.js'
import Teste from './Pages/Teste';
import ResourcePage from './Pages/ResourcePage';
@@ -81,6 +81,7 @@ export default function App(){
<Route path="/termos" component={UserTerms}/>
<Route path="/teste" component={Teste}/>
<Route path="/contato" component = {Contact}/>
+ <Route path="/recuperar-senha" component={PasswordRecoveryPage}/>
</Switch>
<EcFooter/>
<GNUAGPLfooter/>
diff --git a/src/Components/FormValidationFunction.js b/src/Components/FormValidationFunction.js
new file mode 100644
index 00000000..c7a8407c
--- /dev/null
+++ b/src/Components/FormValidationFunction.js
@@ -0,0 +1,45 @@
+import React from 'react'
+
+//fieldName : form field name
+//userInput : user input for a given field
+//confirmation : optional password confirmation argument
+export default function ValidateUserInput (fieldName, userInput, confirmation) {
+ let flag = false
+
+ switch(fieldName) {
+ case('username'):
+ if (userInput.length < 1) {
+ flag = true
+ }
+ break;
+ case('email'):
+ if(userInput.length < 7 || !(userInput.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i))) {
+ flag = true
+ }
+ break;
+ case('password'):
+ if (userInput.length < 8) {
+ flag = true
+ }
+ break;
+ case('confirmation'):
+ if (userInput !== confirmation) {
+ flag = true
+ }
+ break;
+ case('message'):
+ if(userInput.length === 0) {
+ flag = true
+ }
+ break;
+ case('aboutMe'):
+ if(userInput.length > 160) {
+ flag = true
+ }
+ break;
+ default:
+ break;
+ }
+
+ return flag
+}
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index 5a0301f1..b02c7fcd 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -25,23 +25,7 @@ import {device} from './device.js'
import LabeledCheckbox from './Checkbox.js'
import FormInput from "./FormInput.js"
import GoogleLogo from "../img/logo_google.svg"
-
-function validateUserInput(type, input) {
- let flag = false
-
- if (type === 'email') {
- if(input.split("").filter(x => x === "@").length !== 1) {
- flag = true
- }
- }
- else if (type === 'senha') {
- if(input.length < 8) {
- flag = true
- }
- }
-
- return flag
-}
+import ValidateUserInput from '../Components/FormValidationFunction.js'
export default function LoginContainer (props) {
const [formEmail, setEmail] = useState(
@@ -72,7 +56,7 @@ export default function LoginContainer (props) {
const handleChange = (e, type) => {
const userInput = e.target.value
- const flag = validateUserInput(type, userInput)
+ const flag = ValidateUserInput(type, userInput)
if(type === 'email') {
setEmail({...formEmail, dict : {
@@ -81,7 +65,7 @@ export default function LoginContainer (props) {
}})
console.log(formEmail)
}
- else if(type === 'senha') {
+ else if(type === 'password') {
setSenha({...formSenha, dict : {
key : flag,
value : userInput
@@ -167,7 +151,7 @@ export default function LoginContainer (props) {
name={"senha"}
value={formSenha.dict.value}
placeholder={"Senha"}
- handleChange={e => handleChange(e, 'senha')}
+ handleChange={e => handleChange(e, 'password')}
required={true}
error = {formSenha.dict.key}
help = {formSenha.dict.key ? (formSenha.dict.value.length == 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js
index 84817081..ed137f75 100644
--- a/src/Components/SignUpContainerFunction.js
+++ b/src/Components/SignUpContainerFunction.js
@@ -25,6 +25,7 @@ import styled from 'styled-components'
import {device} from './device.js'
import FormInput from "./FormInput.js"
import {StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, StyledGoogleLoginButton, H3Div} from './LoginContainer.js'
+import ValidateUserInput from '../Components/FormValidationFunction.js'
var Recaptcha = require('react-recaptcha')
@@ -32,28 +33,6 @@ var callback = function () {
console.log('Done!!!!');
};
-function validateUserInput(type, input) {
- let flag = false
-
- if (type === 'nome') {
- if(input.length < 1) {
- flag = true
- }
- }
- else if (type === 'email') {
- if(input.split("").filter(x => x === "@").length !== 1) {
- flag = true
- }
- }
- else if (type === 'senha') {
- if(input.length < 8) {
- flag = true
- }
- }
-
- return flag
-}
-
export default function SignUpContainer (props) {
const [formNome, setNome] = useState(
{
@@ -84,9 +63,9 @@ export default function SignUpContainer (props) {
const handleChange = (e, type) => {
const userInput = e.target.value
- const flag = validateUserInput(type, userInput)
+ const flag = ValidateUserInput(type, userInput)
- if (type === 'nome') {
+ if (type === 'username') {
setNome({...formNome, dict : {
key : flag,
value : userInput
@@ -100,7 +79,7 @@ export default function SignUpContainer (props) {
}})
console.log(formEmail)
}
- else if(type === 'senha') {
+ else if(type === 'password') {
setSenha({...formSenha, dict : {
key : flag,
value : userInput
@@ -183,7 +162,7 @@ export default function SignUpContainer (props) {
name={"name"}
value={formNome.dict.value}
placeholder={"Nome Completo"}
- handleChange={e => handleChange(e, 'nome')}
+ handleChange={e => handleChange(e, 'username')}
required={true}
error={formNome.dict.key}
/>
@@ -204,10 +183,10 @@ export default function SignUpContainer (props) {
name={"password"}
value={formSenha.dict.value}
placeholder={"Senha"}
- handleChange={e => handleChange(e, 'senha')}
+ handleChange={e => handleChange(e, 'password')}
required={true}
error={formSenha.dict.key}
- help={formSenha.dict.key ? "Faltou definir uma senha." : ""}
+ help = {formSenha.dict.key ? (formSenha.dict.value.length == 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
/>
<br/>
<Recaptcha
diff --git a/src/Components/TabPanels/TabPanelEditarPerfil.js b/src/Components/TabPanels/TabPanelEditarPerfil.js
index 67fc6a10..6274fcba 100644
--- a/src/Components/TabPanels/TabPanelEditarPerfil.js
+++ b/src/Components/TabPanels/TabPanelEditarPerfil.js
@@ -7,23 +7,9 @@ import IconButton from '@material-ui/core/IconButton';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
import Tooltip from '@material-ui/core/Tooltip';
import FormInput from "../FormInput.js"
+import ValidateUserInput from '../FormValidationFunction.js'
-function validateUserInput(type, input) {
- let flag = false
- if (type === 'nome') {
- if(input.length < 1) {
- flag = true
- }
- }
- else if (type === 'aboutMe') {
- if(input.length > 160) {
- flag = true
- }
- }
-
- return flag
-}
export default function TabPanelEditarPerfil (props) {
const {state, dispatch} = useContext(Store)
@@ -54,9 +40,9 @@ export default function TabPanelEditarPerfil (props) {
const handleChange = (e, type) => {
const userInput = e.target.value
- const flag = validateUserInput(type, userInput)
+ const flag = ValidateUserInput(type, userInput)
- if(type === 'nome') {
+ if(type === 'username') {
setNome({...formNome, dict : {
key : flag,
value : userInput
@@ -134,7 +120,7 @@ export default function TabPanelEditarPerfil (props) {
name={"Nome Completo"}
value={formNome.dict.value}
placeholder={"Nome Completo"}
- handleChange={e => handleChange(e, 'nome')}
+ handleChange={e => handleChange(e, 'username')}
required={true}
error={formNome.dict.key}
/>
diff --git a/src/Components/TabPanels/TabPanelGerenciarConta.js b/src/Components/TabPanels/TabPanelGerenciarConta.js
index 0c94d8b7..74a9d839 100644
--- a/src/Components/TabPanels/TabPanelGerenciarConta.js
+++ b/src/Components/TabPanels/TabPanelGerenciarConta.js
@@ -4,31 +4,7 @@ import Button from '@material-ui/core/Button';
import FormInput from "../FormInput.js"
import {CompletarCadastroButton} from './TabPanelSolicitarContaProfessor.js'
import {ButtonCancelar} from './TabPanelEditarPerfil.js'
-
-function validateUserInput(type, input, confirmation) {
- let flag = false
-
- if (type === 'senha') {
- if(input.length < 8) {
- flag = true
- }
- }
- else if (type === 'confirmacao') {
- if (input !== confirmation)
- flag = true
- }
-
- return flag
-}
-
-function validateUserEmail(input) {
- let flag = false
-
- if(input.split("").filter(x => x === "@").length !== 1 || !(input.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i))) {
- flag = true
- }
- return flag
-}
+import ValidateUserInput from '../FormValidationFunction.js'
export default function TabPanelGerenciarConta (props) {
const [senhaAtual, setSenhaAtual] = useState(
@@ -69,7 +45,7 @@ export default function TabPanelGerenciarConta (props) {
const handleChangeSenha = (e, type) => {
const userInput = e.target.value
- const flag = (type === 'confirmacao' ? validateUserInput('confirmacao', userInput, novaSenha.dict.value) : validateUserInput('senha', userInput, ''))
+ const flag = (type === 'confirmacao' ? ValidateUserInput('confirmation', userInput, novaSenha.dict.value) : ValidateUserInput('password', userInput))
if(type === 'senhaAtual') {
setSenhaAtual({...senhaAtual, dict : {
@@ -96,7 +72,7 @@ export default function TabPanelGerenciarConta (props) {
const handleChangeEmail = (e) => {
const userInput = e.target.value
- const flag = validateUserEmail(userInput)
+ const flag = ValidateUserInput('email', userInput)
setNovoEmail({...novoEmail, dict : {
key : flag,
diff --git a/src/Pages/PasswordRecoveryPage.js b/src/Pages/PasswordRecoveryPage.js
new file mode 100644
index 00000000..e13c5b99
--- /dev/null
+++ b/src/Pages/PasswordRecoveryPage.js
@@ -0,0 +1,77 @@
+import React, {useState} from 'react'
+import {HeaderDiv, BreadcrumbsDiv, StyledBreadcrumbs} from './UserPage.js'
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import {Link} from 'react-router-dom'
+import Paper from '@material-ui/core/Paper';
+import styled from 'styled-components'
+import FormInput from "../Components/FormInput.js"
+import ValidateUserInput from '../Components/FormValidationFunction.js'
+
+export default function PasswordRecoveryPage (props) {
+ const [formEmail, setEmail] = useState(
+ {
+ dict : {
+ key : false,
+ value : ""
+ }
+ }
+ )
+
+ const handleChange = (e) => {
+ const userInput = e.target.value
+ const flag = ValidateUserInput('email', userInput)
+
+ setEmail({...formEmail, dict : {
+ key : flag,
+ value : userInput
+ }})
+ console.log(formEmail)
+ }
+
+ return (
+ <>
+ <HeaderDiv>
+ <div style={{minWidth:"1170px"}}>
+ <BreadcrumbsDiv>
+ <StyledBreadcrumbs>
+ <Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
+ Página Inicial
+ </Link>
+ <span>
+ Recuperar senha
+ </span>
+ </StyledBreadcrumbs>
+ </BreadcrumbsDiv>
+ </div>
+
+ <div style={{justifyContent:"center", width:"1170px", 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>
+ </CardDiv>
+ </Paper>
+ </div>
+ </HeaderDiv>
+ </>
+ )
+}
+
+const CardDiv = styled.div`
+ background-color : #fff;
+ box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding : 30px 60px;
+ margin : 50px 0;
+`
diff --git a/src/Pages/RecuperarSenha.js b/src/Pages/RecuperarSenha.js
deleted file mode 100644
index e69de29b..00000000
--
GitLab