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/verifyCode.tsx
+++ b/components/auth/verifyCode.tsx
@@ -0,0 +1,86 @@
+import Button from "@/utils/button";
+import OTPInput from "./otpInput";
+import { useEffect, useState, } from "react";
+
+import {Props} from "@/constants/types"
+
+
+export default function VerifyCode({ onBack }: Props) {
+    const [timer, setTimer] = useState(30);
+
+  useEffect(() => {
+    if (timer === 0) return;
+
+    const interval = setInterval(() => {
+      setTimer((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [timer]);
+
+  const handleResend = () => {
+    if (timer > 0) return;
+
+    // Call your resend OTP API here
+
+    setTimer(30);
+  };
+
+  return (
+    <div className="space-y-6">
+      <button
+        onClick={onBack}
+        className="text-slate-400 hover:text-white"
+      >
+        ← Back to sign in
+      </button>
+
+      <div>
+        <h2 className="text-2xl font-bold text-white">
+          Two-factor authentication
+        </h2>
+
+          <p className="text-slate-400">
+            Enter the 6-digit code from your authenticator app, or the<br/>
+            code we sent to{" "}
+            <span className="font-semibold text-white">
+              d•••@kafm.io
+            </span>.
+          </p>
+      </div>
+
+      <OTPInput />
+
+     <div className="flex items-center gap-2">
+          <Button
+           
+            onClick={handleResend}
+         
+            className={`font-semibold transition-colors ${
+              timer > 0
+                ? "text-slate-400 cursor-not-allowed"
+                : "text-teal-400 hover:text-teal-300 cursor-pointer"
+            }`}
+          >
+            Resend code
+          </Button>
+
+          {timer > 0 && (
+            <span className="text-sm text-slate-500">
+              {timer}s
+            </span>
+          )}
+        </div>
+
+
+      <label className="flex items-center gap-2 text-slate-300">
+        <input type="checkbox" />
+        Trust this device for 30 days
+      </label>
+
+      <Button className="h-10 w-full rounded-xl bg-gradient-to-r from-teal-400 to-emerald-400 font-semibold text-black">
+        Verify & Continue
+      </Button>
+    </div>
+  );
+}