React

frontend/src/context/AuthContext.tsx

@@ -0,0 +1,72 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { createContext, type ReactNode, useContext, useState } from "react";
+import { useIntervalWhen } from "rooks";
+import { getToken, refreshToken, type TokenResponse } from "src/api/backend";
+import AuthStore from "src/modules/AuthStore";
+
+// Context
+export interface AuthContextType {
+	authenticated: boolean;
+	login: (username: string, password: string) => Promise<void>;
+	logout: () => void;
+	token?: string;
+}
+
+const initalValue = null;
+const AuthContext = createContext<AuthContextType | null>(initalValue);
+
+// Provider
+interface Props {
+	children?: ReactNode;
+	tokenRefreshInterval?: number;
+}
+function AuthProvider({ children, tokenRefreshInterval = 5 * 60 * 1000 }: Props) {
+	const queryClient = useQueryClient();
+	const [authenticated, setAuthenticated] = useState(AuthStore.hasActiveToken());
+
+	const handleTokenUpdate = (response: TokenResponse) => {
+		AuthStore.set(response);
+		setAuthenticated(true);
+	};
+
+	const login = async (identity: string, secret: string) => {
+		const response = await getToken({ payload: { identity, secret } });
+		handleTokenUpdate(response);
+	};
+
+	const logout = () => {
+		AuthStore.clear();
+		setAuthenticated(false);
+		queryClient.clear();
+	};
+
+	const refresh = async () => {
+		const response = await refreshToken();
+		handleTokenUpdate(response);
+	};
+
+	useIntervalWhen(
+		() => {
+			if (authenticated) {
+				refresh();
+			}
+		},
+		tokenRefreshInterval,
+		true,
+	);
+
+	const value = { authenticated, login, logout };
+
+	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+function useAuthState() {
+	const context = useContext(AuthContext);
+	if (!context) {
+		throw new Error("useAuthState must be used within a AuthProvider");
+	}
+	return context;
+}
+
+export { AuthProvider, useAuthState };
+export default AuthContext;

frontend/src/context/LocaleContext.tsx

@@ -0,0 +1,38 @@
+import { createContext, type ReactNode, useContext, useState } from "react";
+import { getLocale } from "src/locale";
+
+// Context
+export interface LocaleContextType {
+	setLocale: (locale: string) => void;
+	locale?: string;
+}
+
+const initalValue = null;
+const LocaleContext = createContext<LocaleContextType | null>(initalValue);
+
+// Provider
+interface Props {
+	children?: ReactNode;
+}
+function LocaleProvider({ children }: Props) {
+	const [locale, setLocaleValue] = useState(getLocale());
+
+	const setLocale = async (locale: string) => {
+		setLocaleValue(locale);
+	};
+
+	const value = { locale, setLocale };
+
+	return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>;
+}
+
+function useLocaleState() {
+	const context = useContext(LocaleContext);
+	if (!context) {
+		throw new Error("useLocaleState must be used within a LocaleProvider");
+	}
+	return context;
+}
+
+export { LocaleProvider, useLocaleState };
+export default LocaleContext;

frontend/src/context/ThemeContext.tsx

@@ -0,0 +1,68 @@
+import type React from "react";
+import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
+
+const StorageKey = "tabler-theme";
+export const Light = "light";
+export const Dark = "dark";
+
+// Define theme types
+export type Theme = "light" | "dark";
+
+interface ThemeContextType {
+	theme: Theme;
+	toggleTheme: () => void;
+	setTheme: (theme: Theme) => void;
+	getTheme: () => Theme;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+	children: ReactNode;
+}
+
+const getBrowserDefault = (): Theme => {
+	if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+		return Dark;
+	}
+	return Light;
+};
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+	const [theme, setThemeState] = useState<Theme>(() => {
+		// Try to read theme from localStorage or use 'light' as default
+		if (typeof window !== "undefined") {
+			const stored = localStorage.getItem(StorageKey) as Theme | null;
+			return stored || getBrowserDefault();
+		}
+		return getBrowserDefault();
+	});
+
+	useEffect(() => {
+		document.body.dataset.theme = theme;
+		localStorage.setItem(StorageKey, theme);
+	}, [theme]);
+
+	const toggleTheme = () => {
+		setThemeState((prev) => (prev === Light ? Dark : Light));
+	};
+
+	const setTheme = (newTheme: Theme) => {
+		setThemeState(newTheme);
+	};
+
+	const getTheme = () => {
+		return theme;
+	}
+
+	document.documentElement.setAttribute("data-bs-theme", theme);
+	return <ThemeContext.Provider value={{ theme, toggleTheme, setTheme, getTheme }}>{children}</ThemeContext.Provider>;
+};
+
+export function useTheme(): ThemeContextType {
+	const context = useContext(ThemeContext);
+	if (!context) {
+		throw new Error("useTheme must be used within a ThemeProvider");
+	}
+	return context;
+}

frontend/src/context/index.ts

@@ -0,0 +1,3 @@
+export * from "./AuthContext";
+export * from "./LocaleContext";
+export * from "./ThemeContext";