Skip to content

Commit

Permalink
Merge pull request #44 from Rohitha-pudu/passwordToggle
Browse files Browse the repository at this point in the history 
add password visibility toggle in login and signup
  • Loading branch information
@apurvjha123
apurvjha123 authored Jun 23, 2024
2 parents 41b6576 + 7a7f327 commit 73200eb
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 84 deletions.
64 changes: 40 additions & 24 deletions src/app/login/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -53,6 +55,11 @@ const Page = () => {
});
}
};

const togglePasswordVisibility = () => {
setShowPassword(!showPassword);
};

return (
<>
<Navbar />
Expand All @@ -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
Expand All @@ -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>
Expand Down
146 changes: 86 additions & 60 deletions src/app/sign-up/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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",
Expand All @@ -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>
</>
);
};
Expand Down

0 comments on commit 73200eb

Please sign in to comment.