Password toggling functionality

package.json

@@ -11,6 +11,9 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@react-oauth/google": "^0.12.1",
     "@reduxjs/toolkit": "^2.2.5",
     "antd": "^5.17.4",
@@ -22,6 +25,7 @@
     "react-bootstrap": "^2.10.2",
     "react-chatbot-kit": "^2.2.2",
     "react-dom": "^18.2.0",
+    "react-fontawesome": "^1.7.1",
     "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",

src/Components/Login/Login.css

@@ -56,7 +56,7 @@ button {
 }
 
 button:hover {
-  background-color: #0056b3;
+  background-color: #007bff;
 }
 
 .login-container p {
@@ -90,3 +90,16 @@ p a:hover {
   /* justify-content: center;
   display: flex; */
 }
+.eye {
+  float: right;
+  left:-9px;
+  margin-top: -45px;
+  position: relative;
+  z-index: 2;
+  width: 14px; /*Desired width*/
+  height: 14px; /*Desired height*/
+}
+.eye:hover {
+  color: #007efc;
+  cursor: pointer;
+}

src/Components/Login/Login.jsx

@@ -2,13 +2,25 @@ import React, { useState } from "react";
 import { useNavigate, NavLink } from "react-router-dom";
 import "./Login.css";
 import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";    /*react libraries used 
+                                                                       for importing eye icon */
+import { faEye } from "@fortawesome/free-solid-svg-icons";
+
 
 const Login = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [warnings, setWarnings] = useState({ email: "", password: "" });
+  const [isVisible,setVisible] = useState(false);
   const navigate = useNavigate();
 
+  const eye = <FontAwesomeIcon icon={faEye} />;
+
+  const  togglePasswordFunction=()=>{      //toggling function for visibility of password
+    setVisible(isVisible?false:true)
+  };
+
+
   const handleLogin = () => {
     let emailWarning = "";
     let passwordWarning = "";
@@ -66,8 +78,10 @@ const Login = () => {
               }}
             />
             {warnings.email && <p style={{ color: "red" }} className="warningmsg">{warnings.email}</p>}
+
             <input
-              type="password"
+              type={ isVisible ? "text" : "password"}
+              className="pasword"
               placeholder="Password"
               value={password}
               onChange={(e) => {
@@ -80,6 +94,8 @@ const Login = () => {
                 }
               }}
             />
+           <i className = "eye" onClick={togglePasswordFunction}>{eye}</i>{" "} 
+
             {warnings.password && <p style={{ color: "red" }} className="warningmsg">{warnings.password}</p>}
           </div>
           <button onClick={handleLogin}>Login</button>