feat: added a popup which displays the valid rules of a username whil…

…e signing up (#1312)

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

* fix: regex and formatting

---------

Co-authored-by: Narayan soni <narayansoni854@gmail.com>

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": {
@@ -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,11 @@ const SignupScreen = () => {
       setUsernameAvailable(true);
     } else {
       setUsernameAvailable(false);
+
+      enqueueSnackbar(
+        "Sorry, this username is already in use. Please try another username.",
+        { variant: "error" },
+      );
     }
   };
 
@@ -83,8 +88,9 @@ const SignupScreen = () => {
       }
     });
 
-    if (username === "") submitable = false;
-
+    if (username !== "") {
+      submitable = false;
+    }
     if (!usernameAvailable) {
       playErrorSound();
       enqueueSnackbar("Username not available!", {
@@ -213,10 +219,28 @@ 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 +257,7 @@ const SignupScreen = () => {
             isError={error.name && error.nameError}
             errorMesssage={error.nameError}
             error_border={!error.nameError}
+            successMessage={"Perfect!"}
           />
 
           {/* Email input for the form */}
@@ -252,6 +277,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 +294,7 @@ const SignupScreen = () => {
               maxLength={30}
               aria_dsc_by={"password-error"}
               errorMesssage={error.passwordError}
+              successMessage={"Perfect!"}
               isError={error.password && error.passwordError}
             />
 
@@ -285,6 +312,7 @@ const SignupScreen = () => {
               maxLength={30}
               aria_dsc_by={"confirm-password-error"}
               errorMesssage={error.confirmPasswordError}
+              successMessage={"Perfect!"}
               isError={error.confirmPassword && error.confirmPasswordError}
             />
           </div>

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,6 +1,8 @@
 import React, { useState } from "react";
 import { RiEyeCloseFill, RiEyeFill } from "react-icons/ri";
 
+import { IoCheckmarkCircle } from "react-icons/io5";
+
 const Auth__pass__input = ({
   label,
   id,
@@ -12,6 +14,7 @@ const Auth__pass__input = ({
   errorMesssage,
   isError,
   maxLength,
+  successMessage,
 }) => {
   const [showPassword, setShowPassword] = useState(false);
   const handleShowPassword = (e) => {
@@ -27,7 +30,9 @@ 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,10 +56,16 @@ 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,3 +1,5 @@
+import { IoCheckmarkCircle } from "react-icons/io5";
+import { IoIosWarning } from "react-icons/io";
 import React from "react";
 
 const Auth__text__input = ({
@@ -10,6 +12,7 @@ const Auth__text__input = ({
   isError,
   aria_dsc_by,
   errorMesssage,
+  successMessage,
   fieldName,
   maxLength,
   type = "text",
@@ -24,7 +27,9 @@ 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,7 +38,12 @@ 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/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: {