good forst commit
This commit is contained in:
@@ -0,0 +1,113 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { Suspense, useEffect, useState } from 'react';
|
||||
import { useAuth } from '../_lib/auth-context';
|
||||
import { useSuperAdmin } from '../_lib/super-admin-context';
|
||||
|
||||
function LoginForm() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { refresh } = useAuth();
|
||||
const { admin: superAdmin, loading: superLoading } = useSuperAdmin();
|
||||
const next = searchParams.get('next') ?? '/';
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [redirecting, setRedirecting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!superLoading && superAdmin) {
|
||||
setRedirecting(true);
|
||||
router.replace('/admin');
|
||||
}
|
||||
}, [superAdmin, superLoading, router]);
|
||||
|
||||
if (superLoading) {
|
||||
return <div className="bg-white p-6 rounded-xl border border-gray-200 h-64 animate-pulse" />;
|
||||
}
|
||||
|
||||
if (redirecting) {
|
||||
return <p className="text-sm text-gray-500">Redirecting to admin panel…</p>;
|
||||
}
|
||||
|
||||
async function onSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password }),
|
||||
credentials: 'include',
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
setError(data?.message ?? 'Invalid email or password');
|
||||
return;
|
||||
}
|
||||
await refresh();
|
||||
router.push(next);
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Network error');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="flex flex-col gap-4 bg-white p-6 rounded-xl border border-gray-200">
|
||||
<label className="flex flex-col gap-1 text-sm">
|
||||
<span className="font-medium text-gray-700">Email</span>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
autoComplete="username"
|
||||
className="rounded border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200"
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1 text-sm">
|
||||
<span className="font-medium text-gray-700">Password</span>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
autoComplete="current-password"
|
||||
className="rounded border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200"
|
||||
/>
|
||||
</label>
|
||||
{error && <p className="text-sm text-red-600" role="alert">{error}</p>}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="rounded bg-blue-600 text-white py-2 font-medium hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{submitting ? 'Signing in…' : 'Sign in'}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<div className="max-w-sm mx-auto mt-16">
|
||||
<h1 className="text-2xl font-semibold mb-2">Sign in</h1>
|
||||
<p className="text-sm text-gray-500 mb-6">TOWER administrative console</p>
|
||||
<Suspense fallback={<div className="bg-white p-6 rounded-xl border border-gray-200 h-64" />}>
|
||||
<LoginForm />
|
||||
</Suspense>
|
||||
<p className="text-sm text-gray-500 mt-6 text-center">
|
||||
New here?{' '}
|
||||
<a href="/signup" className="text-blue-600 hover:underline">
|
||||
Create a community
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user