Skip to content

fix/drawers-replaced-with-component #651

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
grv-saini-20 wants to merge 19 commits into
base: main
Choose a base branch
from
Open

fix/drawers-replaced-with-component #651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
2b9497f
fix/drawers-replaced-with-component
grv-saini-20 Jan 5, 2026
c6afb22
fix: all drawers converted into components
grv-saini-20 Jan 5, 2026
474176a
fix: cancel scan still not stop the stream while drawer is open
grv-saini-20 Jan 5, 2026
0779ecd
fix: format
grv-saini-20 Jan 5, 2026
f08cefa
fix: media stream stopage
grv-saini-20 Jan 6, 2026
66fad6e
fix: styling of the drawers
grv-saini-20 Jan 7, 2026
ff6f753
fix: design of drawers
grv-saini-20 Jan 7, 2026
479f23f
fix: design change tables added to show data
grv-saini-20 Jan 7, 2026
f381c72
fix: code rabbit suggestion
grv-saini-20 Jan 8, 2026
b0cfe7b
fix: suggestion
grv-saini-20 Jan 8, 2026
e776cd8
fix: button
grv-saini-20 Jan 8, 2026
ed19c8e
fix: css
grv-saini-20 Jan 8, 2026
8424270
fix: format
grv-saini-20 Jan 8, 2026
b0b50f4
fix: format
sosweetham Jan 8, 2026
a3a99e8
fix: table cell types
sosweetham Jan 8, 2026
fc9c57c
fix: suggestions
grv-saini-20 Jan 8, 2026
429ff56
Merge branch 'fix/drawers-replaced-with-component' of github.com:Meta…
grv-saini-20 Jan 8, 2026
ff1db0e
fix: code rabbit suggestions
grv-saini-20 Jan 8, 2026
8ef230d
fix: code rabbit suggestion
grv-saini-20 Jan 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,10 @@ onMount(() => {
return () => {
disposed = true;
cleanup?.();
cancelScan();
};
});

onDestroy(async () => {
await cancelScan();
});

