mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-23 00:06:42 +02:00
✨ feat(shared-auth-ui): add GuestWelcomeModal for guest onboarding
Add a unified welcome modal for guest mode that displays: - App icon, name, and description from shared-branding - Feature list of what guests can do (localized DE/EN) - Warning about local-only data storage - Login, Register, Help, and "Continue as Guest" buttons New files: - GuestWelcomeModal.svelte - The modal component - guestWelcome.ts - localStorage utilities for tracking seen state Integrated into: contacts, chat, todo, calendar, and clock apps
This commit is contained in:
parent
6402f287e8
commit
14c83cb4bd
10 changed files with 873 additions and 7 deletions
|
|
@ -41,6 +41,7 @@
|
|||
import { parseTaskInput, resolveTaskIds, formatParsedTaskPreview } from '$lib/utils/task-parser';
|
||||
import AuthGateModal from '$lib/components/AuthGateModal.svelte';
|
||||
import { sessionTasksStore } from '$lib/stores/session-tasks.svelte';
|
||||
import { GuestWelcomeModal, shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
|
||||
|
||||
// App switcher items
|
||||
const appItems = getPillAppItems('todo');
|
||||
|
|
@ -276,6 +277,9 @@
|
|||
let showAuthGateModal = $state(false);
|
||||
let authGateAction = $state<'save' | 'sync' | 'feature'>('save');
|
||||
|
||||
// Guest welcome modal state
|
||||
let showGuestWelcome = $state(false);
|
||||
|
||||
// Show auth gate modal (can be called from child components)
|
||||
function showAuthGate(action: 'save' | 'sync' | 'feature' = 'save') {
|
||||
authGateAction = action;
|
||||
|
|
@ -285,6 +289,9 @@
|
|||
// Session tasks indicator
|
||||
let sessionTaskCount = $derived(sessionTasksStore.count);
|
||||
|
||||
// Language for GuestWelcomeModal
|
||||
let currentLocale = $derived($locale || 'de');
|
||||
|
||||
onMount(async () => {
|
||||
// Initialize split-panel from URL/localStorage
|
||||
splitPanel.initialize();
|
||||
|
|
@ -295,6 +302,11 @@
|
|||
// Initialize session tasks for guest mode
|
||||
sessionTasksStore.initialize();
|
||||
|
||||
// Show guest welcome modal for unauthenticated users
|
||||
if (!authStore.isAuthenticated && shouldShowGuestWelcome('todo')) {
|
||||
showGuestWelcome = true;
|
||||
}
|
||||
|
||||
// Load projects (works in both guest and authenticated mode)
|
||||
await projectsStore.fetchProjects();
|
||||
|
||||
|
|
@ -503,6 +515,23 @@
|
|||
action={authGateAction}
|
||||
/>
|
||||
|
||||
<!-- Guest Welcome Modal -->
|
||||
<GuestWelcomeModal
|
||||
appId="todo"
|
||||
visible={showGuestWelcome}
|
||||
onClose={() => (showGuestWelcome = false)}
|
||||
onLogin={() => {
|
||||
showGuestWelcome = false;
|
||||
goto('/login');
|
||||
}}
|
||||
onRegister={() => {
|
||||
showGuestWelcome = false;
|
||||
goto('/register');
|
||||
}}
|
||||
helpHref="/help"
|
||||
locale={currentLocale === 'en' ? 'en' : 'de'}
|
||||
/>
|
||||
|
||||
<style>
|
||||
/* Guest banner styling */
|
||||
.guest-banner {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue