Login and dashboard added

2026-07-13 16:09:15 +01:00
commit ca40bd4095
36 changed files with 7821 additions and 0 deletions
--- a/components/auth/loginForm.tsx
+++ b/components/auth/loginForm.tsx
@@ -0,0 +1,103 @@
+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>
+
+    
+  );
+}