325 lines
16 KiB
TypeScript
325 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, Suspense } from "react";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import Link from "next/link";
|
|
|
|
interface OAuthConfig {
|
|
google?: { enabled: boolean };
|
|
github?: { enabled: boolean };
|
|
facebook?: { enabled: boolean };
|
|
discord?: { enabled: boolean };
|
|
}
|
|
|
|
function SignInContent() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [message, setMessage] = useState("");
|
|
const [providers, setProviders] = useState<OAuthConfig>({});
|
|
const [oauthLoading, setOAuthLoading] = useState("");
|
|
const [checking, setChecking] = useState(true);
|
|
|
|
// Get redirect URL from query params or default to dashboard
|
|
const redirectUrl = searchParams.get("redirect") || "/account/webinars";
|
|
|
|
// Check if user is already authenticated
|
|
useEffect(() => {
|
|
const checkAuth = async () => {
|
|
try {
|
|
const res = await fetch("/api/auth/me");
|
|
const data = await res.json();
|
|
|
|
if (data.user) {
|
|
// User is already authenticated, redirect to dashboard
|
|
window.location.href = redirectUrl;
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to check auth:", err);
|
|
} finally {
|
|
setChecking(false);
|
|
}
|
|
};
|
|
|
|
checkAuth();
|
|
}, [redirectUrl]);
|
|
|
|
// Load OAuth provider configuration
|
|
useEffect(() => {
|
|
const loadProviders = async () => {
|
|
try {
|
|
const res = await fetch("/api/public/app-setup");
|
|
const data = await res.json();
|
|
if (data.setup?.data?.oauth) {
|
|
setProviders(data.setup.data.oauth);
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to load OAuth providers:", err);
|
|
}
|
|
};
|
|
loadProviders();
|
|
}, []);
|
|
|
|
const handleSignIn = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setMessage("");
|
|
|
|
try {
|
|
const res = await fetch("/api/auth/login", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (!data.ok) {
|
|
setMessage(data.message || "Sign in failed");
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Redirect based on user role or to specified redirect URL
|
|
const userRole = data.user?.role;
|
|
if (userRole === "ADMIN") {
|
|
window.location.href = "/admin";
|
|
} else {
|
|
window.location.href = redirectUrl;
|
|
}
|
|
} catch (err: any) {
|
|
setMessage(err?.message || "Sign in failed. Please try again.");
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleOAuthSignIn = async (provider: "google" | "github" | "facebook" | "discord") => {
|
|
try {
|
|
setOAuthLoading(provider);
|
|
// Redirect to OAuth provider with callback URL
|
|
window.location.href = `/api/auth/${provider}?redirect=${encodeURIComponent(redirectUrl)}`;
|
|
} catch (err: any) {
|
|
setMessage(`${provider} sign in failed. Please try again.`);
|
|
setOAuthLoading("");
|
|
}
|
|
};
|
|
|
|
if (checking) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-white dark:bg-slate-950">
|
|
<div className="text-center">
|
|
<div className="text-6xl mb-4 animate-spin">⏳</div>
|
|
<p className="text-gray-600 dark:text-gray-400">Loading...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-white dark:bg-slate-950">
|
|
<div className="flex w-full max-w-6xl rounded-2xl shadow-2xl overflow-hidden">
|
|
{/* Left Side - Form */}
|
|
<div className="w-full lg:w-1/2 px-8 lg:px-12 py-12 lg:py-16 flex flex-col justify-center bg-white dark:bg-slate-900">
|
|
<div className="max-w-md mx-auto w-full">
|
|
{/* Logo/Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
|
|
👤 Sign In
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
Welcome back! Sign in to access your account.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Error/Success Message */}
|
|
{message && (
|
|
<div
|
|
className={`p-4 rounded-lg font-semibold text-center mb-6 ${
|
|
message.includes("error") || message.includes("failed")
|
|
? "bg-red-500/15 text-red-600 dark:bg-red-950/30 dark:text-red-400 border border-red-200/50 dark:border-red-900/50"
|
|
: "bg-emerald-500/15 text-emerald-600 dark:bg-emerald-950/30 dark:text-emerald-400 border border-emerald-200/50 dark:border-emerald-900/50"
|
|
}`}
|
|
>
|
|
{message}
|
|
</div>
|
|
)}
|
|
|
|
{/* Email/Password Form */}
|
|
<form onSubmit={handleSignIn} className="space-y-4 mb-6">
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
|
Email Address
|
|
</label>
|
|
<input
|
|
type="email"
|
|
placeholder="you@example.com"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">
|
|
Password
|
|
</label>
|
|
<Link
|
|
href="/forgot-password"
|
|
className="text-xs text-primary hover:underline dark:text-blue-400"
|
|
>
|
|
Forgot password?
|
|
</Link>
|
|
</div>
|
|
<input
|
|
type="password"
|
|
placeholder="••••••••"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800 disabled:opacity-60 disabled:cursor-not-allowed text-white font-semibold py-3 rounded-lg transition-all duration-200 text-lg"
|
|
>
|
|
{loading ? "⏳ Signing In..." : "Sign In"}
|
|
</button>
|
|
</form>
|
|
|
|
{/* OAuth Divider */}
|
|
{Object.values(providers).some((p) => p?.enabled) && (
|
|
<>
|
|
<div className="relative mb-6">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<div className="w-full border-t border-gray-300 dark:border-slate-600"></div>
|
|
</div>
|
|
<div className="relative flex justify-center text-sm">
|
|
<span className="px-2 bg-white dark:bg-slate-900 text-gray-600 dark:text-gray-400 font-medium">
|
|
Or continue with
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* OAuth Buttons */}
|
|
<div className="grid grid-cols-2 gap-3 mb-6">
|
|
{providers.google?.enabled && (
|
|
<button
|
|
onClick={() => handleOAuthSignIn("google")}
|
|
disabled={!!oauthLoading}
|
|
className="flex items-center justify-center gap-2 px-4 py-3 border-2 border-gray-300 dark:border-slate-600 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-950/20 dark:hover:border-blue-500 transition-all duration-200 disabled:opacity-60"
|
|
title="Continue with Google"
|
|
>
|
|
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none">
|
|
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
|
|
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
|
|
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
|
|
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
|
|
</svg>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Google</span>
|
|
</button>
|
|
)}
|
|
|
|
{providers.github?.enabled && (
|
|
<button
|
|
onClick={() => handleOAuthSignIn("github")}
|
|
disabled={!!oauthLoading}
|
|
className="flex items-center justify-center gap-2 px-4 py-3 border-2 border-gray-300 dark:border-slate-600 rounded-lg hover:border-gray-900 dark:hover:border-white hover:bg-gray-50 dark:hover:bg-slate-800 transition-all duration-200 disabled:opacity-60"
|
|
title="Continue with GitHub"
|
|
>
|
|
<svg
|
|
className="w-4 h-4"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">GitHub</span>
|
|
</button>
|
|
)}
|
|
|
|
{providers.facebook?.enabled && (
|
|
<button
|
|
onClick={() => handleOAuthSignIn("facebook")}
|
|
disabled={!!oauthLoading}
|
|
className="flex items-center justify-center gap-2 px-4 py-3 border-2 border-gray-300 dark:border-slate-600 rounded-lg hover:border-blue-600 hover:bg-blue-50 dark:hover:bg-blue-950/20 dark:hover:border-blue-600 transition-all duration-200 disabled:opacity-60"
|
|
title="Continue with Facebook"
|
|
>
|
|
<svg className="w-4 h-4" viewBox="0 0 24 24">
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" fill="#1877F2" />
|
|
</svg>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Facebook</span>
|
|
</button>
|
|
)}
|
|
|
|
{providers.discord?.enabled && (
|
|
<button
|
|
onClick={() => handleOAuthSignIn("discord")}
|
|
disabled={!!oauthLoading}
|
|
className="flex items-center justify-center gap-2 px-4 py-3 border-2 border-gray-300 dark:border-slate-600 rounded-lg hover:border-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-950/20 dark:hover:border-indigo-600 transition-all duration-200 disabled:opacity-60"
|
|
title="Continue with Discord"
|
|
>
|
|
<svg className="w-4 h-4" viewBox="0 0 24 24">
|
|
<path d="M20.317 4.3671a19.8062 19.8062 0 00-4.8851-1.5152.074.074 0 00-.0786.0371c-.211.3667-.4385.8453-.6005 1.2242-.5792-.0869-1.159-.0869-1.7335 0-.1624-.3928-.3957-.8575-.6021-1.2242a.077.077 0 00-.0785-.037 19.7355 19.7355 0 00-4.8852 1.515.0699.0699 0 00-.032.0274C.533 9.046-.32 13.58.0992 18.057a.082.082 0 00.031.0605c1.3143 1.0025 2.5871 1.6095 3.8343 2.0057a.0771.0771 0 00.084-.0271c.46-.6137.87-1.2646 1.225-1.9475a.077.077 0 00-.0422-.1062 12.906 12.906 0 01-1.838-.878.0771.0771 0 00-.008-.1277c.123-.092.246-.189.365-.276a.073.073 0 01.076-.01 19.896 19.896 0 0017.152 0 .073.073 0 01.076.01c.119.087.242.184.365.276a.077.077 0 00-.009.1277 12.823 12.823 0 01-1.838.878.0768.0768 0 00-.042.1062c.356.727.765 1.382 1.225 1.9475a.076.076 0 00.084.027 19.858 19.858 0 003.8343-2.0057.0822.0822 0 00.032-.0605c.464-4.547-.775-8.522-3.282-12.037a.0703.0703 0 00-.031-.0274zM8.02 15.3312c-1.1825 0-2.1569-.9718-2.1569-2.1575 0-1.1918.9556-2.1575 2.1569-2.1575 1.2108 0 2.1757.9718 2.1568 2.1575 0 1.1857-.9556 2.1575-2.1568 2.1575zm7.9605 0c-1.1825 0-2.1569-.9718-2.1569-2.1575 0-1.1918.9556-2.1575 2.1569-2.1575 1.2108 0 2.1757.9718 2.1568 2.1575 0 1.1857-.946 2.1575-2.1568 2.1575z" fill="#5865F2" />
|
|
</svg>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Discord</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Sign Up Link */}
|
|
<p className="text-center text-gray-600 dark:text-gray-400">
|
|
Don't have an account?{" "}
|
|
<Link href="/signup" className="text-primary hover:underline font-semibold dark:text-blue-400">
|
|
Sign Up
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Side - Background Image */}
|
|
<div className="hidden lg:block lg:w-1/2 bg-gradient-to-br from-blue-400 via-blue-500 to-purple-600 relative overflow-hidden">
|
|
<div className="absolute inset-0 opacity-40">
|
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-white/20 rounded-full blur-3xl" />
|
|
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-300/20 rounded-full blur-3xl" />
|
|
</div>
|
|
<div className="relative h-full flex flex-col items-center justify-center p-12 text-white text-center">
|
|
<div className="text-6xl mb-6">🚀</div>
|
|
<h2 className="text-4xl font-bold mb-4">Welcome Back</h2>
|
|
<p className="text-lg text-blue-50">
|
|
Access your account and explore amazing features designed for your success.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SignInPage() {
|
|
return (
|
|
<Suspense fallback={
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="inline-block animate-spin text-4xl mb-4">⏳</div>
|
|
<p>Loading...</p>
|
|
</div>
|
|
</div>
|
|
}>
|
|
<SignInContent />
|
|
</Suspense>
|
|
);
|
|
}
|