feat(client): 登录注册

2025-12-06 17:01:24 +08:00
parent 4214ed9e10
commit 2d48d2f536
3 changed files with 101 additions and 24 deletions
--- a/client/ui/main-page/RegisterDialog.tsx
+++ b/client/ui/main-page/RegisterDialog.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { Button, Dialog, TextField } from "mdui"
+import MainSharedContext from '../MainSharedContext'
+import showSnackbar from '../../utils/showSnackbar'
+import showCircleProgressDialog from '../showCircleProgressDialog'
+import getClient from '../../getClient'
+import performAuth from '../../performAuth'
+
+export default function RegisterDialog({ ...props }: { open: boolean } & React.HTMLAttributes<Dialog>) {
+    const shared = React.useContext(MainSharedContext)
+
+    const registerInputUserNameRef = React.useRef<TextField>(null)
+    const registerInputNickNameRef = React.useRef<TextField>(null)
+    const registerInputPasswordRef = React.useRef<TextField>(null)
+
+    return (
+        <mdui-dialog headline="注册" {...props}>
+
+            <mdui-text-field label="用户名 (可选)" ref={registerInputUserNameRef}></mdui-text-field>
+            <div style={{
+                height: "10px",
+            }}></div>
+            <mdui-text-field label="昵称" ref={registerInputNickNameRef}></mdui-text-field>
+            <div style={{
+                height: "10px",
+            }}></div>
+            <mdui-text-field label="密码" type="password" toggle-password ref={registerInputPasswordRef}></mdui-text-field>
+
+            <mdui-button slot="action" variant="text" onClick={() => shared.setShowRegisterDialog(false)}>返回</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={async () => {
+                const waitingForRegister = showCircleProgressDialog("注册中...")
+
+                const username = registerInputUserNameRef.current!.value
+
+                let user_id: string
+                try {
+                    user_id = await getClient().registerOrThrow({
+                        username: username,
+                        nickname: registerInputNickNameRef.current!.value,
+                        password: registerInputPasswordRef.current!.value,
+                    })
+                } catch (e) {
+                    user_id = ''
+                    if (e instanceof Error) {
+                        waitingForRegister.open = false
+                        showSnackbar({ message: '注册失败: ' + e.message })
+                        return
+                    }
+                }
+                waitingForRegister.open = false
+
+                const waitingForLogin = showCircleProgressDialog("登录中...")
+
+                try {
+                    await performAuth({
+                        account: username == '' ? username : user_id,
+                        password: registerInputPasswordRef.current!.value,
+                    })
+                    location.reload()
+                } catch (e) {
+                    if (e instanceof Error) {
+                        showSnackbar({ message: '登录失败: ' + e.message })
+                    }
+                }
+                waitingForLogin.open = false
+            }}>注册</mdui-button>
+        </mdui-dialog>
+    )
+}