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