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

15
src/pages/login.tsx
View File

@@ -13,6 +13,7 @@ import Link from "next/link";
export default function Login() { export default function Login() {
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const {mutateUser} = useUser({ 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" 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>
<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> <label className="font-normal text-base text-mti-gray-dim">Password</label>
<div className="w-full h-fit relative">
<input <input
type="password" type={showPassword ? "text" : "password"}
name="password" name="password"
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Password" 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" 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> </div>
<Button className="mt-8 w-full" color="green" disabled={isLoading}> <Button className="mt-8 w-full" color="green" disabled={isLoading}>
{!isLoading && "Login"} {!isLoading && "Login"}

37
src/pages/register.tsx
View File

@@ -11,7 +11,9 @@ export default function Register() {
const [name, setName] = useState(""); const [name, setName] = useState("");
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [confirmPassword, setConfirmPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState("");
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const {mutateUser} = useUser({ const {mutateUser} = useUser({
@@ -50,6 +52,7 @@ export default function Register() {
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Email address *</label> <label className="font-normal text-base text-mti-gray-dim">Email address *</label>
<input <input
required
type="email" type="email"
name="email" name="email"
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
@@ -57,25 +60,43 @@ export default function Register() {
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" 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>
<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> <label className="font-normal text-base text-mti-gray-dim">Password</label>
<div className="w-full h-fit relative">
<input <input
type="password" required
type={showPassword ? "text" : "password"}
name="password" name="password"
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Enter your password" 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" 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>
<div className="flex flex-col gap-3 w-full"> </div>
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Confirm Password *</label> <label className="font-normal text-base text-mti-gray-dim">Confirm Password *</label>
<div className="w-full h-fit relative">
<input <input
type="password" required
type={showConfirmPassword ? "text" : "password"}
name="confirmPassword" name="confirmPassword"
onChange={(e) => setConfirmPassword(e.target.value)} onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="Confirm your password" placeholder="Confirm your 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" 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={() => setShowConfirmPassword((prev) => !prev)}
className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
{showConfirmPassword ? "Hide" : "Show"}
</p>
</div>
</div> </div>
<Button className="mt-8 w-full" color="green" disabled={isLoading}> <Button className="mt-8 w-full" color="green" disabled={isLoading}>
{!isLoading && "Create account"} {!isLoading && "Create account"}