till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-22 11:46:43 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

refactor(auth): centralize appReady pattern into AuthGate component

Browse source 
Replace copy-pasted appReady/loading/redirect logic in all 13 layouts
with a shared AuthGate component. Supports guest mode, onReady callback
for app-specific data loading, and configurable login redirect.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-25 08:30:31 +01:00
parent 31af413b77
commit 336cfedd0b
15 changed files with 270 additions and 407 deletions
Download patch file Download diff file Expand all files Collapse all files

157
apps/storage/apps/web/src/routes/+layout.svelte
View file

@ -16,7 +16,7 @@
import { ToastContainer } from '@manacore/shared-ui';
import { storageOnboarding } from '$lib/stores/app-onboarding.svelte';
import { MiniOnboardingModal } from '@manacore/shared-app-onboarding';
import { SessionExpiredBanner } from '@manacore/shared-auth-ui';
import { SessionExpiredBanner, AuthGate } from '@manacore/shared-auth-ui';
import '../app.css';
// App switcher items
@ -24,7 +24,6 @@
let { children } = $props();
let loading = $state(true);
let isCollapsed = $state(false);
// Use theme store's isDark directly
@ -130,33 +129,24 @@
goto('/login');
}
async function handleAuthReady() {
// Initialize theme
theme.initialize();
// Load user settings
await userSettings.load();
// Initialize collapsed state from localStorage
const savedCollapsed = localStorage.getItem('storage-nav-collapsed');
if (savedCollapsed === 'true') {
isCollapsed = true;
collapsedStore.set(true);
}
}
onMount(() => {
// Setup global error handling
const cleanupErrorHandler = setupGlobalErrorHandler();
// Initialize async operations
const init = async () => {
// Initialize theme
theme.initialize();
// Initialize auth
await authStore.initialize();
// Load user settings
await userSettings.load();
// Initialize collapsed state from localStorage
const savedCollapsed = localStorage.getItem('storage-nav-collapsed');
if (savedCollapsed === 'true') {
isCollapsed = true;
collapsedStore.set(true);
}
loading = false;
};
init();
return cleanupErrorHandler;
});
</script>
@ -165,71 +155,58 @@
<ToastContainer />
{#if loading}
<div
class="flex min-h-screen items-center justify-center bg-background"
role="status"
aria-live="polite"
aria-busy="true"
>
<div class="text-center">
<div
class="mb-4 inline-block h-12 w-12 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent"
aria-hidden="true"
></div>
<p class="text-muted-foreground">Laden...</p>
<AuthGate {authStore} {goto} allowGuest={true} onReady={handleAuthReady}>
{#if isAuthPage}
<!-- Auth pages without navigation -->
{@render children()}
{:else}
<!-- Navigation Layout -->
<div class="layout-container">
<PillNavigation
items={navItems}
currentPath={$page.url.pathname}
appName="Storage"
homeRoute="/files"
onToggleTheme={handleToggleTheme}
{isDark}
{isCollapsed}
onCollapsedChange={handleCollapsedChange}
showThemeToggle={true}
showThemeVariants={true}
{themeVariantItems}
{currentThemeVariantLabel}
themeMode={theme.mode}
onThemeModeChange={handleThemeModeChange}
showLanguageSwitcher={true}
{languageItems}
{currentLanguageLabel}
showLogout={authStore.isAuthenticated}
onLogout={handleLogout}
loginHref="/login"
primaryColor="#3b82f6"
showAppSwitcher={true}
{appItems}
{userEmail}
settingsHref="/settings"
manaHref="/mana"
profileHref="/profile"
allAppsHref="/apps"
/>
<main class="main-content bg-background">
<div class="content-wrapper">
{@render children()}
</div>
</main>
<!-- Onboarding Modal -->
{#if storageOnboarding.shouldShow}
<MiniOnboardingModal store={storageOnboarding} appName="Storage" appEmoji="☁️" />
{/if}
</div>
</div>
{:else if isAuthPage}
<!-- Auth pages without navigation -->
{@render children()}
{:else}
<!-- Navigation Layout -->
<div class="layout-container">
<PillNavigation
items={navItems}
currentPath={$page.url.pathname}
appName="Storage"
homeRoute="/files"
onToggleTheme={handleToggleTheme}
{isDark}
{isCollapsed}
onCollapsedChange={handleCollapsedChange}
showThemeToggle={true}
showThemeVariants={true}
{themeVariantItems}
{currentThemeVariantLabel}
themeMode={theme.mode}
onThemeModeChange={handleThemeModeChange}
showLanguageSwitcher={true}
{languageItems}
{currentLanguageLabel}
showLogout={authStore.isAuthenticated}
onLogout={handleLogout}
loginHref="/login"
primaryColor="#3b82f6"
showAppSwitcher={true}
{appItems}
{userEmail}
settingsHref="/settings"
manaHref="/mana"
profileHref="/profile"
allAppsHref="/apps"
/>
<main class="main-content bg-background">
<div class="content-wrapper">
{@render children()}
</div>
</main>
<!-- Onboarding Modal -->
{#if storageOnboarding.shouldShow}
<MiniOnboardingModal store={storageOnboarding} appName="Storage" appEmoji="☁️" />
{/if}
</div>
<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
{/if}
<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
{/if}
</AuthGate>
<style>
.layout-container {