Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 1x 1x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x 191x | "use client";
import React from "react";
import { Button } from "@/components/ui";
import { FormInput } from "@/components/ui";
import { useForm } from "@/lib/forms";
import { schemas } from "@/lib/forms/validators";
type PasswordFormValues = {
currentPassword: string;
newPassword: string;
confirmPassword: string;
};
interface PasswordFormProps {
savingPassword: boolean;
onSubmit: (currentPassword: string, newPassword: string) => Promise<void>;
}
export default function PasswordForm({
savingPassword,
onSubmit,
}: PasswordFormProps) {
const {
errors,
touched,
isSubmitting,
handleSubmit,
getFieldProps,
resetForm,
} = useForm({
schema: schemas.changePassword,
initialValues: {
currentPassword: "",
newPassword: "",
confirmPassword: "",
},
});
const onFormSubmit = async (values: PasswordFormValues) => {
await onSubmit(values.currentPassword, values.newPassword);
resetForm();
};
// Custom className to match existing design system
const inputClassName =
"rounded-md border-gray-3 dark:border-gray-600 bg-gray-1 dark:bg-gray-700 placeholder:text-dark-5 dark:placeholder:text-gray-400 dark:text-gray-200 py-2.5 px-5 focus:shadow-input";
return (
<form onSubmit={handleSubmit(onFormSubmit)}>
<h3 className="font-medium text-xl text-dark dark:text-gray-100 mb-5.5">
Password Change
</h3>
<div className="flex flex-col gap-5.5">
<FormInput
label="Current Password"
type="password"
placeholder="Current Password"
{...getFieldProps("currentPassword")}
error={errors.currentPassword}
touched={touched.currentPassword}
required
className={inputClassName}
/>
<FormInput
label="New Password"
type="password"
placeholder="New Password"
{...getFieldProps("newPassword")}
error={errors.newPassword}
touched={touched.newPassword}
required
helperText="Must be 8+ characters with uppercase, lowercase, and number"
className={inputClassName}
/>
<FormInput
label="Confirm New Password"
type="password"
placeholder="Confirm New Password"
{...getFieldProps("confirmPassword")}
error={errors.confirmPassword}
touched={touched.confirmPassword}
required
className={inputClassName}
/>
<Button
type="submit"
variant="primary"
size="md"
loading={savingPassword || isSubmitting}
>
Save Changes
</Button>
</div>
</form>
);
}
|