From 940ffbc78a5e0aa95251bfe253f1d6e4b84aa738 Mon Sep 17 00:00:00 2001
From: Utkarsh Birla <96072228+UtkarshBirla28@users.noreply.github.com>
Date: Sat, 22 Jun 2024 14:20:11 +0530
Subject: [PATCH] Password toggling functionality
Added password toggling functionality so that user can hide or view there password by clicking on the eye button according to there need.
This feature enhances flexibility for the user.
---
package-lock.json | 63 ++++++++++++++++++++++++++++++++++
package.json | 4 +++
src/Components/Login/Login.css | 15 +++++++-
src/Components/Login/Login.jsx | 18 +++++++++-
4 files changed, 98 insertions(+), 2 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index cc1caaa..1c8f4d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,9 @@
"license": "ISC",
"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",
@@ -21,6 +24,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",
@@ -3042,6 +3046,15 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
+ "node_modules/@fortawesome/fontawesome-common-types": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+ "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
+ "hasInstallScript": true,
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/@fortawesome/fontawesome-free": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
@@ -3052,6 +3065,42 @@
"node": ">=6"
}
},
+ "node_modules/@fortawesome/fontawesome-svg-core": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+ "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-solid-svg-icons": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+ "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.5.2"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/react-fontawesome": {
+ "version": "0.2.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+ "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+ "dependencies": {
+ "prop-types": "^15.8.1"
+ },
+ "peerDependencies": {
+ "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+ "react": ">=16.3"
+ }
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -17647,6 +17696,20 @@
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
"license": "MIT"
},
+ "node_modules/react-fontawesome": {
+ "version": "1.7.1",
+ "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.7.1.tgz",
+ "integrity": "sha512-kottReWW1I9Uupub6A5YX4VK7qfpFnEjAcm5zB4Aepst7iofONT27GJYdTcRsj7q5uQu9PXBL7GsxAFKANNUVg==",
+ "dependencies": {
+ "prop-types": "^15.5.6"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ },
+ "peerDependencies": {
+ "react": ">=0.12.0"
+ }
+ },
"node_modules/react-icons": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
diff --git a/package.json b/package.json
index a2723de..e2436d7 100644
--- a/package.json
+++ b/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",
diff --git a/src/Components/Login/Login.css b/src/Components/Login/Login.css
index 226defe..551acde 100644
--- a/src/Components/Login/Login.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/Components/Login/Login.jsx b/src/Components/Login/Login.jsx
index 19967ee..f6433e4 100644
--- a/src/Components/Login/Login.jsx
+++ b/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 = ;
+
+ 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 && {warnings.email}
}
+
{
@@ -80,6 +94,8 @@ const Login = () => {
}
}}
/>
+ {eye}{" "}
+
{warnings.password && {warnings.password}
}