$effect(() => {
console.log(
"🔍 DEBUG: selectedBlindVoteOption changed to:",
Expand Down Expand Up @@ -223,3 +220,9 @@ function handleRevealDrawerOpenChange(value: boolean) {
onReveal={handleRevealVote}
onOpenChange={handleRevealDrawerOpenChange}
/>

<style>
:global(body:has(.loggedin-drawer)) {
background-color: white !important;
}
</style>
231 changes: 134 additions & 97 deletions infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/AuthDrawer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script lang="ts">
import { Drawer } from "$lib/ui";
import * as Button from "$lib/ui/Button";
import { QrCodeIcon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/svelte";
Expand Down Expand Up @@ -28,110 +27,148 @@ $: if (internalOpen !== lastReportedOpen) {
}
</script>

<Drawer
title="Scan QR Code"
bind:isPaneOpen={internalOpen}
class="flex flex-col gap-4 items-center justify-center"
>
<div
class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
>
<div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
{#if internalOpen}
<div class="fixed inset-0 z-50 bg-white p-4 overflow-y-auto">
<div
class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
></div>
<HugeiconsIcon
size={40}
className="z-10"
icon={QrCodeIcon}
strokeWidth={1.5}
color="var(--color-primary)"
/>
</div>
class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
>
<div class="flex flex-col items-start pt-2">
<div
class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
>
<div
class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
></div>
<div
class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
></div>
<HugeiconsIcon
size={40}
className="z-10"
icon={QrCodeIcon}
strokeWidth={1.5}
color="var(--color-primary)"
/>
</div>

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

<div class="bg-gray rounded-2xl w-full p-4 mt-4">
<h4 class="text-base text-black-700">Platform Name</h4>
<p class="text-black-700 font-normal capitalize">
{platform ?? "Unable to get name"}
</p>
</div>
<div
class="w-full mt-6 border border-gray-100 rounded-2xl overflow-hidden bg-gray-50"
>
<table class="w-full border-collapse">
<tbody class="divide-y divide-gray-200">
<tr>
<td class="py-4 px-4">
<div
class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
>
Platform Name
</div>
<div
class="text-sm text-black-700 font-medium capitalize mt-1 block"
>
{platform ?? "Unable to get name"}
</div>
</td>
</tr>

<div class="bg-gray rounded-2xl w-full p-4">
<h4 class="text-base text-black-700">Website URL</h4>
<p class="text-black-700 font-normal">
{hostname ?? scannedContent}
</p>
</div>
<tr>
<td class="py-4 px-4">
<div
class="text-xs font-semibold text-gray-500 uppercase tracking-wider block"
>
Website URL
</div>
<div
class="text-sm text-black-700 font-medium break-all mt-1 block"
>
{hostname ?? scannedContent}
</div>
</td>
</tr>
</tbody>
</table>
</div>

{#if authError}
<div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg
class="h-5 w-5 text-red-400"
viewBox="0 0 20 20"
fill="currentColor"
{#if authError}
<div
class="bg-red-50 border border-red-200 rounded-lg p-4 w-full mt-4"
>
<path
fill-rule="evenodd"
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"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-red-800">Error</h3>
<div class="mt-2 text-sm text-red-700">
{authError}
<div class="flex items-center">
<div class="shrink-0">
<svg
class="h-5 w-5 text-red-400"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
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"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-red-800">
Error
</h3>
<div class="mt-1 text-sm text-red-700">
{authError}
</div>
</div>
</div>
</div>
{/if}
</div>

<div class="flex flex-col gap-3 pb-2 w-full pt-8">
<div class="flex justify-center gap-3 items-center w-full">
{#if authError}
<Button.Action
variant="solid"
class="w-full"
callback={onDecline}
>
Okay
</Button.Action>
{:else}
<Button.Action
variant="danger-soft"
class="w-full"
callback={onDecline}
disabled={authLoading}
>
Decline
</Button.Action>
<Button.Action
variant="solid"
class="w-full whitespace-nowrap"
callback={onConfirm}
disabled={authLoading}
>
{#if authLoading}
Authenticating...
{:else}
Confirm
{/if}
</Button.Action>
{/if}
</div>

{#if isSigningRequest === false}
<div class="text-center mt-1">
<p class="text-sm text-gray-600">
After confirmation, you may return to <strong
>{platform}</strong
> and continue there
</p>
</div>
{/if}
</div>
</div>
{/if}

<div class="flex justify-center gap-3 items-center mt-4">
{#if authError}
<Button.Action
variant="solid"
class="w-full"
callback={onDecline}
>
Okay
</Button.Action>
{:else}
<Button.Action
variant="danger-soft"
class="w-full"
callback={onDecline}
disabled={authLoading}
>
Decline
</Button.Action>
<Button.Action
variant="solid"
class="w-full"
callback={onConfirm}
disabled={authLoading}
>
{#if authLoading}
Authenticating...
{:else}
Confirm
{/if}
</Button.Action>
{/if}
</div>

{#if isSigningRequest === false}
<div class="text-center mt-3">
<p class="text-sm text-gray-600">
After confirmation, you may return to {platform} and continue
there
</p>
</div>
{/if}
</Drawer>

{/if}
83 changes: 51 additions & 32 deletions infrastructure/eid-wallet/src/routes/(app)/scan-qr/components/LoggedInDrawer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script lang="ts">
import { Drawer } from "$lib/ui";
import * as Button from "$lib/ui/Button";
import { QrCodeIcon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/svelte";
Expand All @@ -23,42 +22,62 @@ $: if (internalOpen !== lastReportedOpen) {
}
</script>

<Drawer
title="Scan QR Code"
bind:isPaneOpen={internalOpen}
class="flex flex-col gap-4 items-center justify-center"
>
{#if internalOpen}
<div
class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
role="dialog"
aria-modal="true"
aria-labelledby="loggedin-title"
class="loggedin-drawer fixed inset-0 z-50 bg-white p-4 overflow-y-auto"
>
<div class="bg-white h-[16px] w-[200px] -rotate-45 absolute top-1"></div>
<div
class="bg-white h-[16px] w-[200px] -rotate-45 absolute bottom-1"
></div>
<HugeiconsIcon
size={40}
className="z-10"
icon={QrCodeIcon}
strokeWidth={1.5}
color="var(--color-primary)"
/>
</div>

<h4>You're logged in!</h4>
<p class="text-black-700">You're now connected to {platform}</p>
class="flex flex-col justify-between min-h-full w-full max-w-md mx-auto"
>
<div class="flex flex-col items-start pt-2">
<div
class="flex justify-center mb-4 relative items-center overflow-hidden bg-gray rounded-xl p-4 h-[72px] w-[72px]"
>
<div
class="bg-white h-4 w-[200px] -rotate-45 absolute top-1"
></div>
<div
class="bg-white h-4 w-[200px] -rotate-45 absolute bottom-1"
></div>
<HugeiconsIcon
size={40}
className="z-10"
icon={QrCodeIcon}
strokeWidth={1.5}
color="var(--color-primary)"
/>
</div>

<div class="flex flex-col gap-3 mt-4">
{#if redirect && platform}
<div class="text-center mt-3">
<p class="text-sm text-gray-600">
You may return to {platform} and continue there
<h4 id="loggedin-title" class="text-xl font-bold">
You're logged in!
</h4>
<p class="text-gray-700">
You're now connected to {platform ?? "the platform"}
</p>
<div class="flex flex-col items-start py-6 w-full">
{#if redirect && platform}
<div class="text-start">
<p class="text-sm text-gray-600">
You may return to <strong>{platform}</strong> and
continue there
</p>
</div>
{/if}
</div>
</div>
{/if}

<Button.Action variant="soft" class="w-full" callback={onConfirm}>
Ok
</Button.Action>
<div class="flex flex-col gap-3 pb-2 w-full">
<Button.Action
variant="soft"
class="w-full"
callback={onConfirm}
>
Ok
</Button.Action>
</div>
</div>
</div>
</Drawer>

{/if}
Loading