moueedAli-#2-email_and_password_validation_for_signup

.prettierignore

@@ -0,0 +1,2 @@
+src/*
+src/

package.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
+    "react-password-checklist": "^1.8.1",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.1.1"
@@ -43,7 +44,7 @@
   },
   "devDependencies": {
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^9.1.2",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-n": "^16.6.2",

src/pages/register/index.js

@@ -4,6 +4,7 @@ import TextInput from '../../components/form/textInput';
 import useAuth from '../../hooks/useAuth';
 import CredentialsCard from '../../components/credentials';
 import './register.css';
+import ReactPasswordChecklist from 'react-password-checklist';
 
 const Register = () => {
   const { onRegister } = useAuth();
@@ -14,6 +15,29 @@ const Register = () => {
     setFormData({ ...formData, [name]: value });
   };
 
+  const validateEmail = (email) => {
+    const mailFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+    if (email.match(mailFormat)) {
+      return true; 
+    } 
+    else {
+      alert("You have entered an invalid email address");
+      return false;
+    }
+
+  }  
+
+  const validatePassword = (password) => {
+    const passwordFormat = /^(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
+    if (password.match(passwordFormat)) {
+      return true; 
+    } 
+    else {
+      alert("Your password is not in the right format"); 
+      return false;
+    }
+  } 
+
   return (
     <div className="bg-blue register credentialpage">
       <CredentialsCard
@@ -31,18 +55,41 @@ const Register = () => {
               type="email"
               name="email"
               label={'Email *'}
+              required
             />
             <TextInput
               value={formData.password}
               onChange={onChange}
               name="password"
               label={'Password *'}
               type={'password'}
+              required
             />
+            <ReactPasswordChecklist
+              rules={["minLength", "specialChar", "number", "capital"]}
+              minLength={8}
+              value = {formData.password}
+              messages={{
+                minLength: "Password must be at least 8 characters.",
+                specialChar: "Password must contain at least one special character.",
+                number: "Password must contain at least one digit.",
+                capital: "Password must contain at least one uppercase letter."
+              }} />
           </form>
           <Button
             text="Sign up"
-            onClick={() => onRegister(formData.email, formData.password)}
+            onClick={async () => {
+              if (validateEmail(formData.email) && validatePassword(formData.password)) {
+                try {
+                  await onRegister(formData.email, formData.password);
+                } 
+                catch (err) {
+                  if (err.status === 400) {
+                    alert('Email is already in use');
+                  }
+                }
+              }
+            }}
             classes="green width-full"
           />
         </div>

src/service/apiClient.js

@@ -5,7 +5,7 @@ async function login(email, password) {
 }
 
 async function register(email, password) {
-  await post('users', { email, password }, false);
+  await post('signup', { email, password }, false);
   return await login(email, password);
 }
 
@@ -49,6 +49,12 @@ async function request(method, endpoint, data, auth = true) {
 
   const response = await fetch(`${API_URL}/${endpoint}`, opts);
 
+  if (!response.ok) {
+    const error = new Error(response.message || `Request failed with status ${response.status}`);
+    error.status = response.status;
+    throw error;
+  }
+
   return response.json();
 }