added hid and visible functionality for password field.

src/components/Activities/ReportTaskComments.jsx

@@ -142,8 +142,8 @@ const ReportTaskComments = ( {commentsData, closeModal} ) =>
               )}
               <div class="text-end my-1">
            
-           <button type="button" class="btn btn-secondary" onClick={closeModal} data-bs-dismiss="modal">Close</button>
-                <button type="submit" class="btn btn-primary ms-2">{ loading ? "Sending...":"Comment"}</button>
+           <button type="button" class="btn btn-sm btn-secondary" onClick={closeModal} data-bs-dismiss="modal">Close</button>
+                <button type="submit" class="btn btn-sm btn-primary ms-2">{ loading ? "Sending...":"Comment"}</button>
          </div>
             </form>
             

src/pages/authentication/LoginPage.jsx

@@ -7,41 +7,40 @@ import AuthRepository from "../../repositories/AuthRepository";
 import showToast from "../../services/toastService";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import {z} from "zod"
+import { z } from "zod";
 
-const loginScheam = z.object( {
+const loginScheam = z.object({
   username: z.string().email(),
-  password: z.string().min( 1, {message: "Password required"} ),
+  password: z.string().min(1, { message: "Password required" }),
   rememberMe: z.boolean(),
-} )
+});
 
 const LoginPage = () => {
   const navigate = useNavigate();
-  const [ loading, setLoading ] = useState( false );
-  const[hidepass,setHidepass] = useState(true)
+  const [loading, setLoading] = useState(false);
+  const [hidepass, setHidepass] = useState(true);
 
-   const {register,
-      handleSubmit,
-      formState: { errors },
-      reset,
-      getValues } = useForm( {
-      resolver: zodResolver( loginScheam ),
-      
-    })
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+    getValues,
+  } = useForm({
+    resolver: zodResolver(loginScheam),
+  });
 
-  const onSubmit = async ( data ) =>
-  { 
+  const onSubmit = async (data) => {
     setLoading(true);
 
     try {
-      
       let userCredential = {
         username: data.username,
-        password:data.password
-      }
+        password: data.password,
+      };
       const response = await AuthRepository.login(userCredential);
       localStorage.setItem("jwtToken", response.data.token);
-      localStorage.setItem( "refreshToken", response.data.refreshToken );
+      localStorage.setItem("refreshToken", response.data.refreshToken);
       setLoading(false);
       navigate("/dashboard");
     } catch (err) {
@@ -57,8 +56,12 @@ const LoginPage = () => {
         Please sign-in to your account and start the adventure
       </p>
 
-      <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmit)}>
-        <div className="mb-3">
+      <form
+        id="formAuthentication"
+        className="mb-3"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <div className="mb-0">
           <label htmlFor="username" className="form-label">
             Email or Username
           </label>
@@ -71,14 +74,14 @@ const LoginPage = () => {
             placeholder="Enter your email or username"
             autoFocus
           />
-           {errors.username && (
-                      <div
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
-                        {errors.username.message}
-                      </div>
-                    )}
+          {errors.username && (
+            <div
+              className="danger-text text-start"
+              style={{ fontSize: "12px" }}
+            >
+              {errors.username.message}
+            </div>
+          )}
         </div>
         <div className="mb-3 form-password-toggle">
           <div className="d-flex justify-content-between">
@@ -94,7 +97,7 @@ const LoginPage = () => {
           </div>
           <div className="input-group input-group-merge">
             <input
-              type={hidepass ? "password" :"text"}
+              type={hidepass ? "password" : "text"}
               autoComplete="true"
               id="password"
               {...register("password")}
@@ -103,16 +106,25 @@ const LoginPage = () => {
               placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
               aria-describedby="password"
             />
-            <span class="input-group-text cursor-pointer" onClick={()=>setHidepass(!hidepass)}>{ hidepass ? <i className="bx bx-hide"></i> :<i className="bx bx-show"></i>}</span>
+            <span
+              class="input-group-text cursor-pointer"
+              onClick={() => setHidepass(!hidepass)}
+            >
+              {hidepass ? (
+                <i className="bx bx-hide"></i>
+              ) : (
+                <i className="bx bx-show"></i>
+              )}
+            </span>
           </div>
           {errors.password && (
-                      <div
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
-                        {errors.password.message}
-                      </div>
-                    )}
+            <div
+              className="danger-text text-start"
+              style={{ fontSize: "12px" }}
+            >
+              {errors.password.message}
+            </div>
+          )}
         </div>
         <div className="mb-3">
           <div className="form-check">