129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { useRouter, useSearchParams } from 'next/navigation';
|
||
import { Suspense, useEffect, useState } from 'react';
|
||
import { safeReturnPath } from '@/lib/navigation/safe-return';
|
||
import { useAuthStore } from '@/stores/auth-store';
|
||
|
||
function LoginForm() {
|
||
const router = useRouter();
|
||
const searchParams = useSearchParams();
|
||
const accessToken = useAuthStore((s) => s.accessToken);
|
||
const login = useAuthStore((s) => s.login);
|
||
const [mounted, setMounted] = useState(false);
|
||
const [user, setUser] = useState('');
|
||
const [pass, setPass] = useState('');
|
||
const [tenant, setTenant] = useState('');
|
||
const [err, setErr] = useState<string | null>(null);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
useEffect(() => {
|
||
setMounted(true);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!mounted || !accessToken) {
|
||
return;
|
||
}
|
||
const next = safeReturnPath(searchParams.get('from'), '/dashboard');
|
||
router.replace(next);
|
||
}, [mounted, accessToken, router, searchParams]);
|
||
|
||
if (!mounted) {
|
||
return (
|
||
<main className="flex min-h-screen items-center justify-center text-sm text-neutral-500">
|
||
加载中…
|
||
</main>
|
||
);
|
||
}
|
||
|
||
if (accessToken) {
|
||
return (
|
||
<main className="flex min-h-screen items-center justify-center text-sm text-neutral-500">
|
||
正在进入后台…
|
||
</main>
|
||
);
|
||
}
|
||
|
||
async function onSubmit(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
setErr(null);
|
||
setLoading(true);
|
||
try {
|
||
await login(user, pass, tenant || undefined);
|
||
const next = safeReturnPath(searchParams.get('from'), '/dashboard');
|
||
router.replace(next);
|
||
} catch (ex) {
|
||
setErr(ex instanceof Error ? ex.message : String(ex));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<main className="flex min-h-screen flex-col items-center justify-center gap-6 p-6">
|
||
<form
|
||
onSubmit={onSubmit}
|
||
className="w-full max-w-sm rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
|
||
>
|
||
<h1 className="text-lg font-medium">登录</h1>
|
||
<label className="mt-4 block text-sm">
|
||
<span className="text-neutral-600">用户名</span>
|
||
<input
|
||
className="mt-1 w-full rounded border border-neutral-300 px-2 py-1"
|
||
value={user}
|
||
onChange={(e) => setUser(e.target.value)}
|
||
autoComplete="username"
|
||
required
|
||
/>
|
||
</label>
|
||
<label className="mt-3 block text-sm">
|
||
<span className="text-neutral-600">密码</span>
|
||
<input
|
||
type="password"
|
||
className="mt-1 w-full rounded border border-neutral-300 px-2 py-1"
|
||
value={pass}
|
||
onChange={(e) => setPass(e.target.value)}
|
||
autoComplete="current-password"
|
||
required
|
||
/>
|
||
</label>
|
||
<label className="mt-3 block text-sm">
|
||
<span className="text-neutral-600">租户 ID（可空）</span>
|
||
<input
|
||
className="mt-1 w-full rounded border border-neutral-300 px-2 py-1"
|
||
value={tenant}
|
||
onChange={(e) => setTenant(e.target.value)}
|
||
/>
|
||
</label>
|
||
{err ? <p className="mt-3 text-sm text-red-600">{err}</p> : null}
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="mt-4 w-full rounded bg-neutral-900 py-2 text-white disabled:opacity-50"
|
||
>
|
||
{loading ? '提交中…' : '登录'}
|
||
</button>
|
||
</form>
|
||
<Link href="/" className="text-sm text-blue-600">
|
||
返回首页
|
||
</Link>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
export default function LoginPage() {
|
||
return (
|
||
<Suspense
|
||
fallback={
|
||
<main className="flex min-h-screen items-center justify-center text-sm text-neutral-500">
|
||
加载中…
|
||
</main>
|
||
}
|
||
>
|
||
<LoginForm />
|
||
</Suspense>
|
||
);
|
||
}
|