Add Password Hide and Show Eye , Password Strength Progress bar and s…

…trong password list

frontend/package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.1",
     "axios": "^1.6.8",
     "lucide-react": "^0.378.0",
     "react": "^18.2.0",

frontend/src/components/Navbar.jsx

@@ -7,7 +7,7 @@ function Navbar() {
 
   return (
     <div
-      className={"w-full h-[8vh]  bg-main_theme fixed top-0 z-50 shadow-md"}
+      className={"w-full h-[8vh]  bg-main_theme fixed top-0 z-50 shadow-md relative"}
     >
       <div className="max-w-7xl mx-auto flex items-center justify-between lg:px-6  px-3 py-1">
         {/* logo */}

frontend/src/pages/Login.jsx

@@ -2,8 +2,10 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import backgroundImage from "/istockphoto-1073154998-612x612.jpg"; // Import your background image
 import { toast } from 'react-toastify'; // Import toast from react-toastify
-
+import showEye from "../../public/showEye.svg";
+import hideEye from "../../public/hideEye.svg";
 function Login() {
+  const [password, setPassword] = useState(false);
   const [formData, setFormData] = useState({
     username: '',
     password: '',
@@ -50,15 +52,27 @@ function Login() {
               className='border border-black rounded-md m-2 p-2'
             />
             <label htmlFor='password'>Password:</label>
+            <div className='relative'>
             <input
-              type='password'
+              type={password ? "text" : "password"}
               name='password'
               placeholder='Password'
               value={formData.password}
               onChange={handleInputChange}
               id='password'
-              className='border border-black rounded-md m-2 p-2'
+              className='border border-black rounded-md m-2 p-2 w-[98%]'
             />
+            <img
+              className="absolute w-[30px] top-3 right-5"
+              title={
+                  password ? "Hide password" : "Show password"
+              }
+              src={password ? hideEye : showEye}
+              onClick={() =>
+                  setPassword((prevState) => !prevState)
+              }
+          />
+      </div>
             <button className='bg-main_theme text-white font-bold py-2 px-4 rounded-md mt-4'>
               Login to MediHub
             </button>