90 lines
3.9 KiB
TypeScript
90 lines
3.9 KiB
TypeScript
import { useState } from 'react';
|
||
|
||
type LoginScreenProps = {
|
||
loading: boolean;
|
||
error: string;
|
||
onSubmit: (username: string, password: string) => Promise<void>;
|
||
};
|
||
|
||
export function LoginScreen({
|
||
loading,
|
||
error,
|
||
onSubmit,
|
||
}: LoginScreenProps) {
|
||
const [username, setUsername] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(245,158,11,0.18),_transparent_38%),linear-gradient(180deg,_#13151c_0%,_#090b11_100%)] px-4 py-8 text-zinc-100">
|
||
<div className="mx-auto flex min-h-[calc(100vh-4rem)] w-full max-w-5xl items-center justify-center">
|
||
<div className="grid w-full max-w-4xl overflow-hidden rounded-[28px] border border-amber-200/15 bg-zinc-950/78 shadow-[0_24px_80px_rgba(0,0,0,0.45)] md:grid-cols-[1.15fr_0.85fr]">
|
||
<div className="border-b border-amber-200/10 bg-[linear-gradient(135deg,_rgba(245,158,11,0.16),_rgba(20,184,166,0.08))] px-6 py-8 md:border-b-0 md:border-r md:px-10 md:py-12">
|
||
<p className="text-xs uppercase tracking-[0.35em] text-amber-200/70">
|
||
Genarrative
|
||
</p>
|
||
<h1 className="mt-4 text-3xl font-semibold tracking-tight text-zinc-50 md:text-4xl">
|
||
登录后进入冒险
|
||
</h1>
|
||
<p className="mt-4 max-w-md text-sm leading-7 text-zinc-300">
|
||
当前版本已切到后端账号模式。输入用户名和密码即可直接进入，用户名不存在时会自动创建账号。
|
||
</p>
|
||
<div className="mt-8 grid gap-3 text-sm text-zinc-300">
|
||
<div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3">
|
||
用户名：3 到 24 位字母、数字、下划线
|
||
</div>
|
||
<div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3">
|
||
第一次提交会自动注册，后续同名即登录
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<form
|
||
className="flex flex-col justify-center gap-5 px-6 py-8 md:px-10 md:py-12"
|
||
onSubmit={(event) => {
|
||
event.preventDefault();
|
||
void onSubmit(username, password);
|
||
}}
|
||
>
|
||
<label className="grid gap-2 text-sm text-zinc-300">
|
||
<span>用户名</span>
|
||
<input
|
||
className="h-12 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-amber-300/50 focus:bg-black/40"
|
||
autoComplete="username"
|
||
value={username}
|
||
onChange={(event) => setUsername(event.target.value)}
|
||
placeholder="hero_name"
|
||
/>
|
||
</label>
|
||
|
||
<label className="grid gap-2 text-sm text-zinc-300">
|
||
<span>密码</span>
|
||
<input
|
||
className="h-12 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-amber-300/50 focus:bg-black/40"
|
||
type="password"
|
||
autoComplete="current-password"
|
||
value={password}
|
||
onChange={(event) => setPassword(event.target.value)}
|
||
placeholder="至少 6 位"
|
||
/>
|
||
</label>
|
||
|
||
{error ? (
|
||
<div className="rounded-2xl border border-rose-400/25 bg-rose-500/10 px-4 py-3 text-sm text-rose-100">
|
||
{error}
|
||
</div>
|
||
) : null}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="mt-2 h-12 rounded-2xl bg-[linear-gradient(135deg,_#f59e0b,_#f97316)] px-4 text-base font-medium text-zinc-950 transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-60"
|
||
>
|
||
{loading ? '正在进入...' : '进入游戏'}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|