Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
63 changes: 49 additions & 14 deletions infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -668,7 +668,11 @@ onMount(async () => {
<!-- Social binding button — always visible once passport is loaded -->
{#if bindingDocsLoaded}
<div class="mt-4 px-1">
<ButtonAction variant="soft" class="w-full" callback={openSocialBindingDrawer}>
<ButtonAction
variant="soft"
class="w-full"
callback={openSocialBindingDrawer}
>
Request Social Binding
</ButtonAction>
</div>
Expand All @@ -684,55 +688,82 @@ onMount(async () => {
>
{#if socialBindingSuccess}
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 text-lg font-bold">✓</div>
<div
class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 text-lg font-bold"
>
</div>
<h4>Binding Complete!</h4>
</div>
<p class="text-black-700">
{socialBindingSignerName ?? "Someone"} has signed your identity binding.
Both eVaults now hold a mutually-signed social connection document.
</p>
<ButtonAction class="w-full" callback={closeSocialBindingDrawer}>Done</ButtonAction>
<ButtonAction class="w-full" callback={closeSocialBindingDrawer}
>Done</ButtonAction
>
{:else if socialBindingCounterSigning}
<div class="flex flex-col items-center justify-center gap-4 py-6">
<Shadow size={36} color="rgb(142, 82, 255)" />
<p class="text-black-700 text-center">Completing mutual binding…</p>
<p class="text-black-700 text-center">
Completing mutual binding…
</p>
</div>
{:else if socialBindingAwaitingConsent}
<div>
<h4 class="mb-1">Social Connection Request</h4>
<p class="text-black-700">
<strong>{socialBindingSignerName ?? socialBindingSignerEname ?? "Someone"}</strong>
wants to establish a social connection with you. Accept to confirm the binding.
<strong
>{socialBindingSignerName ??
socialBindingSignerEname ??
"Someone"}</strong
>
wants to establish a social connection with you. Accept to confirm
the binding.
</p>
</div>
<div class="bg-gray rounded-2xl p-4 flex flex-col gap-1">
<p class="small text-black-500">From</p>
<p class="font-semibold">{socialBindingSignerName ?? socialBindingSignerEname}</p>
<p class="font-semibold">
{socialBindingSignerName ?? socialBindingSignerEname}
</p>
{#if socialBindingSignerEname && socialBindingSignerEname !== socialBindingSignerName}
<p class="small text-black-300 break-all">{socialBindingSignerEname}</p>
<p class="small text-black-300 break-all">
{socialBindingSignerEname}
</p>
{/if}
</div>
{#if socialBindingError}
<p class="text-danger">{socialBindingError}</p>
{/if}
<div class="flex flex-col gap-3">
<ButtonAction class="w-full" callback={confirmSocialBinding}>Accept</ButtonAction>
<ButtonAction variant="soft" class="w-full" callback={declineSocialBinding}>Decline</ButtonAction>
<ButtonAction class="w-full" callback={confirmSocialBinding}
>Accept</ButtonAction
>
<ButtonAction
variant="soft"
class="w-full"
callback={declineSocialBinding}>Decline</ButtonAction
>
</div>
{:else}
<div>
<h4 class="mb-1">Request Social Binding</h4>
<p class="text-black-700">
Ask someone with an eID Wallet to scan this QR code to sign your
identity binding document.
Ask a trusted person with an eID Wallet to scan this QR and
confirm it’s you. <br />
They will sign a social binding for your Digital Self – no access
to your data.
</p>
</div>

{#if socialBindingQr}
<div class="flex justify-center py-2">
<QrCode value={socialBindingQr} size={220} />
</div>
<p class="small text-black-500 text-center break-all">{socialBindingQr}</p>
<p class="small text-black-500 text-center break-all">
{socialBindingQr}
</p>
{/if}

{#if socialBindingPolling}
Expand All @@ -746,7 +777,11 @@ onMount(async () => {
<p class="text-danger">{socialBindingError}</p>
{/if}

<ButtonAction variant="soft" class="w-full" callback={closeSocialBindingDrawer}>
<ButtonAction
variant="soft"
class="w-full"
callback={closeSocialBindingDrawer}
>
Cancel
</ButtonAction>
{/if}
Expand Down
76 changes: 54 additions & 22 deletions infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -552,7 +552,9 @@ onDestroy(() => {
onclick={() => goto("/ePassport")}
role="link"
tabindex="0"
onkeydown={(e) => { if (e.key === "Enter") goto("/ePassport"); }}
onkeydown={(e) => {
if (e.key === "Enter") goto("/ePassport");
}}
>
<div class="relative z-10">
<IdentityCard
Expand All @@ -562,16 +564,19 @@ onDestroy(() => {
</div>
{#if bindingDocsLoaded && (hasOnlySelfDocs || missingProvisionerDocs)}
<button
onclick={(e) => { e.stopPropagation(); goto("/ePassport"); }}
class="relative z-0 w-full -mt-3 -translate-y-[10px] rounded-b-2xl px-4 pt-[30px] pb-3 flex items-center justify-center gap-2 text-sm font-medium shadow-md transition-colors
onclick={(e) => {
e.stopPropagation();
goto("/ePassport");
}}
class="relative z-0 w-full -mt-3 -translate-y-2.5 rounded-b-2xl px-4 pt-7.5 pb-3 flex items-center justify-center gap-2 text-sm font-medium shadow-md transition-colors
{missingProvisionerDocs
? 'bg-emerald-400 text-emerald-900 active:bg-emerald-500'
: 'bg-amber-400 text-amber-900 active:bg-amber-500'}"
? 'bg-emerald-400 text-emerald-900 active:bg-emerald-500'
: 'bg-amber-400 text-amber-900 active:bg-amber-500'}"
>
<span>{missingProvisionerDocs ? '↑' : '⚠'}</span>
<span>{missingProvisionerDocs ? "↑" : "⚠"}</span>
{missingProvisionerDocs
? 'New — upgrade your eVault with verified identity docs'
: 'Tap to verify your identity and increase trust level'}
? "New – add binding docs for trust & recovery"
: "Verify your identity – secure DigitalSelf & earn trust"}
</button>
{/if}
</div>
Expand Down Expand Up @@ -600,12 +605,14 @@ onDestroy(() => {
<span
class="text-sm opacity-90 relative z-10 drop-shadow-md flex gap-1 items-center"
>Explore
<img
src="/images/W3DSLogoBlack.svg"
alt="W3DS Logo"
class="h-4"
/>
Marketplace
<div class="flex items-center">
<img
src="/images/W3DSLogoBlack.svg"
alt="W3DS Logo"
class="h-4"
/>
-enabled services
</div>
<span class="relative z-10">
<HugeiconsIcon
size={16}
Expand Down Expand Up @@ -753,23 +760,40 @@ onDestroy(() => {
style="padding: 1.5rem 1.5rem max(1.5rem, env(safe-area-inset-bottom));"
>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 text-lg font-bold">!</div>
<div
class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 text-lg font-bold"
>
!
</div>
<h3 class="text-lg font-bold">Identity Already Registered</h3>
</div>
<p class="text-black-700 text-sm leading-relaxed">
This identity document is already linked to an existing eVault. You can't create a duplicate — each person gets one verified eVault.
This identity document is already linked to an existing eVault.
You can't create a duplicate — each person gets one verified
eVault.
</p>
{#if duplicateEName}
<div class="rounded-xl bg-gray-50 border border-gray-200 p-4">
<p class="text-xs text-black-500 mb-1">Your existing eVault eName</p>
<p class="font-mono text-sm font-medium text-black-900 break-all">{duplicateEName}</p>
<p class="text-xs text-black-500 mb-1">
Your existing eVault eName
</p>
<p
class="font-mono text-sm font-medium text-black-900 break-all"
>
{duplicateEName}
</p>
</div>
<p class="text-sm text-black-500">
Use the eName above to recover access to your existing eVault instead.
Use the eName above to recover access to your existing
eVault instead.
</p>
{/if}
<div class="flex flex-col gap-3 pt-2">
<Button.Action variant="soft" class="w-full" callback={resetKyc}>
<Button.Action
variant="soft"
class="w-full"
callback={resetKyc}
>
Got it
</Button.Action>
</div>
Expand Down Expand Up @@ -823,7 +847,11 @@ onDestroy(() => {
notified when it's complete.
</p>
<div class="flex flex-col gap-3 pt-2">
<Button.Action variant="soft" class="w-full" callback={resetKyc}>
<Button.Action
variant="soft"
class="w-full"
callback={resetKyc}
>
Close
</Button.Action>
</div>
Expand All @@ -844,7 +872,11 @@ onDestroy(() => {
<Button.Action class="w-full" callback={startKycUpgrade}>
Try Again
</Button.Action>
<Button.Action variant="soft" class="w-full" callback={resetKyc}>
<Button.Action
variant="soft"
class="w-full"
callback={resetKyc}
>
Cancel
</Button.Action>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,10 @@ onMount(async () => {
>
{#snippet subtitle()}
<p>
You can use it to access any platform that supports the Web
3.0 Data Space – <strong>no usernames, no passwords</strong
>. If you lose your phone, you can reissue your ePassport on
another device, linked to the same <strong>eName</strong>.
Your ePassport lets you log in to any W3DS-enabled platform
– <strong>no usernames, no passwords</strong>. If you lose
or change your phone, you can re-create your ePassport on a
new device with the same eName.
</p>
{/snippet}
</Hero>
Expand Down
Loading