Add char limit on different input fields

src/components/ImgUpload/index.jsx

@@ -283,6 +283,7 @@ export default function ImgUpload(props) {
             multiline
             rows={12}
             disabled={uploadingPost}
+            inputProps={{ maxLength: 200 }}
             sx={{
               width: "100%",
               "& .MuiFormLabel-root.Mui-focused": {

src/components/Post/CommentBox.jsx

@@ -50,7 +50,7 @@ const CommentBox = ({
             placeholder="Add a comment..."
             value={comment}
             onChange={(e) => setComment(e.target.value)}
-            maxLength="150"
+            maxLength={150}
             style={{
               // backgroundColor: "var(--bg-color)",
               background: "transparent",

src/components/SideBar/index.jsx

@@ -30,7 +30,7 @@ function SideBar() {
           <li
             onClick={() => navigate("/dummygram/")}
             id="sidebar-home-link"
-            className={location.pathname == "/dummygram/" && "activeTab"}
+            className={location.pathname == "/dummygram/" ? "activeTab" : ""}
           >
             <div className="sidebar_align">
               <HomeIcon className="icon" /> <span>Home</span>
@@ -43,7 +43,9 @@ function SideBar() {
           </li>
           <li
             onClick={() => navigate("/dummygram/search")}
-            className={location.pathname == "/dummygram/search" && "activeTab"}
+            className={
+              location.pathname == "/dummygram/search" ? "activeTab" : ""
+            }
           >
             <div className="sidebar_align">
               <SearchIcon className="icon" /> <span>Search</span>
@@ -52,7 +54,7 @@ function SideBar() {
           <li
             onClick={() => navigate("/dummygram/favourites")}
             className={
-              location.pathname == "/dummygram/favourites" && "activeTab"
+              location.pathname == "/dummygram/favourites" ? "activeTab" : ""
             }
           >
             <div className="sidebar_align">
@@ -62,15 +64,17 @@ function SideBar() {
           <li
             onClick={() => navigate("/dummygram/notifications")}
             className={
-              location.pathname == "/dummygram/notifications" && "activeTab"
+              location.pathname == "/dummygram/notifications" ? "activeTab" : ""
             }
           >
             <div className="sidebar_align">
               <NotificationsIcon className="icon" /> <span>Notifications</span>
             </div>
           </li>
           <li
-            className={location.pathname == "/dummygram/profile" && "activeTab"}
+            className={
+              location.pathname == "/dummygram/profile" ? "activeTab" : ""
+            }
             onClick={() =>
               navigate("/dummygram/profile", {
                 state: {

src/pages/Login/index.jsx

@@ -218,6 +218,7 @@ const LoginScreen = () => {
               setuserDatails({ ...userDatails, email: e.target.value });
               handleError(e.target.name, e.target.value);
             }}
+            maxLength={64}
             fieldName={"email"}
             aria_dsc_by={"email-error"}
             isError={error.email && error.emailError}
@@ -229,6 +230,7 @@ const LoginScreen = () => {
             label={"Password"}
             id={"password"}
             name={"password"}
+            maxLength={30}
             placeholder={"Enter your password"}
             value={userDatails.password}
             handleChange={(e) =>

src/pages/Signup/index.jsx

@@ -122,15 +122,15 @@ const SignupScreen = () => {
                 photoURL: auth.currentUser.photoURL,
                 posts: [],
                 friends: [],
-              }),
+              })
             )
             .then(() => {
               playSuccessSound();
               enqueueSnackbar(
                 `Congratulations ${fullName},you have joined Dummygram`,
                 {
                   variant: "success",
-                },
+                }
               );
               navigate("/dummygram");
             })
@@ -166,7 +166,7 @@ const SignupScreen = () => {
                   });
                 })
                 .catch((error) => console.error(error));
-            },
+            }
           );
         })
         .catch((error) => {
@@ -290,7 +290,7 @@ const SignupScreen = () => {
           `Congratulations ${fullName},you have joined Dummygram`,
           {
             variant: "success",
-          },
+          }
         );
         navigate("/dummygram");
       })
@@ -344,6 +344,7 @@ const SignupScreen = () => {
               setUsername(e.target.value.trim());
               checkUsername();
             }}
+            maxLength={18}
             fieldName={"username"}
             aria_dsc_by={"username-error"}
             isError={!usernameAvailable}
@@ -361,14 +362,15 @@ const SignupScreen = () => {
               setFullName(e.target.value);
               handleError(e.target.name, e.target.value);
             }}
+            maxLength={40}
             fieldName={"name"}
             aria_dsc_by={"name-error"}
             isError={error.name && error.nameError}
             errorMesssage={error.nameError}
             error_border={!error.nameError}
           />
 
-          {/* fullname input for the form */}
+          {/* Email input for the form */}
           <Auth__text__input
             label={"Email"}
             id={"email"}
@@ -379,6 +381,7 @@ const SignupScreen = () => {
               setEmail(e.target.value);
               handleError(e.target.name, e.target.value);
             }}
+            maxLength={64} // limiting to 64 characters emails
             fieldName={"email"}
             aria_dsc_by={"email-error"}
             isError={error.email && error.emailError}
@@ -397,6 +400,7 @@ const SignupScreen = () => {
               setPassword(e.target.value);
               handleError(e.target.name, e.target.value);
             }}
+            maxLength={30}
             aria_dsc_by={"password-error"}
             errorMesssage={error.passwordError}
             isError={error.password && error.passwordError}
@@ -413,6 +417,7 @@ const SignupScreen = () => {
               setConfirmPassword(e.target.value);
               handleError(e.target.name, e.target.value);
             }}
+            maxLength={30}
             aria_dsc_by={"confirm-password-error"}
             errorMesssage={error.confirmPasswordError}
             isError={error.confirmPassword && error.confirmPasswordError}

src/reusableComponents/Auth/Auth__pass__input.jsx

@@ -11,6 +11,7 @@ const Auth__pass__input = ({
   aria_dsc_by,
   errorMesssage,
   isError,
+  maxLength,
 }) => {
   const [showPassword, setShowPassword] = useState(false);
   const handleShowPassword = (e) => {
@@ -37,6 +38,7 @@ const Auth__pass__input = ({
           value={value}
           onChange={(e) => handleChange(e)}
           required
+          maxLength={maxLength}
           aria-required="true"
           aria-label={label}
           aria-describedby={aria_dsc_by}

src/reusableComponents/Auth/Auth__text__input.jsx

@@ -11,6 +11,7 @@ const Auth__text__input = ({
   aria_dsc_by,
   errorMesssage,
   fieldName,
+  maxLength,
   type = "text",
 }) => {
   return (
@@ -25,6 +26,7 @@ const Auth__text__input = ({
         onChange={(e) => handleChange(e)}
         className={error_border ? null : "error-border"}
         required
+        maxLength={maxLength}
         aria-required="true"
         aria-label={label}
         aria-describedby={aria_dsc_by}