Skip to content

Commit d85ca6f

Browse files
coodossosweetham
coodos
and
sosweetham
authored
chore: fix modal UX (#428)
* chore: fix modal UX * fix: format --------- Co-authored-by: SoSweetHam <sosweetham@gmail.com>
1 parent ac398e7 commit d85ca6f

5 files changed

Lines changed: 267 additions & 47 deletions

File tree

‎infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ const {
3737
isRevealingVote,
3838
revealSuccess,
3939
revealedVoteData,
40+
authError,
41+
signingError,
42+
authLoading,
4043
} = stores;
4144
4245
const {
@@ -95,16 +98,20 @@ $effect(() => {
9598
);
9699
});
97100
98-
function handleAuthDrawerDecline() {
99-
setCodeScannedDrawerOpen(false);
100-
startScan();
101+
async function handleAuthDrawerDecline() {
102+
// If there's an error, "Okay" button closes modal and navigates to main
103+
if ($authError) {
104+
setCodeScannedDrawerOpen(false);
105+
await goto("/main");
106+
} else {
107+
// Otherwise, "Decline" closes modal and restarts scanning
108+
setCodeScannedDrawerOpen(false);
109+
startScan();
110+
}
101111
}
102112
103113
function handleAuthDrawerOpenChange(value: boolean) {
104114
setCodeScannedDrawerOpen(value);
105-
if (!value) {
106-
startScan();
107-
}
108115
}
109116
110117
function handleLoggedInDrawerConfirm() {
@@ -118,9 +125,16 @@ function handleLoggedInDrawerOpenChange(value: boolean) {
118125
setLoggedInDrawerOpen(value);
119126
}
120127
121-
function handleSigningDrawerDecline() {
122-
setSigningDrawerOpen(false);
123-
startScan();
128+
async function handleSigningDrawerDecline() {
129+
// If there's an error, "Okay" button closes modal and navigates to main
130+
if ($signingError) {
131+
setSigningDrawerOpen(false);
132+
await goto("/main");
133+
} else {
134+
// Otherwise, "Decline" closes modal and restarts scanning
135+
setSigningDrawerOpen(false);
136+
startScan();
137+
}
124138
}
125139
126140
function handleSigningDrawerOpenChange(value: boolean) {
@@ -177,6 +191,8 @@ function handleRevealDrawerOpenChange(value: boolean) {
177191
hostname={$hostname}
178192
scannedContent={$scannedData?.content}
179193
isSigningRequest={$isSigningRequest}
194+
authError={$authError}
195+
authLoading={$authLoading}
180196
onConfirm={handleAuth}
181197
onDecline={handleAuthDrawerDecline}
182198
onOpenChange={handleAuthDrawerOpenChange}
@@ -199,6 +215,7 @@ function handleRevealDrawerOpenChange(value: boolean) {
199215
selectedBlindVoteOption={$selectedBlindVoteOption}
200216
isSubmittingBlindVote={$isSubmittingBlindVote}
201217
loading={$loading}
218+
signingError={$signingError}
202219
onDecline={handleSigningDrawerDecline}
203220
onSign={handleSignVote}
204221
onBlindVoteOptionChange={handleBlindVoteOptionChange}

‎infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte‎

Lines changed: 59 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export let platform: string | null | undefined;
99
export let hostname: string | null | undefined;
1010
export let scannedContent: string | undefined;
1111
export let isSigningRequest: boolean;
12+
export let authError: string | null | undefined;
13+
export let authLoading: boolean | undefined;
1214
export let onConfirm: () => void;
1315
export let onDecline: () => void;
1416
export let onOpenChange: (value: boolean) => void;
@@ -63,17 +65,64 @@ $: if (internalOpen !== lastReportedOpen) {
6365
{hostname ?? scannedContent}
6466
</p>
6567
</div>
68+
69+
{#if authError}
70+
<div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
71+
<div class="flex items-center">
72+
<div class="flex-shrink-0">
73+
<svg
74+
class="h-5 w-5 text-red-400"
75+
viewBox="0 0 20 20"
76+
fill="currentColor"
77+
>
78+
<path
79+
fill-rule="evenodd"
80+
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
81+
clip-rule="evenodd"
82+
/>
83+
</svg>
84+
</div>
85+
<div class="ml-3">
86+
<h3 class="text-sm font-medium text-red-800">Error</h3>
87+
<div class="mt-2 text-sm text-red-700">
88+
{authError}
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
{/if}
94+
6695
<div class="flex justify-center gap-3 items-center mt-4">
67-
<Button.Action
68-
variant="danger-soft"
69-
class="w-full"
70-
callback={onDecline}
71-
>
72-
Decline
73-
</Button.Action>
74-
<Button.Action variant="solid" class="w-full" callback={onConfirm}>
75-
Confirm
76-
</Button.Action>
96+
{#if authError}
97+
<Button.Action
98+
variant="solid"
99+
class="w-full"
100+
callback={onDecline}
101+
>
102+
Okay
103+
</Button.Action>
104+
{:else}
105+
<Button.Action
106+
variant="danger-soft"
107+
class="w-full"
108+
callback={onDecline}
109+
disabled={authLoading}
110+
>
111+
Decline
112+
</Button.Action>
113+
<Button.Action
114+
variant="solid"
115+
class="w-full"
116+
callback={onConfirm}
117+
disabled={authLoading}
118+
>
119+
{#if authLoading}
120+
Authenticating...
121+
{:else}
122+
Confirm
123+
{/if}
124+
</Button.Action>
125+
{/if}
77126
</div>
78127

79128
{#if isSigningRequest === false}

‎infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/SigningDrawer.svelte‎

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export let blindVoteError: string | null;
1414
export let selectedBlindVoteOption: number | null;
1515
export let isSubmittingBlindVote: boolean;
1616
export let loading: boolean;
17+
export let signingError: string | null | undefined;
1718
export let onDecline: () => void;
1819
export let onSign: () => void;
1920
export let onBlindVoteOptionChange: (value: number) => void;
@@ -250,30 +251,66 @@ $: hasPollDetails =
250251
{signingData?.sessionId?.slice(0, 8) ?? "Unknown"}...
251252
</p>
252253
</div>
254+
255+
{#if signingError}
256+
<div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
257+
<div class="flex items-center">
258+
<div class="flex-shrink-0">
259+
<svg
260+
class="h-5 w-5 text-red-400"
261+
viewBox="0 0 20 20"
262+
fill="currentColor"
263+
>
264+
<path
265+
fill-rule="evenodd"
266+
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
267+
clip-rule="evenodd"
268+
/>
269+
</svg>
270+
</div>
271+
<div class="ml-3">
272+
<h3 class="text-sm font-medium text-red-800">Error</h3>
273+
<div class="mt-2 text-sm text-red-700">
274+
{signingError}
275+
</div>
276+
</div>
277+
</div>
278+
</div>
279+
{/if}
253280
{/if}
254281

255282
<div class="flex justify-center gap-3 items-center mt-4">
256283
{#if !isBlindVotingRequest}
257-
<Button.Action
258-
variant="danger-soft"
259-
class="w-full"
260-
callback={onDecline}
261-
>
262-
Decline
263-
</Button.Action>
264-
<Button.Action
265-
variant="solid"
266-
class="w-full"
267-
callback={onSign}
268-
>
269-
{#if loading}
270-
Signing...
271-
{:else if signingData?.pollId}
272-
Sign Vote
273-
{:else}
274-
Sign Message
275-
{/if}
276-
</Button.Action>
284+
{#if signingError}
285+
<Button.Action
286+
variant="solid"
287+
class="w-full"
288+
callback={onDecline}
289+
>
290+
Okay
291+
</Button.Action>
292+
{:else}
293+
<Button.Action
294+
variant="danger-soft"
295+
class="w-full"
296+
callback={onDecline}
297+
>
298+
Decline
299+
</Button.Action>
300+
<Button.Action
301+
variant="solid"
302+
class="w-full"
303+
callback={onSign}
304+
>
305+
{#if loading}
306+
Signing...
307+
{:else if signingData?.pollId}
308+
Sign Vote
309+
{:else}
310+
Sign Message
311+
{/if}
312+
</Button.Action>
313+
{/if}
277314
{/if}
278315
</div>
279316
{/if}

0 commit comments

Comments
 (0)