93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
import React from "react";
|
|
import Icon from "@/components/icon";
|
|
import { useTheme } from "next-themes";
|
|
import colors from "@/utils/colors";
|
|
import { useForm } from "react-hook-form";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import { signInValidationSchema } from "@/utils/form";
|
|
|
|
function ModalSignIn() {
|
|
const { theme } = useTheme();
|
|
const color = colors[theme ?? "light"]["base-content"];
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(signInValidationSchema),
|
|
});
|
|
return (
|
|
<>
|
|
<input type="checkbox" id="sign-in-modal" className="modal-toggle" />
|
|
<label htmlFor="sign-in-modal" className="modal cursor-pointer">
|
|
<label className="modal-box relative bg-base-100 max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
|
|
<div className="flex justify-end pb-2 select-none">
|
|
<label
|
|
htmlFor="sign-in-modal"
|
|
className="cursor-pointer"
|
|
onClick={() => {
|
|
reset();
|
|
}}
|
|
>
|
|
<Icon name="Dismiss20Filled" size="medium" color={color} />
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<div
|
|
className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 mt-3 pb-6 rounded-lg"
|
|
data-aos="fade-up"
|
|
>
|
|
<h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6">
|
|
Welcome back!
|
|
</h3>
|
|
<p className="text-sm md:text-base">Lets kick some more ass?</p>
|
|
</div>
|
|
<form
|
|
onSubmit={handleSubmit((data) => {
|
|
console.log(data);
|
|
reset();
|
|
})}
|
|
className="w-full md:w-2/3"
|
|
>
|
|
<div className="relative mt-6">
|
|
<input
|
|
{...register("email")}
|
|
id="SignInEmail"
|
|
type="text"
|
|
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
|
placeholder="Your email…"
|
|
aria-label="Your email…"
|
|
autoComplete="on"
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.email?.message}
|
|
</div>
|
|
</div>
|
|
<div className="relative mt-1 mb-2">
|
|
<input
|
|
{...register("password")}
|
|
id="SignInPwd"
|
|
type="password"
|
|
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
|
placeholder="Your password..."
|
|
aria-label="Your password..."
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.password?.message}
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" className="btn btn-primary">
|
|
Sign In
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</label>
|
|
</label>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ModalSignIn;
|