628 lines
23 KiB
TypeScript
628 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, Suspense } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
InputOTP,
|
|
InputOTPGroup,
|
|
InputOTPSlot,
|
|
} from "@/components/ui/input-otp";
|
|
import { Heart, Eye, EyeOff, X, Loader2, CheckCircle2 } from "lucide-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { useAppTheme } from "@/components/ThemeProvider";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import {
|
|
loginSchema,
|
|
registerSchema,
|
|
verifyOtpSchema,
|
|
type LoginInput,
|
|
type RegisterInput,
|
|
type VerifyOtpInput
|
|
} from "@/lib/schema/auth";
|
|
import { toast } from "sonner";
|
|
|
|
type Step = "login" | "signup" | "verify";
|
|
|
|
function LoginContent() {
|
|
const { theme } = useAppTheme();
|
|
const isDark = theme === "dark";
|
|
const [step, setStep] = useState<Step>("login");
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [showPassword2, setShowPassword2] = useState(false);
|
|
const [rememberMe, setRememberMe] = useState(false);
|
|
const [registeredEmail, setRegisteredEmail] = useState("");
|
|
|
|
// Login form data
|
|
const [loginData, setLoginData] = useState<LoginInput>({
|
|
email: "",
|
|
password: "",
|
|
});
|
|
|
|
// Signup form data
|
|
const [signupData, setSignupData] = useState<RegisterInput>({
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
phone_number: "",
|
|
password: "",
|
|
password2: "",
|
|
});
|
|
|
|
// OTP verification data
|
|
const [otpData, setOtpData] = useState<VerifyOtpInput>({
|
|
email: "",
|
|
otp: "",
|
|
});
|
|
|
|
const [errors, setErrors] = useState<Partial<Record<string, string>>>({});
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const {
|
|
login,
|
|
register,
|
|
verifyOtp,
|
|
isAuthenticated,
|
|
isAdmin,
|
|
loginMutation,
|
|
registerMutation,
|
|
verifyOtpMutation,
|
|
resendOtpMutation
|
|
} = useAuth();
|
|
|
|
// Check for verify step or email from query parameters
|
|
useEffect(() => {
|
|
const verifyEmail = searchParams.get("verify");
|
|
const emailParam = searchParams.get("email");
|
|
const errorParam = searchParams.get("error");
|
|
|
|
// Don't show verify step if there's an error indicating OTP sending failed
|
|
if (errorParam && errorParam.toLowerCase().includes("failed to send")) {
|
|
setStep("login");
|
|
return;
|
|
}
|
|
|
|
if (verifyEmail === "true" && emailParam) {
|
|
// Show verify step if verify=true
|
|
setStep("verify");
|
|
setRegisteredEmail(emailParam);
|
|
setOtpData({ email: emailParam, otp: "" });
|
|
} else if (emailParam && step === "login") {
|
|
// Pre-fill email in login form if email parameter is present
|
|
setLoginData(prev => ({ ...prev, email: emailParam }));
|
|
}
|
|
}, [searchParams, step]);
|
|
|
|
// Redirect if already authenticated
|
|
useEffect(() => {
|
|
if (isAuthenticated) {
|
|
// Use a small delay to ensure cookies are set and middleware has processed
|
|
const timer = setTimeout(() => {
|
|
// Always redirect based on user role, ignore redirect parameter if user is admin
|
|
const redirectParam = searchParams.get("redirect");
|
|
const defaultRedirect = isAdmin ? "/admin/dashboard" : "/user/dashboard";
|
|
const finalRedirect = isAdmin ? "/admin/dashboard" : (redirectParam || defaultRedirect);
|
|
|
|
// Use window.location.href to ensure full page reload and cookie reading
|
|
window.location.href = finalRedirect;
|
|
}, 200);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [isAuthenticated, isAdmin, searchParams]);
|
|
|
|
// Handle login
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setErrors({});
|
|
|
|
// Validate form
|
|
const validation = loginSchema.safeParse(loginData);
|
|
if (!validation.success) {
|
|
const fieldErrors: Partial<Record<string, string>> = {};
|
|
validation.error.issues.forEach((err) => {
|
|
if (err.path[0]) {
|
|
fieldErrors[err.path[0] as string] = err.message;
|
|
}
|
|
});
|
|
setErrors(fieldErrors);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await login(loginData);
|
|
|
|
if (result.tokens && result.user) {
|
|
toast.success("Login successful!");
|
|
// Wait a moment for cookies to be set, then redirect
|
|
// Check if user is admin/staff/superuser - check all possible field names
|
|
const user = result.user as any;
|
|
const userIsAdmin =
|
|
user.is_admin === true ||
|
|
user.isAdmin === true ||
|
|
user.is_staff === true ||
|
|
user.isStaff === true ||
|
|
user.is_superuser === true ||
|
|
user.isSuperuser === true;
|
|
|
|
// Wait longer for cookies to be set and middleware to process
|
|
setTimeout(() => {
|
|
// Always redirect based on user role, ignore redirect parameter if user is admin
|
|
// This ensures admins always go to admin dashboard
|
|
const defaultRedirect = userIsAdmin ? "/admin/dashboard" : "/user/dashboard";
|
|
|
|
// Only use redirect parameter if user is NOT admin
|
|
const redirectParam = searchParams.get("redirect");
|
|
const finalRedirect = userIsAdmin ? "/admin/dashboard" : (redirectParam || defaultRedirect);
|
|
|
|
// Use window.location.href instead of router.push to ensure full page reload
|
|
// This ensures cookies are read correctly by middleware
|
|
window.location.href = finalRedirect;
|
|
}, 300);
|
|
}
|
|
} catch (error) {
|
|
const errorMessage = error instanceof Error ? error.message : "Login failed. Please try again.";
|
|
toast.error(errorMessage);
|
|
setErrors({});
|
|
}
|
|
};
|
|
|
|
// Handle signup
|
|
const handleSignup = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setErrors({});
|
|
|
|
// Validate form
|
|
const validation = registerSchema.safeParse(signupData);
|
|
if (!validation.success) {
|
|
const fieldErrors: Partial<Record<string, string>> = {};
|
|
validation.error.issues.forEach((err) => {
|
|
if (err.path[0]) {
|
|
fieldErrors[err.path[0] as string] = err.message;
|
|
}
|
|
});
|
|
setErrors(fieldErrors);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await register(signupData);
|
|
|
|
// Check if registration was successful (user created)
|
|
// Even if OTP sending failed, we should allow user to proceed to verification
|
|
// and use resend OTP feature
|
|
if (result && result.message) {
|
|
// Registration successful - proceed to OTP verification
|
|
toast.success("Registration successful! Please check your email for OTP verification.");
|
|
setRegisteredEmail(signupData.email);
|
|
setOtpData({ email: signupData.email, otp: "" });
|
|
setStep("verify");
|
|
} else {
|
|
// If no message but no error, still proceed (some APIs might not return message)
|
|
toast.success("Registration successful! Please check your email for OTP verification.");
|
|
setRegisteredEmail(signupData.email);
|
|
setOtpData({ email: signupData.email, otp: "" });
|
|
setStep("verify");
|
|
}
|
|
} catch (error) {
|
|
// Handle different types of errors
|
|
let errorMessage = "Registration failed. Please try again.";
|
|
|
|
if (error instanceof Error) {
|
|
errorMessage = error.message;
|
|
|
|
// If OTP sending failed, don't show OTP verification - just show error
|
|
if (errorMessage.toLowerCase().includes("failed to send") ||
|
|
errorMessage.toLowerCase().includes("failed to send otp")) {
|
|
toast.error("Registration failed: OTP could not be sent. Please try again later or contact support.");
|
|
setErrors({});
|
|
return;
|
|
}
|
|
|
|
// Check if it's an OTP sending error but registration might have succeeded
|
|
if (errorMessage.toLowerCase().includes("otp") ||
|
|
errorMessage.toLowerCase().includes("email") ||
|
|
errorMessage.toLowerCase().includes("send")) {
|
|
// If OTP sending failed but user might be created, allow proceeding to verification
|
|
// User can use resend OTP
|
|
toast.warning("Registration completed, but OTP email could not be sent. You can request a new OTP on the next screen.");
|
|
setRegisteredEmail(signupData.email);
|
|
setOtpData({ email: signupData.email, otp: "" });
|
|
setStep("verify");
|
|
return;
|
|
}
|
|
}
|
|
|
|
toast.error(errorMessage);
|
|
setErrors({});
|
|
}
|
|
};
|
|
|
|
// Handle OTP verification
|
|
const handleVerifyOtp = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setErrors({});
|
|
|
|
// Use registeredEmail if available, otherwise use otpData.email
|
|
const emailToVerify = registeredEmail || otpData.email;
|
|
if (!emailToVerify) {
|
|
setErrors({ email: "Email address is required" });
|
|
return;
|
|
}
|
|
|
|
// Prepare OTP data with email
|
|
const otpToVerify = {
|
|
email: emailToVerify,
|
|
otp: otpData.otp,
|
|
};
|
|
|
|
// Validate OTP
|
|
const validation = verifyOtpSchema.safeParse(otpToVerify);
|
|
if (!validation.success) {
|
|
const fieldErrors: Partial<Record<string, string>> = {};
|
|
validation.error.issues.forEach((err) => {
|
|
if (err.path[0]) {
|
|
fieldErrors[err.path[0] as string] = err.message;
|
|
}
|
|
});
|
|
setErrors(fieldErrors);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await verifyOtp(otpToVerify);
|
|
|
|
// If verification is successful, switch to login step
|
|
toast.success("Email verified successfully! You can now login.");
|
|
// Switch to login step and pre-fill email
|
|
setStep("login");
|
|
setLoginData(prev => ({ ...prev, email: emailToVerify }));
|
|
setOtpData({ email: "", otp: "" });
|
|
setRegisteredEmail("");
|
|
} catch (error) {
|
|
const errorMessage = error instanceof Error ? error.message : "OTP verification failed. Please try again.";
|
|
toast.error(errorMessage);
|
|
setErrors({});
|
|
}
|
|
};
|
|
|
|
// Handle resend OTP
|
|
const handleResendOtp = async () => {
|
|
const emailToUse = registeredEmail || otpData.email;
|
|
|
|
if (!emailToUse) {
|
|
toast.error("Email address is required to resend OTP.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await resendOtpMutation.mutateAsync({ email: emailToUse, context: "registration" });
|
|
toast.success("OTP resent successfully! Please check your email.");
|
|
// Update registeredEmail if it wasn't set
|
|
if (!registeredEmail) {
|
|
setRegisteredEmail(emailToUse);
|
|
}
|
|
} catch (error) {
|
|
let errorMessage = "Failed to resend OTP. Please try again.";
|
|
|
|
if (error instanceof Error) {
|
|
errorMessage = error.message;
|
|
|
|
// Provide more helpful error messages
|
|
if (errorMessage.toLowerCase().includes("ssl") ||
|
|
errorMessage.toLowerCase().includes("certificate")) {
|
|
errorMessage = "Email service is currently unavailable. Please contact support or try again later.";
|
|
} else if (errorMessage.toLowerCase().includes("not found") ||
|
|
errorMessage.toLowerCase().includes("does not exist")) {
|
|
errorMessage = "Email address not found. Please check your email or register again.";
|
|
}
|
|
}
|
|
|
|
toast.error(errorMessage);
|
|
}
|
|
};
|
|
|
|
// Handle form field changes
|
|
const handleLoginChange = (field: keyof LoginInput, value: string) => {
|
|
setLoginData((prev) => ({ ...prev, [field]: value }));
|
|
if (errors[field]) {
|
|
setErrors((prev) => ({ ...prev, [field]: undefined }));
|
|
}
|
|
};
|
|
|
|
const handleSignupChange = (field: keyof RegisterInput, value: string) => {
|
|
setSignupData((prev) => ({ ...prev, [field]: value }));
|
|
if (errors[field]) {
|
|
setErrors((prev) => ({ ...prev, [field]: undefined }));
|
|
}
|
|
};
|
|
|
|
const handleOtpChange = (field: keyof VerifyOtpInput, value: string) => {
|
|
setOtpData((prev) => ({ ...prev, [field]: value }));
|
|
if (errors[field]) {
|
|
setErrors((prev) => ({ ...prev, [field]: undefined }));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen relative flex items-center justify-center px-4 py-12">
|
|
{/* Background Image */}
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="/woman.jpg"
|
|
alt="Therapy and counseling session with African American clients"
|
|
fill
|
|
className="object-cover object-center"
|
|
priority
|
|
sizes="100vw"
|
|
/>
|
|
{/* Overlay for better readability */}
|
|
<div className="absolute inset-0 bg-black/20"></div>
|
|
</div>
|
|
|
|
{/* Branding - Top Left */}
|
|
<div className="absolute top-8 left-8 flex items-center gap-3 z-30">
|
|
<Heart className="w-6 h-6 text-white" fill="white" />
|
|
<span className="text-white text-xl font-semibold">Attune Heart Therapy</span>
|
|
</div>
|
|
|
|
{/* Centered White Card */}
|
|
<div className={`relative z-20 w-full max-w-md rounded-2xl shadow-2xl p-8 ${isDark ? 'bg-gray-800 border border-gray-700' : 'bg-white'}`}>
|
|
{/* Header with Close Button */}
|
|
<div className="flex items-start justify-between mb-2">
|
|
<div className="flex-1">
|
|
{/* Heading */}
|
|
<h1 className="text-3xl font-bold bg-linear-to-r from-rose-600 via-pink-600 to-rose-600 bg-clip-text text-transparent mb-2">
|
|
{step === "login" && "Welcome back"}
|
|
{step === "verify" && "Verify your email"}
|
|
</h1>
|
|
{/* Subtitle */}
|
|
{step === "login" && (
|
|
<p className={`mb-6 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
|
|
Sign in to access your admin dashboard
|
|
</p>
|
|
)}
|
|
{step === "verify" && registeredEmail && (
|
|
<p className={`mb-6 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
|
|
We've sent a verification code to <strong>{registeredEmail}</strong>
|
|
</p>
|
|
)}
|
|
{step === "verify" && !registeredEmail && (
|
|
<p className={`mb-6 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
|
|
Enter the verification code sent to your email
|
|
</p>
|
|
)}
|
|
</div>
|
|
{/* Close Button */}
|
|
<Button
|
|
onClick={() => router.back()}
|
|
variant="ghost"
|
|
size="icon"
|
|
className={`shrink-0 w-8 h-8 rounded-full ${isDark ? 'text-gray-400 hover:text-gray-300 hover:bg-gray-700' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'}`}
|
|
aria-label="Close"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Login Form */}
|
|
{step === "login" && (
|
|
<form className="space-y-6" onSubmit={handleLogin}>
|
|
{/* Email Field */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="email" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
Email address
|
|
</label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="Email address"
|
|
value={loginData.email}
|
|
onChange={(e) => handleLoginChange("email", e.target.value)}
|
|
className={`h-12 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'} ${errors.email ? 'border-red-500' : ''}`}
|
|
required
|
|
/>
|
|
{errors.email && (
|
|
<p className="text-sm text-red-500">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Password Field */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="password" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
Your password
|
|
</label>
|
|
<div className="relative">
|
|
<Input
|
|
id="password"
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder="Your password"
|
|
value={loginData.password}
|
|
onChange={(e) => handleLoginChange("password", e.target.value)}
|
|
className={`h-12 pr-12 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'} ${errors.password ? 'border-red-500' : ''}`}
|
|
required
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className={`absolute right-4 top-1/2 -translate-y-1/2 h-auto w-auto p-0 ${isDark ? 'text-gray-400 hover:text-gray-300' : 'text-gray-500 hover:text-gray-700'}`}
|
|
aria-label={showPassword ? "Hide password" : "Show password"}
|
|
>
|
|
{showPassword ? (
|
|
<EyeOff className="w-5 h-5" />
|
|
) : (
|
|
<Eye className="w-5 h-5" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
{errors.password && (
|
|
<p className="text-sm text-red-500">{errors.password}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<Button
|
|
type="submit"
|
|
disabled={loginMutation.isPending}
|
|
className="w-full h-12 text-base font-semibold bg-linear-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{loginMutation.isPending ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Logging in...
|
|
</>
|
|
) : (
|
|
"Log in"
|
|
)}
|
|
</Button>
|
|
|
|
{/* Remember Me & Forgot Password */}
|
|
<div className="flex items-center justify-between text-sm">
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={rememberMe}
|
|
onChange={(e) => setRememberMe(e.target.checked)}
|
|
className={`w-4 h-4 rounded text-rose-600 focus:ring-2 focus:ring-rose-500 cursor-pointer ${isDark ? 'border-gray-600 bg-gray-700' : 'border-gray-300'}`}
|
|
/>
|
|
<span className={isDark ? 'text-gray-300' : 'text-black'}>Remember me</span>
|
|
</label>
|
|
<button
|
|
type="button"
|
|
className={`font-medium ${isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'}`}
|
|
>
|
|
Forgot password?
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
|
|
|
|
{/* OTP Verification Form */}
|
|
{step === "verify" && (
|
|
<form className="space-y-6" onSubmit={handleVerifyOtp}>
|
|
<div className={`p-4 rounded-lg border ${isDark ? 'bg-blue-900/20 border-blue-800' : 'bg-blue-50 border-blue-200'}`}>
|
|
<div className="flex items-start gap-3">
|
|
<CheckCircle2 className={`w-5 h-5 mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
|
|
<div>
|
|
<p className={`text-sm font-medium ${isDark ? 'text-blue-200' : 'text-blue-900'}`}>
|
|
Check your email
|
|
</p>
|
|
<p className={`text-sm mt-1 ${isDark ? 'text-blue-300' : 'text-blue-700'}`}>
|
|
We've sent a 6-digit verification code to your email address.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email Field (if not set) */}
|
|
{!registeredEmail && (
|
|
<div className="space-y-2">
|
|
<label htmlFor="verify-email" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
Email address *
|
|
</label>
|
|
<Input
|
|
id="verify-email"
|
|
type="email"
|
|
placeholder="Email address"
|
|
value={otpData.email}
|
|
onChange={(e) => handleOtpChange("email", e.target.value)}
|
|
className={`h-12 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'} ${errors.email ? 'border-red-500' : ''}`}
|
|
required
|
|
/>
|
|
{errors.email && (
|
|
<p className="text-sm text-red-500">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* OTP Field */}
|
|
<div className="space-y-2">
|
|
<label className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
Verification Code *
|
|
</label>
|
|
<div className="flex justify-center">
|
|
<InputOTP
|
|
maxLength={6}
|
|
value={otpData.otp}
|
|
onChange={(value) => handleOtpChange("otp", value)}
|
|
aria-invalid={!!errors.otp}
|
|
>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
<InputOTPSlot index={2} />
|
|
<InputOTPSlot index={3} />
|
|
<InputOTPSlot index={4} />
|
|
<InputOTPSlot index={5} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
</div>
|
|
{errors.otp && (
|
|
<p className="text-sm text-red-500 text-center">{errors.otp}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Resend OTP */}
|
|
<div className="text-center">
|
|
<button
|
|
type="button"
|
|
onClick={handleResendOtp}
|
|
disabled={resendOtpMutation.isPending}
|
|
className={`text-sm font-medium ${isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'} disabled:opacity-50 disabled:cursor-not-allowed`}
|
|
>
|
|
{resendOtpMutation.isPending ? "Sending..." : "Didn't receive the code? Resend"}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<Button
|
|
type="submit"
|
|
disabled={verifyOtpMutation.isPending}
|
|
className="w-full h-12 text-base font-semibold bg-linear-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{verifyOtpMutation.isPending ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Verifying...
|
|
</>
|
|
) : (
|
|
"Verify Email"
|
|
)}
|
|
</Button>
|
|
|
|
{/* Back to login */}
|
|
<div className="text-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setStep("login");
|
|
setOtpData({ email: "", otp: "" });
|
|
}}
|
|
className={`text-sm font-medium ${isDark ? 'text-gray-400 hover:text-gray-300' : 'text-gray-600 hover:text-gray-700'}`}
|
|
>
|
|
← Back to login
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Login() {
|
|
return (
|
|
<Suspense fallback={
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<Loader2 className="w-8 h-8 animate-spin text-rose-600" />
|
|
</div>
|
|
}>
|
|
<LoginContent />
|
|
</Suspense>
|
|
);
|
|
}
|