Public Access
90 lines
4.3 KiB
React
90 lines
4.3 KiB
React
import {Link, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
|
|
import {useTranslation} from 'react-i18next';
|
|
import {useEffect, useState} from 'react';
|
|
|
|
import LandingPage from './pages/LandingPage';
|
|
import LoginPage from './pages/LoginPage';
|
|
import ImprintPage from './pages/ImprintPage';
|
|
import Dashboard from "./pages/Dashboard.jsx";
|
|
import RegistrationPage from './pages/RegistrationPage.jsx';
|
|
import SettingsPage from './pages/SettingsPage.jsx';
|
|
import {usePreferences} from './context/PreferencesContext.jsx';
|
|
|
|
function App() {
|
|
const {t, i18n} = useTranslation();
|
|
const {isDarkMode, setDarkMode, setLanguage} = usePreferences();
|
|
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
|
|
|
// Hooks for routing
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
const token = localStorage.getItem('tbp_jwt');
|
|
setIsAuthenticated(!!token); // Converts the token string (or null) to a boolean
|
|
}, [location]);
|
|
|
|
const toggleLanguage = () => {
|
|
setLanguage(i18n.language === 'de' ? 'en' : 'de');
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem('tbp_jwt');
|
|
setIsAuthenticated(false);
|
|
navigate('/login');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 transition-colors duration-300 font-sans">
|
|
<header className="p-4 flex justify-between items-center border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-50">
|
|
<Link to="/" className="font-black text-blue-600 dark:text-blue-500 text-2xl flex items-center tracking-tight">
|
|
<i className="mdi mdi-controller mr-2 text-3xl"></i> Game Log
|
|
</Link>
|
|
|
|
<div className="flex gap-5 items-center">
|
|
<button onClick={toggleLanguage} className="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
|
|
{i18n.language.toUpperCase()}
|
|
</button>
|
|
<button onClick={() => {
|
|
setDarkMode(!isDarkMode);
|
|
}} className="text-xl text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
|
|
<i className={isDarkMode ? "mdi mdi-weather-sunny" : "mdi mdi-weather-night"}></i>
|
|
</button>
|
|
{isAuthenticated ? (
|
|
<>
|
|
<Link to="/settings" className="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
|
|
<i className="mdi mdi-cog text-xl"></i>
|
|
</Link>
|
|
<button onClick={handleLogout} className="bg-red-600 hover:bg-red-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-red-500/20">
|
|
{t('MAIN.LOGOUT')}
|
|
</button>
|
|
</>
|
|
) : (
|
|
<Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-blue-500/20">
|
|
{t('MAIN.LOGIN')}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</header>
|
|
|
|
<main className="grow flex flex-col">
|
|
<Routes>
|
|
<Route path="/" element={<LandingPage/>}/>
|
|
<Route path="/login" element={<LoginPage/>}/>
|
|
<Route path="/register" element={<RegistrationPage/>}/>
|
|
<Route path="/dashboard" element={<Dashboard/>}/>
|
|
<Route path="/settings" element={<SettingsPage/>}/>
|
|
<Route path="/impressum" element={<ImprintPage/>}/>
|
|
</Routes>
|
|
</main>
|
|
|
|
<footer className="p-6 text-center border-t border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 text-sm bg-white dark:bg-slate-900">
|
|
<Link to="/impressum" className="hover:text-blue-500 font-semibold transition-colors">
|
|
{t('IMPRINT.TITLE')}
|
|
</Link>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App; |