diff --git a/src/pages/SignUp.js b/src/pages/SignUp.js index ef6b53173dfe2225fe7334353d3deb2e3a804302..8b3ac05e7178861162c43e33ccbea1f15bd768c0 100644 --- a/src/pages/SignUp.js +++ b/src/pages/SignUp.js @@ -10,7 +10,7 @@ import FormInput from "../components/fieldsSignUp/FormInput"; import Paper from "@material-ui/core/Paper"; import api from "../api"; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ register: { maxWidth: "1000px", background: "#ffffff", @@ -18,24 +18,24 @@ const useStyles = makeStyles(theme => ({ padding: "2% 1%", marginTop: "3%", margin: "0 auto", - width: "95%" + width: "95%", }, custom_strong: { fontSize: "25px", textAlign: "center", display: "block", - color: "#46525d" + color: "#46525d", }, strong_description: { fontSize: "14px", - color: "#c2c6ca" + color: "#c2c6ca", }, form: { alignItems: "center", - textAlign: "center" + textAlign: "center", }, alreadyAcc: { - marginTop: "10px" + marginTop: "10px", }, button: { type: "submit", @@ -47,12 +47,18 @@ const useStyles = makeStyles(theme => ({ padding: "10px 20px", fontSize: "18px", "&:hover": { - backgroundColor: "rgb(25, 109, 23)" + backgroundColor: "rgb(25, 109, 23)", }, ["@media (max-width:550px)"]: { - width: "55%" - } - } + width: "55%", + }, + }, + errorGridOpts: { + marginTop: "1%", + color: "#ff4646", + width: "100%", + fontSize: "13px", + }, })); export default function SignUp() { const history = useHistory(); @@ -66,7 +72,7 @@ export default function SignUp() { password: "", password_confirm: "", nameError: false, - emailError: false + emailError: false, }); useEffect(() => { !checkName() ? (values.nameError = true) : (values.nameError = false); @@ -75,7 +81,7 @@ export default function SignUp() { !checkEmail() ? (values.emailError = true) : (values.emailError = false); }, [values.email]); - const handleChange = prop => event => { + const handleChange = (prop) => (event) => { setValues({ ...values, [prop]: event.target.value }); }; function checkPassword() { @@ -101,6 +107,15 @@ export default function SignUp() { : false : true; } + + function checkPasswordString() { + return values.password + ? /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&+_ ():;/?\|"'-])[A-Za-z\d@$!%*?&+_ ():;/?\|"'-]{8,24}$/.test( + values.password + ) + : true; + } + function verifyValues() { if ( values.name && @@ -123,25 +138,26 @@ export default function SignUp() { alert("Email invalido"); return false; } else if (!checkPassword()) { + alert("Verifique se sua senha satisfaz as condições mencionadas"); return false; - } else { - return true; - } + } else if (!checkPasswordString()) { + return false; + } else return true; } async function handleSubmit() { const response = await api .post(`/user/signUp`, { email: values.email, name: values.name, - hash: values.password + hash: values.password, }) - .then(function(error) { + .then(function (error) { if (!error.response) { let path = `signin`; history.push(path); } }) - .catch(function(error) { + .catch(function (error) { if (error.response) { switch (error.response.data.error) { case 'duplicate key value violates unique constraint "form_user_name_key"': @@ -169,19 +185,19 @@ export default function SignUp() { const theme = createMuiTheme({ overrides: { root: { - color: "white" + color: "white", }, MuiInput: { underline: { "&:before": { - borderBottom: "1px solid #35c7fc" + borderBottom: "1px solid #35c7fc", }, "&:after": { - borderBottom: "1px solid #3f51b5" - } - } - } - } + borderBottom: "1px solid #3f51b5", + }, + }, + }, + }, }); return isLoged ? ( <Redirect to="/signin" /> @@ -212,7 +228,18 @@ export default function SignUp() { /> </Grid> <Grid> - <FormInput label="Senha" param="password" onUpdate={handleChange} /> + <FormInput + label="Senha" + param="password" + onUpdate={handleChange} + error={!checkPasswordString()} + /> + {(!checkPasswordString() || !values.password) && ( + <Grid className={classes.errorGridOpts}> + Sua senha deve conter entre 8 e 24 caracteres, uma letra + maiúscula, uma minúscula e um número + </Grid> + )} </Grid> <Grid> <FormInput