From 6511b7cac900391b757e08c3177287a5e7815c79 Mon Sep 17 00:00:00 2001 From: Khennee Date: Mon, 23 Dec 2024 21:17:24 +0800 Subject: [PATCH] update added see password with eye icon --- frontend/src/pages/ChangePassword.tsx | 108 +++++++++++++++----------- frontend/src/pages/LoginPage.tsx | 62 ++++++++------- frontend/src/pages/SignUpPage.tsx | 65 ++++++++++------ package-lock.json | 10 +++ package.json | 1 + 5 files changed, 151 insertions(+), 95 deletions(-) diff --git a/frontend/src/pages/ChangePassword.tsx b/frontend/src/pages/ChangePassword.tsx index 8783942..b871317 100644 --- a/frontend/src/pages/ChangePassword.tsx +++ b/frontend/src/pages/ChangePassword.tsx @@ -5,15 +5,31 @@ import { useState } from "react"; import { Spinner } from "react-activity"; import useAuth from "../hooks/context-hooks/useAuth"; import { AuthContextType } from "../types/user.types"; +import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai"; + +interface ShowPasswordState { + currentPassword: boolean; + newPassword: boolean; + confirmNewPassword: boolean; +} + const ChangePassword = () => { const navigate = useNavigate(); const { loading, changePassword } = useChangePassword(); + const { auth }: AuthContextType = useAuth(); + const [data, setData] = useState({ currentPassword: "", newPassword: "", confirmNewPassword: "", }); - const { auth }: AuthContextType = useAuth(); + + // Explicitly define the type for showPassword state + const [showPassword, setShowPassword] = useState({ + currentPassword: false, + newPassword: false, + confirmNewPassword: false, + }); const handleCancelButton = () => { navigate(auth?.isAdmin ? "/admin" : "/homepage"); @@ -24,6 +40,13 @@ const ChangePassword = () => { setData((prev) => ({ ...prev, [name]: value })); }; + const togglePasswordVisibility = (field: keyof ShowPasswordState) => { + setShowPassword((prev) => ({ + ...prev, + [field]: !prev[field], + })); + }; + const handleSubmitButton = () => { changePassword(data); }; @@ -34,54 +57,47 @@ const ChangePassword = () => {
-
-
-
-

Change Password

-
Please enter your current and new password.
-
-
-

- Current Password -

- -
- -
-

New Password

- -
+
+
+
+

Change Password

+
Please enter your current and new password.
+
-
-

- Confirm Password -

- + {["currentPassword", "newPassword", "confirmNewPassword"].map((field) => ( +
+

+ {field === "currentPassword" + ? "Current Password" + : field === "newPassword" + ? "New Password" + : "Confirm Password"} +

+
+ + e.preventDefault()} + onClick={() => togglePasswordVisibility(field as keyof ShowPasswordState)} + className="cursor-pointer text-textgreen ml-2" + > + {showPassword[field as keyof ShowPasswordState] ? ( + + ) : ( + + )} + +
+
+ ))}
-
-
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx index c893ab7..edd69c9 100644 --- a/frontend/src/pages/LoginPage.tsx +++ b/frontend/src/pages/LoginPage.tsx @@ -2,10 +2,13 @@ import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import useLogin from "../hooks/useLogin"; import { Spinner } from "react-activity"; +import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai"; import LandingPageHeader from "../components/LandingPageHeader"; + const LoginPage = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); + const [showPassword, setShowPassword] = useState(false); const { loading, submitLogin } = useLogin(); const navigate = useNavigate(); @@ -20,11 +23,8 @@ const LoginPage = () => { return (
- -
- +
+
@@ -42,14 +42,12 @@ const LoginPage = () => { type="button" data-testid="signup-button" onClick={handleSignUpButton} - > + > Sign Up -
+
{ value={email} onChange={(e) => { if (e.target.value.length <= 50) { - setEmail(e.target.value); - } - }} + setEmail(e.target.value); + } + }} className="bg-secondgrey font-syke-regular w-full mt-1 px-4 py-2 focus:shadow-inner border-none focus:outline-none focus:ring-1 focus:ring-textgreen text-white placeholder-white rounded-sm lg:text-sm md:text-xs text-xxs" placeholder="Email address" pattern="[\-a-zA-Z0-9~!$%^&*_=+\}\{'?]+(\.[\-a-zA-Z0-9~!$%^&*_=+\}\{'?]+)*@[a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.[cC][oO][mM](:[0-9]{1,5})?" required />
-
+ +
{ if (e.target.value.length <= 20) { - setPassword(e.target.value); - } - }} - className="bg-secondgrey font-syke-regular w-full mt-1 px-4 py-2 focus:shadow-inner border-none focus:outline-none focus:ring-1 focus:ring-textgreen rounded-sm text-white placeholder-white lg:text-sm md:text-xs text-xxs" + setPassword(e.target.value); + } + }} + className="flex-grow bg-transparent focus:outline-none" placeholder="Enter your password" required /> -

+ + e.preventDefault()} + onClick={(e) => { + e.preventDefault(); + setShowPassword((prev) => !prev); + }} + className="cursor-pointer text-textgreen ml-2" + > + {showPassword ? : } + +

+ +
+

Please remember your password!
Store it somewhere safe.

+ - +
{ />
-
+ {/* Password Field */} +
+ e.preventDefault()} + onClick={() => setShowPassword((prev) => !prev)} + className="cursor-pointer text-textgreen ml-2" + > + {showPassword ? ( + + ) : ( + + )} +
-
+ {/* Confirm Password Field */} +
+ e.preventDefault()} + onClick={() => setShowConfirmPassword((prev) => !prev)} + className="cursor-pointer text-textgreen ml-2" + > + {showConfirmPassword ? ( + + ) : ( + + )} +