Skip to content

Commit

Permalink
fix: stack qr code and info vertically (#88)
Browse files Browse the repository at this point in the history 
* fix: stack qr code and info vertically

* fix: verification page ui
  • Loading branch information
@phoebus-84
phoebus-84 authored Oct 16, 2024
1 parent 06064a0 commit a1e6cc1
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 65 deletions.
29 changes: 27 additions & 2 deletions src/lib/slangroom/verificationFlows.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,33 @@ export type VerificationFlow = {
export type Expand = {
organization: Organization;
relying_party: RelyingParty;
template: Template;
};

export interface Template {
allow_extra_attributes: boolean;
collectionId: string;
collectionName: string;
created: string;
description: string;
id: string;
is_preset: boolean;
name: string;
organization: string;
public: boolean;
schema: Schema;
type: string;
updated: string;
zencode_data: string;
zencode_script: string;
}

export interface Schema {
type: string;
properties: Record<string, { type: string; title: string }>;
required: string[];
}

export type Organization = {
avatar: string;
collectionId: string;
Expand Down Expand Up @@ -87,7 +112,7 @@ export const getVerificationFlow = async (id: string): Promise<VerificationFlow>
pb_address: backendUri,
show_parameters: {
collection: 'verification_flows',
expand: 'relying_party, template',
expand: 'relying_party, template, organization',
id
}
};
Expand All @@ -96,7 +121,7 @@ export const getVerificationFlow = async (id: string): Promise<VerificationFlow>
//@ts-expect-error output needs to be typed
return res.result?.output;
} catch (e: unknown) {
log(JSON.stringify(e));
log(JSON.stringify(e));
throw new Error(JSON.stringify(e));
}
};
4 changes: 2 additions & 2 deletions src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,11 @@
/>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@didroom/components@1.29.3/dist/didroom-components/didroom-components.esm.js"
src="https://cdn.jsdelivr.net/npm/@didroom/components@1.31/dist/didroom-components/didroom-components.esm.js"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@didroom/components@1.29.3/dist/didroom-components/didroom-components.css"
href="https://cdn.jsdelivr.net/npm/@didroom/components@1.31/dist/didroom-components/didroom-components.css"
/>
</svelte:head>

