109 lines
3.0 KiB
TypeScript
109 lines
3.0 KiB
TypeScript
"use client";
|
|
import { FormEvent, Fragment, useEffect, useRef, useState } from "react";
|
|
import { Controller, useForm } from "react-hook-form";
|
|
import * as z from "zod";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import { Input, Textarea } from "@nextui-org/input";
|
|
|
|
const formSchema = z.object({
|
|
password: z.string().min(2, {
|
|
message: "Judul harus diisi",
|
|
}),
|
|
passwordConf: z.string().min(2, {
|
|
message: "Slug harus diisi",
|
|
}),
|
|
});
|
|
|
|
export default function PasswordForm() {
|
|
const MySwal = withReactContent(Swal);
|
|
|
|
const formOptions = {
|
|
resolver: zodResolver(formSchema),
|
|
};
|
|
type UserSettingSchema = z.infer<typeof formSchema>;
|
|
const {
|
|
register,
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
setValue,
|
|
getValues,
|
|
watch,
|
|
setError,
|
|
clearErrors,
|
|
} = useForm<UserSettingSchema>(formOptions);
|
|
|
|
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
|
console.log("values");
|
|
};
|
|
|
|
return (
|
|
<form className="flex flex-col gap-3 " onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-sm">Password</p>
|
|
<Controller
|
|
control={control}
|
|
name="password"
|
|
render={({ field: { onChange, value } }) => (
|
|
<Input
|
|
type="text"
|
|
id="password"
|
|
placeholder=""
|
|
label=""
|
|
value={value}
|
|
onChange={onChange}
|
|
labelPlacement="outside"
|
|
className="w-full "
|
|
classNames={{
|
|
inputWrapper: [
|
|
"border-1 rounded-lg",
|
|
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
|
|
],
|
|
}}
|
|
variant="bordered"
|
|
/>
|
|
)}
|
|
/>
|
|
{errors?.password && (
|
|
<p className="text-red-400 text-sm mb-3">
|
|
{errors.password?.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-sm">Konfirmasi Password</p>
|
|
<Controller
|
|
control={control}
|
|
name="passwordConf"
|
|
render={({ field: { onChange, value } }) => (
|
|
<Input
|
|
type="text"
|
|
id="passwordConf"
|
|
placeholder=""
|
|
label=""
|
|
value={value}
|
|
onChange={onChange}
|
|
labelPlacement="outside"
|
|
className="w-full "
|
|
classNames={{
|
|
inputWrapper: [
|
|
"border-1 rounded-lg",
|
|
"dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
|
|
],
|
|
}}
|
|
variant="bordered"
|
|
/>
|
|
)}
|
|
/>
|
|
{errors?.passwordConf && (
|
|
<p className="text-red-400 text-sm mb-3">
|
|
{errors.passwordConf?.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|