victorAnumudu
113 lines
3.9 KiB
TypeScript
113 lines
3.9 KiB
TypeScript
import { useState } from "react";
|
|
import { Button, FloatLabelInput } from "..";
|
|
import CustomModal from "../modal/CustomModal";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { RouteHandler } from "../../router/routes";
|
|
|
|
|
|
type FormType = {
|
|
email: string;
|
|
password: string;
|
|
};
|
|
|
|
type HandleChange = {
|
|
name: string;
|
|
value: string;
|
|
};
|
|
|
|
export default function Login() {
|
|
const navigate = useNavigate()
|
|
|
|
let [formDetails, setFormDetails] = useState<FormType>({
|
|
email: "",
|
|
password: "",
|
|
});
|
|
|
|
const handleFormChange = ({
|
|
target: { name, value },
|
|
}: {
|
|
target: HandleChange;
|
|
}): any => {
|
|
setFormDetails((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const [modal, setModal] = useState<boolean>(false)
|
|
|
|
return (
|
|
<>
|
|
<div className={`w-full overflow-y-auto bg-top bg-cover`}>
|
|
<div className="w-full flex justify-center">
|
|
<div className="w-2/3 md:max-w-[570px]">
|
|
<div className="bg-white w-full rounded-2xl border-2 border-black">
|
|
<div className="w-full p-5 sm:p-10 lg:p-20 flex flex-col justify-between items-center h-full">
|
|
<div className="mb-4">
|
|
<h1 className="text-2xl text-center font-bold leading-3 tracking-wide text-black dark:text-black">
|
|
Welcome!
|
|
</h1>
|
|
<p className="text-xl mt-4 text-center font-medium text-black dark:text-black">
|
|
Please login with your email and default password provided to you
|
|
</p>
|
|
</div>
|
|
|
|
<div className="w-full">
|
|
{/* INPUTS */}
|
|
<div className="w-full">
|
|
<div className="relative my-2 py-2">
|
|
<FloatLabelInput
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
placeHolder="Email"
|
|
labelName="Email"
|
|
value={formDetails.email}
|
|
inputClass=""
|
|
onChange={handleFormChange}
|
|
/>
|
|
</div>
|
|
<div className="relative my-2 py-2">
|
|
<FloatLabelInput
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
placeHolder="Password"
|
|
labelName="Password"
|
|
value={formDetails.password}
|
|
inputClass=""
|
|
onChange={handleFormChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-10 w-full sm:flex justify-between items-center gap-2">
|
|
<Button
|
|
text="Enter"
|
|
className="rounded-md w-full sm:w-2/5 text-xl capitalize font-bold"
|
|
onClick={()=>{setModal(true)}}
|
|
/>
|
|
{/* <Link to='' className='text-black text-sm'>Forget your password?</Link> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{ modal &&
|
|
<CustomModal>
|
|
<div className="py-5 bg-white w-[90%] max-w-[420px] flex flex-col justify-center items-center rounded-xl">
|
|
<p className="px-10 md:px-20 text-sm font-bold text-slate-700 text-center tracking-wide leading-normal">We have sent you a verification code to complete this Login. Please check your phone number</p>
|
|
<div className="px-5 md:px-10 w-full flex justify-end">
|
|
<button
|
|
className="font-bold text-[11px] lg:text-[13px] text-[#5A2C82]"
|
|
onClick={()=>{navigate(RouteHandler.otppage, { state: {continue: true }, replace:true })}}
|
|
>
|
|
Ok
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</CustomModal>
|
|
}
|
|
</>
|
|
);
|
|
}
|