binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improvement: add hide/ unhide icon for all password field in the platform. (#3513)

Browse source
This commit is contained in:
Prateek Shourya 2024-01-30 20:11:16 +05:30 • committed by GitHub
parent 638c1e21c9
commit 817737b2c0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 155 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

35
web/components/instance/setup-form/sign-in-form.tsx
View file

@ -1,6 +1,6 @@
import { FC } from "react";
import { FC, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { XCircle } from "lucide-react";
import { Eye, EyeOff, XCircle } from "lucide-react";
// hooks
import { useUser } from "hooks/store";
// ui
@ -24,6 +24,8 @@ export interface IInstanceSetupEmailForm {
export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
const { handleNextStep } = props;
// states
const [showPassword, setShowPassword] = useState(false);
// store hooks
const { fetchCurrentUser } = useUser();
// form info
@ -107,14 +109,27 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
required: "Password is required",
}}
render={({ field: { value, onChange } }) => (
<Input
type="password"
value={value}
onChange={onChange}
hasError={Boolean(errors.password)}
placeholder="Enter password"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
/>
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<Input
type={showPassword ? "text" : "password"}
value={value}
onChange={onChange}
hasError={Boolean(errors.password)}
placeholder="Enter password"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
/>
{showPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(false)}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(true)}
/>
)}
</div>
)}
/>
<p className="pb-2 text-xs text-custom-text-200">