119 lines
3.3 KiB
TypeScript
119 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { addToast, Button, Form, Input } from "@heroui/react";
|
|
import { SubmitHandler, useForm } from "react-hook-form";
|
|
import { submitRegisterForm } from "../../lib/submitRegisterForm";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { registerFormSchema } from "../../models/registerForm.schema";
|
|
|
|
type Props = {
|
|
fullname: string;
|
|
};
|
|
|
|
export type RegisterInputs = {
|
|
fullname: string;
|
|
email: string;
|
|
password: string;
|
|
confirmPassword: string;
|
|
};
|
|
|
|
const ProvisionInput = ({ fullname }: Props) => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
formState: { errors },
|
|
} = useForm<RegisterInputs>({
|
|
resolver: zodResolver(registerFormSchema),
|
|
});
|
|
setValue("fullname", fullname);
|
|
|
|
const [submitStatus, setSubmitStatus] = useState(false);
|
|
const onSubmit: SubmitHandler<RegisterInputs> = async (data) => {
|
|
setSubmitStatus(true);
|
|
|
|
try {
|
|
const returnData = await submitRegisterForm(data);
|
|
if (!returnData.success) {
|
|
setSubmitStatus(false);
|
|
addToast({
|
|
color: "danger",
|
|
title: "😬 Oops, something went wrong!",
|
|
description: returnData.text.message,
|
|
});
|
|
} else {
|
|
setSubmitStatus(false);
|
|
addToast({
|
|
color: "success",
|
|
title: "OKKE!",
|
|
description: returnData.text.message,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
setSubmitStatus(false);
|
|
addToast({
|
|
color: "danger",
|
|
title: "😬 Oops, something went wrong!",
|
|
description: "Connection to server lost",
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="mt-6 px-3">
|
|
<Form className="flex flex-col gap-1.5" onSubmit={handleSubmit(onSubmit)}>
|
|
<Input
|
|
{...register("email")}
|
|
className="w-full "
|
|
label="Email"
|
|
type="email"
|
|
variant="bordered"
|
|
isInvalid={errors.email ? true : false}
|
|
errorMessage={errors.email?.message}
|
|
classNames={{
|
|
input: "text-md font-light pt-4",
|
|
inputWrapper: "flex gap-10",
|
|
}}
|
|
/>
|
|
<Input
|
|
{...register("password")}
|
|
className="w-full "
|
|
label="Password"
|
|
type="password"
|
|
variant="bordered"
|
|
isInvalid={errors.password ? true : false}
|
|
errorMessage={errors.password?.message}
|
|
classNames={{
|
|
input: "text-md font-light pt-4",
|
|
inputWrapper: "flex gap-10",
|
|
}}
|
|
/>
|
|
<Input
|
|
{...register("confirmPassword")}
|
|
className="w-full "
|
|
label="Confirm Password"
|
|
type="password"
|
|
variant="bordered"
|
|
isInvalid={errors.confirmPassword ? true : false}
|
|
errorMessage={errors.confirmPassword?.message}
|
|
classNames={{
|
|
input: "text-md font-light pt-4",
|
|
inputWrapper: "flex gap-10",
|
|
}}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
className="mt-1.5 w-full"
|
|
color="primary"
|
|
isLoading={submitStatus}
|
|
>
|
|
Continue
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProvisionInput;
|