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