feat: Implement AccountManager

Replace simple keystore with a full-featured AccountManager that handles
identity management, account creation, and authentication. Update account-
related UI components to integrate with the new system.
This commit is contained in:
Shibo Lyu 2025-04-13 02:23:06 +08:00
parent 99a6ea0459
commit 308eef1cff
5 changed files with 138 additions and 27 deletions

View file

@ -1,6 +1,6 @@
<script lang="ts">
import { GroupedListItem, GroupedListSection } from '$lib/components/GroupedList';
import { ArrowRightEndOnRectangle, UserPlus } from 'svelte-hero-icons';
import { ArrowRightEndOnRectangle, Plus, UserPlus } from 'svelte-hero-icons';
import SettingsListItem from './SettingsListItem.svelte';
import {
openAccountStore,
@ -66,6 +66,12 @@
{/if}
<GroupedListSection>
<SettingsListItem icon={ArrowRightEndOnRectangle} route="/account/add">Sign in</SettingsListItem>
<SettingsListItem icon={UserPlus} route="/account/new">Create Account</SettingsListItem>
{#if ($accountStore?.length ?? 0) > 0}
<SettingsListItem icon={Plus} route="/account/add">Add Account</SettingsListItem>
{:else}
<SettingsListItem icon={ArrowRightEndOnRectangle} route="/account/add">
Sign in
</SettingsListItem>
<SettingsListItem icon={UserPlus} route="/account/new">Create Account</SettingsListItem>
{/if}
</GroupedListSection>

View file

@ -4,11 +4,11 @@
import { tw } from '$lib/tw';
import {
Bell,
Cog,
DevicePhoneMobile,
InformationCircle,
LockClosed,
QuestionMarkCircle
QuestionMarkCircle,
User
} from 'svelte-hero-icons';
import { scale } from 'svelte/transition';
import SettingsListItem from './SettingsListItem.svelte';
@ -20,11 +20,10 @@
}
let { class: className = '' }: Props = $props();
</script>
<div
class={tw('flex flex-col bg-sb-secondary shadow-md', className)}
class={tw('bg-sb-secondary flex flex-col shadow-md', className)}
transition:scale={{ duration: 250, start: 0.95 }}
>
<PageHeader>
@ -36,10 +35,13 @@
<SettingsAccountSections />
<GroupedListSection>
<SettingsListItem icon={Cog} route="">General</SettingsListItem>
<SettingsListItem icon={User} route="">My Profile</SettingsListItem>
<GroupedListItem icon={DevicePhoneMobile}>Devices</GroupedListItem>
</GroupedListSection>
<GroupedListSection>
<GroupedListItem icon={Bell}>Notifications</GroupedListItem>
<GroupedListItem icon={LockClosed}>Privacy and Security</GroupedListItem>
<GroupedListItem icon={DevicePhoneMobile}>Devices</GroupedListItem>
</GroupedListSection>
<GroupedListSection>