From 7a7f327a0b5f1fc82c23cdaf221ac771b0b73f11 Mon Sep 17 00:00:00 2001
From: Rohitha Pudu <rohithapudu@gmail.com>
Date: Tue, 18 Jun 2024 20:10:59 +0530
Subject: [PATCH] add password visibility toggle in login and signup

---
 src/app/login/page.tsx   |  64 ++++++++++-------
 src/app/sign-up/page.tsx | 146 +++++++++++++++++++++++----------------
 2 files changed, 126 insertions(+), 84 deletions(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index d952a77..82dc140 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -3,33 +3,35 @@
 import React, { useState } from "react";
 import Navbar from "../Components/Navbar";
 import { toast } from "react-toastify";
-import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import { AiOutlineLoading3Quarters, AiFillEye, AiFillEyeInvisible } from "react-icons/ai";
 import { useRouter } from "next/navigation";
 import { Auth } from "../api/apiCall";
 import Link from "next/link";
 
 const Page = () => {
   const router = useRouter();
-  const [isLoading, setisLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [User, setUser] = useState({
     UserName: "",
     Password: "",
   });
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const [showPassword, setShowPassword] = useState(false); // State for password visibility
+
+  const handleChange = (event) => {
     setUser({
       ...User,
       [event.target.name]: event.target.value,
     });
   };
 
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (event) => {
     event.preventDefault();
-    setisLoading(true);
+    setIsLoading(true);
     const res = await Auth(User);
-    setisLoading(false);
-    if (res.data?.status != "Failed") {
-      localStorage.setItem('UserId',res.data.response.data._id)
-      toast("Organization Submitted !", {
+    setIsLoading(false);
+    if (res.data?.status !== "Failed") {
+      localStorage.setItem('UserId', res.data.response.data._id);
+      toast("Login Successful!", {
         position: "top-right",
         autoClose: 5000,
         hideProgressBar: false,
@@ -41,7 +43,7 @@ const Page = () => {
       });
       router.push("/dashboard");
     } else {
-      toast.error("Failed to Login !", {
+      toast.error("Failed to Login!", {
         position: "top-right",
         autoClose: 5000,
         hideProgressBar: false,
@@ -53,6 +55,11 @@ const Page = () => {
       });
     }
   };
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
   return (
     <>
       <Navbar />
@@ -78,16 +85,28 @@ const Page = () => {
           </div>
           <div className="mb-4 required">
             <label className="block text-gray-600">Password</label>
-            <input
-              type="password"
-              name="Password"
-              required
-              minLength={6}
-              maxLength={12}
-              onChange={handleChange}
-              title="Please enter a 10-digit mobile number"
-              className="mt-1 w-full px-4 py-2 rounded-md border bg-opacity-50 bg-pink-50 border-gray-300 focus:outline-none  focus:border-pink-500"
-            />
+            <div className="relative">
+              <input
+                type={showPassword ? "text" : "password"}
+                name="Password"
+                required
+                minLength={6}
+                maxLength={12}
+                onChange={handleChange}
+                className="mt-1 w-full px-4 py-2 rounded-md border bg-opacity-50 bg-pink-50 border-gray-300 focus:outline-none  focus:border-pink-500"
+              />
+              <button
+                type="button"
+                onClick={togglePasswordVisibility}
+                className="absolute inset-y-0 right-0 flex items-center px-4 focus:outline-none"
+              >
+                {showPassword ? (
+                  <AiFillEyeInvisible className="h-5 w-5 text-gray-500" />
+                ) : (
+                  <AiFillEye className="h-5 w-5 text-gray-500" />
+                )}
+              </button>
+            </div>
           </div>
           {isLoading ? (
             <button
@@ -103,10 +122,7 @@ const Page = () => {
           )}
           <p className="font-sans font-normal flex justify-center p-2">
             Create An Account{" "}
-            <Link
-              href="/sign-up"
-              className="text-sky-500 underline italic pl-2"
-            >
+            <Link href="/sign-up" className="text-sky-500 underline italic pl-2">
               Sign Up
             </Link>
           </p>
diff --git a/src/app/sign-up/page.tsx b/src/app/sign-up/page.tsx
index 28fe397..ad53955 100644
--- a/src/app/sign-up/page.tsx
+++ b/src/app/sign-up/page.tsx
@@ -3,35 +3,36 @@
 import React, { useState } from "react";
 import Navbar from "../Components/Navbar";
 import { toast } from "react-toastify";
-import { AiOutlineLoading3Quarters } from "react-icons/ai";
-import { useRouter } from 'next/navigation';
-import { SignUp } from '../api/apiCall'
+import { AiOutlineLoading3Quarters, AiFillEye, AiFillEyeInvisible } from "react-icons/ai";
+import { useRouter } from "next/navigation";
+import { SignUp } from "../api/apiCall";
 import Link from "next/link";
 
 const Page = () => {
   const router = useRouter();
-  const [isLoading, setisLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [User, setUser] = useState({
     UserName: "",
-    UserEmail:"",
-    Password:""
+    UserEmail: "",
+    Password: "",
   });
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const [showPassword, setShowPassword] = useState(false); // State for password visibility
+
+  const handleChange = (event) => {
     setUser({
       ...User,
       [event.target.name]: event.target.value,
     });
   };
 
-
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (event) => {
     event.preventDefault();
-    setisLoading(true);
+    setIsLoading(true);
     const res = await SignUp(User);
-    setisLoading(false);
-    console.log(res)
-    if (res.data?.status == "Success") {
-      localStorage.setItem('UserId',res.data.response.data)
+    setIsLoading(false);
+    console.log(res);
+    if (res.data?.status === "Success") {
+      localStorage.setItem("UserId", res.data.response.data);
       toast("Organization Submitted !", {
         position: "top-right",
         autoClose: 5000,
@@ -42,7 +43,7 @@ const Page = () => {
         progress: undefined,
         theme: "light",
       });
-      router.push("/organization")
+      router.push("/organization");
     } else {
       toast.error("User Already Exist!", {
         position: "top-right",
@@ -56,62 +57,87 @@ const Page = () => {
       });
     }
   };
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
   return (
     <>
-    <Navbar />
-        <div className="min-h-screen flex items-center justify-center bg-opacity-50 sm:pt-24 pt-30">
-          <form
-            onSubmit={handleSubmit}
-            className="p-8 bg-white rounded-lg shadow-xl w-96 bg-opacity-10"
-            style={{ backdropFilter: "blur(4px)" }}
-          >
-            <div className="text-gray-950 flex justify-center text-2xl">Sign Up</div>
-            <div className="mb-4 required">
-              <label className="block text-gray-600">UserName</label>
+      <Navbar />
+      <div className="min-h-screen flex items-center justify-center bg-opacity-50 sm:pt-24 pt-30">
+        <form
+          onSubmit={handleSubmit}
+          className="p-8 bg-white rounded-lg shadow-xl w-96 bg-opacity-10"
+          style={{ backdropFilter: "blur(4px)" }}
+        >
+          <div className="text-gray-950 flex justify-center text-2xl">Sign Up</div>
+          <div className="mb-4 required">
+            <label className="block text-gray-600">UserName</label>
+            <input
+              type="text"
+              name="UserName"
+              required
+              minLength={6}
+              onChange={handleChange}
+              className="mt-1 w-full px-4 py-2 rounded-md border bg-opacity-50 bg-pink-50 border-gray-300 focus:outline-none focus:border-pink-500"
+            />
+          </div>
+          <div className="mb-4 required">
+            <label className="block text-gray-600">Email</label>
+            <input
+              type="email"
+              name="UserEmail"
+              required
+              onChange={handleChange}
+              className="mt-1 w-full px-4 py-2 rounded-md border bg-opacity-50 bg-pink-50 border-gray-300 focus:outline-none focus:border-pink-500"
+            />
+          </div>
+          <div className="mb-4 required">
+            <label className="block text-gray-600">Password</label>
+            <div className="relative">
               <input
-                type="text"
-                name="UserName"
-                required
-                minLength={6}
-                onChange={handleChange}
-                className="mt-1 w-full px-4 py-2 rounded-md border bg-opacity-50 bg-pink-50 border-gray-300 focus:outline-none focus:border-pink-500"
-              />
-            </div>
-            <div className="mb-4 required">
-              <label className="block text-gray-600">Email</label>
-              <input
-                type="email"
-                name="UserEmail"
-                required
-                onChange={handleChange}
-                className="mt-1 w-full px-4 py-2 rounded-md border bg-opacity-50 bg-pink-50 border-gray-300 focus:outline-none focus:border-pink-500"
-              />
-            </div>
-            <div className="mb-4 required">
-              <label className="block text-gray-600">Password</label>
-              <input
-                type="password"
+                type={showPassword ? "text" : "password"}
                 name="Password"
                 required
                 minLength={6}
                 maxLength={12}
                 onChange={handleChange}
-                title="Please enter a 10-digit mobile number"
                 className="mt-1 w-full px-4 py-2 rounded-md border bg-opacity-50 bg-pink-50 border-gray-300 focus:outline-none  focus:border-pink-500"
               />
-            </div>
-            {isLoading ? (
-              <button disabled className="w-full flex justify-center py-2 px-4 bg-pink-600 text-white rounded-md hover:bg-pink-700">
-                <AiOutlineLoading3Quarters className="animate-spin" />
+              <button
+                type="button"
+                onClick={togglePasswordVisibility}
+                className="absolute inset-y-0 right-0 flex items-center px-4 focus:outline-none"
+              >
+                {showPassword ? (
+                  <AiFillEyeInvisible className="h-5 w-5 text-gray-500" />
+                ) : (
+                  <AiFillEye className="h-5 w-5 text-gray-500" />
+                )}
               </button>
-            ) : (
-              <button className="w-full py-2 px-4 bg-pink-600 text-white rounded-md hover:bg-pink-700">
-                Submit
-              </button>
-            )}
-            <p className="font-sans font-normal flex justify-center p-2">Already Have Account  <Link href="/login" className="text-sky-500 underline italic pl-2">Login</Link></p>
-          </form>
-        </div>
+            </div>
+          </div>
+          {isLoading ? (
+            <button
+              disabled
+              className="w-full flex justify-center py-2 px-4 bg-pink-600 text-white rounded-md hover:bg-pink-700"
+            >
+              <AiOutlineLoading3Quarters className="animate-spin" />
+            </button>
+          ) : (
+            <button className="w-full py-2 px-4 bg-pink-600 text-white rounded-md hover:bg-pink-700">
+              Submit
+            </button>
+          )}
+          <p className="font-sans font-normal flex justify-center p-2">
+            Already Have an Account?{" "}
+            <Link href="/login" className="text-sky-500 underline italic pl-2">
+              Login
+            </Link>
+          </p>
+        </form>
+      </div>
     </>
   );
 };