Skip to content

Commit

Permalink
feat: lottie animation on signup (#200)
Browse files Browse the repository at this point in the history 
close: #199
  • Loading branch information
@phoebus-84
phoebus-84 committed Mar 18, 2024
1 parent ab8df16 commit a5487ae
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 9 deletions.
1 change: 1 addition & 0 deletions src/lib/assets/fingerPrintLottie.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.5.4","a":"","k":"","d":"","tc":""},"fr":30,"ip":0,"op":86,"w":500,"h":500,"nm":"did","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"border Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,244.467,0],"ix":2},"a":{"a":0,"k":[246.316,265.985,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1.44,0],[0,0],[0,-2.981],[0,0],[-2.982,0],[0,0],[-1.007,1.039],[0,0],[0,1.405],[0,0],[1.007,1.004],[0,0]],"o":[[0,0],[-2.982,0],[0,0],[0,2.977],[0,0],[1.44,0],[0,0],[0.972,-1.003],[0,0],[0,-1.406],[0,0],[0,0]],"v":[[95.024,-228.485],[-203.422,-228.485],[-208.816,-223.093],[-208.816,223.095],[-203.422,228.485],[95.024,228.485],[98.876,226.876],[207.274,117.004],[208.816,113.222],[208.816,-112.484],[207.274,-116.268],[98.841,-226.844]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.968627510819,0.980392216701,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[246.316,265.985],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":52,"s":[0]},{"t":76,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":43,"s":[100]},{"t":80,"s":[0]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"rd","nm":"Round Corners 1","r":{"a":0,"k":10,"ix":1},"ix":3,"mn":"ADBE Vector Filter - RC","hd":false}],"ip":0,"op":1810,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"fingerprint Outlines 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[226.963,242.811,0],"ix":2},"a":{"a":0,"k":[167.954,179.136,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[90,90,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":43,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":52,"s":[100,100,100]},{"t":80,"s":[90,90,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[32.383,-0.101],[-1.709,-53.143],[-8.676,-7.838]],"o":[[-8.774,-51.707],[-41.859,0.133],[1.538,48.689],[0,0]],"v":[[77.927,-14.18],[-1.71,-102.153],[-76.218,-3.634],[-31.478,102.254]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.968627510819,0.980392216701,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[179.624,209.272],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[100]},{"t":43,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":52,"s":[100]},{"t":80,"s":[0]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1810,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"fingerprint Outlines 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[226.963,242.811,0],"ix":2},"a":{"a":0,"k":[167.954,179.136,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[90,90,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":43,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":52,"s":[100,100,100]},{"t":80,"s":[90,90,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-27.762,-27.192],[-4.52,0.504]],"o":[[-0.504,4.153],[26.622,26.088],[0,0]],"v":[[-42.226,-46.717],[-18.719,20.629],[46.48,43.063]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.968627510819,0.980392216701,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[220.11,236.013],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[100]},{"t":43,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":52,"s":[100]},{"t":80,"s":[0]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1810,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"fingerprint Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[226.963,242.811,0],"ix":2},"a":{"a":0,"k":[167.954,179.136,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[90,90,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":43,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":52,"s":[100,100,100]},{"t":80,"s":[90,90,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[6.128,52.339],[-16.846,13.833],[-10.922,-15.538],[-1.909,-11.522],[-20.596,18.321],[9.344,27.793],[33.319,10.817],[-39.951,-108.733]],"o":[[-25.65,-14.168],[-2.443,-21.436],[16.108,-12.123],[7.532,10.179],[2.142,26.688],[21.533,-21.532],[-12.591,-34.159],[-114.565,-34.726],[0,0]],"v":[[59.087,141.636],[-28.617,37.356],[-8.86,-23.929],[39.366,-10.432],[50.583,24.328],[108.921,50.446],[121.008,-36.953],[46.196,-106.91],[-90.503,86.046]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.968627510819,0.980392216701,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[167.954,179.136],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[100]},{"t":43,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":52,"s":[100]},{"t":80,"s":[0]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1810,"st":0,"bm":0}],"markers":[]}
36 changes: 27 additions & 9 deletions src/routes/[[lang]]/(auth)/login/(methods)/questions/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { Input } from '$lib/ionic/forms';
import { generateKeypair, type UserChallengesAnswers } from '$lib/keypairoom';
import fingerPrint from '$lib/assets/fingerPrint.png';
import fingerPrintLottie from '$lib/assets/fingerPrintLottie.json';
import CopyButton from '$lib/components/copyButton.svelte';
import Header from '$lib/components/molecules/Header.svelte';
import { m, r } from '$lib/i18n';
Expand All @@ -14,7 +14,7 @@
import { alertCircleOutline } from 'ionicons/icons';
import { z } from 'zod';
import { generateDid, generateSignroomUser } from '../../_lib';
import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
//
Expand Down Expand Up @@ -103,15 +103,25 @@

<Header>{m.SECURITY_QUESTIONS()}</Header>

<div class="flex h-full w-full flex-col gap-4 px-4">
<div class="flex h-full w-screen flex-col gap-4 px-4">
{#if loading}
<div class="flex h-full flex-col items-center justify-around">
<div class="flex flex-col items-center gap-8">
<img src={fingerPrint} alt="fingerPrint" class="w-32" />
<d-heading size="s">{m.Generating_Keypair_()}</d-heading>
<div class="fixed z-50 h-full w-full bg-surface opacity-90">
<div class="flex h-full flex-col items-center justify-around">
<div class="flex flex-col items-center gap-8">
<LottiePlayer
src={fingerPrintLottie}
autoplay={true}
loop={true}
renderer="svg"
background="transparent"
width={120}
/>
<d-heading size="s">{m.Generating_Keypair_()}</d-heading>
</div>
</div>
</div>
{:else if !seed}
{/if}
{#if !seed}
<div class="flex flex-col gap-2">
<d-heading sixe="s">{m.Answer_to_these_questions()}</d-heading>
<d-text size="l"
Expand Down Expand Up @@ -156,7 +166,15 @@
</div>
</div>
</Form>
<d-button color="accent" role="button" type="submit" form="questions" expand tabindex={0} class="pb-10">
<d-button
color="accent"
role="button"
type="submit"
form="questions"
expand
tabindex={0}
class="pb-10"
>
{m.Next()}
</d-button>
{:else}
Expand Down

0 comments on commit a5487ae

Please sign in to comment.