added frontend validations

client/package.json

@@ -16,7 +16,7 @@
     "react-moment": "^0.9.7",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
+    "react-scripts": "^4.0.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",

client/src/components/auth/ChangePassword.js

@@ -1,13 +1,16 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 import { setAlert } from "../../actions/alert";
 import { register, changePassword } from "../../actions/auth";
 import PropTypes from "prop-types";
+import ChangePasswordValidate from "../../validations/ChangePasswordValidate";
 
 // Material UI Icons
 import VpnKeyIcon from "@material-ui/icons/VpnKey";
 
 const ChangePassword = ({ setAlert, changePassword, history }) => {
+  const [errors, setErrors] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [formData, setFormData] = useState({
     password: "",
     password2: "",
@@ -20,13 +23,21 @@ const ChangePassword = ({ setAlert, changePassword, history }) => {
 
   const onSubmit = async (e) => {
     e.preventDefault();
-    if (password !== password2) {
-      setAlert("Password confirmation does not match password", "danger", 5000);
-    } else {
+    setErrors(ChangePasswordValidate(formData));
+    setIsSubmitting(true);
+  };
+
+  useEffect(() => {
+    if (Object.keys(errors).length === 0 && isSubmitting) {
       changePassword(formData, history);
-      // console.log(formData);
+      setFormData({
+        ...formData,
+        password: "",
+        password2: "",
+      });
     }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors]);
 
   return (
     <div>
@@ -49,6 +60,9 @@ const ChangePassword = ({ setAlert, changePassword, history }) => {
                   placeholder='Enter password'
                 />
               </div>
+              {errors.password && (
+                <div className='form-text text-danger'>{errors.password}</div>
+              )}
             </div>
 
             <div className='col-lg-5 col-md-6 col-sm-10 col-12 mx-auto mb-2'>
@@ -65,6 +79,9 @@ const ChangePassword = ({ setAlert, changePassword, history }) => {
                   placeholder='Confirm new password'
                 />
               </div>
+              {errors.password2 && (
+                <div className='form-text text-danger'>{errors.password2}</div>
+              )}
             </div>
             <div className='col-lg-5 col-md-6 col-sm-10 col-12 mx-auto mb-2'>
               <div className='input-group mx-auto d-block text-right'>

client/src/components/auth/Login.js

@@ -1,14 +1,17 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Redirect } from "react-router-dom";
 import { login } from "../../actions/auth";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
+import LoginValidate from "../../validations/LoginValidate";
 
 // Material UI Icons
 import VpnKeyIcon from "@material-ui/icons/VpnKey";
 import EmailIcon from "@material-ui/icons/Email";
 
 const Login = ({ login, isAuthenticated }) => {
+  const [errors, setErrors] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [formData, setFormData] = useState({
     email: "",
     password: "",
@@ -21,9 +24,22 @@ const Login = ({ login, isAuthenticated }) => {
 
   const onSubmit = async (e) => {
     e.preventDefault();
-    login(email, password);
+    setErrors(LoginValidate(formData));
+    setIsSubmitting(true);
   };
 
+  useEffect(() => {
+    if (Object.keys(errors).length === 0 && isSubmitting) {
+      login(email, password);
+      setFormData({
+        ...formData,
+        email: "",
+        password: "",
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors]);
+
   // Redirect if logged in
   if (isAuthenticated) {
     return <Redirect to='/' />;
@@ -51,6 +67,9 @@ const Login = ({ login, isAuthenticated }) => {
                 aria-describedby='basic-addon1'
               />
             </div>
+            {errors.email && (
+              <div className='form-text text-danger'>{errors.email}</div>
+            )}
           </div>
           <div className='col-lg-5 col-md-6 col-sm-10 col-12 mx-auto mb-2'>
             <div className='input-group '>
@@ -68,6 +87,9 @@ const Login = ({ login, isAuthenticated }) => {
                 aria-describedby='basic-addon1'
               />
             </div>
+            {errors.password && (
+              <div className='form-text text-danger'>{errors.password}</div>
+            )}
           </div>
           <div className='col-lg-5 col-md-6 col-sm-10 col-12 mx-auto mb-2'>
             <div className='login-flex-helper'>

client/src/components/auth/Register.js

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 import { setAlert } from "../../actions/alert";
 import { register } from "../../actions/auth";
 import PropTypes from "prop-types";
+import RegisterValidate from "../../validations/RegisterValidate";
 
 // Material UI Icons
 import VpnKeyIcon from "@material-ui/icons/VpnKey";
@@ -11,6 +12,8 @@ import FaceIcon from "@material-ui/icons/Face";
 import SupervisorAccountIcon from "@material-ui/icons/SupervisorAccount";
 
 const Register = ({ setAlert, register, isAuthenticated, history }) => {
+  const [errors, setErrors] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [formData, setFormData] = useState({
     name: "",
     email: "",
@@ -26,17 +29,24 @@ const Register = ({ setAlert, register, isAuthenticated, history }) => {
 
   const onSubmit = async (e) => {
     e.preventDefault();
-    if (password !== password2) {
-      setAlert("Passwords do not match", "danger", 5000);
-    } else {
-      register({ name, email, password, role, history });
-    }
+    setErrors(RegisterValidate(formData));
+    setIsSubmitting(true);
   };
 
-  // Redirect if logged in
-  // if (isAuthenticated) {
-  //   return <Redirect to="/dashboard" />;
-  // }
+  useEffect(() => {
+    if (Object.keys(errors).length === 0 && isSubmitting) {
+      register({ name, email, password, role, history });
+      setFormData({
+        ...formData,
+        name: "",
+        email: "",
+        role: "",
+        password: "",
+        password2: "",
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors]);
 
   return (
     <div>
@@ -59,6 +69,9 @@ const Register = ({ setAlert, register, isAuthenticated, history }) => {
                   placeholder='Enter name'
                 />
               </div>
+              {errors.name && (
+                <div className='form-text text-danger'>{errors.name}</div>
+              )}
             </div>
             <div className='col-lg-5 col-md-6 col-sm-10 col-12 mx-auto mb-2'>
               <div className='input-group '>
@@ -74,6 +87,9 @@ const Register = ({ setAlert, register, isAuthenticated, history }) => {
                   placeholder='Enter email'
                 />
               </div>
+              {errors.email && (
+                <div className='form-text text-danger'>{errors.email}</div>
+              )}
             </div>
             <div className='col-lg-5 col-md-6 col-sm-10 col-12 mx-auto mb-2'>
               <div className='input-group '>
@@ -93,6 +109,9 @@ const Register = ({ setAlert, register, isAuthenticated, history }) => {
                   <option value='Admin'>Admin</option>
                 </select>
               </div>
+              {errors.role && (
+                <div className='form-text text-danger'>{errors.role}</div>
+              )}
             </div>
             <div className='col-lg-5 col-md-6 col-sm-10 col-12 mx-auto mb-2'>
               <div className='input-group '>
@@ -108,6 +127,9 @@ const Register = ({ setAlert, register, isAuthenticated, history }) => {
                   placeholder='Enter password'
                 />
               </div>
+              {errors.password && (
+                <div className='form-text text-danger'>{errors.password}</div>
+              )}
             </div>
             <div className='col-lg-5 col-md-6 col-sm-10 col-12 mx-auto mb-2'>
               <div className='input-group '>
@@ -123,6 +145,9 @@ const Register = ({ setAlert, register, isAuthenticated, history }) => {
                   placeholder='Enter confirm password'
                 />
               </div>
+              {errors.password2 && (
+                <div className='form-text text-danger'>{errors.password2}</div>
+              )}
             </div>
             <div className='col-lg-5 col-md-6 col-sm-10 col-12 mx-auto mb-2'>
               {/* <div className="form-group light">

client/src/components/layout/Alert.js

@@ -6,12 +6,8 @@ const Alert = ({ alerts }) =>
   alerts !== null &&
   alerts.length > 0 &&
   alerts.map((alert) => (
-    <div className='row text-center alert-msg'>
-      <div className='col-lg-5 col-md-6 col-sm-10 col-12 mx-auto'>
-        <span key={alert.id} className={`mt-2 alert alert-${alert.alertType}`}>
-          {alert.msg}
-        </span>
-      </div>
+    <div key={alert.id} className={`mt-2 alert alert-${alert.alertType}`}>
+      {alert.msg}
     </div>
   ));
 

client/src/components/layout/Spinner.js

@@ -1,15 +1,14 @@
 import React, { Fragment } from "react";
-import spinner from "./spinner.gif";
 
 export default () => {
   return (
     <Fragment>
-      <img
-        className='pt-5'
-        src={spinner}
-        style={{ width: "200px", margin: "auto", display: "block" }}
-        alt='Loading...'
-      />
+      <div className='text-center text-light'>
+        <span
+          className='spinner-border mt-5'
+          style={{ width: "200px", height: "200px" }}
+        ></span>
+      </div>
     </Fragment>
   );
 };

client/src/validations/ChangePasswordValidate.js

@@ -0,0 +1,16 @@
+export default function ChangePasswordValidate(formData) {
+  let errors = {};
+  const { password, password2 } = formData;
+
+  if (!password) {
+    errors.password = "Password is required";
+  } else if (password.length < 6) {
+    errors.password =
+      "Minimum length of the password must be equal or greater than 6 characters";
+  } else if (!password2) {
+    errors.password2 = "Confirm Password is required";
+  } else if (password !== password2) {
+    errors.password2 = "Password and Confirm Password does not match";
+  }
+  return errors;
+}

client/src/validations/LoginValidate.js

@@ -0,0 +1,13 @@
+export default function LoginValidate(formData) {
+  let errors = {};
+  const { email, password } = formData;
+
+  if (!email) {
+    errors.email = "Email is required";
+  } else if (!/[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]/.test(email)) {
+    errors.email = "Invalid email";
+  } else if (!password) {
+    errors.password = "Password is required";
+  }
+  return errors;
+}

client/src/validations/RegisterValidate.js

@@ -0,0 +1,24 @@
+export default function RegisterValidate(formData) {
+  let errors = {};
+  const { name, email, password, password2, role } = formData;
+
+  if (!name) {
+    errors.name = "Name is required";
+  } else if (!email) {
+    errors.email = "Email is required";
+  } else if (!/[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]/.test(email)) {
+    errors.email = "Invalid email";
+  } else if (!role) {
+    errors.role = "Role is required";
+  } else if (!password) {
+    errors.password = "Password is required";
+  } else if (password.length < 8) {
+    errors.password =
+      "Minimum length of the password must be equal or greater than 8 characters";
+  } else if (!password2) {
+    errors.password2 = "Confirm Password is required";
+  } else if (password !== password2) {
+    errors.password2 = "Password and Confirm Password does not match";
+  }
+  return errors;
+}