Initial commit
This commit is contained in:
Developer
410
components/auth/AuthModal.tsx
Normal file
410
components/auth/AuthModal.tsx
Normal file
@@ -0,0 +1,410 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
type AuthModalProps = {
|
||||
open: "login" | "register" | null;
|
||||
onClose: () => void;
|
||||
onSwitch: (mode: "login" | "register") => void;
|
||||
};
|
||||
|
||||
export default function AuthModal({ open, onClose, onSwitch }: AuthModalProps) {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
const [msg, setMsg] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [passwordStrength, setPasswordStrength] = useState<{
|
||||
met: boolean;
|
||||
missing: string[];
|
||||
}>({ met: false, missing: [] });
|
||||
const [providers, setProviders] = useState<{
|
||||
google?: boolean;
|
||||
github?: boolean;
|
||||
facebook?: boolean;
|
||||
discord?: boolean;
|
||||
}>({});
|
||||
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
window.addEventListener("keydown", handleEscape);
|
||||
return () => window.removeEventListener("keydown", handleEscape);
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
setMsg("");
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
setConfirmPassword("");
|
||||
setFirstName("");
|
||||
setLastName("");
|
||||
}, [open]);
|
||||
|
||||
// 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({
|
||||
google: data.setup.data.oauth.google?.enabled,
|
||||
github: data.setup.data.oauth.github?.enabled,
|
||||
facebook: data.setup.data.oauth.facebook?.enabled,
|
||||
discord: data.setup.data.oauth.discord?.enabled,
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load OAuth providers:", err);
|
||||
}
|
||||
};
|
||||
|
||||
loadProviders();
|
||||
}, []);
|
||||
|
||||
// Validate password strength
|
||||
useEffect(() => {
|
||||
const missing: string[] = [];
|
||||
if (password.length < 8 || password.length > 20) missing.push("8-20 characters");
|
||||
if (!/[A-Z]/.test(password)) missing.push("uppercase letter");
|
||||
if (!/\d/.test(password)) missing.push("number");
|
||||
if (/\s/.test(password)) missing.push("no spaces");
|
||||
setPasswordStrength({ met: missing.length === 0, missing });
|
||||
}, [password]);
|
||||
|
||||
const handleSignUp = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setBusy(true);
|
||||
setMsg("");
|
||||
|
||||
try {
|
||||
if (!firstName.trim() || !lastName.trim()) {
|
||||
setMsg("First and last name are required");
|
||||
setBusy(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
setMsg("Passwords do not match");
|
||||
setBusy(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!passwordStrength.met) {
|
||||
setMsg(`Password must contain: ${passwordStrength.missing.join(", ")}`);
|
||||
setBusy(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await fetch("/api/auth/register", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
firstName,
|
||||
lastName,
|
||||
email,
|
||||
password,
|
||||
confirmPassword,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!data.ok) {
|
||||
setMsg(data.message || "Sign up failed");
|
||||
setBusy(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setMsg("✅ Account created! Redirecting...");
|
||||
setTimeout(() => {
|
||||
window.location.href = "/account/webinars";
|
||||
}, 1500);
|
||||
} catch (err: any) {
|
||||
setMsg(err?.message || "Sign up failed. Please try again.");
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSignIn = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setBusy(true);
|
||||
setMsg("");
|
||||
|
||||
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) {
|
||||
setMsg(data.message || "Sign in failed");
|
||||
setBusy(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Redirect based on user role
|
||||
const userRole = data.user?.role;
|
||||
if (userRole === "ADMIN") {
|
||||
window.location.href = "/admin";
|
||||
} else {
|
||||
window.location.href = "/account/webinars";
|
||||
}
|
||||
} catch (err: any) {
|
||||
setMsg(err?.message || "Sign in failed. Please try again.");
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOAuthSignIn = async (provider: "google" | "github" | "facebook" | "discord") => {
|
||||
try {
|
||||
setBusy(true);
|
||||
// Better Auth OAuth flow: Redirect to /api/auth/{provider}
|
||||
// BetterAuth will handle the redirect to the provider's OAuth endpoint
|
||||
const redirectUrl = `/api/auth/${provider}`;
|
||||
|
||||
// Get the provider's OAuth authorization URL
|
||||
const res = await fetch(`${redirectUrl}?action=signin`, {
|
||||
method: "GET",
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`OAuth redirect failed: ${res.statusText}`);
|
||||
}
|
||||
|
||||
// BetterAuth returns a redirect, follow it
|
||||
window.location.href = redirectUrl;
|
||||
} catch (err: any) {
|
||||
setMsg(`${provider} sign in failed. Please try again.`);
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
|
||||
|
||||
<div className="relative bg-white dark:bg-slate-900 rounded-2xl shadow-2xl max-w-md w-full p-8 max-h-[90vh] overflow-y-auto">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-2xl leading-none"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<h2 className="text-3xl font-bold mb-6 text-gray-900 dark:text-white">
|
||||
{open === "login" ? "👤 Sign In" : "🚀 Sign Up"}
|
||||
</h2>
|
||||
|
||||
{open === "register" && (
|
||||
<>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="First Name"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
className="input-field w-full mb-4"
|
||||
disabled={busy}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Last Name"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
className="input-field w-full mb-4"
|
||||
disabled={busy}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="input-field w-full mb-4"
|
||||
disabled={busy}
|
||||
/>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="input-field w-full mb-2"
|
||||
disabled={busy}
|
||||
/>
|
||||
|
||||
{open === "register" && (
|
||||
<>
|
||||
<div className="mb-4 text-sm">
|
||||
{password && (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{[
|
||||
{ label: "8-20 chars", check: password.length >= 8 && password.length <= 20 },
|
||||
{ label: "Uppercase", check: /[A-Z]/.test(password) },
|
||||
{ label: "Number", check: /\d/.test(password) },
|
||||
{ label: "No spaces", check: !/\s/.test(password) },
|
||||
].map(({ label, check }) => (
|
||||
<div key={label} className={check ? "text-success" : "text-danger"}>
|
||||
{check ? "✅" : "❌"} {label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Confirm Password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="input-field w-full mb-4"
|
||||
disabled={busy}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{msg && (
|
||||
<div
|
||||
className={`p-4 rounded-lg font-semibold text-center mb-4 ${
|
||||
msg.includes("error") || msg.includes("failed") || msg.includes("must") || msg.includes("not")
|
||||
? "bg-danger/15 text-danger dark:bg-danger/25 dark:text-danger-light border-2 border-danger/30"
|
||||
: "bg-success/15 text-success dark:bg-success/25 dark:text-success-light border-2 border-success/30"
|
||||
}`}
|
||||
>
|
||||
{msg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="btn-primary w-full mb-4"
|
||||
disabled={busy}
|
||||
onClick={open === "login" ? handleSignIn : handleSignUp}
|
||||
>
|
||||
{busy ? "⏳ Processing…" : open === "login" ? "👤 Sign In" : "🚀 Sign Up"}
|
||||
</button>
|
||||
|
||||
{/* OAuth Buttons */}
|
||||
{Object.values(providers).some(p => p) && (
|
||||
<>
|
||||
<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>
|
||||
|
||||
<div className="space-y-2.5 mb-4">
|
||||
{providers.google && (
|
||||
<button
|
||||
onClick={() => handleOAuthSignIn("google")}
|
||||
disabled={busy}
|
||||
className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-blue-500 hover:shadow-md dark:hover:border-blue-400 dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
|
||||
title="Continue with Google account"
|
||||
aria-label="Continue with Google"
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none">
|
||||
<g clipPath="url(#clip0)">
|
||||
<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"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<span>Continue with Google</span>
|
||||
{busy && <span className="ml-auto animate-spin">⟳</span>}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{providers.github && (
|
||||
<button
|
||||
onClick={() => handleOAuthSignIn("github")}
|
||||
disabled={busy}
|
||||
className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-gray-900 dark:hover:border-white hover:shadow-md dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
|
||||
title="Continue with GitHub account"
|
||||
aria-label="Continue with GitHub"
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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.222v 3.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" />
|
||||
</svg>
|
||||
<span>Continue with GitHub</span>
|
||||
{busy && <span className="ml-auto animate-spin">⟳</span>}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{providers.facebook && (
|
||||
<button
|
||||
onClick={() => handleOAuthSignIn("facebook")}
|
||||
disabled={busy}
|
||||
className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-blue-600 hover:shadow-md dark:hover:border-blue-400 dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
|
||||
title="Continue with Facebook account"
|
||||
aria-label="Continue with Facebook"
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="#1877F2">
|
||||
<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" />
|
||||
</svg>
|
||||
<span>Continue with Facebook</span>
|
||||
{busy && <span className="ml-auto animate-spin">⟳</span>}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{providers.discord && (
|
||||
<button
|
||||
onClick={() => handleOAuthSignIn("discord")}
|
||||
disabled={busy}
|
||||
className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-indigo-500 hover:shadow-md dark:hover:border-indigo-400 dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
|
||||
title="Continue with Discord account"
|
||||
aria-label="Continue with Discord"
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="#5865F2">
|
||||
<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" />
|
||||
</svg>
|
||||
<span>Continue with Discord</span>
|
||||
{busy && <span className="ml-auto animate-spin">⟳</span>}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="text-center text-sm text-gray-600 dark:text-gray-400">
|
||||
{open === "login" ? "Don't have an account? " : "Already have an account? "}
|
||||
<button
|
||||
onClick={() => onSwitch(open === "login" ? "register" : "login")}
|
||||
className="text-primary hover:underline font-semibold"
|
||||
disabled={busy}
|
||||
>
|
||||
{open === "login" ? "Sign up" : "Sign in"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user