Issue #39: password validation

closes #39 (closed)

Signed-off-by: Gabriel Silva Hermida gash18@inf.ufpr.br

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