Skip to content

Commit 2cd6d7b

Browse files
coodoscoodos
committed
chore: evault provisioning
1 parent eb56114 commit 2cd6d7b

File tree

24 files changed

+952
-245
lines changed

24 files changed

+952
-245
lines changed

‎infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte‎

Lines changed: 108 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,145 @@
11
<script lang="ts">
2-
import * as Button from "$lib/ui/Button";
3-
import { cn } from "$lib/utils";
4-
import {
5-
CheckmarkBadge02Icon,
6-
Upload03Icon,
7-
ViewIcon,
8-
} from "@hugeicons/core-free-icons";
9-
import { HugeiconsIcon } from "@hugeicons/svelte";
10-
import type { HTMLAttributes } from "svelte/elements";
2+
import * as Button from "$lib/ui/Button";
3+
import { cn } from "$lib/utils";
4+
import {
5+
CheckmarkBadge02Icon,
6+
Upload03Icon,
7+
ViewIcon,
8+
} from "@hugeicons/core-free-icons";
9+
import { HugeiconsIcon } from "@hugeicons/svelte";
10+
import type { HTMLAttributes } from "svelte/elements";
1111
12-
interface userData {
13-
[fieldName: string]: string;
14-
}
15-
interface IIdentityCard extends HTMLAttributes<HTMLElement> {
16-
variant?: "eName" | "ePassport" | "eVault";
17-
userId?: string;
18-
viewBtn?: () => void;
19-
shareBtn?: () => void;
20-
userData?: userData;
21-
totalStorage?: number;
22-
usedStorage?: number;
23-
}
12+
interface userData {
13+
[fieldName: string]: string;
14+
}
15+
interface IIdentityCard extends HTMLAttributes<HTMLElement> {
16+
variant?: "eName" | "ePassport" | "eVault";
17+
userId?: string;
18+
viewBtn?: () => void;
19+
shareBtn?: () => void;
20+
userData?: userData;
21+
totalStorage?: number;
22+
usedStorage?: number;
23+
}
2424
25-
const {
26-
variant = "eName",
27-
userId,
28-
viewBtn,
29-
shareBtn,
30-
userData,
31-
totalStorage = 0,
32-
usedStorage = 0,
33-
...restProps
34-
}: IIdentityCard = $props();
35-
const state = $state({
36-
progressWidth: "0%",
37-
});
25+
const {
26+
variant = "eName",
27+
userId,
28+
viewBtn,
29+
shareBtn,
30+
userData,
31+
totalStorage = 0,
32+
usedStorage = 0,
33+
...restProps
34+
}: IIdentityCard = $props();
35+
const state = $state({
36+
progressWidth: "0%",
37+
});
3838
39-
$effect(() => {
40-
state.progressWidth =
41-
usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
42-
});
39+
$effect(() => {
40+
state.progressWidth =
41+
usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
42+
});
4343
44-
const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
44+
const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
4545
</script>
4646

