Skip to content

Commit fdf2f0d

Browse files
rubenhensenrubenhensen
committed
Add test page for download states
1 parent 73ed239 commit fdf2f0d

1 file changed

Lines changed: 258 additions & 0 deletions

File tree

‎src/routes/test-download/+page.svelte‎

Lines changed: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
<script lang="ts">
2+
import { dev } from '$app/environment'
3+
import { goto } from '$app/navigation'
4+
import { _ } from 'svelte-i18n'
5+
import YiviQRCode from '$lib/components/filesharing/YiviQRCode.svelte'
6+
import HelpToggle from '$lib/components/HelpToggle.svelte'
7+
8+
if (!dev) {
9+
goto('/')
10+
}
11+
12+
const mockSenderIdentity = {
13+
con: [{ t: 'pbdf.sidn-pbdf.email.email', v: 'alice@example.com' }]
14+
}
15+
</script>
16+
17+
<div class="test-header">
18+
<h1>Test: Download Page States</h1>
19+
<p>Downloading · Ready (Yivi) · Error / Expired</p>
20+
</div>
21+
22+
<div class="states-grid">
23+
24+
<!-- Downloading -->
25+
<div class="state-col">
26+
<div class="state-label">Downloading</div>
27+
<div class="page-wrapper">
28+
<div class="content">
29+
<h2>{$_('filesharing.decryptpanel.header')}</h2>
30+
<div class="spinner-wrapper">
31+
<svg class="spinner" viewBox="0 0 24 24" width="36" height="36">
32+
<circle class="spinner-circle" cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="3"></circle>
33+
</svg>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
39+
<!-- Ready -->
40+
<div class="state-col">
41+
<div class="state-label">Ready</div>
42+
<div class="page-wrapper">
43+
<div class="content">
44+
<h2>{$_('filesharing.decryptpanel.header')}</h2>
45+
<p class="description">{$_('filesharing.decryptpanel.pageDescription')}</p>
46+
<div class="decrypt-card">
47+
<h3>{$_('filesharing.decryptpanel.irmaInstructionHeaderQr')}</h3>
48+
<p class="card-subtitle">{$_('filesharing.decryptpanel.irmaInstructionQr')}</p>
49+
<YiviQRCode id="yivi-test-ready" responsive mode="qr" />
50+
</div>
51+
<HelpToggle
52+
title={$_('filesharing.encryptPanel.yiviInfo')}
53+
content={$_('filesharing.encryptPanel.yiviInfoText')}
54+
linkText={$_('filesharing.encryptPanel.yiviInfoLink')}
55+
linkUrl="https://yivi.app"
56+
bordered
57+
/>
58+
<div class="sender-section">
59+
<svg class="checkmark" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
60+
<path d="M1 5L4.5 8.5L11 1" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
61+
</svg>
62+
<p class="sender-label">{$_('filesharing.decryptpanel.verifiedEmail')}</p>
63+
<strong class="sender-email">{mockSenderIdentity.con[0].v}</strong>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
69+
<!-- Fail / Expired -->
70+
<div class="state-col">
71+
<div class="state-label">Error / Expired</div>
72+
<div class="page-wrapper">
73+
<div class="content">
74+
<h2>{$_('filesharing.decryptpanel.notFoundTitle')}</h2>
75+
<p class="error-description">{$_('filesharing.decryptpanel.notFoundSubtitle')}</p>
76+
<p class="error-description">{@html $_('filesharing.decryptpanel.notFoundMessage')}</p>
77+
</div>
78+
</div>
79+
</div>
80+
81+
</div>
82+
83+
<style lang="scss">
84+
.test-header {
85+
padding: 0.75rem 1rem;
86+
background-color: var(--pg-strong-background);
87+
border-bottom: 2px solid var(--pg-primary-contrast);
88+
text-align: center;
89+
90+
h1 {
91+
margin: 0 0 0.25rem;
92+
font-size: 1.25rem;
93+
color: var(--pg-primary-contrast);
94+
}
95+
96+
p {
97+
margin: 0;
98+
font-size: 0.85rem;
99+
color: var(--pg-primary-contrast);
100+
opacity: 0.8;
101+
}
102+
}
103+
104+
.states-grid {
105+
display: grid;
106+
grid-template-columns: repeat(3, 1fr);
107+
min-height: calc(100vh - 52px - 52px); /* minus navbar and test header */
108+
border-top: 1px solid var(--pg-strong-background);
109+
}
110+
111+
.state-col {
112+
display: flex;
113+
flex-direction: column;
114+
border-right: 1px solid var(--pg-strong-background);
115+
116+
&:last-child {
117+
border-right: none;
118+
}
119+
}
120+
121+
.state-label {
122+
padding: 0.4rem 1rem;
123+
font-size: 0.75rem;
124+
font-weight: 600;
125+
text-transform: uppercase;
126+
letter-spacing: 0.05em;
127+
color: var(--pg-text-secondary);
128+
background: var(--pg-soft-background);
129+
border-bottom: 1px solid var(--pg-strong-background);
130+
font-family: var(--pg-font-family);
131+
}
132+
133+
/* ---- Styles mirrored from download/+page.svelte ---- */
134+
135+
.page-wrapper {
136+
flex: 1;
137+
display: flex;
138+
align-items: flex-start;
139+
justify-content: center;
140+
padding: 3rem 1rem 2rem;
141+
}
142+
143+
.content {
144+
width: calc(250px + 3rem);
145+
max-width: 400px;
146+
display: flex;
147+
flex-direction: column;
148+
gap: 1.25rem;
149+
}
150+
151+
h2 {
152+
text-align: center;
153+
font-size: 1.5rem;
154+
font-weight: 700;
155+
color: var(--pg-text);
156+
margin: 0 0 0.25rem;
157+
}
158+
159+
.description {
160+
margin: 0;
161+
color: var(--pg-text-secondary);
162+
font-family: var(--pg-font-family);
163+
font-size: 0.95rem;
164+
line-height: 1.5;
165+
}
166+
167+
.decrypt-card {
168+
background: var(--pg-soft-background);
169+
border: 1px solid var(--pg-strong-background);
170+
border-radius: var(--pg-border-radius-lg);
171+
padding: 1.5rem;
172+
display: flex;
173+
flex-direction: column;
174+
gap: 0.75rem;
175+
176+
h3 {
177+
font-weight: 700;
178+
font-size: 1.1rem;
179+
margin: 0;
180+
color: var(--pg-text);
181+
}
182+
}
183+
184+
.card-subtitle {
185+
margin: 0;
186+
color: var(--pg-text);
187+
font-family: var(--pg-font-family);
188+
font-size: 0.95rem;
189+
line-height: 1.5;
190+
}
191+
192+
.spinner-wrapper {
193+
display: flex;
194+
justify-content: center;
195+
align-items: center;
196+
padding: 2rem 0;
197+
}
198+
199+
.spinner {
200+
animation: spin 1s linear infinite;
201+
color: var(--pg-text-secondary);
202+
}
203+
204+
.spinner-circle {
205+
stroke-dasharray: 60;
206+
stroke-dashoffset: 0;
207+
animation: dash 1.5s ease-in-out infinite;
208+
}
209+
210+
@keyframes spin {
211+
to { transform: rotate(360deg); }
212+
}
213+
214+
@keyframes dash {
215+
0% { stroke-dashoffset: 60; }
216+
50% { stroke-dashoffset: 15; }
217+
100% { stroke-dashoffset: 60; }
218+
}
219+
220+
.sender-section {
221+
display: flex;
222+
flex-direction: column;
223+
align-items: center;
224+
gap: 0.2rem;
225+
padding: 0.5rem 0;
226+
text-align: center;
227+
}
228+
229+
.checkmark {
230+
width: 14px;
231+
height: 14px;
232+
color: var(--pg-text-secondary);
233+
flex-shrink: 0;
234+
}
235+
236+
.sender-label {
237+
margin: 0;
238+
font-size: 0.95rem;
239+
color: var(--pg-text-secondary);
240+
font-family: var(--pg-font-family);
241+
}
242+
243+
.sender-email {
244+
font-size: 0.95rem;
245+
font-weight: 700;
246+
color: var(--pg-text);
247+
font-family: var(--pg-font-family);
248+
}
249+
250+
.error-description {
251+
margin: 0;
252+
font-family: var(--pg-font-family);
253+
font-size: 0.95rem;
254+
line-height: 1.5;
255+
text-align: center;
256+
color: var(--pg-text);
257+
}
258+
</style>

0 commit comments

Comments
 (0)