103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
import { Eye,EyeOff } from "lucide-react";
|
|
import FormInput from "@/utils/formInput";
|
|
import Button from "@/utils/button";
|
|
import { useState } from "react";
|
|
|
|
import {Props} from "@/constants/types"
|
|
|
|
|
|
export default function LoginForm({ onSuccess,onForgotPassword }: Props) {
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
return (
|
|
|
|
<div className="w-full max-w-md space-y-3">
|
|
{/* Header text container */}
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight text-white">
|
|
Sign in to your account
|
|
</h2>
|
|
<p className="mt-3 text-[15px] text-slate-400">
|
|
Use your registered work credentials.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Field Elements */}
|
|
<div className="space-y-2">
|
|
<FormInput
|
|
label="Email"
|
|
value="dhananjay@kafm.io"
|
|
|
|
|
|
/>
|
|
|
|
<div className="relative">
|
|
<FormInput
|
|
label="PASSWORD"
|
|
value=""
|
|
type={showPassword ? "text" : "password"}
|
|
|
|
/>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-4 top-[40px] text-slate-500 hover:text-slate-300"
|
|
>
|
|
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Interactive options row */}
|
|
<div className="flex items-center justify-between text-sm">
|
|
<label className="flex cursor-pointer items-center gap-2.5 text-slate-300 select-none">
|
|
<input
|
|
type="checkbox"
|
|
defaultChecked
|
|
className="h-4 w-4 rounded border-slate-700 bg-slate-900 accent-teal-400 focus:ring-0 focus:ring-offset-0"
|
|
/>
|
|
Keep me signed in
|
|
</label>
|
|
|
|
<Button
|
|
|
|
onClick={onForgotPassword}
|
|
className="font-medium text-teal-400 transition hover:text-teal-300 bg-transparent border-0 p-0 cursor-pointer"
|
|
>
|
|
Forgot password?
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Actions / Submit Stack */}
|
|
<div className="space-y-4">
|
|
<Button
|
|
onClick={onSuccess}
|
|
className="h-10 w-full rounded-lg bg-gradient-to-r from-teal-400 to-emerald-400 font-semibold text-slate-950 shadow-md hover:opacity-95 transition"
|
|
>
|
|
Sign in
|
|
</Button>
|
|
|
|
{/* Custom Visual Divider */}
|
|
<div className="flex items-center gap-4 py-2">
|
|
<div className="h-px flex-1 bg-slate-800" />
|
|
<span className="text-xs uppercase tracking-wider text-slate-600 font-medium">or</span>
|
|
<div className="h-px flex-1 bg-slate-800" />
|
|
</div>
|
|
|
|
<Button
|
|
className="h-10 w-full rounded-lg border border-slate-800 bg-[#122031] text-sm font-semibold text-white hover:bg-[#17293e] transition"
|
|
>
|
|
Sign in with SSO
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Bottom Legal Info */}
|
|
<p className="text-center text-xs tracking-wide text-slate-500 font-mono">
|
|
Protected by 2-factor auth • every sign-in is
|
|
<br/> audit-logged
|
|
</p>
|
|
</div>
|
|
|
|
|
|
);
|
|
} |