Meik/Pickup-Config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

aktueller Stand

Browse Source
This commit is contained in:
root
2025-11-09 15:22:33 +01:00
parent 685d50d56a
commit 4fa7217fc3
3 changed files with 100 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/App.js
View File

@@ -101,15 +101,13 @@ function App() {
}, [resetSessionState]);
const bootstrapSession = useCallback(
async (token, { withProgress = false } = {}) => {
async (token, { progress } = {}) => {
if (!token) {
return;
}
setLoading(true);
setError('');
if (withProgress) {
startSyncProgress('Session wird aufgebaut...', 10, true);
}
progress?.update?.('Session wird aufgebaut...', 20);
try {
const response = await fetch('/api/auth/session', {
headers: { Authorization: `Bearer ${token}` }
@@ -123,9 +121,7 @@ function App() {
}
const data = await response.json();
setSession({ token, profile: data.profile, isAdmin: data.isAdmin });
if (withProgress) {
updateSyncProgress('Betriebe werden geprüft...', 45);
}
progress?.update?.('Betriebe werden geprüft...', 45);
setStores(Array.isArray(data.stores) ? data.stores : []);
setAdminSettings(data.isAdmin ? normalizeAdminSettings(data.adminSettings) : null);
@@ -140,35 +136,35 @@ function App() {
throw new Error(`HTTP ${configResponse.status}`);
}
const configData = await configResponse.json();
if (withProgress) {
updateSyncProgress('Konfiguration wird geladen...', 75);
}
progress?.update?.('Konfiguration wird geladen...', 75);
setConfig(Array.isArray(configData) ? configData : []);
if (withProgress) {
updateSyncProgress('Synchronisierung abgeschlossen', 95);
}
progress?.update?.('Synchronisierung abgeschlossen', 95);
} catch (err) {
setError(`Session konnte nicht wiederhergestellt werden: ${err.message}`);
} finally {
setLoading(false);
if (withProgress) {
finishSyncProgress();
}
}
},
[handleUnauthorized, normalizeAdminSettings, startSyncProgress, updateSyncProgress, finishSyncProgress]
[handleUnauthorized, normalizeAdminSettings]
);
useEffect(() => {
try {
const storedToken = localStorage.getItem(TOKEN_STORAGE_KEY);
if (storedToken) {
bootstrapSession(storedToken);
startSyncProgress('Session wird wiederhergestellt...', 5, true);
(async () => {
try {
await bootstrapSession(storedToken, { progress: { update: updateSyncProgress } });
} finally {
finishSyncProgress();
}
})();
}
} catch (err) {
console.warn('Konnte gespeicherten Token nicht lesen:', err);
}
}, [bootstrapSession]);
}, [bootstrapSession, startSyncProgress, updateSyncProgress, finishSyncProgress]);
const authorizedFetch = useCallback(
async (url, options = {}, tokenOverride) => {
@@ -231,6 +227,7 @@ function App() {
setLoading(true);
setError('');
setStatus('');
startSyncProgress('Anmeldung wird geprüft...', 5, true);
try {
const response = await fetch('/api/auth/login', {
@@ -249,12 +246,15 @@ function App() {
} catch (storageError) {
console.warn('Konnte Token nicht speichern:', storageError);
}
await bootstrapSession(data.token, { withProgress: true });
updateSyncProgress('Zugang bestätigt. Session wird aufgebaut...', 25);
await bootstrapSession(data.token, { progress: { update: updateSyncProgress } });
updateSyncProgress('Login abgeschlossen', 95);
setStatus('Anmeldung erfolgreich. Konfiguration geladen.');
setTimeout(() => setStatus(''), 3000);
} catch (err) {
setError(`Login fehlgeschlagen: ${err.message}`);
} finally {
finishSyncProgress();
setLoading(false);
}
};
@@ -273,7 +273,7 @@ function App() {
}
};
const fetchConfig = async (tokenOverride, { silent = false } = {}) => {
const fetchConfig = useCallback(async (tokenOverride, { silent = false } = {}) => {
const tokenToUse = tokenOverride || session?.token;
if (!tokenToUse) {
return;
@@ -299,9 +299,9 @@ function App() {
} finally {
setLoading(false);
}
};
}, [session?.token, authorizedFetch]);
const fetchStoresList = async () => {
const fetchStoresList = useCallback(async () => {
if (!session?.token) {
return;
}
@@ -314,13 +314,12 @@ function App() {
}
const data = await response.json();
setStores(Array.isArray(data) ? data : []);
await fetchConfig(undefined, { silent: true });
setStatus('Betriebe aktualisiert.');
setTimeout(() => setStatus(''), 3000);
} catch (err) {
setError(`Fehler beim Laden der Betriebe: ${err.message}`);
}
};
}, [session?.token, authorizedFetch]);
const refreshStoresAndConfig = useCallback(
async ({ block = false } = {}) => {
@@ -661,8 +660,9 @@ function App() {
if (!session?.token) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<form className="bg-white shadow-lg rounded-lg p-8 w-full max-w-md space-y-6" onSubmit={handleLogin}>
<>
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<form className="bg-white shadow-lg rounded-lg p-8 w-full max-w-md space-y-6" onSubmit={handleLogin}>
<div>
<h1 className="text-2xl font-bold mb-2 text-center text-gray-800">Pickup Config Login</h1>
<p className="text-sm text-gray-500 text-center">
@@ -702,26 +702,31 @@ function App() {
required
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-60"
>
{loading ? 'Prüfe Zugang...' : 'Anmelden'}
</button>
</form>
</div>
<button
type="submit"
disabled={loading}
className="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-60"
>
{loading ? 'Anmeldung läuft...' : 'Anmelden'}
</button>
</form>
</div>
<StoreSyncOverlay state={syncProgress} />
</>
);
}
if (loading) {
return (
<div className="flex justify-center items-center min-h-screen bg-gray-100">
<div className="text-center p-8">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto mb-4"></div>
<p className="text-xl">Lade Daten...</p>
<>
<div className="flex justify-center items-center min-h-screen bg-gray-100">
<div className="text-center p-8">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto mb-4"></div>
<p className="text-xl">Lade Daten...</p>
</div>
</div>
</div>
<StoreSyncOverlay state={syncProgress} />
</>
);
}