ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-07-23 20:42:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add confirmPassword input in sign-up page

Browse Source
This commit is contained in:
Pablo Lara
2024-10-01 14:15:05 +02:00
parent ceebfc9aca
commit 650b95c4f1
2 changed files with 44 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/auth/AuthForm.tsx
+6 -24
View File
@@ -97,7 +97,6 @@ export const AuthForm = ({ type }: { type: string }) => {
<Form {...form}>
<form
className="flex flex-col gap-3"
// Fix TS types.
onSubmit={form.handleSubmit(onSubmit)}
>
{type === "sign-up" && (
@@ -115,6 +114,7 @@ export const AuthForm = ({ type }: { type: string }) => {
type="text"
label="Company Name"
placeholder="Enter your company name"
isRequired={false}
/>
</>
)}
@@ -138,35 +138,17 @@ export const AuthForm = ({ type }: { type: string }) => {
</Link>
</div>
)}
{/* <Input
isRequired
endContent={
<button type="button" onClick={toggleConfirmVisibility}>
{isConfirmVisible ? (
<Icon
className="pointer-events-none text-2xl text-default-400"
icon="solar:eye-closed-linear"
/>
) : (
<Icon
className="pointer-events-none text-2xl text-default-400"
icon="solar:eye-bold"
/>
)}
</button>
}
label="Confirm Password"
name="confirmPassword"
placeholder="Confirm your password"
type={isConfirmVisible ? "text" : "password"}
variant="bordered"
/> */}
{type === "sign-up" && (
<FormField
control={form.control}
name="termsAndConditions"
render={({ field }) => (
<>
<CustomInput
control={form.control}
name="confirmPassword"
confirmPassword
/>
<FormControl>
<Checkbox
isRequired
components/ui/custom/CustomInput.tsx
+38 -8
View File
@@ -16,6 +16,7 @@ interface CustomInputProps<T extends FieldValues> {
type?: string;
placeholder?: string;
password?: boolean;
confirmPassword?: boolean;
isRequired?: boolean;
isInvalid?: boolean;
}
@@ -28,24 +29,53 @@ export const CustomInput = <T extends FieldValues>({
labelPlacement = "inside",
placeholder,
variant = "bordered",
confirmPassword = false,
password = false,
isRequired = true,
isInvalid,
}: CustomInputProps<T>) => {
const [isVisible, setIsVisible] = useState(false);
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
useState(false);
const toggleVisibility = () => setIsVisible(!isVisible);
const inputLabel = confirmPassword
? "Confirm Password"
: password
? "Password"
: label;
const inputLabel = password ? "Password" : label;
const inputType = password ? (isVisible ? "text" : "password") : type;
const inputPlaceholder = password ? "Enter your password" : placeholder;
const inputIsRequired = password ? true : isRequired;
const inputPlaceholder = confirmPassword
? "Confirm Password"
: password
? "Password"
: placeholder;
const endContent = password && (
const inputType =
password || confirmPassword
? isPasswordVisible || isConfirmPasswordVisible
? "text"
: "password"
: type;
const inputIsRequired = password || confirmPassword ? true : isRequired;
const toggleVisibility = () => {
if (password) {
setIsPasswordVisible(!isPasswordVisible);
} else if (confirmPassword) {
setIsConfirmPasswordVisible(!isConfirmPasswordVisible);
}
};
const endContent = (password || confirmPassword) && (
<button type="button" onClick={toggleVisibility}>
<Icon
className="pointer-events-none text-2xl text-default-400"
icon={isVisible ? "solar:eye-closed-linear" : "solar:eye-bold"}
icon={
(password && isPasswordVisible) ||
(confirmPassword && isConfirmPasswordVisible)
? "solar:eye-closed-linear"
: "solar:eye-bold"
}
/>
</button>
);