11<script lang =" ts"
2- import { goto } from " $app/navigation"
3- import { Hero } from " $lib/fragments"
4- import { ButtonAction , Drawer } from " $lib/ui"
2+ import { goto } from " $app/navigation"
3+ import { Hero } from " $lib/fragments"
4+ import { ButtonAction , Drawer } from " $lib/ui"
5+ import { getContext , onMount } from " svelte"
6+ import { GlobalState } from " $lib/global"
7+ import axios from " axios"
8+ import { v4 as uuidv4 } from " uuid"
9+ import {
10+ PUBLIC_PROVISIONER_URL ,
11+ PUBLIC_REGISTRY_URL ,
12+ } from " $env/static/public"
13+ import { capitalize } from " $lib/utils"
14+ import * as falso from " @ngneat/falso"
15+ import { Shadow } from " svelte-loading-spinners"
516
6- let isPaneOpen = $state (false );
17+ let isPaneOpen = $state (false );
18+ let preVerified = $state (false );
19+ let loading = $state (false );
20+ let verificationId = $state (" "
721
8- const = async () => {
9- // get started functionality
10- isPaneOpen = true ;
11- };
22+ const = async () => {
23+ // get started functionality
24+ isPaneOpen = true ;
25+ preVerified = false ;
26+ };
1227
13- const = async () => {
14- // handle next functionlity
15- goto (" /verify"
16- };
28+ const = () => {
29+ isPaneOpen = true ;
30+ preVerified = true ;
31+ };
32+
33+ function generatePassportNumber() {
34+ const = " ABCDEFGHIJKLMNOPQRSTUVWXYZ"
35+ const = () =>
36+ letters .charAt (Math .floor (Math .random () * letters .length )) +
37+ letters .charAt (Math .floor (Math .random () * letters .length ));
38+ const = () =>
39+ String (Math .floor (1000000 + Math .random () * 9000000 )); // 7 digits
40+
41+ return randomLetters () + randomDigits ();
42+ }
43+
44+ const = async () => {
45+ // handle next functionlity
46+ goto (" /verify"
47+ };
48+
49+ let globalState: GlobalState ;
50+ let handleContinue: () => Promise <void > | void ;
51+
52+ onMount (() => {
53+ globalState = getContext <() => GlobalState >(" globalState"
54+ // handle verification logic + sec user data in the store
55+
56+ handleContinue = async () => {
57+ loading = true ;
58+ const = new Date ();
59+ tenYearsLater .setFullYear (tenYearsLater .getFullYear () + 10 );
60+ globalState .userController .user = {
61+ name: capitalize (
62+ ` ${falso .randFirstName ()} ${falso .randLastName ()} ` ,
63+ ),
64+ " Date of Birth" new Date ().toDateString (),
65+ " ID submitted" " Passport - " + falso .randCountryCode (),
66+ " Passport Number" generatePassportNumber (),
67+ };
68+ globalState .userController .document = {
69+ " Valid From" new Date (Date .now ()).toDateString (),
70+ " Valid Until" tenYearsLater .toDateString (),
71+ " Verified On" new Date ().toDateString (),
72+ };
73+ const
74+ data : { token : registryEntropy },
75+ } = await axios .get (
76+ new URL (" /entropy" PUBLIC_REGISTRY_URL ).toString (),
77+ );
78+ const = await axios .post (
79+ new URL (" /provision" PUBLIC_PROVISIONER_URL ).toString (),
80+ {
81+ registryEntropy ,
82+ namespace: uuidv4 (),
83+ verificationId ,
84+ },
85+ );
86+ if (data .success === true ) {
87+ globalState .vaultController .vault = {
88+ uri: data .uri ,
89+ ename: data .w3id ,
90+ };
91+ }
92+ setTimeout (() => {
93+ goto (" /register"
94+ }, 10_000 );
95+ };
96+ });
1797script >
1898
19- <main class =" h-[100dsvh] pt-[3svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
99+ <main
100+ class =" h-[100dsvh] pt-[3svh] px-[5vw] pb-[4.5svh] flex flex-col justify-between"
101+ >
20102 <article class =" flex justify-center"
21- <img class =" w-[88vw] h-[39svh]" src =" /images/Onboarding.svg" alt =" Infographic card"
103+ <img
104+ class =" w-[88vw] h-[39svh]"
105+ src =" /images/Onboarding.svg"
106+ alt =" Infographic card"
107+ />
22108 </article >
23109 <section >
24110 <Hero
25- subtitle =" Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
26- class =" mb-4"
27- titleClasses =" text-[42px]/[1.1] font-medium"
111+ subtitle =" Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
112+ class =" mb-4"
113+ titleClasses =" text-[42px]/[1.1] font-medium"
28114 >
29- Your <br >
30- Digital Identity,
31- Secured
115+ Your <br />
116+ Digital Identity, Secured
32117 </Hero >
33118 </section >
34119 <section >
35- <p class =" max-w-[300px] mx-[auto] text-center small text-black-500" a href =" /" class =" text-primary underline underline-offset-5" a > and <a href =" /" class =" text-primary underline underline-offset-5" a ></p >
120+ <p class =" max-w-[300px] mx-[auto] text-center small text-black-500"
121+ By continuing you agree to our <a
122+ href =" /"
123+ class =" text-primary underline underline-offset-5"
124+ >Terms & Conditions
125+ </a >
126+ and
127+ <a href =" /" class =" text-primary underline underline-offset-5"
128+ >privacy policy.</a
129+ >
130+ </p >
36131 <div class =" flex justify-center whitespace-nowrap mt-[2svh]"
37- <ButtonAction class ="w-full" callback ={handleGetStarted }>Get Started</ButtonAction >
132+ <ButtonAction class ="w-full" callback ={handleGetStarted }
133+ >Get Started</ButtonAction
134+ >
38135 </div >
136+
137+ <p class =" mt-5"
138+ Already have a pre-verification code? <button
139+ onclick ={handlePreVerified }
140+ class =" text-primary-500" button
141+ >
142+ </p >
39143 </section >
40144</main >
41145
42- <Drawer bind:isPaneOpen >
43- <img src =" /images/GetStarted.svg" alt =" get-started"
146+ <Drawer bind:preVerified >
44147 <h4 class =" mt-[2.3svh] mb-[0.5svh]" h4 >
45- <p class =" text-black-700" p >
46- <div class =" flex justify-center whitespace-nowrap my-[2.3svh]"
47- <ButtonAction class ="w-full" callback ={handleNext }>Next</ButtonAction >
48- </div >
49- </Drawer >
148+ <p class =" text-black-700"
149+ Your eName is more than a name—it's your unique digital passport. One
150+ constant identifier that travels with you across the internet,
151+ connecting your real-world self to the digital universe.
152+ </p >
153+ </Drawer >
154+
155+ <Drawer bind:isPaneOpen >
156+ <img src =" /images/GetStarted.svg" alt =" get-started"
157+ {#if loading }
158+ <div class =" my-20"
159+ <div
160+ class =" align-center flex w-full flex-col items-center justify-center gap-6"
161+ >
162+ <Shadow size ={40 } color =" rgb(142, 82, 255);"
163+ <h3 >Generating your eName</h3 >
164+ </div >
165+ </div >
166+ {:else if preVerified }
167+ <h4 class =" mt-[2.3svh] mb-[0.5svh]" h4 >
168+ <p class =" text-black-700" p >
169+ <input
170+ type =" text"
171+ bind:value ={verificationId }
172+ class =" border-1 border-gray-200 w-full rounded-md font-medium my-2 py-2
173+ px-2"
174+ />
175+ <div class =" flex justify-center whitespace-nowrap my-[2.3svh]"
176+ <ButtonAction class ="w-full" callback ={handleContinue }
177+ >Next</ButtonAction
178+ >
179+ </div >
180+ {:else }
181+ <h4 class =" mt-[2.3svh] mb-[0.5svh]" h4 >
182+ <p class =" text-black-700"
183+ Your eName is more than a name—it's your unique digital passport.
184+ One constant identifier that travels with you across the internet,
185+ connecting your real-world self to the digital universe.
186+ </p >
187+ <div class =" flex justify-center whitespace-nowrap my-[2.3svh]"
188+ <ButtonAction class ="w-full" callback ={handleNext }
189+ >Next</ButtonAction
190+ >
191+ </div >
192+ {/if }
193+ </Drawer >
194+
0 commit comments