{userData?.dashboardMessage}
+ {userData?.steamId && ( +
+
+ )}
+ {steamData.hasSteamId && (
+
@@ -93,4 +146,4 @@ const Dashboard = () => {
);
};
-export default Dashboard;
\ No newline at end of file
+export default Dashboard;
diff --git a/src/pages/GameLibrary.jsx b/src/pages/GameLibrary.jsx
new file mode 100644
index 0000000..862add4
--- /dev/null
+++ b/src/pages/GameLibrary.jsx
@@ -0,0 +1,198 @@
+import {useCallback, useEffect, useState} from 'react';
+import {useNavigate, useSearchParams} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import useLibrarySync from '../hooks/useLibrarySync.js';
+import SyncStatusBadge from '../components/SyncStatusBadge.jsx';
+
+const PAGE_SIZES = [20, 40, 80];
+const DEFAULT_SIZE = 20;
+
+const iconUrl = (appid, hash) =>
+ hash
+ ? `https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/${appid}/${hash}.jpg`
+ : null;
+
+const formatPlaytime = (minutes) => {
+ if (!minutes || minutes <= 0) return '0h';
+ const hours = minutes / 60;
+ return hours >= 10 ? `${Math.round(hours)}h` : `${hours.toFixed(1)}h`;
+};
+
+export default function GameLibrary() {
+ const {t} = useTranslation();
+ const navigate = useNavigate();
+ const [searchParams, setSearchParams] = useSearchParams();
+
+ const page = Math.max(0, parseInt(searchParams.get('page') ?? '0', 10) || 0);
+ const sizeParam = parseInt(searchParams.get('size') ?? String(DEFAULT_SIZE), 10);
+ const size = PAGE_SIZES.includes(sizeParam) ? sizeParam : DEFAULT_SIZE;
+
+ const [data, setData] = useState({content: [], page: 0, size, totalElements: 0, totalPages: 0});
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const load = useCallback(async () => {
+ const token = localStorage.getItem('tbp_jwt');
+ if (!token) {
+ navigate('/login');
+ return;
+ }
+ setIsLoading(true);
+ setError(null);
+ try {
+ const url = `${import.meta.env.VITE_CORE_API_URL}/api/library/games?page=${page}&size=${size}`;
+ const response = await fetch(url, {
+ headers: {
+ 'Authorization': `Bearer ${token}`,
+ 'Content-Type': 'application/json',
+ },
+ });
+
+ if (response.status === 401) {
+ localStorage.removeItem('tbp_jwt');
+ navigate('/login');
+ return;
+ }
+
+ if (!response.ok) {
+ setError(t('LIBRARY.ERROR_LOAD'));
+ return;
+ }
+
+ const json = await response.json();
+ setData(json);
+ } catch (err) {
+ console.error('Library load error:', err);
+ setError(t('INFO.ERROR.NETWORK_FAILURE'));
+ } finally {
+ setIsLoading(false);
+ }
+ }, [navigate, page, size, t]);
+
+ useEffect(() => {
+ load();
+ }, [load]);
+
+ const expectInitialSync = !isLoading && !error && data.totalElements === 0;
+ const sync = useLibrarySync({
+ enabled: true,
+ expectInitialSync,
+ onComplete: load,
+ });
+
+ const updateParams = (next) => {
+ const params = new URLSearchParams(searchParams);
+ Object.entries(next).forEach(([k, v]) => params.set(k, String(v)));
+ setSearchParams(params);
+ };
+
+ const onSizeChange = (event) => {
+ updateParams({size: event.target.value, page: 0});
+ };
+
+ const goToPage = (target) => {
+ if (target < 0 || target >= data.totalPages) return;
+ updateParams({page: target});
+ };
+
+ return (
+
Tile 1 (Coming soon)
-
- Tile 2 (Coming soon)
-
-
- Settings (Coming soon)
-
+ {!steamData.hasSteamId && (
+
+ Tile 2 (Coming soon)
+
+ )}
+
+
+
+ {t('SETTINGS.TITLE')}
+
+
+
+ );
+}
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index 66a6829..3179ee9 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -1,6 +1,6 @@
import {useTranslation} from 'react-i18next';
import {useState} from 'react';
-import {useNavigate} from 'react-router-dom';
+import {Link, useNavigate} from 'react-router-dom';
export default function LoginPage() {
const {t} = useTranslation();
@@ -131,6 +131,13 @@ export default function LoginPage() {
)}
+
+
+
+
+
+ {isLoading && (
+
+
+ + {t('LIBRARY.TITLE')} +
+
+
+
+
+
+ {t('LIBRARY.LOADING')}
+
+ )}
+
+ {error && (
+ {error}
+ )}
+
+ {!isLoading && !error && data.content.length === 0 && (
+
+ {sync.isRunning ? t('LIBRARY.SYNCING_FIRST_TIME') : t('LIBRARY.EMPTY')}
+
+ )}
+
+ {!isLoading && !error && data.content.length > 0 && (
+ -
+ {data.content.map((g) => {
+ const icon = iconUrl(g.appid, g.imgIconUrl);
+ return (
+
-
+ {icon ? (
+
{ e.currentTarget.style.visibility = 'hidden'; }} + /> + ) : ( + + )} + + {g.name ?? `App ${g.appid}`} + + + {formatPlaytime(g.playtimeMinutes)} + +
+ );
+ })}
+
+
+
+ {t('LIBRARY.PAGE_OF', {current: data.page + 1, total: data.totalPages})}
+ {' · '}
+ {data.totalElements} {t('LIBRARY.GAMES')}
+
+
+
+ )}
+ + {t('LOGIN.NO_ACCOUNT')}{' '} + + {t('REGISTRATION.TITLE')} + +
+ ); diff --git a/src/pages/RegistrationPage.jsx b/src/pages/RegistrationPage.jsx new file mode 100644 index 0000000..611f738 --- /dev/null +++ b/src/pages/RegistrationPage.jsx @@ -0,0 +1,185 @@ +import {useState} from 'react'; +import {Link, useNavigate} from 'react-router-dom'; +import {useTranslation} from 'react-i18next'; +import {useForm} from 'react-hook-form'; +import {zodResolver} from '@hookform/resolvers/zod'; + +import {registrationSchema} from '../utils/validation.js'; + +const BACKEND_ERROR_KEY = { + EMAIL_ALREADY_IN_USE: 'REGISTRATION.ERROR_EMAIL_IN_USE', + INVALID_INVITATION_CODE: 'REGISTRATION.ERROR_INVALID_INVITE_CODE', + STEAM_ID_ALREADY_IN_USE: 'REGISTRATION.ERROR_STEAM_ID_IN_USE', +}; + +const inputClass = + 'w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:outline-none'; +const inputErrorClass = + 'w-full px-4 py-2 border border-red-500 dark:border-red-500 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-red-500 focus:outline-none'; + +export default function RegistrationPage() { + const {t} = useTranslation(); + const navigate = useNavigate(); + const [feedback, setFeedback] = useState({message: '', isError: false}); + + const { + register, + handleSubmit, + formState: {errors, isSubmitting}, + } = useForm({ + resolver: zodResolver(registrationSchema), + defaultValues: { + email: '', + password: '', + passwordConfirmation: '', + inviteCode: '', + steamId: '', + }, + }); + + const onSubmit = async (values) => { + setFeedback({message: '', isError: false}); + try { + const apiUrl = `${import.meta.env.VITE_API_URL}/api/registration/new`; + const response = await fetch(apiUrl, { + method: 'POST', + headers: {'Content-Type': 'application/json'}, + body: JSON.stringify({ + email: values.email, + password: values.password, + inviteCode: values.inviteCode, + steamId: values.steamId, + }), + }); + + if (response.ok) { + setFeedback({message: t('REGISTRATION.SUCCESS'), isError: false}); + setTimeout(() => navigate('/login'), 800); + return; + } + + const data = await response.json().catch(() => ({})); + const mappedKey = BACKEND_ERROR_KEY[data.code]; + setFeedback({ + message: mappedKey ? t(mappedKey) : data.message || t('REGISTRATION.ERROR_GENERIC'), + isError: true, + }); + } catch (err) { + console.error('Registration API error:', err); + setFeedback({message: t('INFO.ERROR.NETWORK_FAILURE'), isError: true}); + } + }; + + const renderError = (field) => + errors[field] && ( +{t(errors[field].message)}
+ ); + + return ( +
+
+ );
+}
diff --git a/src/pages/SettingsPage.jsx b/src/pages/SettingsPage.jsx
new file mode 100644
index 0000000..5c9d74f
--- /dev/null
+++ b/src/pages/SettingsPage.jsx
@@ -0,0 +1,334 @@
+import {useEffect, useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {useForm} from 'react-hook-form';
+import {zodResolver} from '@hookform/resolvers/zod';
+
+import {settingsSchema} from '../utils/validation.js';
+import {usePreferences} from '../context/PreferencesContext.jsx';
+
+const BACKEND_ERROR_KEY = {
+ STEAM_ID_ALREADY_IN_USE: 'REGISTRATION.ERROR_STEAM_ID_IN_USE',
+};
+
+const SUPPORTED_LANGUAGES = ['en', 'de'];
+
+const inputClass =
+ 'w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:outline-none';
+const inputErrorClass =
+ 'w-full px-4 py-2 border border-red-500 dark:border-red-500 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-red-500 focus:outline-none';
+const readOnlyClass =
+ 'w-full px-4 py-2 border border-slate-200 dark:border-slate-700 rounded-lg bg-slate-100 dark:bg-slate-900 text-slate-500 dark:text-slate-400 cursor-not-allowed';
+
+const formatDate = (value, locale) => {
+ if (!value) return '—';
+ try {
+ return new Date(value).toLocaleString(locale);
+ } catch {
+ return value;
+ }
+};
+
+export default function SettingsPage() {
+ const {t, i18n} = useTranslation();
+ const navigate = useNavigate();
+ const {isDarkMode, setDarkMode, setLanguage} = usePreferences();
+
+ const [profile, setProfile] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [loadError, setLoadError] = useState(null);
+ const [feedback, setFeedback] = useState({message: '', isError: false});
+
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: {errors, isSubmitting},
+ } = useForm({
+ resolver: zodResolver(settingsSchema),
+ defaultValues: {useDarkTheme: true, language: 'en', steamId: ''},
+ });
+
+ useEffect(() => {
+ const token = localStorage.getItem('tbp_jwt');
+ if (!token) {
+ navigate('/login');
+ return;
+ }
+
+ const load = async () => {
+ try {
+ const response = await fetch(`${import.meta.env.VITE_API_URL}/api/users/me?v=1`, {
+ method: 'GET',
+ headers: {
+ 'Authorization': `Bearer ${token}`,
+ 'Content-Type': 'application/json',
+ },
+ });
+
+ if (response.status === 401) {
+ localStorage.removeItem('tbp_jwt');
+ navigate('/login');
+ return;
+ }
+
+ if (!response.ok) {
+ setLoadError(t('INFO.ERROR.LOAD_PROFILE'));
+ return;
+ }
+
+ const data = await response.json();
+ setProfile(data);
+ reset({
+ useDarkTheme: !!data.settings?.useDarkTheme,
+ language: data.settings?.language || 'en',
+ steamId: data.steamId ? String(data.steamId) : '',
+ });
+ } catch (err) {
+ console.error('Settings load error:', err);
+ setLoadError(t('INFO.ERROR.NETWORK_FAILURE'));
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ load();
+ }, [navigate, reset, t]);
+
+ const persistSettings = async (payload) => {
+ const token = localStorage.getItem('tbp_jwt');
+ if (!token) {
+ navigate('/login');
+ return {ok: false};
+ }
+
+ try {
+ const response = await fetch(`${import.meta.env.VITE_API_URL}/api/users/settings`, {
+ method: 'PUT',
+ headers: {
+ 'Authorization': `Bearer ${token}`,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(payload),
+ });
+
+ if (response.status === 401) {
+ localStorage.removeItem('tbp_jwt');
+ navigate('/login');
+ return {ok: false};
+ }
+
+ if (!response.ok) {
+ const data = await response.json().catch(() => ({}));
+ const mappedKey = BACKEND_ERROR_KEY[data.code];
+ setFeedback({
+ message: mappedKey ? t(mappedKey) : data.message || t('SETTINGS.ERROR_SAVE'),
+ isError: true,
+ });
+ return {ok: false};
+ }
+
+ setFeedback({message: t('SETTINGS.SAVED'), isError: false});
+ return {ok: true};
+ } catch (err) {
+ console.error('Settings save error:', err);
+ setFeedback({message: t('INFO.ERROR.NETWORK_FAILURE'), isError: true});
+ return {ok: false};
+ }
+ };
+
+ const handleDarkThemeToggle = async () => {
+ const next = !isDarkMode;
+ setDarkMode(next); // apply on the fly
+ await persistSettings({
+ useDarkTheme: next,
+ language: i18n.language,
+ steamId: profile?.steamId ?? 0,
+ });
+ };
+
+ const handleLanguageChange = async (event) => {
+ const next = event.target.value;
+ setLanguage(next); // apply on the fly
+ await persistSettings({
+ useDarkTheme: isDarkMode,
+ language: next,
+ steamId: profile?.steamId ?? 0,
+ });
+ };
+
+ const onSubmitSteamId = async (values) => {
+ const result = await persistSettings({
+ useDarkTheme: isDarkMode,
+ language: i18n.language,
+ steamId: values.steamId,
+ });
+ if (result.ok) {
+ setProfile((p) => (p ? {...p, steamId: values.steamId} : p));
+ }
+ };
+
+ const renderError = (field) =>
+ errors[field] && (
+
+
+ + {t('REGISTRATION.TITLE')} +
+ + + + {feedback.message && ( +
+ {feedback.message}
+
+ )}
+
+ + {t('REGISTRATION.HAVE_ACCOUNT')}{' '} + + {t('MAIN.LOGIN')} + +
+{t(errors[field].message)}
+ ); + + if (isLoading) { + return ( +
+ {t('SETTINGS.LOADING')}
+
+ );
+ }
+
+ if (loadError) {
+ return (
+
+ {loadError}
+
+ );
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/utils/validation.js b/src/utils/validation.js
new file mode 100644
index 0000000..46784d9
--- /dev/null
+++ b/src/utils/validation.js
@@ -0,0 +1,44 @@
+import {z} from 'zod';
+
+// Error messages are i18n keys — translate them in components via t(error.message)
+
+const emailField = z
+ .string()
+ .min(1, 'VALIDATION.EMAIL_REQUIRED')
+ .email('VALIDATION.EMAIL_INVALID');
+
+const passwordField = z
+ .string()
+ .min(8, 'VALIDATION.PASSWORD_TOO_SHORT');
+
+const inviteCodeField = z
+ .string()
+ .min(1, 'VALIDATION.INVITE_CODE_REQUIRED');
+
+// Backend stores steamId as a primitive long; Steam IDs are positive 64-bit integers.
+const steamIdField = z
+ .union([z.string(), z.number()])
+ .transform((v) => (typeof v === 'string' ? v.trim() : String(v)))
+ .refine((v) => v.length > 0, {message: 'VALIDATION.STEAM_ID_REQUIRED'})
+ .refine((v) => /^\d+$/.test(v), {message: 'VALIDATION.STEAM_ID_INVALID'})
+ .transform((v) => Number(v))
+ .refine((n) => Number.isFinite(n) && n > 0, {message: 'VALIDATION.STEAM_ID_INVALID'});
+
+export const registrationSchema = z
+ .object({
+ email: emailField,
+ password: passwordField,
+ passwordConfirmation: z.string().min(1, 'VALIDATION.PASSWORD_CONFIRMATION_REQUIRED'),
+ inviteCode: inviteCodeField,
+ steamId: steamIdField,
+ })
+ .refine((d) => d.password === d.passwordConfirmation, {
+ path: ['passwordConfirmation'],
+ message: 'VALIDATION.PASSWORD_MISMATCH',
+ });
+
+export const settingsSchema = z.object({
+ useDarkTheme: z.boolean(),
+ language: z.enum(['en', 'de'], {message: 'VALIDATION.LANGUAGE_INVALID'}),
+ steamId: steamIdField,
+});
+
+
+
+
+
+ {/* Preferences — live */}
+
+
+
+ {/* Steam ID — explicit save */}
+
+
+
+ {feedback.message && (
+
+ + {t('SETTINGS.TITLE')} +
+ + {/* Read-only account info */} ++ {t('SETTINGS.ACCOUNT')} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {t('SETTINGS.PREFERENCES')} +
+ +
+
+
+
+
+
+
+
+
+ + {t('SETTINGS.STEAM')} +
+ +
+ {feedback.message}
+
+ )}
+