forked from mrwyndham/fastpocket
118 lines
4.0 KiB
TypeScript
118 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, forwardRef, useImperativeHandle } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import { signInValidationSchema } from "@/utils/form";
|
|
import { login } from "@/app/(auth)/actions";
|
|
import { ModalStatus, SignInForm, TextOnUse } from "@/types";
|
|
import { useRouter } from "next/navigation";
|
|
export interface FormRefMethods {
|
|
resetForm: () => void;
|
|
}
|
|
|
|
interface ModalSignInFormProps {
|
|
textOnUse: TextOnUse;
|
|
setStatus: React.Dispatch<React.SetStateAction<ModalStatus>>;
|
|
}
|
|
|
|
const ModalSignInForm = forwardRef<FormRefMethods, ModalSignInFormProps>(
|
|
({ textOnUse, setStatus }: ModalSignInFormProps, ref) => {
|
|
// const context = useContext(Context);
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [organisation, setOrganisation] = useState("");
|
|
const router = useRouter();
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
setError,
|
|
clearErrors,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(signInValidationSchema),
|
|
});
|
|
|
|
const submitForm = async (data: SignInForm) => {
|
|
console.log("data", data);
|
|
clearErrors();
|
|
setEmail(data.email);
|
|
setPassword(!data.password ? "" : data.password);
|
|
setStatus(ModalStatus.Loading);
|
|
if (!data.password) return;
|
|
let response = undefined;
|
|
try {
|
|
console.log("before login");
|
|
response = await login({ email: data.email, password: data.password });
|
|
if (!response.success) {
|
|
throw new Error(response.error);
|
|
}
|
|
const signInModal = document.getElementById("sign-in-modal");
|
|
if (!!signInModal) signInModal.click();
|
|
router.push("/account");
|
|
} catch (error) {
|
|
setStatus(ModalStatus.Default);
|
|
console.log(error);
|
|
setError("email", { type: "custom", message: "Invalid Credentials" });
|
|
}
|
|
};
|
|
useImperativeHandle(ref, () => ({
|
|
resetForm: () => {
|
|
reset();
|
|
setEmail("");
|
|
setPassword("");
|
|
setOrganisation("");
|
|
},
|
|
}));
|
|
return (
|
|
<form onSubmit={handleSubmit(submitForm)} className="w-full md:w-1/2">
|
|
<div className="relative mt-3">
|
|
<input
|
|
{...register("email")}
|
|
id="SignInEmail"
|
|
type="text"
|
|
className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:placeholder-white dark:border-white"
|
|
placeholder="Your email…"
|
|
aria-label="Your email…"
|
|
autoComplete="on"
|
|
/>
|
|
<label
|
|
htmlFor="SignInEmail"
|
|
className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
|
|
>
|
|
{errors.email ? "*" + errors.email.message : ""}
|
|
</label>
|
|
</div>
|
|
<div className="relative mt-1 mb-4">
|
|
<input
|
|
{...register("password")}
|
|
id="SignInPwd"
|
|
type="password"
|
|
className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:placeholder-white dark:border-white"
|
|
placeholder="Your password..."
|
|
aria-label="Your password..."
|
|
/>
|
|
<label
|
|
htmlFor="SignInPwd"
|
|
className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
|
|
>
|
|
{errors.password ? "*" + errors.password.message : ""}
|
|
</label>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="btn capitalize font-bold text-black bg-base-100 hover:bg-base-100 shadow"
|
|
>
|
|
{textOnUse.buttonText}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|
|
);
|
|
ModalSignInForm.displayName = "ModalSignInForm";
|
|
|
|
export default ModalSignInForm;
|