this repo has no description
lewis.moe
1<script lang="ts">
2 import { getAuthState, logout } from '../lib/auth.svelte'
3 import { navigate } from '../lib/router.svelte'
4 const auth = getAuthState()
5 $effect(() => {
6 if (!auth.loading && !auth.session) {
7 navigate('/login')
8 }
9 })
10 async function handleLogout() {
11 await logout()
12 navigate('/login')
13 }
14</script>
15{#if auth.session}
16 <div class="dashboard">
17 <header>
18 <h1>Dashboard</h1>
19 <button class="logout" onclick={handleLogout}>Sign Out</button>
20 </header>
21 <section class="account-overview">
22 <h2>Account Overview</h2>
23 <dl>
24 <dt>Handle</dt>
25 <dd>@{auth.session.handle}</dd>
26 <dt>DID</dt>
27 <dd class="mono">{auth.session.did}</dd>
28 {#if auth.session.preferredChannel}
29 <dt>Primary Contact</dt>
30 <dd>
31 {#if auth.session.preferredChannel === 'email'}
32 {auth.session.email || 'Email'}
33 {:else if auth.session.preferredChannel === 'discord'}
34 Discord
35 {:else if auth.session.preferredChannel === 'telegram'}
36 Telegram
37 {:else if auth.session.preferredChannel === 'signal'}
38 Signal
39 {:else}
40 {auth.session.preferredChannel}
41 {/if}
42 {#if auth.session.preferredChannelVerified}
43 <span class="badge success">Verified</span>
44 {:else}
45 <span class="badge warning">Unverified</span>
46 {/if}
47 </dd>
48 {:else if auth.session.email}
49 <dt>Email</dt>
50 <dd>
51 {auth.session.email}
52 {#if auth.session.emailConfirmed}
53 <span class="badge success">Verified</span>
54 {:else}
55 <span class="badge warning">Unverified</span>
56 {/if}
57 </dd>
58 {/if}
59 </dl>
60 </section>
61 <nav class="nav-grid">
62 <a href="#/app-passwords" class="nav-card">
63 <h3>App Passwords</h3>
64 <p>Manage passwords for third-party apps</p>
65 </a>
66 <a href="#/invite-codes" class="nav-card">
67 <h3>Invite Codes</h3>
68 <p>View and create invite codes</p>
69 </a>
70 <a href="#/settings" class="nav-card">
71 <h3>Account Settings</h3>
72 <p>Email, password, handle, and more</p>
73 </a>
74 <a href="#/notifications" class="nav-card">
75 <h3>Notification Preferences</h3>
76 <p>Discord, Telegram, Signal channels</p>
77 </a>
78 <a href="#/repo" class="nav-card">
79 <h3>Repository Explorer</h3>
80 <p>Browse and manage raw AT Protocol records</p>
81 </a>
82 </nav>
83 </div>
84{:else if auth.loading}
85 <div class="loading">Loading...</div>
86{/if}
87<style>
88 .dashboard {
89 max-width: 800px;
90 margin: 0 auto;
91 padding: 2rem;
92 }
93 header {
94 display: flex;
95 justify-content: space-between;
96 align-items: center;
97 margin-bottom: 2rem;
98 }
99 header h1 {
100 margin: 0;
101 }
102 .logout {
103 padding: 0.5rem 1rem;
104 background: transparent;
105 border: 1px solid var(--border-color-light);
106 border-radius: 4px;
107 cursor: pointer;
108 color: var(--text-primary);
109 }
110 .logout:hover {
111 background: var(--bg-secondary);
112 }
113 section {
114 background: var(--bg-secondary);
115 padding: 1.5rem;
116 border-radius: 8px;
117 margin-bottom: 2rem;
118 }
119 section h2 {
120 margin: 0 0 1rem 0;
121 font-size: 1.25rem;
122 }
123 dl {
124 display: grid;
125 grid-template-columns: auto 1fr;
126 gap: 0.5rem 1rem;
127 margin: 0;
128 }
129 dt {
130 font-weight: 500;
131 color: var(--text-secondary);
132 }
133 dd {
134 margin: 0;
135 }
136 .mono {
137 font-family: monospace;
138 font-size: 0.875rem;
139 word-break: break-all;
140 }
141 .badge {
142 display: inline-block;
143 padding: 0.125rem 0.5rem;
144 border-radius: 4px;
145 font-size: 0.75rem;
146 margin-left: 0.5rem;
147 }
148 .badge.success {
149 background: var(--success-bg);
150 color: var(--success-text);
151 }
152 .badge.warning {
153 background: var(--warning-bg);
154 color: var(--warning-text);
155 }
156 .nav-grid {
157 display: grid;
158 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
159 gap: 1rem;
160 }
161 .nav-card {
162 display: block;
163 padding: 1.5rem;
164 background: var(--bg-card);
165 border: 1px solid var(--border-color);
166 border-radius: 8px;
167 text-decoration: none;
168 color: inherit;
169 transition: border-color 0.15s, box-shadow 0.15s;
170 }
171 .nav-card:hover {
172 border-color: var(--accent);
173 box-shadow: 0 2px 8px rgba(77, 166, 255, 0.15);
174 }
175 .nav-card h3 {
176 margin: 0 0 0.5rem 0;
177 color: var(--accent);
178 }
179 .nav-card p {
180 margin: 0;
181 color: var(--text-secondary);
182 font-size: 0.875rem;
183 }
184 .loading {
185 text-align: center;
186 padding: 4rem;
187 color: var(--text-secondary);
188 }
189</style>