217 lines
8.6 KiB
TypeScript
217 lines
8.6 KiB
TypeScript
'use client';
|
||
|
||
import { Button } from "@/components/ui/button";
|
||
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "@/components/ui/field";
|
||
import { useUserStore } from "@/store/useUserStore";
|
||
import { Checkbox } from "@radix-ui/react-checkbox";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCaption,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/components/ui/table"
|
||
import { ReactElement, useMemo, useState } from "react";
|
||
import {
|
||
Dialog,
|
||
DialogClose,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { AuthAPI } from "@/lib/api/client";
|
||
import { GeneralErrorHandler, handleAPIError } from "@/lib/api/common";
|
||
import { startRegistration } from '@simplewebauthn/browser';
|
||
import { toast } from "sonner";
|
||
|
||
export default function Page() {
|
||
const userStore = useUserStore();
|
||
const user = userStore.user;
|
||
|
||
return (
|
||
<div className="w-full">
|
||
<form onSubmit={e => {
|
||
e.preventDefault();
|
||
}}>
|
||
<FieldGroup className="gap-5">
|
||
<FieldSet>
|
||
<FieldLegend>账户基础信息</FieldLegend>
|
||
<FieldDescription>这是当前账户的基础信息</FieldDescription>
|
||
<FieldGroup className="gap-5">
|
||
{
|
||
[
|
||
{
|
||
name: 'username',
|
||
localName: '用户名',
|
||
required: true,
|
||
defaultValue: user?.username,
|
||
},
|
||
{
|
||
name: 'nickname',
|
||
localName: '昵称',
|
||
required: true,
|
||
defaultValue: user?.nickname,
|
||
},
|
||
{
|
||
name: 'email',
|
||
localName: '电子邮箱',
|
||
required: false,
|
||
defaultValue: user?.email,
|
||
},
|
||
{
|
||
name: 'phone',
|
||
localName: '手机号',
|
||
required: false,
|
||
defaultValue: user?.phone,
|
||
description: '当前仅支持中国大陆（+86）手机号'
|
||
},
|
||
].map(({ name, localName, required, defaultValue, description }) => (
|
||
<Field key={name} className="gap-2">
|
||
<FieldLabel htmlFor={`console-profile-${name}`} className="text-zinc-800">
|
||
{localName}
|
||
</FieldLabel>
|
||
<Input
|
||
id={`console-profile-${name}`}
|
||
name={name}
|
||
defaultValue={defaultValue}
|
||
placeholder={localName}
|
||
required={required}
|
||
disabled
|
||
/>
|
||
{
|
||
description && (
|
||
<FieldDescription>
|
||
{description}
|
||
</FieldDescription>
|
||
)
|
||
}
|
||
</Field>
|
||
))
|
||
}
|
||
</FieldGroup>
|
||
</FieldSet>
|
||
<Field orientation="horizontal">
|
||
<Button type="submit" disabled>保存</Button>
|
||
<Button variant="outline" type="button" disabled>
|
||
编辑
|
||
</Button>
|
||
</Field>
|
||
</FieldGroup>
|
||
</form>
|
||
<FieldSeparator className="mt-2 mb-2" />
|
||
<FieldGroup className="gap-5">
|
||
<FieldSet>
|
||
<FieldLegend>通行证列表</FieldLegend>
|
||
<FieldDescription>
|
||
通行证（PassKey），一种先进的无密码身份验证技术。
|
||
</FieldDescription>
|
||
<PasskeyList />
|
||
<div>
|
||
<AddPasskeyDialog>
|
||
<Button>添加通行证</Button>
|
||
</AddPasskeyDialog>
|
||
</div>
|
||
</FieldSet>
|
||
</FieldGroup>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
|
||
interface AddPasskeyDialogProps {
|
||
children: ReactElement;
|
||
}
|
||
function AddPasskeyDialog({ children }: AddPasskeyDialogProps) {
|
||
const [open, setOpen] = useState(false);
|
||
|
||
const handleSubmit = async (name: string) => {
|
||
try {
|
||
name = name.trim();
|
||
if (name.length === 0) {
|
||
throw new Error('通行证名称不能为空')
|
||
}
|
||
|
||
const options = await AuthAPI.getPasskeyRegisterOptions();
|
||
|
||
const credential = await startRegistration({ optionsJSON: options }).catch(() => null);
|
||
|
||
if (credential === null) {
|
||
throw new Error('认证超时');
|
||
}
|
||
|
||
const registerRes = await AuthAPI.passkeyRegister(name, credential);
|
||
if (registerRes.id) {
|
||
toast.success('添加成功');
|
||
setOpen(false);
|
||
}
|
||
} catch (error) {
|
||
console.log(error)
|
||
handleAPIError(error, GeneralErrorHandler);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={setOpen}>
|
||
<DialogTrigger asChild>
|
||
{children}
|
||
</DialogTrigger>
|
||
<DialogContent className="sm:max-w-100">
|
||
<DialogHeader>
|
||
<DialogTitle>添加通行证</DialogTitle>
|
||
<DialogDescription>
|
||
如果能添加成功，则说明您的设备支持；如果添加失败了，说明您的设备不支持😊
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<form onSubmit={(e) => {
|
||
e.preventDefault();
|
||
const formData = new FormData(e.currentTarget);
|
||
handleSubmit(formData.get('name')?.toString() || '');
|
||
}}>
|
||
<div className="grid gap-4">
|
||
<div className="grid gap-3">
|
||
<Label htmlFor="console-add-passkey-name">通行证名称</Label>
|
||
<Input id="console-add-passkey-name" name="name" required />
|
||
</div>
|
||
</div>
|
||
<DialogFooter className="mt-6">
|
||
<DialogClose asChild>
|
||
<Button variant="outline">取消</Button>
|
||
</DialogClose>
|
||
<Button type="submit">下一步</Button>
|
||
</DialogFooter>
|
||
</form>
|
||
</DialogContent>
|
||
</Dialog >
|
||
)
|
||
}
|
||
|
||
function PasskeyList() {
|
||
return (
|
||
<Table>
|
||
{/* <TableCaption>A list of your recent invoices.</TableCaption> */}
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>名称</TableHead>
|
||
<TableHead>状态</TableHead>
|
||
<TableHead>创建时间</TableHead>
|
||
<TableHead className="text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
<TableRow>
|
||
<TableCell className="font-medium">INV001</TableCell>
|
||
<TableCell>Paid</TableCell>
|
||
<TableCell>Credit Card</TableCell>
|
||
<TableCell className="text-right">$250.00</TableCell>
|
||
</TableRow>
|
||
</TableBody>
|
||
</Table>
|
||
)
|
||
} |