Skip to content

Commit 4ad643c

Browse files
grv-saini-20sosweetham
grv-saini-20
and
sosweetham
authored
fix/drawers-replaced-with-component (#651)
* fix/drawers-replaced-with-component * fix: all drawers converted into components * fix: cancel scan still not stop the stream while drawer is open * fix: format * fix: media stream stopage * fix: styling of the drawers * fix: design of drawers * fix: design change tables added to show data * fix: code rabbit suggestion * fix: suggestion * fix: button * fix: css * fix: format * fix: format * fix: table cell types * fix: suggestions * fix: code rabbit suggestions * fix: code rabbit suggestion * fix: follow-button-message * fix: code rabbit suggestion * fix: code rabbit suggestion * fix: code rabbit suggestion --------- Co-authored-by: SoSweetHam <sosweetham@gmail.com>
1 parent d6dc3c7 commit 4ad643c

9 files changed

Lines changed: 670 additions & 538 deletions

File tree

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,13 +84,10 @@ onMount(() => {
8484
return () => {
8585
disposed = true;
8686
cleanup?.();
87+
cancelScan();
8788
};
8889
});
8990
90-
onDestroy(async () => {
91-
await cancelScan();
92-
});
93-
9491
$effect(() => {
9592
console.log(
9693
"🔍 DEBUG: selectedBlindVoteOption changed to:",
@@ -223,3 +220,9 @@ function handleRevealDrawerOpenChange(value: boolean) {
223220
onReveal={handleRevealVote}
224221
onOpenChange={handleRevealDrawerOpenChange}
225222
/>
223+
224+
<style>
225+
:global(body:has(.loggedin-drawer)) {
226+
background-color: white !important;
227+
}
228+
</style>

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

Lines changed: 134 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts">
2-
import { Drawer } from "$lib/ui";
32
import * as Button from "$lib/ui/Button";
43
import { QrCodeIcon } from "@hugeicons/core-free-icons";
54
import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -28,110 +27,148 @@ $: if (internalOpen !== lastReportedOpen) {
2827
}
2928
</script>
3029

31-
<Drawer
32-
title="Scan QR Code"
33-
bind:isPaneOpen={internalOpen}
34-
class="flex flex-col gap-4 items-center justify-center"
35-
>
36-
<div
37-
class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
38-
>
39-
<div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
30+
{#if internalOpen}
31+
<div class="fixed inset-0 z-50 bg-white p-4 overflow-y-auto">
4032
<div
41-
class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
42-
></div>
43-
<HugeiconsIcon
44-
size={40}
45-
className="z-10"
46-
icon={QrCodeIcon}
47-
strokeWidth={1.5}
48-
color="var(--color-primary)"
49-
/>
50-
</div>
33+
class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
34+
>
35+
<div class="flex flex-col items-start pt-2">
36+
<div
37+
class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
38+
>
39+
<div
40+
class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
41+
></div>
42+
<div
43+
class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
44+
></div>
45+
<HugeiconsIcon
46+
size={40}
47+
className="z-10"
48+
icon={QrCodeIcon}
49+
strokeWidth={1.5}
50+
color="var(--color-primary)"
51+
/>
52+
</div>
5153

52-
<h4>Code scanned!</h4>
53-
<p class="text-black-700">You're trying to access the following site</p>
54+
<h4 class="text-xl font-bold">Code scanned!</h4>
55+
<p class="text-black-700 mt-1">
56+
Please review the connection details below.
57+
</p>
5458

55-
<div class="bg-gray rounded-2xl w-full p-4 mt-4">
56-
<h4 class="text-base text-black-700">Platform Name</h4>
57-
<p class="text-black-700 font-normal capitalize">
58-
{platform ?? "Unable to get name"}
59-
</p>
60-
</div>
59+
<div
60+
class="w-full mt-6 border border-gray-100 rounded-2xl overflow-hidden bg-gray-50"
61+
>
62+
<table class="w-full border-collapse">
63+
<tbody class="divide-y divide-gray-200">
64+
<tr>
65+
<td class="py-4 px-4">
66+
<div
67+
class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
68+
>
69+
Platform Name
70+
</div>
71+
<div
72+
class="text-sm text-black-700 font-medium capitalize mt-1 block"
73+
>
74+
{platform ?? "Unable to get name"}
75+
</div>
76+
</td>
77+
</tr>
6178

62-
<div class="bg-gray rounded-2xl w-full p-4">
63-
<h4 class="text-base text-black-700">Website URL</h4>
64-
<p class="text-black-700 font-normal">
65-
{hostname ?? scannedContent}
66-
</p>
67-
</div>
79+
<tr>
80+
<td class="py-4 px-4">
81+
<div
82+
class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
83+
>
84+
Website URL
85+
</div>
86+
<div
87+
class="text-sm text-black-700 font-medium break-all mt-1 block"
88+
>
89+
{hostname ?? scannedContent}
90+
</div>
91+
</td>
92+
</tr>
93+
</tbody>
94+
</table>
95+
</div>
6896

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"
97+
{#if authError}
98+
<div
99+
class="bg-red-50 border border-red-200 rounded-lg p-4 w-full mt-4"
77100
>
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}
101+
<div class="flex items-center">
102+
<div class="shrink-0">
103+
<svg
104+
class="h-5 w-5 text-red-400"
105+
viewBox="0 0 20 20"
106+
fill="currentColor"
107+
>
108+
<path
109+
fill-rule="evenodd"
110+
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"
111+
clip-rule="evenodd"
112+
/>
113+
</svg>
114+
</div>
115+
<div class="ml-3">
116+
<h3 class="text-sm font-medium text-red-800">
117+
Error
118+
</h3>
119+
<div class="mt-1 text-sm text-red-700">
120+
{authError}
121+
</div>
122+
</div>
123+
</div>
89124
</div>
125+
{/if}
126+
</div>
127+
128+
<div class="flex flex-col gap-3 pb-2 w-full pt-8">
129+
<div class="flex justify-center gap-3 items-center w-full">
130+
{#if authError}
131+
<Button.Action
132+
variant="solid"
133+
class="w-full"
134+
callback={onDecline}
135+
>
136+
Okay
137+
</Button.Action>
138+
{:else}
139+
<Button.Action
140+
variant="danger-soft"
141+
class="w-full"
142+
callback={onDecline}
143+
disabled={authLoading}
144+
>
145+
Decline
146+
</Button.Action>
147+
<Button.Action
148+
variant="solid"
149+
class="w-full whitespace-nowrap"
150+
callback={onConfirm}
151+
disabled={authLoading}
152+
>
153+
{#if authLoading}
154+
Authenticating...
155+
{:else}
156+
Confirm
157+
{/if}
158+
</Button.Action>
159+
{/if}
90160
</div>
161+
162+
{#if isSigningRequest === false}
163+
<div class="text-center mt-1">
164+
<p class="text-sm text-gray-600">
165+
After confirmation, you may return to <strong
166+
>{platform}</strong
167+
> and continue there
168+
</p>
169+
</div>
170+
{/if}
91171
</div>
92172
</div>
93-
{/if}
94-
95-
<div class="flex justify-center gap-3 items-center mt-4">
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}
126173
</div>
127-
128-
{#if isSigningRequest === false}
129-
<div class="text-center mt-3">
130-
<p class="text-sm text-gray-600">
131-
After confirmation, you may return to {platform} and continue
132-
there
133-
</p>
134-
</div>
135-
{/if}
136-
</Drawer>
137-
174+
{/if}

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

Lines changed: 51 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts">
2-
import { Drawer } from "$lib/ui";
32
import * as Button from "$lib/ui/Button";
43
import { QrCodeIcon } from "@hugeicons/core-free-icons";
54
import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -23,42 +22,62 @@ $: if (internalOpen !== lastReportedOpen) {
2322
}
2423
</script>
2524

26-
<Drawer
27-
title="Scan QR Code"
28-
bind:isPaneOpen={internalOpen}
29-
class="flex flex-col gap-4 items-center justify-center"
30-
>
25+
{#if internalOpen}
3126
<div
32-
class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
27+
role="dialog"
28+
aria-modal="true"
29+
aria-labelledby="loggedin-title"
30+
class="loggedin-drawer fixed inset-0 z-50 bg-white p-4 overflow-y-auto"
3331
>
34-
<div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
3532
<div
36-
class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
37-
></div>
38-
<HugeiconsIcon
39-
size={40}
40-
className="z-10"
41-
icon={QrCodeIcon}
42-
strokeWidth={1.5}
43-
color="var(--color-primary)"
44-
/>
45-
</div>
46-
47-
<h4>You're logged in!</h4>
48-
<p class="text-black-700">You're now connected to {platform}</p>
33+
class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
34+
>
35+
<div class="flex flex-col items-start pt-2">
36+
<div
37+
class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
38+
>
39+
<div
40+
class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
41+
></div>
42+
<div
43+
class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
44+
></div>
45+
<HugeiconsIcon
46+
size={40}
47+
className="z-10"
48+
icon={QrCodeIcon}
49+
strokeWidth={1.5}
50+
color="var(--color-primary)"
51+
/>
52+
</div>
4953

50-
<div class="flex flex-col gap-3 mt-4">
51-
{#if redirect && platform}
52-
<div class="text-center mt-3">
53-
<p class="text-sm text-gray-600">
54-
You may return to {platform} and continue there
54+
<h4 id="loggedin-title" class="text-xl font-bold">
55+
You're logged in!
56+
</h4>
57+
<p class="text-gray-700">
58+
You're now connected to {platform ?? "the platform"}
5559
</p>
60+
<div class="flex flex-col items-start py-6 w-full">
61+
{#if redirect && platform}
62+
<div class="text-start">
63+
<p class="text-sm text-gray-600">
64+
You may return to <strong>{platform}</strong> and
65+
continue there
66+
</p>
67+
</div>
68+
{/if}
69+
</div>
5670
</div>
57-
{/if}
5871

59-
<Button.Action variant="soft" class="w-full" callback={onConfirm}>
60-
Ok
61-
</Button.Action>
72+
<div class="flex flex-col gap-3 pb-2 w-full">
73+
<Button.Action
74+
variant="soft"
75+
class="w-full"
76+
callback={onConfirm}
77+
>
78+
Ok
79+
</Button.Action>
80+
</div>
81+
</div>
6282
</div>
63-
</Drawer>
64-
83+
{/if}

0 commit comments

Comments
 (0)