feat: added a popup which displays the valid rules of a username while signing up

package.json

@@ -23,7 +23,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.11.11",
-    "@mui/material": "^5.13.6",
+    "@mui/material": "^5.14.20",
     "@mui/styles": "^5.13.2",
     "emoji-picker-react": "^4.4.10",
     "file-saver": "^2.0.5",

src/index.css

@@ -56,7 +56,7 @@
   --page-over-color: #26282b;
   --slide-color: #041c32;
   --label-color: #6a656b;
-  --profile-color: #c8c6c6;
+  --profile-color: #a9a9a9;
   --text-black-only: black;
   --text-light: rgba(255, 255, 255, 0.6);
   --text-light-black: rgba(0, 0, 0, 0.6);

src/pages/Signup/index.css

@@ -51,10 +51,19 @@
   border: 2px solid green;
 }
 
+.username-rules {
+  color: var(--profile-color);
+  font-size: 15px;
+}
+
 .error-border {
   border: 2px solid red !important;
 }
 
+.success-border {
+  border: 2px solid green;
+}
+
 .password-container {
   display: flex;
   justify-content: space-between;
@@ -92,6 +101,11 @@
   color: red;
 }
 
+.success{
+  font-size: 12px;
+  color: green;
+}
+
 .pass-container-both {
   display: flex;
   flex-direction: column;

src/pages/Signup/index.jsx

@@ -64,6 +64,8 @@ const SignupScreen = () => {
       setUsernameAvailable(true);
     } else {
       setUsernameAvailable(false);
+
+      enqueueSnackbar("Sorry, this username is already in use. Please try another username.", {variant: "error"})
     }
   };
 
@@ -83,10 +85,11 @@ const SignupScreen = () => {
       }
     });
 
-    if (username === "") submitable = false;
-
+    if (username !== "") { 
+      submitable = false;
+  }
     if (!usernameAvailable) {
-      playErrorSound();
+      playErrorSound();     
       enqueueSnackbar("Username not available!", {
         variant: "error",
       });
@@ -213,10 +216,34 @@ const SignupScreen = () => {
             fieldName={"username"}
             aria_dsc_by={"username-error"}
             isError={!usernameAvailable}
-            errorMesssage={"Username not availaible"}
+            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>
+          }
+
           {/* fullname input for the form */}
           <Auth__text__input
             label={"Full name"}
@@ -233,6 +260,7 @@ const SignupScreen = () => {
             isError={error.name && error.nameError}
             errorMesssage={error.nameError}
             error_border={!error.nameError}
+            successMessage={"Perfect!"}
           />
 
           {/* Email input for the form */}
@@ -252,6 +280,7 @@ const SignupScreen = () => {
             isError={error.email && error.emailError}
             errorMesssage={error.emailError}
             error_border={!error.emailError}
+            successMessage={"Perfect!"}
           />
           <div className="pass-container-both">
             {/* password input for the form  */}
@@ -268,6 +297,7 @@ const SignupScreen = () => {
               maxLength={30}
               aria_dsc_by={"password-error"}
               errorMesssage={error.passwordError}
+              successMessage={"Perfect!"}
               isError={error.password && error.passwordError}
             />
 
@@ -285,7 +315,9 @@ const SignupScreen = () => {
               maxLength={30}
               aria_dsc_by={"confirm-password-error"}
               errorMesssage={error.confirmPasswordError}
+              successMessage={"Perfect!"}
               isError={error.confirmPassword && error.confirmPasswordError}
+
             />
           </div>
           <Auth__ctn__group

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 = ({
   label,
@@ -12,6 +13,7 @@ const Auth__pass__input = ({
   errorMesssage,
   isError,
   maxLength,
+  successMessage,
 }) => {
   const [showPassword, setShowPassword] = useState(false);
   const handleShowPassword = (e) => {
@@ -27,7 +29,7 @@ const Auth__pass__input = ({
         className={
           errorMesssage
             ? "error-border pass__input__container password-container"
-            : "pass__input__container password-container"
+            : !value ? "pass__input__container password-container" : "success-border pass__input__container password-container"
         }
       >
         <input
@@ -51,11 +53,15 @@ const Auth__pass__input = ({
           {showPassword ? <RiEyeFill /> : <RiEyeCloseFill />}
         </button>
       </div>
-      {isError && (
+      {isError ? (
         <p className="error" id="password-error">
           {errorMesssage}
         </p>
+      ):( value && <p className="success" id={`success`}>
+          <IoCheckmarkCircle /> {successMessage}
+        </p> 
       )}
+
     </div>
   );
 };

src/reusableComponents/Auth/Auth__text__input.jsx

@@ -1,5 +1,8 @@
 import React from "react";
 
+import { IoIosWarning } from "react-icons/io";
+import { IoCheckmarkCircle } from "react-icons/io5";
+
 const Auth__text__input = ({
   label,
   id,
@@ -10,6 +13,7 @@ const Auth__text__input = ({
   isError,
   aria_dsc_by,
   errorMesssage,
+  successMessage,
   fieldName,
   maxLength,
   type = "text",
@@ -24,7 +28,7 @@ const Auth__text__input = ({
         placeholder={placeholder}
         value={value}
         onChange={(e) => handleChange(e)}
-        className={error_border ? null : "error-border"}
+        className={error_border ? (!value ? null : "success-border") : "error-border"}
         required
         maxLength={maxLength}
         aria-required="true"
@@ -33,9 +37,14 @@ const Auth__text__input = ({
       />
       {isError && (
         <p className="error" id={`${fieldName}-error`}>
-          {errorMesssage}
+          <IoIosWarning /> {errorMesssage}
         </p>
       )}
+      {!isError && value && 
+        <p className="success" id={`${fieldName}-success`}>
+          <IoCheckmarkCircle /> {successMessage}
+        </p>
+      }
     </div>
   );
 };

src/reusableComponents/Auth/index.css

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