add shared login pin mechansim
This commit is contained in:
JCEEE
@@ -6,9 +6,10 @@
|
||||
import { famStore } from '$lib/stores/fam.svelte';
|
||||
import { chatStore } from '$lib/stores/chat.svelte';
|
||||
import { notices } from '$lib/stores/notices.svelte';
|
||||
import { Sidebar, TopNav, Footer, Chat } from '$lib/components';
|
||||
import { Sidebar, TopNav, Footer, Chat, SharedPicker } from '$lib/components';
|
||||
import { chatIcon } from '$lib/components/icons';
|
||||
import { recordShortcut } from '$lib/shortcut';
|
||||
import { installLockTracking, lockDue } from '$lib/client/lock';
|
||||
import { themeShades } from '$lib/theme';
|
||||
import '$lib/theme-patterns.css';
|
||||
import { themeDraft } from '$lib/stores/theme.svelte';
|
||||
@@ -29,6 +30,41 @@
|
||||
// Pattern size in vw units ('' = untouched → pattern class default).
|
||||
let bgSize = $derived(themeDraft.size ?? (data.session?.memberThemeSize || ''));
|
||||
let bgSizeVw = $derived(Number(bgSize) > 0 ? bgSize : '');
|
||||
// Shared-device picker: standalone when the device has child sessions but
|
||||
// none is active (layout load redirects here); overlay when the idle lock
|
||||
// fires or the top-nav switcher is opened.
|
||||
const pickerMode = $derived(!!data.picker);
|
||||
let pickerOpen = $state(false);
|
||||
let lockTimer: ReturnType<typeof setInterval> | null = null;
|
||||
let deviceProfiles = $derived(
|
||||
(data.deviceChildIds || [])
|
||||
.map((id) => famStore.members.find((m) => m.id === id))
|
||||
.filter(Boolean)
|
||||
.map((m: any) => ({ id: m.id, name: m.name, color: m.color, username: m.username }))
|
||||
);
|
||||
|
||||
// Idle lock (children only): return to the picker after `lockMins` of no
|
||||
// interaction. localStorage-backed (see lib/client/lock.ts) so a closed
|
||||
// browser still trips the lock on next launch.
|
||||
$effect(() => {
|
||||
const isChild = data.session?.role === 'child';
|
||||
const lockMins = Number(data.lockMins) || 0;
|
||||
if (!isChild || lockMins <= 0 || data.picker) return;
|
||||
installLockTracking();
|
||||
if (lockDue(lockMins)) pickerOpen = true;
|
||||
if (!lockTimer) {
|
||||
lockTimer = setInterval(() => {
|
||||
if (lockDue(lockMins)) pickerOpen = true;
|
||||
}, 15_000);
|
||||
}
|
||||
return () => {
|
||||
if (lockTimer) {
|
||||
clearInterval(lockTimer);
|
||||
lockTimer = null;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
let session = $state<Session | null>(data.session);
|
||||
let isParent = $state(data.isParent);
|
||||
let role = $state(data.role);
|
||||
@@ -194,66 +230,97 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="layout-stage" class:chat-open={chatStore.open} class:has-pattern={!!bgPattern}>
|
||||
<div
|
||||
class="app-shell {bgPattern ? `pattern-${bgPattern}` : ''}"
|
||||
style={`${bgSizeVw ? `--s:calc(${bgSizeVw} * 1vw);` : ''}--c1:${bgShades.c1};--c2:${bgShades.c2};--c3:${bgShades.c3};--c4:${bgShades.c4}`}
|
||||
>
|
||||
<Sidebar {famName} session={data.session} {isParent} {role} {isDemo} />
|
||||
<TopNav
|
||||
role={data.session ? role : ''}
|
||||
seasons={famStore.seasons.filter((s) => s.active !== false)}
|
||||
announcement={disabled && !activating ? accessMessage(accessReason, isParent) : ''}
|
||||
<!-- layout.svelte picker-mode branch -->
|
||||
{#if pickerMode}
|
||||
<main class="picker-stage">
|
||||
<SharedPicker
|
||||
standalone
|
||||
famSlug={data.famSlug}
|
||||
famName={data.pickerFamName}
|
||||
profiles={data.pickerChildren || []}
|
||||
/>
|
||||
</main>
|
||||
{:else}
|
||||
<div class="layout-stage" class:chat-open={chatStore.open} class:has-pattern={!!bgPattern}>
|
||||
<div
|
||||
class="app-shell {bgPattern ? `pattern-${bgPattern}` : ''}"
|
||||
style={`${bgSizeVw ? `--s:calc(${bgSizeVw} * 1vw);` : ''}--c1:${bgShades.c1};--c2:${bgShades.c2};--c3:${bgShades.c3};--c4:${bgShades.c4}`}
|
||||
>
|
||||
<button class="chat-toggle" onclick={() => chatStore.toggle()} aria-label="Open chat">
|
||||
{@html chatIcon}
|
||||
{#if chatStore.unread > 0}
|
||||
<span class="chat-badge">{chatStore.unread > 9 ? '9+' : chatStore.unread}</span>
|
||||
{/if}
|
||||
</button>
|
||||
</TopNav>
|
||||
<main class="app-main" class:join-page={page.url.pathname.split('/')[2] === 'join'}>
|
||||
<div class="page-wrap">
|
||||
<div class="page-content" class:locked>{@render children()}</div>
|
||||
|
||||
{#if locked}
|
||||
<div class="disabled-overlay">
|
||||
<div class="disabled-card">
|
||||
{#if !hasAuth}
|
||||
<h2>You need to be logged in to view this page</h2>
|
||||
{:else if activating}
|
||||
<div class="spinner" aria-hidden="true"></div>
|
||||
<strong>Activating your subscription…</strong>
|
||||
<span>Payment received — this usually only takes a few seconds.</span>
|
||||
{:else}
|
||||
<strong>Access paused</strong>
|
||||
<span>
|
||||
{isParent
|
||||
? 'Add an access code or resume your subscription to keep using FamDone.'
|
||||
: 'Your family access is paused.'}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
{#if claimToast}
|
||||
<a
|
||||
class="claim-toast"
|
||||
href={`/${page.params.fam}/${data.session?.username || page.params.username || ''}`}
|
||||
<Sidebar {famName} session={data.session} {isParent} {role} {isDemo} />
|
||||
<TopNav
|
||||
role={data.session ? role : ''}
|
||||
seasons={famStore.seasons.filter((s) => s.active !== false)}
|
||||
announcement={disabled && !activating ? accessMessage(accessReason, isParent) : ''}
|
||||
>
|
||||
{claimToast} — view dashboard →
|
||||
</a>
|
||||
<button class="chat-toggle" onclick={() => chatStore.toggle()} aria-label="Open chat">
|
||||
{@html chatIcon}
|
||||
{#if chatStore.unread > 0}
|
||||
<span class="chat-badge">{chatStore.unread > 9 ? '9+' : chatStore.unread}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{#if data.session && (data.deviceChildIds?.length || 0) > 0}
|
||||
<button
|
||||
class="kid-switch"
|
||||
onclick={() => (pickerOpen = true)}
|
||||
aria-label="Switch user (shared device)"
|
||||
title="Switch user"
|
||||
>
|
||||
<span class="kid-switch-dot" style="background:{data.session.memberColor || '#6366f1'}"
|
||||
></span>
|
||||
</button>
|
||||
{/if}
|
||||
</TopNav>
|
||||
<main class="app-main" class:join-page={page.url.pathname.split('/')[2] === 'join'}>
|
||||
<div class="page-wrap">
|
||||
<div class="page-content" class:locked>{@render children()}</div>
|
||||
|
||||
{#if locked}
|
||||
<div class="disabled-overlay">
|
||||
<div class="disabled-card">
|
||||
{#if !hasAuth}
|
||||
<h2>You need to be logged in to view this page</h2>
|
||||
{:else if activating}
|
||||
<div class="spinner" aria-hidden="true"></div>
|
||||
<strong>Activating your subscription…</strong>
|
||||
<span>Payment received — this usually only takes a few seconds.</span>
|
||||
{:else}
|
||||
<strong>Access paused</strong>
|
||||
<span>
|
||||
{isParent
|
||||
? 'Add an access code or resume your subscription to keep using FamDone.'
|
||||
: 'Your family access is paused.'}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
{#if claimToast}
|
||||
<a
|
||||
class="claim-toast"
|
||||
href={`/${page.params.fam}/${data.session?.username || page.params.username || ''}`}
|
||||
>
|
||||
{claimToast} — view dashboard →
|
||||
</a>
|
||||
{/if}
|
||||
<Footer sidebar />
|
||||
</div>
|
||||
{#if chatStore.open}
|
||||
<button class="chat-backdrop" onclick={() => chatStore.closeChat()} aria-label="Close chat"
|
||||
></button>
|
||||
{/if}
|
||||
<Chat {role} />
|
||||
{#if pickerOpen && deviceProfiles.length > 0}
|
||||
<SharedPicker
|
||||
profiles={deviceProfiles}
|
||||
activeId={data.session?.userId}
|
||||
famSlug={data.famSlug}
|
||||
oncancel={() => (pickerOpen = false)}
|
||||
/>
|
||||
{/if}
|
||||
<Footer sidebar />
|
||||
</div>
|
||||
{#if chatStore.open}
|
||||
<button class="chat-backdrop" onclick={() => chatStore.closeChat()} aria-label="Close chat"
|
||||
></button>
|
||||
{/if}
|
||||
<Chat {role} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.claim-toast {
|
||||
@@ -402,6 +469,33 @@
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.kid-switch {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.kid-switch:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.kid-switch-dot {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 0 0 1px #e2e8f0;
|
||||
}
|
||||
.picker-stage {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
background: whitesmoke;
|
||||
}
|
||||
.chat-toggle:hover {
|
||||
background: #e5e7eb;
|
||||
color: #4338ca;
|
||||
|
||||
Reference in New Issue
Block a user