Expand Down
81 changes: 34 additions & 47 deletions src/routes/[[lang]]/(protected)/[id]/verify/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
import cardToQr from '$lib/mobile_zencode/verifier/card_to_qr.zen?raw';
import cardToQrKeys from '$lib/mobile_zencode/verifier/card_to_qr.keys.json?raw';
import { backendUri } from '$lib/backendUri';
import { backendUri, filesUri } from '$lib/backendUri';
import { saveRuAndSid } from '$lib/preferences/sidRu';
import { log } from '$lib/log';
import { onIncomingNotification } from './_lib/tools';
export let data: any;
export let data;
const { verificationFlow, user } = data;
Expand Down Expand Up @@ -49,7 +49,7 @@
const registerQr = async (t: string) => {
const data = {
id: user.id,
id: user!.id,
template: verificationFlow.template,
relying_party: verificationFlow.expand.relying_party.endpoint,
pb_url: backendUri,
Expand Down Expand Up @@ -95,33 +95,33 @@

<d-header back-button on:backButtonClick={() => goto('/home')}>{m.VERIFICATION_QR()}</d-header>
<ion-content fullscreen class="ion-padding">
<div class="flex flex-col justify-center gap-8 text-center">
<d-text size="xl">Ask holders to scan this QR using their Wallet</d-text>
<div class="flex w-full items-center justify-center gap-2 py-12">
<d-heading size="s">{verificationFlow.name}</d-heading>
</div>
<d-vertical-stack gap={4}>
<d-vertical-stack class="justify-center text-center">
<d-text size="xl">Ask holders to scan this QR using their Wallet</d-text>
<d-horizontal-stack class="w-full items-center justify-center">
<d-avatar
size="l"
name={verificationFlow.name}
src={filesUri(
verificationFlow.expand.organization.avatar,
verificationFlow.expand.organization.collectionName,
verificationFlow.expand.organization.id
)}
shape="square"
/>
<d-heading size="s">{verificationFlow.name}</d-heading>
</d-horizontal-stack>
<d-text size="l">{verificationFlow.expand.organization.name} </d-text>
</d-vertical-stack>
<!-- for web test no tok provided-->
{#if Capacitor.getPlatform() == 'web'}
{#await registerQr('fcm registration token is not available in web') then qr}
<div
class="flex flex-row items-center justify-center gap-1 rounded-lg bg-primary px-2 py-4"
>
<div class="flex-grow">
<img src={qr} alt="qrCode" class="w-full" />
</div>
<div
class="flex flex-shrink flex-col items-center justify-center gap-1 px-2 py-4 text-center"
>
<d-text size="l" class="w-max">Session ID:</d-text>
<d-heading size="s">{id}</d-heading>
<d-text size="m"
>{generationDate.day()}/{generationDate.month()}/{generationDate.year()}</d-text
>
<d-text size="m"
>{generationDate.hour()}:{generationDate.minute()}:{generationDate.second()}</d-text
>
</div>
</div>
<d-qr-code
{qr}
generation-date="{generationDate.day()}/{generationDate.month()}/{generationDate.year()}"
generation-hour="{generationDate.hour()}:{generationDate.minute()}:{generationDate.second()}"
session-id={id}
/>
<d-button
color="accent"
expand
Expand All @@ -137,25 +137,12 @@
text={'Please allow the app to receive push notifications in order to proceed.'}
/>
{:else if qr}
<div
class="flex flex-row items-center justify-center gap-1 rounded-[0px_8px_8px_0px] bg-primary px-2 py-4"
>
<div class="flex-grow">
<img src={qr} alt="qrCode" class="w-full" />
</div>
<div
class="flex flex-shrink flex-col items-center justify-center gap-1 px-2 py-4 text-center"
>
<d-text size="l" class="w-max">Session ID:</d-text>
<d-heading size="s">{id}</d-heading>
<d-text size="m"
>{generationDate.day()}/{generationDate.month()}/{generationDate.year()}</d-text
>
<d-text size="m"
>{generationDate.hour()}:{generationDate.minute()}:{generationDate.second()}</d-text
>
</div>
</div>
<d-qr-code
{qr}
generation-date="{generationDate.day()}/{generationDate.month()}/{generationDate.year()}"
generation-hour="{generationDate.hour()}:{generationDate.minute()}:{generationDate.second()}"
session-id={id}
/>
<d-button
color="accent"
expand
Expand All @@ -165,5 +152,5 @@
>
<Countdown initial={generationDate.unix()} {expirationInterval} />
{/if}
</div>
</d-vertical-stack>
</ion-content>
31 changes: 17 additions & 14 deletions src/routes/[[lang]]/(protected)/[id]/verify/_lib/tools.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { log } from '$lib/log';
import { saveVerifiedSid } from '$lib/preferences/verifiedSid';
import { goto } from '$app/navigation';

//@ts-ignore
const slangroom = new Slangroom(http, helpers, zencode, location);
export const jwsToIdSuccess = 'Signature_verification_successful' as const;
export const jwsToIdFailure = 'Signature_verification_error' as const;
Expand All @@ -21,19 +22,18 @@ export type JwsToIdResponse = {
message?: string;
};

const parseVerificationError = (e: Error):string => {
const parseVerificationError = (e: Error): string => {
try {
const message = JSON.parse(e.message);
const trace = message.filter((s)=>s.startsWith("J64 TRACE:"))[0];
const errorBase64 = trace.split("J64 TRACE: ")[1];
const message = JSON.parse(e.message);
const trace = message.filter((s: string) => s.startsWith('J64 TRACE:'))[0];
const errorBase64 = trace.split('J64 TRACE: ')[1];
const errorArray = JSON.parse(atob(errorBase64));
const errors = errorArray.filter((s)=>s.startsWith("[!]"));
return errors.join("\n");
const errors = errorArray.filter((s: string) => s.startsWith('[!]'));
return errors.join('\n');
} catch {
return e.message
return e.message;
}

}
};

export const jwsToId = async (jws: string): Promise<JwsToIdResponse> => {
let id = '';
Expand All @@ -47,19 +47,22 @@ export const jwsToId = async (jws: string): Promise<JwsToIdResponse> => {
const ruAndSid = await getRuAndSid(id);

if (!ruAndSid) throw new Error(`Could not find ru for id ${id}`);
const { ru, code, data:keys } = ruAndSid;
const { ru, code, data: keys } = ruAndSid;
const dataVerify = {
...data,
claims_url: ru
};
const res = await slangroom.execute(verify, { data: dataVerify, keys: JSON.parse(verifyKeys) });
const result = res.result.result as jwsToIdResult;
const inputToCustomCode = res.result.input_to_custom_code;
const inputToCustomCode = res.result.input_to_custom_code as Record<string, string>;
if (!inputToCustomCode) throw new Error(`Could not find input to custom code for id ${id}`);
// Execute custom code
const customCodeResult = await slangroom.execute(code, { data: inputToCustomCode, keys: JSON.parse(keys) });
console.log(customCodeResult);
await slangroom.execute(code, {
data: inputToCustomCode,
keys: JSON.parse(keys)
});
return { result, id };
} catch (e:unknown) {
} catch (e: unknown) {
const message = parseVerificationError(e as Error);
log(message);
return { result: jwsToIdFailure, id, message };
Expand Down

0 comments on commit a1e6cc1

Please sign in to comment.