Update pages/Login.tsx

pages/Login.tsx

@@ -1,6 +1,6 @@
 
 import React, { useState } from 'react';
-import { GraduationCap, Lock, User as UserIcon, AlertCircle } from 'lucide-react';
+import { GraduationCap, Lock, User as UserIcon, AlertCircle, ArrowRight } from 'lucide-react';
 import { User, UserRole } from '../types';
 import { api } from '../services/api';
 
@@ -9,46 +9,94 @@ interface LoginProps {
 }
 
 export const Login: React.FC<LoginProps> = ({ onLogin }) => {
-  const [username, setUsername] = useState('admin');
-  const [password, setPassword] = useState('admin');
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [role, setRole] = useState<UserRole>(UserRole.ADMIN); // Default to Admin for easy testing
+  
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const [successMsg, setSuccessMsg] = useState('');
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
+    setSuccessMsg('');
     setLoading(true);
 
     try {
-      const user = await api.auth.login(username, password);
-      onLogin(user);
-    } catch (err) {
-      setError('用户名或密码错误。尝试 admin/admin');
-    } finally {
+      if (isRegistering) {
+        // Register Logic
+        await api.auth.register({ username, password, role });
+        setSuccessMsg('注册成功！正在自动登录...');
+        // Auto login after register
+        setTimeout(async () => {
+          const user = await api.auth.login(username, password);
+          onLogin(user);
+        }, 1500);
+      } else {
+        // Login Logic
+        const user = await api.auth.login(username, password);
+        onLogin(user);
+      }
+    } catch (err: any) {
+      console.error(err);
+      if (isRegistering) {
+        setError('注册失败: 用户名可能已存在');
+      } else {
+        setError('用户名或密码错误');
+      }
       setLoading(false);
     }
   };
 
   return (
     <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
-      <div className="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden">
-        <div className="bg-blue-600 p-8 text-center">
-          <div className="inline-flex p-3 bg-white/20 rounded-full mb-4 backdrop-blur-sm">
-            <GraduationCap className="h-10 w-10 text-white" />
+      <div className="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300">
+        <div className="bg-blue-600 p-8 text-center relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700 opacity-90"></div>
+          <div className="relative z-10">
+            <div className="inline-flex p-3 bg-white/20 rounded-full mb-4 backdrop-blur-sm shadow-inner">
+              <GraduationCap className="h-10 w-10 text-white" />
+            </div>
+            <h2 className="text-3xl font-bold text-white mb-2">智慧校园</h2>
+            <p className="text-blue-100">学校综合教务管理系统</p>
           </div>
-          <h2 className="text-3xl font-bold text-white mb-2">智慧校园</h2>
-          <p className="text-blue-100">学校综合教务管理系统</p>
         </div>
 
         <div className="p-8">
-          <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="mb-6 flex justify-center">
+             <div className="bg-gray-100 p-1 rounded-lg flex text-sm font-medium">
+                <button 
+                  onClick={() => { setIsRegistering(false); setError(''); }}
+                  className={`px-6 py-2 rounded-md transition-all ${!isRegistering ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
+                >
+                  登录
+                </button>
+                <button 
+                  onClick={() => { setIsRegistering(true); setError(''); }}
+                  className={`px-6 py-2 rounded-md transition-all ${isRegistering ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
+                >
+                  注册新账号
+                </button>
+             </div>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-5">
             {error && (
-              <div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm flex items-center">
-                <AlertCircle size={16} className="mr-2" />
+              <div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm flex items-center animate-in fade-in slide-in-from-top-2">
+                <AlertCircle size={16} className="mr-2 flex-shrink-0" />
                 {error}
               </div>
             )}
             
+            {successMsg && (
+              <div className="bg-green-50 text-green-600 p-3 rounded-lg text-sm flex items-center animate-in fade-in slide-in-from-top-2">
+                <div className="mr-2 h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
+                {successMsg}
+              </div>
+            )}
+            
             <div className="space-y-2">
               <label className="text-sm font-medium text-gray-700">用户名</label>
               <div className="relative">
@@ -60,7 +108,7 @@ export const Login: React.FC<LoginProps> = ({ onLogin }) => {
                   required
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
-                  className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                  className="block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-colors bg-gray-50 focus:bg-white"
                   placeholder="请输入用户名"
                 />
               </div>
@@ -77,25 +125,44 @@ export const Login: React.FC<LoginProps> = ({ onLogin }) => {
                   required
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                  className="block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-colors bg-gray-50 focus:bg-white"
                   placeholder="请输入密码"
                 />
               </div>
             </div>
 
+            {isRegistering && (
+              <div className="space-y-2 animate-in fade-in slide-in-from-top-2">
+                <label className="text-sm font-medium text-gray-700">选择角色</label>
+                <select
+                  value={role}
+                  onChange={(e) => setRole(e.target.value as UserRole)}
+                  className="block w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition-colors bg-white"
+                >
+                  <option value={UserRole.ADMIN}>管理员 (拥有所有权限)</option>
+                  <option value={UserRole.TEACHER}>教师</option>
+                  <option value={UserRole.STUDENT}>学生</option>
+                </select>
+                <p className="text-xs text-gray-500 mt-1">* 仅用于演示，实际生产环境应禁止直接注册管理员</p>
+              </div>
+            )}
+
             <button
               type="submit"
               disabled={loading}
-              className={`w-full flex justify-center py-3 px-4 border border-transparent rounded-lg 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 transition-all ${loading ? 'opacity-70 cursor-not-allowed' : ''}`}
+              className={`w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg shadow-blue-200 text-sm font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all transform hover:scale-[1.02] active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : ''}`}
             >
-              {loading ? '登录中...' : '登 录'}
+              {loading ? '处理中...' : (isRegistering ? '立即注册' : '登 录')}
+              {!loading && <ArrowRight size={16} className="ml-2" />}
             </button>
 
-            <div className="text-center text-xs text-gray-400 mt-4">
-              <p>演示账号:</p>
-              <p>管理员: admin / admin</p>
-              <p>教师: teacher / teacher</p>
-            </div>
+            {!isRegistering && (
+               <div className="text-center text-xs text-gray-400 mt-4 border-t border-gray-100 pt-4">
+                 <p className="mb-1">演示账号 (如果数据库已初始化):</p>
+                 <span className="bg-gray-100 px-2 py-1 rounded mr-2">admin / admin</span>
+                 <span className="bg-gray-100 px-2 py-1 rounded">teacher / teacher</span>
+               </div>
+            )}
           </form>
         </div>
       </div>