devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the ability for the user to show the password they're typing

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-13 15:24:27 +01:00
parent abe986313f
commit 1e286bb65b
2 changed files with 55 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/login.tsx
View File

@@ -13,6 +13,7 @@ import Link from "next/link";
export default function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const {mutateUser} = useUser({
@@ -71,15 +72,23 @@ export default function Login() {
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
</div>
<div className="flex flex-col gap-3 w-full">
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Password</label>
<input
type="password"
name="password"
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
<div className="w-full h-fit relative">
<input
type={showPassword ? "text" : "password"}
name="password"
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
<p
role="button"
onClick={() => setShowPassword((prev) => !prev)}
className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
{showPassword ? "Hide" : "Show"}
</p>
</div>
</div>
<Button className="mt-8 w-full" color="green" disabled={isLoading}>
{!isLoading && "Login"}