init app of test arena

asf-cloud-server/testarena/frontend/src/pages/Login.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import api from '../api';
+import { Lock, User } from 'lucide-react';
+
+const Login: React.FC = () => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const { login } = useAuth();
+    const navigate = useNavigate();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        try {
+            const response = await api.post('/auth/login', { username, password });
+            const { access_token } = response.data;
+
+            const role = username === 'admin' ? 'admin' : 'user';
+
+            login(access_token, { username, role });
+            navigate('/dashboard');
+        } catch (err) {
+            setError('Invalid credentials');
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-100">
+            <div className="bg-white p-8 rounded-lg shadow-md w-96">
+                <h2 className="text-2xl font-bold mb-6 text-center text-primary">ASF TestArena</h2>
+                {error && <div className="bg-red-100 text-red-700 p-2 rounded mb-4 text-sm">{error}</div>}
+                <form onSubmit={handleSubmit}>
+                    <div className="mb-4">
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
+                        <div className="relative">
+                            <User className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+                            <input
+                                type="text"
+                                className="pl-10 w-full border border-gray-300 rounded-md p-2 focus:ring-accent focus:border-accent outline-none"
+                                value={username}
+                                onChange={(e) => setUsername(e.target.value)}
+                                required
+                            />
+                        </div>
+                    </div>
+                    <div className="mb-6">
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                        <div className="relative">
+                            <Lock className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+                            <input
+                                type="password"
+                                className="pl-10 w-full border border-gray-300 rounded-md p-2 focus:ring-accent focus:border-accent outline-none"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                required
+                            />
+                        </div>
+                    </div>
+                    <button
+                        type="submit"
+                        className="w-full bg-accent text-white py-2 rounded-md hover:bg-blue-600 transition-colors"
+                    >
+                        Login
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default Login;