fix: regex and formatting

package.json

@@ -10,7 +10,7 @@
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
     "preview": "vite preview",
-    "pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json}\"",
+    "pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,css}\"",
     "prepare": "husky install"
   },
   "dependencies": {

src/pages/Signup/index.css

@@ -101,7 +101,7 @@
   color: red;
 }
 
-.success{
+.success {
   font-size: 12px;
   color: green;
 }

src/pages/Signup/index.jsx

@@ -64,8 +64,11 @@ const SignupScreen = () => {
       setUsernameAvailable(true);
     } else {
       setUsernameAvailable(false);
-
-      enqueueSnackbar("Sorry, this username is already in use. Please try another username.", {variant: "error"})
+
+      enqueueSnackbar(
+        "Sorry, this username is already in use. Please try another username.",
+        { variant: "error" },
+      );
     }
   };
 
@@ -85,11 +88,11 @@ const SignupScreen = () => {
       }
     });
 
-    if (username !== "") { 
+    if (username !== "") {
       submitable = false;
-  }
+    }
     if (!usernameAvailable) {
-      playErrorSound();     
+      playErrorSound();
       enqueueSnackbar("Username not available!", {
         variant: "error",
       });
@@ -216,34 +219,28 @@ const SignupScreen = () => {
             fieldName={"username"}
             aria_dsc_by={"username-error"}
             isError={!usernameAvailable}
-            errorMesssage={!username.length ?  `Username cannot be empty` :  `Username is invalid`}
+            errorMesssage={
+              !username.length
+                ? `Username cannot be empty`
+                : `Username is invalid`
+            }
             error_border={usernameAvailable}
             successMessage={"Perfect!"}
           />
-
-          { !usernameAvailable && 
-            <div className= "username-rules">
-            A valid username must
-            <ul>
-              <li>
-                NOT contain captial letters.
-              </li>
-              <li>
-                NOT contain special characters.
-              </li>
-              <li>
-                NOT start with a digit.
-              </li>
-              <li>
-                be between 4 and 20 letters long.
-              </li>
-              <li>
-                NOT be registered.
-              </li>  
-            </ul>
-          </div>
-          }
-
+
+          {!usernameAvailable && (
+            <div className="username-rules">
+              A valid username must
+              <ul>
+                <li>NOT contain captial letters.</li>
+                <li>NOT contain special characters.</li>
+                <li>NOT start with a digit.</li>
+                <li>be between 4 and 20 letters long.</li>
+                <li>NOT be registered.</li>
+              </ul>
+            </div>
+          )}
+
           {/* fullname input for the form */}
           <Auth__text__input
             label={"Full name"}
@@ -317,7 +314,6 @@ const SignupScreen = () => {
               errorMesssage={error.confirmPasswordError}
               successMessage={"Perfect!"}
               isError={error.confirmPassword && error.confirmPasswordError}
-
             />
           </div>
           <Auth__ctn__group

src/pages/index.js

@@ -1,10 +1,10 @@
-import ChatPage from "./Chat";
 import About from "./FooterPages/About";
+import ChatPage from "./Chat";
 import Contributor from "./FooterPages/ContributorPage";
 import Feedback from "./FooterPages/Feedback";
+import Friends from "./Friends";
 import Guidelines from "./FooterPages/Guidelines";
 import HelpCenter from "./FooterPages/HelpCenter";
-import Friends from "./Friends";
 import LoginScreen from "./Login";
 import PostView from "./PostView";
 import Profile from "./Profile";

src/reusableComponents/Auth/Auth__pass__input.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { RiEyeCloseFill, RiEyeFill } from "react-icons/ri";
+
 import { IoCheckmarkCircle } from "react-icons/io5";
 
 const Auth__pass__input = ({
@@ -29,7 +30,9 @@ const Auth__pass__input = ({
         className={
           errorMesssage
             ? "error-border pass__input__container password-container"
-            : !value ? "pass__input__container password-container" : "success-border pass__input__container password-container"
+            : !value
+            ? "pass__input__container password-container"
+            : "success-border pass__input__container password-container"
         }
       >
         <input
@@ -57,11 +60,13 @@ const Auth__pass__input = ({
         <p className="error" id="password-error">
           {errorMesssage}
         </p>
-      ):( value && <p className="success" id={`success`}>
-          <IoCheckmarkCircle /> {successMessage}
-        </p> 
+      ) : (
+        value && (
+          <p className="success" id={`success`}>
+            <IoCheckmarkCircle /> {successMessage}
+          </p>
+        )
       )}
-
     </div>
   );
 };

src/reusableComponents/Auth/Auth__text__input.jsx

@@ -1,7 +1,6 @@
-import React from "react";
-
-import { IoIosWarning } from "react-icons/io";
 import { IoCheckmarkCircle } from "react-icons/io5";
+import { IoIosWarning } from "react-icons/io";
+import React from "react";
 
 const Auth__text__input = ({
   label,
@@ -28,7 +27,9 @@ const Auth__text__input = ({
         placeholder={placeholder}
         value={value}
         onChange={(e) => handleChange(e)}
-        className={error_border ? (!value ? null : "success-border") : "error-border"}
+        className={
+          error_border ? (!value ? null : "success-border") : "error-border"
+        }
         required
         maxLength={maxLength}
         aria-required="true"
@@ -40,11 +41,11 @@ const Auth__text__input = ({
           <IoIosWarning /> {errorMesssage}
         </p>
       )}
-      {!isError && value && 
+      {!isError && value && (
         <p className="success" id={`${fieldName}-success`}>
           <IoCheckmarkCircle /> {successMessage}
         </p>
-      }
+      )}
     </div>
   );
 };

src/reusableComponents/Auth/index.css

@@ -43,4 +43,3 @@
     font-size: 50px !important;
   }
 }
-

src/reusableComponents/validation.js

@@ -1,14 +1,14 @@
-const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[@$%#^&*])(?=.*[0-9]).{8,}$/;
+const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,}$/;
 const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
 
 const validate = {
   name: (value) => {
     if (!value) return { name: true, nameError: "Name field cannot be empty" };
     else {
-      return value.length < 6
+      return value.length < 4
         ? {
             name: true,
-            nameError: "Name must be atleast 6 characters long.",
+            nameError: "Name must be atleast 4 characters long.",
           }
         : { name: false, nameError: false };
     }
@@ -28,23 +28,17 @@ const validate = {
       : {
           password: true,
           passwordError:
-            "Minimum 8 characters, 1 uppercase, 1 lowercase, 1 symbol (@$%#^&*), 1 number (0-9).",
+            "Minimum 6 characters, At least one letter (either lowercase or uppercase) ,At least one digit (0-9).",
         };
   },
 
   confirmPassword: (value, password) => {
-    return passwordRegex.test(value)
-      ? value !== password
-        ? {
-            confirmPassword: true,
-            confirmPasswordError: "Password does not match",
-          }
-        : { confirmPassword: false, confirmPasswordError: false }
-      : {
+    return value !== password
+      ? {
           confirmPassword: true,
-          confirmPasswordError:
-            "Minimum 8 characters, 1 uppercase, 1 lowercase, 1 symbol (@$%#^&*), 1 number (0-9).",
-        };
+          confirmPasswordError: "Password does not match",
+        }
+      : { confirmPassword: false, confirmPasswordError: false };
   },
 
   initialValue: {