131 lines
3.4 KiB
TypeScript
131 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
emailValidationSchema,
|
|
EmailValidationData,
|
|
EmailSetupFormProps,
|
|
} from "@/types/auth";
|
|
import { useEmailSetup } from "@/hooks/use-auth";
|
|
import { FormField } from "./form-field";
|
|
|
|
export const EmailSetupForm: React.FC<EmailSetupFormProps> = ({
|
|
loginCredentials,
|
|
onSuccess,
|
|
onError,
|
|
onBack,
|
|
className,
|
|
}) => {
|
|
const { setupEmail, loading } = useEmailSetup();
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting },
|
|
getValues,
|
|
} = useForm<EmailValidationData>({
|
|
resolver: zodResolver(emailValidationSchema),
|
|
mode: "onChange",
|
|
});
|
|
|
|
const onSubmit = async (data: EmailValidationData) => {
|
|
try {
|
|
if (!loginCredentials) {
|
|
onError?.("Login credentials not found. Please try logging in again.");
|
|
return;
|
|
}
|
|
|
|
const result = await setupEmail(loginCredentials, data);
|
|
|
|
switch (result) {
|
|
case "otp":
|
|
onSuccess?.();
|
|
break;
|
|
case "success":
|
|
onSuccess?.();
|
|
break;
|
|
default:
|
|
onError?.("Unexpected response from email setup");
|
|
}
|
|
} catch (error: any) {
|
|
onError?.(error.message || "Email setup failed");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={className}>
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
|
{/* Header */}
|
|
<div className="text-left space-y-2">
|
|
<h1 className="font-semibold text-3xl text-left">
|
|
Anda perlu memasukkan email baru untuk bisa Login.
|
|
</h1>
|
|
<p className="text-default-500 text-base">
|
|
Please provide your old and new email addresses for verification.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Old Email Field */}
|
|
<FormField
|
|
label="Email Lama"
|
|
name="oldEmail"
|
|
type="email"
|
|
placeholder="Enter your old email address"
|
|
error={errors.oldEmail?.message}
|
|
disabled={isSubmitting || loading}
|
|
required
|
|
inputProps={{
|
|
...register("oldEmail"),
|
|
}}
|
|
/>
|
|
|
|
{/* New Email Field */}
|
|
<FormField
|
|
label="Email Baru"
|
|
name="newEmail"
|
|
type="email"
|
|
placeholder="Enter your new email address"
|
|
error={errors.newEmail?.message}
|
|
disabled={isSubmitting || loading}
|
|
required
|
|
inputProps={{
|
|
...register("newEmail"),
|
|
}}
|
|
/>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex gap-4 pt-4">
|
|
{onBack && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={onBack}
|
|
disabled={isSubmitting || loading}
|
|
className="flex-1"
|
|
>
|
|
Back
|
|
</Button>
|
|
)}
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting || loading}
|
|
className="flex-1 bg-red-500 hover:bg-red-600"
|
|
>
|
|
{isSubmitting || loading ? (
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
|
Processing...
|
|
</div>
|
|
) : (
|
|
"Simpan"
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|