Updated login page

This commit is contained in:
MarcUs7i 2025-04-28 14:10:40 +02:00
parent bb0405b3f2
commit 4071153754

View file

@ -2,29 +2,32 @@ import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Brain } from 'lucide-react'; import { Brain } from 'lucide-react';
import { CodeInput } from '../components/CodeInput'; import { CodeInput } from '../components/CodeInput';
import { Button } from '../components/Button';
import { login, adminLogin } from '../lib/api'; import { login, adminLogin } from '../lib/api';
import { useAuthStore } from '../store/auth'; import { useAuthStore } from '../store/auth';
export const Login: React.FC = () => { export const Login: React.FC = () => {
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [isAdmin, setIsAdmin] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const setToken = useAuthStore(state => state.setToken); const setToken = useAuthStore(state => state.setToken);
const handleLogin = async (code: string) => { const handleLogin = async (code: string) => {
try { try {
setError(null); setError(null);
const response = isAdmin const response = await login(code); // user login
? await adminLogin(code) console.info(response);
: await login(code);
if (response.success) { if (response.success) {
setToken(response.accessToken, isAdmin); setToken(response.accessToken, false);
navigate(isAdmin ? '/admin' : '/dashboard'); navigate('/dashboard');
} else {
const adminResponse = await adminLogin(code); // admin login
if (adminResponse.success) {
setToken(adminResponse.accessToken, true);
navigate('/admin');
} else { } else {
setError(response.errorMessage || 'Login failed'); setError(response.errorMessage || 'Login failed');
} }
}
} catch (err) { } catch (err) {
setError('An error occurred. Please try again.'); setError('An error occurred. Please try again.');
} }
@ -32,14 +35,14 @@ export const Login: React.FC = () => {
return ( return (
<div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-4"> <div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-4">
<div className="w-full max-w-md"> <div className="w-full max-w-md bg-gray-800 rounded-lg p-8 shadow-xl">
<div className="text-center mb-8"> <div className="text-center mb-8">
<Brain className="w-16 h-16 text-blue-500 mx-auto mb-4" /> <Brain className="w-16 h-16 text-blue-500 mx-auto mb-4" />
<h1 className="text-4xl font-bold text-white mb-2">QuizConnect</h1> <h1 className="text-4xl font-bold text-white mb-2">QuizConnect</h1>
<p className="text-gray-400">Enter your {isAdmin ? 'admin' : 'user'} code to continue</p> <p className="text-gray-400">Enter your user code to continue</p>
</div> </div>
<div className="bg-gray-800 rounded-lg p-8 shadow-xl"> <div className="flex flex-col items-center">
<div className="flex justify-center mb-8"> <div className="flex justify-center mb-8">
<CodeInput onComplete={handleLogin} /> <CodeInput onComplete={handleLogin} />
</div> </div>
@ -49,16 +52,6 @@ export const Login: React.FC = () => {
{error} {error}
</div> </div>
)} )}
<div className="flex justify-center">
<Button
variant="secondary"
onClick={() => setIsAdmin(!isAdmin)}
className="mt-4"
>
Switch to {isAdmin ? 'User' : 'Admin'} Login
</Button>
</div>
</div> </div>
</div> </div>
</div> </div>