|
|
@@ -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>
|