Skip to content
Snippets Groups Projects
Commit 1ed4116a authored by Lucas Eduardo Schoenfelder's avatar Lucas Eduardo Schoenfelder
Browse files

componente funcional validacao de input adicionado

parent 84efe671
No related branches found
No related tags found
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!18Branch do lucas,!17Branch do lucas
Hide whitespace changes
Inline Side-by-side
Showing
with 142 additions and 94 deletions
src/App.js
+ 2
− 1
View file @ 1ed4116a
......@@ -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/>
......
src/Components/FormValidationFunction.js 0 → 100644
+ 45
− 0
View file @ 1ed4116a
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
}
src/Components/LoginContainerFunction.js
+ 4
− 20
View file @ 1ed4116a
......@@ -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.") : ""}
......
src/Components/SignUpContainerFunction.js
+ 7
− 28
View file @ 1ed4116a
......@@ -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
......
src/Components/TabPanels/TabPanelEditarPerfil.js
+ 4
− 18
View file @ 1ed4116a
......@@ -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}
/>
......
src/Components/TabPanels/TabPanelGerenciarConta.js
+ 3
− 27
View file @ 1ed4116a
......@@ -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,
......
src/Pages/PasswordRecoveryPage.js 0 → 100644
+ 77
− 0
View file @ 1ed4116a
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;
`
src/Pages/RecuperarSenha.js deleted 100644 → 0
+ 0
− 0
View file @ 84efe671
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment