81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { FormEvent, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Cloud, HardDrive, Loader2 } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { loginAnonymousProfile } from '@/lib/anonymous-client';
|
|
|
|
export function HomeModeSelector() {
|
|
const router = useRouter();
|
|
const [codeName, setCodeName] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const startLocal = () => {
|
|
router.push('/questionnaire');
|
|
};
|
|
|
|
const startAnonymous = async (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setLoading(true);
|
|
try {
|
|
await loginAnonymousProfile({ codeName: codeName.trim(), password });
|
|
toast.success('已进入匿名加密档案');
|
|
router.push('/questionnaire');
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : '匿名档案进入失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="grid gap-3">
|
|
<div className="border p-4">
|
|
<div className="mb-3 flex items-center gap-2 font-medium">
|
|
<HardDrive className="h-4 w-4" />
|
|
本地加密模式
|
|
</div>
|
|
<p className="mb-4 text-sm leading-6 text-muted-foreground">
|
|
记录只保存在当前浏览器，写入前自动加密。适合单设备使用，最快开始。
|
|
</p>
|
|
<Button className="w-full" onClick={startLocal}>
|
|
直接开始
|
|
</Button>
|
|
</div>
|
|
|
|
<form className="border p-4" onSubmit={startAnonymous}>
|
|
<div className="mb-3 flex items-center gap-2 font-medium">
|
|
<Cloud className="h-4 w-4" />
|
|
匿名加密同步
|
|
</div>
|
|
<p className="mb-4 text-sm leading-6 text-muted-foreground">
|
|
输入代号和恢复口令后，测评记录会先在浏览器加密，再同步到服务器。
|
|
</p>
|
|
<div className="grid gap-2">
|
|
<Input
|
|
value={codeName}
|
|
onChange={(event) => setCodeName(event.target.value)}
|
|
placeholder="代号，不填真实姓名"
|
|
autoComplete="username"
|
|
/>
|
|
<Input
|
|
value={password}
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
placeholder="恢复口令"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
/>
|
|
<Button className="w-full" disabled={loading || !codeName.trim() || password.length < 4}>
|
|
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Cloud className="h-4 w-4" />}
|
|
进入并同步
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|