this repo has no description
lewis.moe
1<script lang="ts">
2 import { getCurrentPath } from './lib/router.svelte'
3 import { initAuth, getAuthState } from './lib/auth.svelte'
4 import Login from './routes/Login.svelte'
5 import Register from './routes/Register.svelte'
6 import RegisterPasskey from './routes/RegisterPasskey.svelte'
7 import Verify from './routes/Verify.svelte'
8 import ResetPassword from './routes/ResetPassword.svelte'
9 import RecoverPasskey from './routes/RecoverPasskey.svelte'
10 import RequestPasskeyRecovery from './routes/RequestPasskeyRecovery.svelte'
11 import Dashboard from './routes/Dashboard.svelte'
12 import AppPasswords from './routes/AppPasswords.svelte'
13 import InviteCodes from './routes/InviteCodes.svelte'
14 import Settings from './routes/Settings.svelte'
15 import Sessions from './routes/Sessions.svelte'
16 import Notifications from './routes/Notifications.svelte'
17 import RepoExplorer from './routes/RepoExplorer.svelte'
18 import Admin from './routes/Admin.svelte'
19 import OAuthConsent from './routes/OAuthConsent.svelte'
20 import OAuthLogin from './routes/OAuthLogin.svelte'
21 import OAuthAccounts from './routes/OAuthAccounts.svelte'
22 import OAuth2FA from './routes/OAuth2FA.svelte'
23 import OAuthTotp from './routes/OAuthTotp.svelte'
24 import OAuthPasskey from './routes/OAuthPasskey.svelte'
25 import OAuthError from './routes/OAuthError.svelte'
26 import Security from './routes/Security.svelte'
27 import TrustedDevices from './routes/TrustedDevices.svelte'
28
29 const auth = getAuthState()
30
31 $effect(() => {
32 initAuth()
33 })
34
35 function getComponent(path: string) {
36 switch (path) {
37 case '/login':
38 return Login
39 case '/register':
40 return Register
41 case '/register-passkey':
42 return RegisterPasskey
43 case '/verify':
44 return Verify
45 case '/reset-password':
46 return ResetPassword
47 case '/recover-passkey':
48 return RecoverPasskey
49 case '/request-passkey-recovery':
50 return RequestPasskeyRecovery
51 case '/dashboard':
52 return Dashboard
53 case '/app-passwords':
54 return AppPasswords
55 case '/invite-codes':
56 return InviteCodes
57 case '/settings':
58 return Settings
59 case '/sessions':
60 return Sessions
61 case '/notifications':
62 return Notifications
63 case '/repo':
64 return RepoExplorer
65 case '/admin':
66 return Admin
67 case '/oauth/consent':
68 return OAuthConsent
69 case '/oauth/login':
70 return OAuthLogin
71 case '/oauth/accounts':
72 return OAuthAccounts
73 case '/oauth/2fa':
74 return OAuth2FA
75 case '/oauth/totp':
76 return OAuthTotp
77 case '/oauth/passkey':
78 return OAuthPasskey
79 case '/oauth/error':
80 return OAuthError
81 case '/security':
82 return Security
83 case '/trusted-devices':
84 return TrustedDevices
85 default:
86 return auth.session ? Dashboard : Login
87 }
88 }
89
90 let currentPath = $derived(getCurrentPath())
91 let CurrentComponent = $derived(getComponent(currentPath))
92</script>
93
94<main>
95 {#if auth.loading}
96 <div class="loading">
97 <p>Loading...</p>
98 </div>
99 {:else}
100 <CurrentComponent />
101 {/if}
102</main>
103
104<style>
105 :global(:root) {
106 --bg-primary: #fafafa;
107 --bg-secondary: #f9f9f9;
108 --bg-card: #ffffff;
109 --bg-input: #ffffff;
110 --bg-input-disabled: #f5f5f5;
111 --text-primary: #333333;
112 --text-secondary: #666666;
113 --text-muted: #999999;
114 --border-color: #dddddd;
115 --border-color-light: #cccccc;
116 --accent: #0066cc;
117 --accent-hover: #0052a3;
118 --success-bg: #dfd;
119 --success-border: #8c8;
120 --success-text: #060;
121 --error-bg: #fee;
122 --error-border: #fcc;
123 --error-text: #c00;
124 --warning-bg: #ffd;
125 --warning-text: #660;
126 }
127
128 @media (prefers-color-scheme: dark) {
129 :global(:root) {
130 --bg-primary: #1a1a1a;
131 --bg-secondary: #242424;
132 --bg-card: #2a2a2a;
133 --bg-input: #333333;
134 --bg-input-disabled: #2a2a2a;
135 --text-primary: #e0e0e0;
136 --text-secondary: #a0a0a0;
137 --text-muted: #707070;
138 --border-color: #404040;
139 --border-color-light: #505050;
140 --accent: #4da6ff;
141 --accent-hover: #7abbff;
142 --success-bg: #1a3d1a;
143 --success-border: #2d5a2d;
144 --success-text: #7bc67b;
145 --error-bg: #3d1a1a;
146 --error-border: #5a2d2d;
147 --error-text: #ff7b7b;
148 --warning-bg: #3d3d1a;
149 --warning-text: #c6c67b;
150 }
151 }
152
153 :global(body) {
154 margin: 0;
155 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
156 line-height: 1.5;
157 color: var(--text-primary);
158 background: var(--bg-primary);
159 }
160
161 :global(*) {
162 box-sizing: border-box;
163 }
164
165 main {
166 min-height: 100vh;
167 background: var(--bg-primary);
168 }
169
170 .loading {
171 display: flex;
172 align-items: center;
173 justify-content: center;
174 min-height: 100vh;
175 color: var(--text-secondary);
176 }
177</style>