Skip to content

Fix/eid app onboarding UX issues #419

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

Merged
coodos merged 9 commits into from
Nov 13, 2025
Merged

Fix/eid app onboarding UX issues #419

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3177d99
fix: app-issueS
grv-saini-20 Nov 13, 2025
0145b00
fix: repeat pin button validation
grv-saini-20 Nov 13, 2025
21b019d
fix: input pin component
grv-saini-20 Nov 13, 2025
e0cc594
fix: btn variants
grv-saini-20 Nov 13, 2025
4d34af2
fix: conflicts
grv-saini-20 Nov 13, 2025
3e7c997
fix: format
grv-saini-20 Nov 13, 2025
4f8eb9b
fix: lint
grv-saini-20 Nov 13, 2025
70073b6
fix: reset-pin
grv-saini-20 Nov 13, 2025
52ef936
fix: format and lint
grv-saini-20 Nov 13, 2025
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
2 changes: 1 addition & 1 deletion infrastructure/control-panel/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,4 +54,4 @@
"lucide-svelte": "^0.539.0",
"tailwind-merge": "^3.0.2"
}
}
}
6 changes: 6 additions & 0 deletions infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@ $effect(() => {
pin = calcPin(pins);
});

$effect(() => {
if (pin === "") {
Object.keys(pins).forEach((key) => (pins[+key] = ""));
}
});

const calcPin = (pins: { [key: number]: string }) => {
return Object.values(pins).join("") || "";
};
Expand Down
268 changes: 138 additions & 130 deletions infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,144 +1,152 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { Hero } from "$lib/fragments";
import type { GlobalState } from "$lib/global";
import { InputPin } from "$lib/ui";
import * as Button from "$lib/ui/Button";
import {
type AuthOptions,
authenticate,
checkStatus,
} from "@tauri-apps/plugin-biometric";
import { getContext, onMount } from "svelte";

let pin = $state("");
let isError = $state(false);
let clearPin = $state(async () => {});
let handlePinInput = $state((pin: string) => {});
let globalState: GlobalState | undefined = $state(undefined);
let hasPendingDeepLink = $state(false);

const authOpts: AuthOptions = {
allowDeviceCredential: false,

cancelTitle: "Cancel",

// iOS
fallbackTitle: "Please enter your PIN",

// Android
title: "Login",
subtitle: "Please authenticate to continue",
confirmationRequired: true,
};

