NextGraph
/
nextgraph-rs
1
3
Fork 0
Code Issues 1 Pull Requests Packages Projects 2 Releases 3 Activity

add navigation buttons for wallet login

Browse Source
pull/18/head
Laurin Weger 6 months ago
parent 0c7c4baa9b
commit b6c2b40f14
No known key found for this signature in database
GPG Key ID: 9B372BB0B792770F
1 changed files with 402 additions and 245 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 253
      ng-app/src/lib/Login.svelte

253
ng-app/src/lib/Login.svelte
Unescape View File

@ -9,12 +9,22 @@
// according to those terms.
-->
<!--
The Login Procedure.
Has multiple states (steps) through the user flow.
-->
<script lang="ts">
import { Alert, Toggle } from "flowbite-svelte";
import { onMount, createEventDispatcher, tick } from "svelte";
import ng from "../api";
import { emoji_cat, emojis, load_svg } from "../wallet_emojis";
import { PuzzlePiece } from "svelte-heros-v2";
import {
PuzzlePiece,
XCircle,
ArrowLeftCircle,
ArrowPath,
} from "svelte-heros-v2";
//import Worker from "../worker.js?worker&inline";
export let wallet;
export let for_import = false;
@ -46,7 +56,7 @@
}
emojis2 = emojis2;
display = 0;
pazzlePage = 0;
selection = [];
error = undefined;
@ -68,9 +78,9 @@
let pazzle_length = 9;
let display = 0;
let pazzlePage = 0;
let selection = [];
let selection = [].fill(null, 0, pazzle_length);
let pin_code = [];
@ -88,6 +98,10 @@
step = "order";
ordered = [];
last_one = {};
// In case, this is called by the cancel button, we need to reset the selection.
selection.forEach((emoji) => (emoji.sel = undefined));
selection = selection;
for (let i = 0; i < pazzle_length; i++) {
last_one[i] = true;
}
@ -101,20 +115,21 @@
//console.log(shuffle_pin);
}
/** Called on selecting emoji in a category. */
function select(val) {
//console.log(emojis2[display][val]);
let cat_idx = shuffle.category_indices[display];
let cat_idx = shuffle.category_indices[pazzlePage];
let cat = emojis[emoji_cat[cat_idx]];
let idx = shuffle.emoji_indices[display][val];
let idx = shuffle.emoji_indices[pazzlePage][val];
//console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code);
selection.push({ cat: cat_idx, index: idx });
//console.log(selection);
selection[pazzlePage] = { cat: cat_idx, index: idx };
console.debug(selection, cat, cat_idx, idx, val);
if (display == pazzle_length - 1) {
if (pazzlePage == pazzle_length - 1) {
order();
} else {
display = display + 1;
pazzlePage = pazzlePage + 1;
}
}
@ -214,7 +229,11 @@
dispatch("cancel");
}
async function pin(val) {
function to_previous_pazzle() {
pazzlePage = pazzlePage - 1;
}
async function on_pin_key(val) {
//console.log(val);
pin_code.push(val);
if (pin_code.length == 4) {
@ -224,8 +243,8 @@
async function select_order(val, pos) {
delete last_one[pos];
//console.log(last_one);
//console.log(val);
console.debug(last_one, val);
ordered.push(val);
val.sel = ordered.length;
selection = selection;
@ -240,6 +259,7 @@
}
</script>
<div>
{#if step == "load"}
<div class=" max-w-xl lg:px-8 mx-auto px-4 mt-10">
<h2 class="pb-5 text-xl">How to open your wallet, step by step :</h2>
@ -251,31 +271,31 @@
</li>
<li>
At each category, only one of the 15 displayed choices is the correct
image that belongs to your pazzle. Find it and tap or click on that one.
The 15 images are shuffled too, they will not appear at the same
image that belongs to your pazzle. Find it and tap or click on that
one. The 15 images are shuffled too, they will not appear at the same
position at each login. On a computer, you can also use the tab key on
your keyboard to move to the desired item on the screen, then press the
space bar to select each one.
your keyboard to move to the desired item on the screen, then press
the space bar to select each one.
</li>
<li>
Once you completed the last category, you will be presented with all the
images you have previously selected. Their order is displayed as it was
when you picked them. But this is not the correct order of the images in
your pazzle. You now have to order them correctly.
Once you completed the last category, you will be presented with all
the images you have previously selected. Their order is displayed as
it was when you picked them. But this is not the correct order of the
images in your pazzle. You now have to order them correctly.
</li>
<li>
You must remember which image should be the first one in your pazzle.
Find it on the screen and click or tap on it. It will be greyed out and
the number 1 will appear on top of it.
Find it on the screen and click or tap on it. It will be greyed out
and the number 1 will appear on top of it.
</li>
<li>
Move on to the second image of your pazzle (that you memorized). Find it
on the screen and tap on it. Repeat this step until you reached the last
image.
Move on to the second image of your pazzle (that you memorized). Find
it on the screen and tap on it. Repeat this step until you reached the
last image.
</li>
<li>
Finally, your PIN code will be asked. enter it by clicking or tapping on
the digits.
Finally, your PIN code will be asked. enter it by clicking or tapping
on the digits.
</li>
</ul>
</div>
@ -304,9 +324,10 @@
/>
</svg>
{:else}
<div class="flex justify-center space-x-12 mt-4 mb-4">
<button
on:click={letsgo}
class="mt-1 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
class="mt-1 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
>
<PuzzlePiece
tabindex="-1"
@ -314,6 +335,15 @@
/>
Open my wallet now!
</button>
<button
on:click={cancel}
class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
><XCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button
>
</div>
{/if}
</div>
{#if for_import}
@ -325,26 +355,28 @@
>
</div>
<p class="text-sm">
If you do, if this device is yours or is used by few trusted persons of
your family or workplace, and you would like to login again from this
device in the future, then you can save your wallet on this device. To
the contrary, if this device is public and shared by strangers, do not
save your wallet here. {#if !tauri_platform}By selecting this option,
you agree to save some cookies on your browser.{/if}<br />
If you do, if this device is yours or is used by few trusted persons
of your family or workplace, and you would like to login again from
this device in the future, then you can save your wallet on this
device. To the contrary, if this device is public and shared by
strangers, do not save your wallet here. {#if !tauri_platform}By
selecting this option, you agree to save some cookies on your
browser.{/if}<br />
</p>
</div>
{/if}
{:else if step == "pazzle"}
<div
class="h-screen aspect-[3/5] pazzleline"
class="flex flex-col justify-center h-screen p-4 pazzleline"
class:min-w-[310px]={mobile}
class:min-w-[500px]={!mobile}
class:max-w-[360px]={mobile}
class:max-w-[600px]={!mobile}
>
<div class="mt-auto">
{#each [0, 1, 2, 3, 4] as row}
<div class="columns-3 gap-0">
{#each emojis2[display]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
{#each emojis2[pazzlePage]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i (pazzlePage + "-" + row + "-" + i)}
<div
role="button"
tabindex="0"
@ -358,15 +390,35 @@
</div>
{/each}
</div>
<div class="flex justify-between mt-auto">
<button
class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
on:click={pazzlePage === 0 ? init : to_previous_pazzle}
><ArrowLeftCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Go Back</button
>
<button
on:click={cancel}
class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
><XCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button
>
</div>
</div>
{:else if step == "order"}
<!-- console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code); -->
<div
class="h-screen aspect-[3/3] pazzleline"
class:min-w-[320px]={mobile}
class="flex flex-col justify-center h-screen p-4"
class:min-w-[310px]={mobile}
class:min-w-[500px]={!mobile}
class:max-w-[360px]={mobile}
class:max-w-[600px]={!mobile}
>
<div class="mt-auto">
{#each [0, 1, 2] as row}
<div class="columns-3 gap-0">
{#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
@ -379,15 +431,20 @@
on:keypress={() => select_order(emoji, row * 3 + i)}
>
<svelte:component
this={emojis[emoji_cat[emoji.cat]][emoji.index].svg?.default}
this={emojis[emoji_cat[emoji.cat]][emoji.index].svg
?.default}
/>
</div>
{:else}
<div class="w-full aspect-square opacity-25 select-none sel-emoji">
<div
class="w-full aspect-square opacity-25 select-none sel-emoji"
>
<svelte:component
this={emojis[emoji_cat[emoji.cat]][emoji.index].svg?.default}
this={emojis[emoji_cat[emoji.cat]][emoji.index].svg
?.default}
/>
<span class="sel drop-shadow-[2px_2px_2px_rgba(255,255,255,1)]"
<span
class="sel drop-shadow-[2px_2px_2px_rgba(255,255,255,1)]"
>{emoji.sel}</span
>
</div>
@ -396,8 +453,44 @@
</div>
{/each}
</div>
<div class="flex justify-between mt-auto">
<button
class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
on:click={() => (step = "pazzle")}
>
<ArrowLeftCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>
Go Back</button
>
<button
class="mt-1 bg-yellow-100 hover:bg-yellow-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
on:click={order}
><ArrowPath
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Clear</button
>
<button
on:click={cancel}
class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
><XCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button
>
</div>
</div>
{:else if step == "pin"}
<div class=" max-w-6xl lg:px-8 mx-auto px-3">
<div
class="flex flex-col justify-center h-screen p-4"
class:min-w-[310px]={mobile}
class:min-w-[500px]={!mobile}
class:max-w-[360px]={mobile}
class:max-w-[600px]={!mobile}
>
<div class="max-w-6xl lg:px-8 mt-auto px-3">
<p class="max-w-xl md:mx-auto lg:max-w-2xl">
<span class="text-xl">Enter your PIN code</span>
</p>
@ -408,7 +501,7 @@
<button
tabindex="0"
class="m-1 select-none align-bottom text-7xl w-[90px] h-[90px] p-0"
on:click={async () => await pin(num)}
on:click={async () => await on_pin_key(num)}
>
<span>{num}</span>
</button>
@ -418,12 +511,39 @@
<button
tabindex="0"
class="m-1 select-none mx-auto align-bottom text-7xl w-[90px] h-[90px] p-0"
on:click={async () => await pin(shuffle_pin[9])}
on:click={async () => await on_pin_key(shuffle_pin[9])}
>
<span>{shuffle_pin[9]}</span>
</button>
</div>
</div>
<div class="flex justify-between mt-auto">
<button
class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
on:click={order}
><ArrowLeftCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Go Back</button
>
<button
class="mt-1 bg-yellow-100 hover:bg-yellow-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
on:click={start_pin}
><ArrowPath
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Clear</button
>
<button
on:click={cancel}
class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
><XCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button
>
</div>
</div>
{:else if step == "opening"}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700">
Opening your wallet...<br />
@ -472,8 +592,20 @@
<Alert color="red" class="mt-5">
{error}
</Alert>
<button class="mt-10 select-none" on:click={init}> Try again </button>
<button class="mt-10 ml-5 select-none" on:click={cancel}> Cancel </button>
<button
class="mt-10 select-none text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
on:click={init}
>
Try again
</button>
<button
on:click={cancel}
class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
><XCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button
>
</div>
{:else}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-green-800">
@ -496,6 +628,7 @@
</div>
{/if}
{/if}
</div>
<style>
.pazzleline {
@ -524,4 +657,28 @@
border: 0;
box-shadow: none; */
}
.scale-to-fit {
/* Use the smaller of viewport width or height to maintain aspect ratio */
/* width: 100vw; */
/* height: 100vh; */
max-width: calc(100vh * (3 / 5)); /* Adjust the ratio to fit your needs */
max-height: calc(100vw * (5 / 3)); /* Inverse of the above ratio */
display: flex;
flex-direction: column;
justify-content: center;
}
/* Additional styles for responsiveness */
@media (orientation: landscape) {
.scale-to-fit {
max-width: calc(100vh * (3 / 5));
}
}
@media (orientation: portrait) {
.scale-to-fit {
max-height: calc(100vw * (5 / 3));
}
}
</style>

Write Preview
Loading…
Cancel
Save