forked from
tranquil.farm/tranquil-pds
Our Personal Data Server from scratch!
1<script lang="ts">
2 import { _ } from '../lib/i18n'
3 import { routes, buildUrl } from '../lib/types/routes'
4 import { getRequestUriFromUrl } from '../lib/oauth'
5
6 function getError(): string {
7 const params = new URLSearchParams(window.location.search)
8 return params.get('error') || 'Unknown error'
9 }
10
11 function getErrorDescription(): string | null {
12 const params = new URLSearchParams(window.location.search)
13 return params.get('error_description')
14 }
15
16 function handleBack() {
17 window.history.back()
18 }
19
20 function handleSignIn() {
21 const requestUri = getRequestUriFromUrl()
22 const url = requestUri
23 ? buildUrl(routes.oauthLogin, { request_uri: requestUri })
24 : routes.login
25 window.location.href = `/app${url}`
26 }
27
28 let error = $derived(getError())
29 let errorDescription = $derived(getErrorDescription())
30</script>
31
32<div class="page-sm text-center">
33 <h1>{$_('oauth.error.title')}</h1>
34
35 <div class="error-box">
36 <div class="error-code">{error}</div>
37 {#if errorDescription}
38 <div class="error-description">{errorDescription}</div>
39 {/if}
40 </div>
41
42 <div class="actions">
43 <button type="button" onclick={handleBack}>
44 {$_('oauth.error.tryAgain')}
45 </button>
46 <button type="button" class="secondary" onclick={handleSignIn}>
47 {$_('common.signIn')}
48 </button>
49 </div>
50</div>
51
52<style>
53 h1 {
54 margin: 0 0 var(--space-6) 0;
55 color: var(--error-text);
56 }
57
58 .error-box {
59 padding: var(--space-6);
60 background: var(--error-bg);
61 border: 1px solid var(--error-border);
62 border-radius: var(--radius-xl);
63 margin-bottom: var(--space-6);
64 }
65
66 .error-code {
67 font-family: var(--font-mono);
68 font-size: var(--text-base);
69 color: var(--error-text);
70 margin-bottom: var(--space-2);
71 }
72
73 .error-description {
74 color: var(--text-secondary);
75 font-size: var(--text-sm);
76 }
77
78 .actions {
79 display: flex;
80 gap: var(--space-3);
81 justify-content: center;
82 }
83</style>