436 lines
17 KiB
TypeScript
436 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useAppTheme } from "@/components/ThemeProvider";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Eye, EyeOff, Loader2, X } from "lucide-react";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { loginSchema, registerSchema, type LoginInput, type RegisterInput } from "@/lib/schema/auth";
|
|
import { toast } from "sonner";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface LoginDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
onLoginSuccess: () => void;
|
|
}
|
|
|
|
// Login Dialog component
|
|
export function LoginDialog({ open, onOpenChange, onLoginSuccess }: LoginDialogProps) {
|
|
const { theme } = useAppTheme();
|
|
const isDark = theme === "dark";
|
|
const router = useRouter();
|
|
const { login, register, loginMutation, registerMutation } = useAuth();
|
|
const [isSignup, setIsSignup] = useState(false);
|
|
const [loginData, setLoginData] = useState<LoginInput>({
|
|
email: "",
|
|
password: "",
|
|
});
|
|
const [signupData, setSignupData] = useState<RegisterInput>({
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
phone_number: "",
|
|
password: "",
|
|
password2: "",
|
|
});
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [showPassword2, setShowPassword2] = useState(false);
|
|
const [rememberMe, setRememberMe] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
// Validate form
|
|
const validation = loginSchema.safeParse(loginData);
|
|
if (!validation.success) {
|
|
const firstError = validation.error.errors[0];
|
|
setError(firstError.message);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await login(loginData);
|
|
|
|
if (result.tokens && result.user) {
|
|
toast.success("Login successful!");
|
|
setShowPassword(false);
|
|
onOpenChange(false);
|
|
onLoginSuccess();
|
|
}
|
|
} catch (err) {
|
|
const errorMessage = err instanceof Error ? err.message : "Login failed. Please try again.";
|
|
setError(errorMessage);
|
|
toast.error(errorMessage);
|
|
}
|
|
};
|
|
|
|
const handleSignup = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
// Validate form
|
|
const validation = registerSchema.safeParse(signupData);
|
|
if (!validation.success) {
|
|
const firstError = validation.error.errors[0];
|
|
setError(firstError.message);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await register(signupData);
|
|
|
|
if (result.message) {
|
|
toast.success("Registration successful! Please check your email for OTP verification.");
|
|
// Switch to login after successful registration
|
|
setIsSignup(false);
|
|
setLoginData({ email: signupData.email, password: "" });
|
|
setSignupData({
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
phone_number: "",
|
|
password: "",
|
|
password2: "",
|
|
});
|
|
}
|
|
} catch (err) {
|
|
const errorMessage = err instanceof Error ? err.message : "Signup failed. Please try again.";
|
|
setError(errorMessage);
|
|
toast.error(errorMessage);
|
|
}
|
|
};
|
|
|
|
const handleSwitchToSignup = () => {
|
|
setIsSignup(true);
|
|
setError(null);
|
|
setLoginData({ email: "", password: "" });
|
|
};
|
|
|
|
const handleSwitchToLogin = () => {
|
|
setIsSignup(false);
|
|
setError(null);
|
|
setSignupData({
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
phone_number: "",
|
|
password: "",
|
|
password2: "",
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent
|
|
showCloseButton={false}
|
|
className={`sm:max-w-md ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}
|
|
>
|
|
{/* Header with Close Button */}
|
|
<div className="flex items-start justify-between mb-2">
|
|
<DialogHeader className="flex-1">
|
|
<DialogTitle className="text-3xl font-bold bg-gradient-to-r from-rose-600 via-pink-600 to-rose-600 bg-clip-text text-transparent">
|
|
{isSignup ? "Create an account" : "Welcome back"}
|
|
</DialogTitle>
|
|
<DialogDescription className={isDark ? 'text-gray-400' : 'text-gray-600'}>
|
|
{isSignup
|
|
? "Sign up to complete your booking"
|
|
: "Please log in to complete your booking"}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
{/* Close Button */}
|
|
<button
|
|
onClick={() => onOpenChange(false)}
|
|
className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition-colors ${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>
|
|
|
|
{/* Signup Form */}
|
|
{isSignup ? (
|
|
<form className="space-y-6 mt-4" onSubmit={handleSignup}>
|
|
{error && (
|
|
<div className={`p-3 rounded-lg border ${isDark ? 'bg-red-900/20 border-red-800' : 'bg-red-50 border-red-200'}`}>
|
|
<p className={`text-sm ${isDark ? 'text-red-200' : 'text-red-800'}`}>{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* First Name Field */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="signup-firstName" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
First Name *
|
|
</label>
|
|
<Input
|
|
id="signup-firstName"
|
|
type="text"
|
|
placeholder="John"
|
|
value={signupData.first_name}
|
|
onChange={(e) => setSignupData({ ...signupData, first_name: 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'}`}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Last Name Field */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="signup-lastName" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
Last Name *
|
|
</label>
|
|
<Input
|
|
id="signup-lastName"
|
|
type="text"
|
|
placeholder="Doe"
|
|
value={signupData.last_name}
|
|
onChange={(e) => setSignupData({ ...signupData, last_name: 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'}`}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Email Field */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="signup-email" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
Email address *
|
|
</label>
|
|
<Input
|
|
id="signup-email"
|
|
type="email"
|
|
placeholder="Email address"
|
|
value={signupData.email}
|
|
onChange={(e) => setSignupData({ ...signupData, 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'}`}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Phone Field */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="signup-phone" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
Phone Number (Optional)
|
|
</label>
|
|
<Input
|
|
id="signup-phone"
|
|
type="tel"
|
|
placeholder="+1 (555) 123-4567"
|
|
value={signupData.phone_number || ""}
|
|
onChange={(e) => setSignupData({ ...signupData, phone_number: 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'}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* Password Field */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="signup-password" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
Password *
|
|
</label>
|
|
<div className="relative">
|
|
<Input
|
|
id="signup-password"
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder="Password (min 8 characters)"
|
|
value={signupData.password}
|
|
onChange={(e) => setSignupData({ ...signupData, 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'}`}
|
|
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>
|
|
</div>
|
|
|
|
{/* Confirm Password Field */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="signup-password2" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
Confirm Password *
|
|
</label>
|
|
<div className="relative">
|
|
<Input
|
|
id="signup-password2"
|
|
type={showPassword2 ? "text" : "password"}
|
|
placeholder="Confirm password"
|
|
value={signupData.password2}
|
|
onChange={(e) => setSignupData({ ...signupData, password2: 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'}`}
|
|
required
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setShowPassword2(!showPassword2)}
|
|
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={showPassword2 ? "Hide password" : "Show password"}
|
|
>
|
|
{showPassword2 ? (
|
|
<EyeOff className="w-5 h-5" />
|
|
) : (
|
|
<Eye className="w-5 h-5" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<Button
|
|
type="submit"
|
|
disabled={registerMutation.isPending}
|
|
className="w-full h-12 text-base font-semibold bg-gradient-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"
|
|
>
|
|
{registerMutation.isPending ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Creating account...
|
|
</>
|
|
) : (
|
|
"Sign up"
|
|
)}
|
|
</Button>
|
|
|
|
{/* Switch to Login */}
|
|
<p className={`text-sm text-center ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
|
|
Already have an account?{" "}
|
|
<button
|
|
type="button"
|
|
onClick={handleSwitchToLogin}
|
|
className={`underline font-medium ${isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'}`}
|
|
>
|
|
Log in
|
|
</button>
|
|
</p>
|
|
</form>
|
|
) : (
|
|
/* Login Form */
|
|
<form className="space-y-6 mt-4" onSubmit={handleLogin}>
|
|
{error && (
|
|
<div className={`p-3 rounded-lg border ${isDark ? 'bg-red-900/20 border-red-800' : 'bg-red-50 border-red-200'}`}>
|
|
<p className={`text-sm ${isDark ? 'text-red-200' : 'text-red-800'}`}>{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Email Field */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="login-email" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
Email address
|
|
</label>
|
|
<Input
|
|
id="login-email"
|
|
type="email"
|
|
placeholder="Email address"
|
|
value={loginData.email}
|
|
onChange={(e) => setLoginData({ ...loginData, 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'}`}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Password Field */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="login-password" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
|
|
Your password
|
|
</label>
|
|
<div className="relative">
|
|
<Input
|
|
id="login-password"
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder="Your password"
|
|
value={loginData.password}
|
|
onChange={(e) => setLoginData({ ...loginData, 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'}`}
|
|
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>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<Button
|
|
type="submit"
|
|
disabled={loginMutation.isPending}
|
|
className="w-full h-12 text-base font-semibold bg-gradient-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'}`}
|
|
onClick={() => onOpenChange(false)}
|
|
>
|
|
Forgot password?
|
|
</button>
|
|
</div>
|
|
|
|
{/* Sign Up Prompt */}
|
|
<p className={`text-sm text-center ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
|
|
New to Attune Heart Therapy?{" "}
|
|
<button
|
|
type="button"
|
|
onClick={handleSwitchToSignup}
|
|
className={`underline font-medium ${isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'}`}
|
|
>
|
|
Sign up
|
|
</button>
|
|
</p>
|
|
</form>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|