Forráskód Böngészése

✨ feat(register): 优化注册页面功能和用户体验

- 添加更严格的输入验证(用户名、密码长度、邮箱格式)
- 优化错误提示,增加提示显示时长
- 添加注册过程中的加载动画和提示
- 设置导航栏标题为"创建账号"
- 使用useAuth Hook重构认证逻辑,移除直接authManager调用

♻️ refactor(auth): 重命名登录路由文件以符合RESTful规范

- 将login/password.ts重命名为login/post.ts
- 更新导入路径以匹配新文件名
yourname 4 hónapja
szülő
commit
853ad770ca

+ 77 - 26
mini/src/pages/register/index.tsx

@@ -1,7 +1,7 @@
 import { View, Input, Button, Text, Image } from '@tarojs/components'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import Taro from '@tarojs/taro'
-import { authManager } from '../../utils/auth'
+import { useAuth } from '@/utils/auth' // 导入 useAuth Hook
 import './index.css'
 
 export default function Register() {
@@ -9,44 +9,92 @@ export default function Register() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
-  const [loading, setLoading] = useState(false)
+  const { register, isLoading } = useAuth() // 使用 useAuth 获取注册方法和加载状态
+
+  // 设置导航栏标题
+  useEffect(() => {
+    Taro.setNavigationBarTitle({
+      title: '创建账号'
+    })
+  }, [])
 
   const handleRegister = async () => {
-    if (!username || !password) {
+    // 输入验证
+    if (!username.trim()) {
+      Taro.showToast({
+        title: '请输入用户名',
+        icon: 'none',
+        duration: 2000
+      })
+      return
+    }
+
+    if (username.trim().length < 3) {
+      Taro.showToast({
+        title: '用户名至少3个字符',
+        icon: 'none',
+        duration: 2000
+      })
+      return
+    }
+
+    if (!password.trim()) {
+      Taro.showToast({
+        title: '请输入密码',
+        icon: 'none',
+        duration: 2000
+      })
+      return
+    }
+
+    if (password.trim().length < 6) {
       Taro.showToast({
-        title: '请输入用户名和密码',
-        icon: 'none'
+        title: '密码至少6个字符',
+        icon: 'none',
+        duration: 2000
       })
       return
     }
 
-    if (password !== confirmPassword) {
+    if (password.trim() !== confirmPassword.trim()) {
       Taro.showToast({
         title: '两次输入的密码不一致',
-        icon: 'none'
+        icon: 'none',
+        duration: 2000
       })
       return
     }
 
-    if (password.length < 6) {
+    // 邮箱格式验证(如果填写了邮箱)
+    if (email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
       Taro.showToast({
-        title: '密码长度不能少于6位',
-        icon: 'none'
+        title: '请输入有效的邮箱地址',
+        icon: 'none',
+        duration: 2000
       })
       return
     }
 
-    setLoading(true)
     try {
-      const user = await authManager.register({
-        username,
-        password,
-        email: email || undefined
+      // 显示加载动画
+      Taro.showLoading({
+        title: '注册中...',
+        mask: true
+      })
+
+      // 使用 useAuth 提供的 register 方法
+      await register({
+        username: username.trim(),
+        password: password.trim(),
+        email: email.trim() || undefined
       })
       
+      Taro.hideLoading()
+      
       Taro.showToast({
         title: '注册成功',
-        icon: 'success'
+        icon: 'success',
+        duration: 1500
       })
       
       // 注册成功后跳转到首页
@@ -54,12 +102,14 @@ export default function Register() {
         Taro.switchTab({ url: '/pages/index/index' })
       }, 1500)
     } catch (error: any) {
+      Taro.hideLoading()
+      
+      const errorMessage = error.message || '注册失败,请重试'
       Taro.showToast({
-        title: error.message || '注册失败',
-        icon: 'none'
+        title: errorMessage,
+        icon: 'none',
+        duration: 3000
       })
-    } finally {
-      setLoading(false)
     }
   }
 
@@ -138,12 +188,12 @@ export default function Register() {
         </View>
         
         <Button
-          className={`register-button ${loading ? 'loading' : ''}`}
-          loading={loading}
+          className={`register-button ${isLoading ? 'loading' : ''}`}
+          loading={isLoading}
           onClick={handleRegister}
-          disabled={loading}
+          disabled={isLoading || !username || !password || !confirmPassword}
         >
-          {loading ? '注册中...' : '立即注册'}
+          {isLoading ? '注册中...' : '立即注册'}
         </Button>
         
         <View className="register-footer">
@@ -166,4 +216,5 @@ export default function Register() {
       </View>
     </View>
   )
-}
+}
+    

+ 1 - 1
src/server/api/auth/index.ts

@@ -1,5 +1,5 @@
 import { OpenAPIHono } from '@hono/zod-openapi';
-import loginRoute from './login/password';
+import loginRoute from './login/post';
 import logoutRoute from './logout';
 import meRoute from './me/get';
 import registerRoute from './register/create';

+ 0 - 0
src/server/api/auth/login/password.ts → src/server/api/auth/login/post.ts