pref(user): 接入注册优化登录 (#28)

src/api/user.ts

@@ -29,6 +29,11 @@ export function loginApi(data: LoginParams): Promise<ResponseData> {
 /**
  * 注册接口
  * @param data
+ * @param data.nickname - 用户名
+ * @param data.email - 邮箱
+ * @param data.password - 密码
+ * @param data.confirm_password - 确认密码
+ * @param data.public_key - 公钥
  * @returns
  */
 export function registerApi(data: RegisterParams): Promise<ResponseData> {

src/pages/account/login.tsx

@@ -1,31 +1,56 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { LockOutlined, MailOutlined } from '@ant-design/icons'
-import { Button, Form, Input, Avatar, Flex, Checkbox } from 'antd'
+import { Button, Form, Input, Avatar, Flex, Checkbox, message } from 'antd'
 import { $t } from '@/i18n'
 import clsx from 'clsx'
-import { NavigateOptions, useNavigate } from 'react-router'
+import { NavigateOptions, useLocation, useNavigate } from 'react-router'
 import useUserStore from '@/stores/user'
 import { createFingerprint } from '@/utils/fingerprint'
 
 const Login: React.FC = () => {
     const userStore = useUserStore()
     const navigate = useNavigate()
+    const location = useLocation()
+    const [form] = Form.useForm()
+
+    const [messageApi, contextHolder] = message.useMessage()
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        if (location.state) {
+            const { email, password } = location.state as { email: string; password: string }
+            form.setFieldsValue({ email, password })
+        }
+    }, [location.state, form])
 
     const onFinish = async (values: any) => {
         console.log('Received values of form: ', values)
+        setLoading(true)
         try {
-            await userStore.login({
+            const res = await userStore.login({
                 driver_id: createFingerprint(),
                 driver_token: 'ff1005',
                 email: values.email,
                 password: values.password,
                 platform: 'android'
             })
+            if (res.code !== 200) {
+                messageApi.open({
+                    type: 'error',
+                    content: res.msg
+                })
+                return
+            }
             navigate('/dashboard', {
                 replace: true
             })
         } catch (error: any) {
-            console.log('login error: ', error.message)
+            messageApi.open({
+                type: 'error',
+                content: error
+            })
+        } finally {
+            setLoading(false)
         }
     }
 
@@ -39,6 +64,7 @@ const Login: React.FC = () => {
 
     return (
         <>
+            {contextHolder}
             <Flex
                 className="w-screen h-screen"
                 vertical
@@ -53,6 +79,7 @@ const Login: React.FC = () => {
                     }
                 />
                 <Form
+                    form={form}
                     className={clsx('w-2/3 mobile:min-w-[350px] mobile:w-1/6')}
                     layout="vertical"
                     initialValues={{ email: '[email protected]', password: '123456qq' }}
@@ -114,7 +141,13 @@ const Login: React.FC = () => {
                         </Flex>
                     </Form.Item>
                     <Form.Item>
-                        <Button size="large" type="primary" htmlType="submit" className="w-full">
+                        <Button
+                            size="large"
+                            type="primary"
+                            htmlType="submit"
+                            className="w-full"
+                            loading={loading}
+                        >
                             {$t('登陆')}
                         </Button>
                     </Form.Item>

src/pages/account/register.tsx

@@ -1,18 +1,49 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { LockOutlined, MailOutlined, UserOutlined } from '@ant-design/icons'
-import { Button, Form, Input, Avatar, Flex } from 'antd'
+import { Button, Form, Input, Avatar, Flex, message } from 'antd'
 import { $t } from '@/i18n'
 import clsx from 'clsx'
 import { NavigateOptions, useNavigate } from 'react-router'
+import { registerApi } from '@/api/user'
+import useUserStore from '@/stores/user'
 
 const Register: React.FC = () => {
     const navigate = useNavigate()
+    const userStore = useUserStore()
+    const [messageApi, contextHolder] = message.useMessage()
+    const [loading, setLoading] = useState(false)
 
-    const onFinish = (values: any) => {
-        console.log('Received values of form: ', values)
-        toLogin({
-            replace: true
-        })
+    const onFinish = async (values: any) => {
+        setLoading(true)
+        try {
+            const { code, data, msg } = await registerApi({
+                nickname: values.nickname,
+                email: values.email,
+                password: values.password,
+                confirm_password: values.confirm_password
+                // public_key: values.public_key
+            })
+            if (code !== 200) {
+                messageApi.open({
+                    type: 'error',
+                    content: msg
+                })
+                return
+            }
+            userStore.update({ userId: data?.user_id })
+            // await cretaeIdentity(data.user_id, fromData.email)
+            toLogin({
+                replace: true,
+                state: { email: values.email, password: values.password }
+            })
+        } catch {
+            messageApi.open({
+                type: 'error',
+                content: '注册失败，请稍后重试'
+            })
+        } finally {
+            setLoading(false)
+        }
     }
 
     const toQRCode = (options?: NavigateOptions | undefined) => {
@@ -25,6 +56,7 @@ const Register: React.FC = () => {
 
     return (
         <Flex className="w-screen h-screen" vertical justify="center" align="center" gap="large">
+            {contextHolder}
             <Avatar
                 size={120}
                 src={
@@ -101,7 +133,13 @@ const Register: React.FC = () => {
                     <Input prefix={<LockOutlined />} type="password" placeholder={$t('确认密码')} />
                 </Form.Item>
                 <Form.Item>
-                    <Button size="large" type="primary" htmlType="submit" className="w-full">
+                    <Button
+                        size="large"
+                        type="primary"
+                        htmlType="submit"
+                        className="w-full"
+                        loading={loading}
+                    >
                         {$t('注册')}
                     </Button>
                 </Form.Item>

src/stores/user.ts

@@ -14,7 +14,7 @@ const actions = (set: any): UserStoreMethods => ({
     update: async (options) => set(options),
     login: async (params: LoginParams) => {
         try {
-            const { code, data } = await loginApi(params)
+            const { code, data, msg } = await loginApi(params)
             console.log(code, data)
             if (code === 200) {
                 set({
@@ -24,7 +24,7 @@ const actions = (set: any): UserStoreMethods => ({
                 })
                 return Promise.resolve(data)
             }
-            return Promise.reject(data)
+            return Promise.reject(msg)
         } catch (error) {
             console.log('错误', error)
             return Promise.reject(error)