Added registration and settings page

src/App.jsx

@@ -6,10 +6,13 @@ 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, setIsDarkMode] = useState(true);
+    const {isDarkMode, setDarkMode, setLanguage} = usePreferences();
     const [isAuthenticated, setIsAuthenticated] = useState(false);
 
     // Hooks for routing
@@ -21,21 +24,8 @@ function App() {
         setIsAuthenticated(!!token); // Converts the token string (or null) to a boolean
     }, [location]);
 
-    // Sync React state with the HTML class required by Tailwind CSS
-    useEffect(() => {
-        if (isDarkMode) {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark');
-        }
-    }, [isDarkMode]);
-
     const toggleLanguage = () => {
-        if (i18n.language === 'de') {
-            i18n.changeLanguage('en').then(_ => console.log("Changed language to 'en'"));
-        } else {
-            i18n.changeLanguage('de').then(_ => console.log("Changed language to 'de'"));
-        }
+        setLanguage(i18n.language === 'de' ? 'en' : 'de');
     };
 
     const handleLogout = () => {
@@ -56,14 +46,19 @@ function App() {
                         {i18n.language.toUpperCase()}
                     </button>
                     <button onClick={() => {
-                        setIsDarkMode(!isDarkMode);
+                        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 ? (
-                        <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="/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')}
@@ -76,7 +71,9 @@ function App() {
                 <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>