mirror of
https://github.com/Kizuren/QuizConnect.git
synced 2025-12-21 21:16:14 +01:00
Updated login page
This commit is contained in:
parent
bb0405b3f2
commit
4071153754
1 changed files with 14 additions and 21 deletions
|
|
@ -2,28 +2,31 @@ 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 {
|
} else {
|
||||||
setError(response.errorMessage || 'Login failed');
|
const adminResponse = await adminLogin(code); // admin login
|
||||||
|
if (adminResponse.success) {
|
||||||
|
setToken(adminResponse.accessToken, true);
|
||||||
|
navigate('/admin');
|
||||||
|
} else {
|
||||||
|
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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue