this repo has no description
lewis.moe
1<script lang="ts">
2 import { _ } from '../lib/i18n'
3
4 function getError(): string {
5 const params = new URLSearchParams(window.location.search)
6 return params.get('error') || 'Unknown error'
7 }
8
9 function getErrorDescription(): string | null {
10 const params = new URLSearchParams(window.location.search)
11 return params.get('error_description')
12 }
13
14 function handleBack() {
15 window.history.back()
16 }
17
18 let error = $derived(getError())
19 let errorDescription = $derived(getErrorDescription())
20</script>
21
22<div class="oauth-error-container">
23 <h1>{$_('oauth.error.title')}</h1>
24
25 <div class="error-box">
26 <div class="error-code">{error}</div>
27 {#if errorDescription}
28 <div class="error-description">{errorDescription}</div>
29 {/if}
30 </div>
31
32 <button type="button" onclick={handleBack}>
33 {$_('oauth.error.tryAgain')}
34 </button>
35</div>
36
37<style>
38 .oauth-error-container {
39 max-width: var(--width-sm);
40 margin: var(--space-9) auto;
41 padding: var(--space-7);
42 text-align: center;
43 }
44
45 h1 {
46 margin: 0 0 var(--space-6) 0;
47 color: var(--error-text);
48 }
49
50 .error-box {
51 padding: var(--space-6);
52 background: var(--error-bg);
53 border: 1px solid var(--error-border);
54 border-radius: var(--radius-xl);
55 margin-bottom: var(--space-6);
56 }
57
58 .error-code {
59 font-family: monospace;
60 font-size: var(--text-base);
61 color: var(--error-text);
62 margin-bottom: var(--space-2);
63 }
64
65 .error-description {
66 color: var(--text-secondary);
67 font-size: var(--text-sm);
68 }
69
70 button {
71 padding: var(--space-3) var(--space-6);
72 background: var(--accent);
73 color: var(--text-inverse);
74 border: none;
75 border-radius: var(--radius-md);
76 font-size: var(--text-base);
77 cursor: pointer;
78 }
79
80 button:hover {
81 background: var(--accent-hover);
82 }
83</style>