4747
<div {...restProps} class={cn(baseClasses, restProps.class)}>
48-
<div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
49-
<div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
50-
<div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
48+
<div
49+
class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20"
50+
>
51+
<div
52+
class="w-10 {variant === 'eVault'
53+
? 'bg-white/40'
54+
: 'bg-white/10'} h-[300%] rotate-40"
55+
></div>
56+
<div
57+
class="w-10 {variant === 'eVault'
58+
? 'bg-white/40'
59+
: 'bg-white/10'} h-[300%] rotate-40"
60+
></div>
5161
</div>
5262
<div class="p-5 flex flex-col gap-2">
5363
<div class="flex justify-between">
54-
{#if variant === 'eName'}
55-
<HugeiconsIcon size={30} strokeWidth={2} className="text-secondary" icon={CheckmarkBadge02Icon} />
56-
<div class="flex gap-3 items-center">
57-
{#if shareBtn}
58-
<Button.Icon icon={Upload03Icon} iconColor={"white"} strokeWidth={2} onclick={shareBtn} />
64+
{#if variant === "eName"}
65+
<HugeiconsIcon
66+
size={30}
67+
strokeWidth={2}
68+
className="text-secondary"
69+
icon={CheckmarkBadge02Icon}
70+
/>
71+
<div class="flex gap-3 items-center">
72+
{#if shareBtn}
73+
<Button.Icon
74+
icon={Upload03Icon}
75+
iconColor={"white"}
76+
strokeWidth={2}
77+
onclick={shareBtn}
78+
/>
5979
{/if}
6080
{#if viewBtn}
61-
<Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
81+
<Button.Icon
82+
icon={ViewIcon}
83+
iconColor={"white"}
84+
strokeWidth={2}
85+
onclick={viewBtn}
86+
/>
6287
{/if}
63-
</div>
64-
{:else if variant === 'ePassport'}
65-
<p class="bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium">HIGH SECURITY</p>
88+
</div>
89+
{:else if variant === "ePassport"}
90+
<p
91+
class="bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium"
92+
>
93+
HIGH SECURITY
94+
</p>
6695
{#if viewBtn}
67-
<Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
96+
<Button.Icon
97+
icon={ViewIcon}
98+
iconColor={"white"}
99+
strokeWidth={2}
100+
onclick={viewBtn}
101+
/>
68102
{/if}
69-
{:else if variant === 'eVault'}
70-
<h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">{state.progressWidth} Used</h3>
103+
{:else if variant === "eVault"}
104+
<h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">
105+
{state.progressWidth} Used
106+
</h3>
71107
{/if}
72108
</div>
73109
<div>
74-
{#if variant === "eName"}
110+
{#if variant === "eName"}
75111
<p class="text-gray font-normal">Your eName</p>
76112
<div class="flex items-center justify-between w-full">
77113
<p class="text-white w-full font-medium">@{userId}</p>
78114
</div>
79115
{:else if variant === "ePassport"}
80116
<div class="flex gap-2 flex-col">
81117
{#if userData}
82-
{#each Object.entries(userData) as [fieldName, value] }
118+
{#each Object.entries(userData) as [fieldName, value]}
83119
<div class="flex justify-between">
84-
<p class="text-gray">{fieldName}</p>
120+
<p class="text-gray capitalize">{fieldName}</p>
85121
<p class=" font-medium text-white">{value}</p>
86122
</div>
87123
{/each}
88124
{/if}
89125
</div>
90126
{:else if variant === "eVault"}
91-
<div>
92-
<div class="flex justify-between mb-1 ">
93-
<p class="z-[1]">{usedStorage}GB Used</p>
94-
<p class="z-[1]">{totalStorage}GB total storage</p>
95-
</div>
96-
<div class="relative w-full h-3 rounded-full overflow-hidden bg-primary-400">
97-
<div class="h-full bg-secondary rounded-full" style={`width: calc(${state.progressWidth})`}></div>
127+
<div>
128+
<div class="flex justify-between mb-1">
129+
<p class="z-[1]">{usedStorage}GB Used</p>
130+
<p class="z-[1]">{totalStorage}GB total storage</p>
131+
</div>
132+
<div
133+
class="relative w-full h-3 rounded-full overflow-hidden bg-primary-400"
134+
>
135+
<div
136+
class="h-full bg-secondary rounded-full"
137+
style={`width: calc(${state.progressWidth})`}
138+
></div>
139+
</div>
98140
</div>
99-
</div>
100141
{/if}
101142
</div>
102143
</div>
103-
</div>
144+
</div>
145+

‎infrastructure/eid-wallet/src/lib/global/controllers/user.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,38 @@ export class UserController {
8585
return undefined;
8686
});
8787
}
88+
89+
set document(
90+
document:
91+
| Promise<Record<string, string> | undefined>
92+
| Record<string, string>
93+
| undefined,
94+
) {
95+
if (document instanceof Promise) {
96+
document
97+
.then((resolvedDoc) => {
98+
this.#store.set("doc", resolvedDoc);
99+
})
100+
.catch((error) => {
101+
console.error("Failed to set doc:", error);
102+
});
103+
} else {
104+
this.#store.set("doc", document);
105+
}
106+
}
107+
108+
get document() {
109+
return this.#store
110+
.get<Record<string, string>>("doc")
111+
.then((user) => {
112+
if (!user) {
113+
return undefined;
114+
}
115+
return user;
116+
})
117+
.catch((error) => {
118+
console.error("Failed to get doc:", error);
119+
return undefined;
120+
});
121+
}
88122
}

‎infrastructure/eid-wallet/src/lib/utils/capitalize.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export function capitalize(str: string) {
2+
return str
3+
.toLowerCase()
4+
.split(" ")
5+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
6+
.join(" ");
7+
}

‎infrastructure/eid-wallet/src/lib/utils/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from "./mergeClasses";
22
export * from "./clickOutside";
3+
export * from "./capitalize";

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

Lines changed: 33 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,44 @@
11
<script lang="ts">
2-
import { AppNav, IdentityCard } from "$lib/fragments";
3-
import * as Button from "$lib/ui/Button";
4-
import { Share05Icon } from "@hugeicons/core-free-icons";
5-
import { HugeiconsIcon } from "@hugeicons/svelte";
2+
import { AppNav, IdentityCard } from "$lib/fragments";
3+
import type { GlobalState } from "$lib/global";
4+
import * as Button from "$lib/ui/Button";
5+
import { Share05Icon } from "@hugeicons/core-free-icons";
6+
import { HugeiconsIcon } from "@hugeicons/svelte";
7+
import { getContext, onMount } from "svelte";
68
7-
const dummyData = {
8-
Name: "John Doe",
9-
"Date of birth": "01-01-1990",
10-
"ID submitted": "American Passport",
11-
"Passport number": "1234567-US",
12-
};
9+
const globalState = getContext<() => GlobalState>("globalState")();
1310
14-
const secondDummyData = {
15-
"Birth Name": "John Doe",
16-
"Place of birth": "New York, USA",
17-
Nationality: "American",
18-
"ID submitted": "American Passport",
19-
"Expiry date": "19-12-2027",
20-
};
11+
function shareEPassport() {
12+
alert("EPassport Code shared!");
13+
}
2114
22-
function shareEPassport() {
23-
alert("EPassport Code shared!");
24-
}
15+
let userData: Record<string, unknown>;
16+
let docData: Record<string, unknown> = {};
17+
18+
onMount(async () => {
19+
userData = await globalState.userController.user;
20+
docData = await globalState.userController.document;
21+
console.log(userData);
22+
});
2523
</script>
2624

2725
<AppNav title="ePassport" class="mb-8" />
2826

2927
<div>
30-
<IdentityCard
31-
variant="ePassport"
32-
userData={dummyData}
33-
class="shadow-lg"
34-
/>
35-
<div class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2">
36-
{#each Object.entries(secondDummyData) as [fieldName, value] }
37-
<div class="flex justify-between">
38-
<p class="text-black-700 font-normal">{fieldName}</p>
39-
<p class="text-black-500 font-medium">{value}</p>
40-
</div>
41-
{/each}
42-
</div>
28+
{#if userData}
29+
<IdentityCard variant="ePassport" {userData} class="shadow-lg" />
30+
{/if}
31+
{#if docData}
32+
<div
33+
class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2"
34+
>
35+
{#each Object.entries(docData) as [fieldName, value]}
36+
<div class="flex justify-between">
37+
<p class="text-black-700 font-normal">{fieldName}</p>
38+
<p class="text-black-500 font-medium">{value}</p>
39+
</div>
40+
{/each}
41+
</div>
42+
{/if}
4343
</div>
4444

45-
<Button.Action
46-
variant="solid"
47-
callback={shareEPassport}
48-
class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
49-
>
50-
<HugeiconsIcon
51-
size={32}
52-
strokeWidth={2}
53-
className="mr-2"
54-
icon={Share05Icon}
55-
/>
56-
Share ePassport
57-
</Button.Action>

0 commit comments

Comments
 (0)