onMount(async () => {
globalState = getContext<() => GlobalState>("globalState")();
if (!globalState) {
console.error("Global state is not defined");
await goto("/"); // Redirect to home or error page
return;
}

// Check if there's a pending deep link
const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
hasPendingDeepLink = !!pendingDeepLink;
if (hasPendingDeepLink) {
console.log("Pending deep link detected on login page");
}

clearPin = async () => {
await globalState?.securityController.clearPin();
goto("/");
import { goto } from "$app/navigation";
import { Hero } from "$lib/fragments";
import type { GlobalState } from "$lib/global";
import { InputPin } from "$lib/ui";
import * as Button from "$lib/ui/Button";
import {
type AuthOptions,
authenticate,
checkStatus,
} from "@tauri-apps/plugin-biometric";
import { getContext, onMount } from "svelte";

let pin = $state("");
let isError = $state(false);
let clearPin = $state(async () => {});
let handlePinInput = $state((pin: string) => {});
let globalState: GlobalState | undefined = $state(undefined);
let hasPendingDeepLink = $state(false);

const authOpts: AuthOptions = {
allowDeviceCredential: false,

cancelTitle: "Cancel",

// iOS
fallbackTitle: "Please enter your PIN",

// Android
title: "Login",
subtitle: "Please authenticate to continue",
confirmationRequired: true,
};

handlePinInput = async (pin: string) => {
if (pin.length === 4) {
isError = false;
const check = globalState
? await globalState.securityController.verifyPin(pin)
: false;
if (!check) {
isError = true;
return;
}

// Check if there's a pending deep link to process
const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
if (pendingDeepLink) {
try {
const deepLinkData = JSON.parse(pendingDeepLink);
console.log(
"Processing pending deep link after login:",
deepLinkData,
);

// Store the deep link data for the scan page
sessionStorage.setItem("deepLinkData", pendingDeepLink);
// Clear the pending deep link
sessionStorage.removeItem("pendingDeepLink");

// Redirect to scan page to process the deep link
await goto("/scan-qr");
return;
} catch (error) {
console.error("Error processing pending deep link:", error);
sessionStorage.removeItem("pendingDeepLink");
}
}

// No pending deep link, go to main page
await goto("/main");
onMount(async () => {
globalState = getContext<() => GlobalState>("globalState")();
if (!globalState) {
console.error("Global state is not defined");
await goto("/"); // Redirect to home or error page
return;
}
Comment thread
grv-saini-20 marked this conversation as resolved.
Outdated
};

// for some reason it's important for this to be done before the biometric stuff
// otherwise pin doesn't work
$effect(() => {
handlePinInput(pin);
});
// Check if there's a pending deep link
const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
hasPendingDeepLink = !!pendingDeepLink;
if (hasPendingDeepLink) {
console.log("Pending deep link detected on login page");
}

if (
(await globalState.securityController.biometricSupport) &&
(await checkStatus()).isAvailable
) {
try {
await authenticate(
"You must authenticate with PIN first",
authOpts,
);

// Check if there's a pending deep link to process
const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
if (pendingDeepLink) {
try {
const deepLinkData = JSON.parse(pendingDeepLink);
console.log(
"Processing pending deep link after biometric login:",
deepLinkData,
);

// Store the deep link data for the scan page
sessionStorage.setItem("deepLinkData", pendingDeepLink);
// Clear the pending deep link
sessionStorage.removeItem("pendingDeepLink");

// Redirect to scan page to process the deep link
await goto("/scan-qr");
clearPin = async () => {
pin = "";
isError = false;
};

handlePinInput = async (pin: string) => {
if (pin.length === 4) {
isError = false;
const check = globalState
? await globalState.securityController.verifyPin(pin)
: false;
if (!check) {
isError = true;
return;
} catch (error) {
console.error("Error processing pending deep link:", error);
sessionStorage.removeItem("pendingDeepLink");
}

// Check if there's a pending deep link to process
const pendingDeepLink =
sessionStorage.getItem("pendingDeepLink");
if (pendingDeepLink) {
try {
const deepLinkData = JSON.parse(pendingDeepLink);
console.log(
"Processing pending deep link after login:",
deepLinkData,
);

// Store the deep link data for the scan page
sessionStorage.setItem("deepLinkData", pendingDeepLink);
// Clear the pending deep link
sessionStorage.removeItem("pendingDeepLink");

// Redirect to scan page to process the deep link
await goto("/scan-qr");
return;
} catch (error) {
console.error(
"Error processing pending deep link:",
error,
);
sessionStorage.removeItem("pendingDeepLink");
}
}

// No pending deep link, go to main page
await goto("/main");
}
};
Comment thread
grv-saini-20 marked this conversation as resolved.
Outdated

// for some reason it's important for this to be done before the biometric stuff
// otherwise pin doesn't work
$effect(() => {
handlePinInput(pin);
});

if (
(await globalState.securityController.biometricSupport) &&
(await checkStatus()).isAvailable
) {
try {
await authenticate(
"You must authenticate with PIN first",
authOpts,
);

// Check if there's a pending deep link to process
const pendingDeepLink =
sessionStorage.getItem("pendingDeepLink");
if (pendingDeepLink) {
try {
const deepLinkData = JSON.parse(pendingDeepLink);
console.log(
"Processing pending deep link after biometric login:",
deepLinkData,
);

// Store the deep link data for the scan page
sessionStorage.setItem("deepLinkData", pendingDeepLink);
// Clear the pending deep link
sessionStorage.removeItem("pendingDeepLink");

// Redirect to scan page to process the deep link
await goto("/scan-qr");
return;
} catch (error) {
console.error(
"Error processing pending deep link:",
error,
);
sessionStorage.removeItem("pendingDeepLink");
}
}

// No pending deep link, go to main page
await goto("/main");
} catch (e) {
console.error("Biometric authentication failed", e);
// No pending deep link, go to main page
await goto("/main");
} catch (e) {
console.error("Biometric authentication failed", e);
}
}
}
});
});
</script>

<main
Expand Down
Loading
Loading