2
0
فهرست منبع

✨ feat(auth): 优化认证流程,实现智能登录/注册一体化

- 移除登录/注册切换模式,实现无缝认证体验
- 添加智能认证逻辑:先尝试默认密码登录,失败则自动注册新用户
- 简化UI界面,移除密码输入框和切换按钮
- 更新文案提示,引导用户输入用户名即可开始使用
- 统一加载状态和错误提示文案
- 优化用户体验,减少操作步骤和认知负担
yourname 6 ماه پیش
والد
کامیت
7ee349a8bc
1فایلهای تغییر یافته به همراه23 افزوده شده و 88 حذف شده
  1. 23 88
      src/client/mobile/pages/AuthPage.tsx

+ 23 - 88
src/client/mobile/pages/AuthPage.tsx

@@ -1,16 +1,12 @@
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { EyeIcon, EyeSlashIcon, UserIcon, LockClosedIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { UserIcon } from '@heroicons/react/24/outline';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '@/client/mobile/hooks/AuthProvider';
 import { authClient } from '@/client/api';
 
-type AuthMode = 'login' | 'register';
-
 const AuthPage: React.FC = () => {
-  const [authMode, setAuthMode] = useState<AuthMode>('login');
   const { register, handleSubmit, formState: { errors } } = useForm();
-  const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const { login } = useAuth();
   const navigate = useNavigate();
@@ -19,12 +15,15 @@ const AuthPage: React.FC = () => {
     try {
       setLoading(true);
       
-      if (authMode === 'login') {
-        // 登录逻辑
-        await login(data.username, data.password);
+      // 首先尝试使用默认密码登录
+      try {
+        await login(data.username, '123456');
         navigate('/');
-      } else {
-        // 简单注册逻辑
+        return; // 登录成功,直接返回
+      } catch (loginError) {
+        console.log('登录失败,尝试注册:', loginError);
+        
+        // 登录失败,尝试简单注册
         const response = await authClient.register.simple.$post({
           json: {
             username: data.username,
@@ -47,27 +46,19 @@ const AuthPage: React.FC = () => {
       }
     } catch (error) {
       console.error('Authentication error:', error);
-      alert((error as Error).message || `${authMode === 'login' ? '登录' : '注册'}失败,请稍后重试`);
+      alert((error as Error).message || '认证失败,请稍后重试');
     } finally {
       setLoading(false);
     }
   };
 
-  const toggleAuthMode = () => {
-    setAuthMode(authMode === 'login' ? 'register' : 'login');
-  };
-
   return (
     <div className="flex justify-center items-center min-h-screen bg-gray-100">
       <div className="w-full max-w-md bg-white rounded-lg shadow-md overflow-hidden">
         <div className="p-6 sm:p-8">
           <div className="text-center mb-8">
-            <h2 className="text-2xl font-bold text-gray-900">
-              {authMode === 'login' ? '网站登录' : '快速注册'}
-            </h2>
-            <p className="mt-2 text-sm text-gray-600">
-              {authMode === 'login' ? '登录您的账号以继续' : '输入用户名即可快速注册'}
-            </p>
+            <h2 className="text-2xl font-bold text-gray-900">欢迎使用</h2>
+            <p className="mt-2 text-sm text-gray-600">输入用户名即可开始使用</p>
           </div>
           
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
@@ -95,51 +86,12 @@ const AuthPage: React.FC = () => {
                 <p className="mt-1 text-sm text-red-600">{errors.username.message?.toString()}</p>
               )}
             </div>
-            
-            {authMode === 'login' && (
-              <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
-                  密码
-                </label>
-                <div className="relative">
-                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                    <LockClosedIcon className="h-5 w-5 text-gray-400" />
-                  </div>
-                  <input
-                    id="password"
-                    type={showPassword ? 'text' : 'password'}
-                    className={`w-full pl-10 pr-10 py-2 border ${errors.password ? 'border-red-300' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent`}
-                    placeholder="请输入密码"
-                    {...register('password', { 
-                      required: '密码不能为空',
-                      minLength: { value: 6, message: '密码至少6个字符' }
-                    })}
-                  />
-                  <button 
-                    type="button"
-                    className="absolute inset-y-0 right-0 pr-3 flex items-center"
-                    onClick={() => setShowPassword(!showPassword)}
-                  >
-                    {showPassword ? (
-                      <EyeSlashIcon className="h-5 w-5 text-gray-400" />
-                    ) : (
-                      <EyeIcon className="h-5 w-5 text-gray-400" />
-                    )}
-                  </button>
-                </div>
-                {errors.password && (
-                  <p className="mt-1 text-sm text-red-600">{errors.password.message?.toString()}</p>
-                )}
-              </div>
-            )}
 
-            {authMode === 'register' && (
-              <div className="bg-blue-50 border border-blue-200 rounded-md p-3">
-                <p className="text-sm text-blue-800">
-                  💡 快速注册:只需输入用户名,系统将自动为您创建账号,默认密码为 <strong>123456</strong>
-                </p>
-              </div>
-            )}
+            <div className="bg-blue-50 border border-blue-200 rounded-md p-3">
+              <p className="text-sm text-blue-800">
+                💡 智能认证:输入用户名后,系统会自动判断是登录还是注册。新用户将自动创建账号,默认密码为 <strong>123456</strong>
+              </p>
+            </div>
             
             <div>
               <button
@@ -147,11 +99,7 @@ const AuthPage: React.FC = () => {
                 disabled={loading}
                 className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
               >
-                {loading ? (
-                  authMode === 'login' ? '登录中...' : '注册中...'
-                ) : (
-                  authMode === 'login' ? '登录' : '快速注册'
-                )}
+                {loading ? '处理中...' : '开始使用'}
               </button>
             </div>
           </form>
@@ -162,27 +110,14 @@ const AuthPage: React.FC = () => {
                 <div className="w-full border-t border-gray-300"></div>
               </div>
               <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-white text-gray-500">
-                  {authMode === 'login' ? '还没有账号?' : '已有账号?'}
-                </span>
+                <span className="px-2 bg-white text-gray-500">便捷体验</span>
               </div>
             </div>
             
-            <div className="mt-4">
-              <button
-                type="button"
-                onClick={toggleAuthMode}
-                className="w-full flex justify-center items-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-              >
-                {authMode === 'login' ? (
-                  <>
-                    快速注册
-                    <ArrowRightIcon className="ml-2 h-4 w-4" />
-                  </>
-                ) : (
-                  '返回登录'
-                )}
-              </button>
+            <div className="mt-4 text-center">
+              <p className="text-sm text-gray-600">
+                无需复杂操作,输入用户名即可快速开始使用
+              </p>
             </div>
           </div>
         </div>