From b6c2b40f149d3723e8750c5b07797b5dfc03fe18 Mon Sep 17 00:00:00 2001 From: Laurin Weger Date: Thu, 27 Jun 2024 11:59:58 +0200 Subject: [PATCH 01/31] add navigation buttons for wallet login --- ng-app/src/lib/Login.svelte | 647 ++++++++++++++++++++++-------------- 1 file changed, 402 insertions(+), 245 deletions(-) diff --git a/ng-app/src/lib/Login.svelte b/ng-app/src/lib/Login.svelte index 6e743bb..e64df77 100644 --- a/ng-app/src/lib/Login.svelte +++ b/ng-app/src/lib/Login.svelte @@ -9,12 +9,22 @@ // according to those terms. --> + + -{#if step == "load"} -
-

How to open your wallet, step by step :

- -
-
- {#if !loaded} - Loading pazzle... +
+ {#if step == "load"} +
+

How to open your wallet, step by step :

+
    +
  • + For each one of the 9 categories of images, you will be presented with + the 15 possible image choices. The categories are shuffled at every + login. They will not always appear in the same order. +
    • +
  • + 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 + 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. +
    • +
  • + 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. +
    • +
  • + 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. +
    • +
  • + 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. +
    • +
  • + Finally, your PIN code will be asked. enter it by clicking or tapping + on the digits. +
    • +
+
+
+ {#if !loaded} + Loading pazzle... + + + + + {:else} +
+ + +
+ {/if} +
+ {#if for_import} +
+ Do you trust this device?
+
+ Yes, save my wallet on this device +
+

+ 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}
+

+
+ {/if} + {:else if step == "pazzle"} +
+
+ {#each [0, 1, 2, 3, 4] as row} +
+ {#each emojis2[pazzlePage]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i (pazzlePage + "-" + row + "-" + i)} +
select(row * 3 + i)} + on:keypress={() => select(row * 3 + i)} + > + +
+ {/each} +
+ {/each} +
+
+ + +
+
+ {:else if step == "order"} + +
+
+ {#each [0, 1, 2] as row} +
+ {#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i} + {#if !emoji.sel} +
select_order(emoji, row * 3 + i)} + on:keypress={() => select_order(emoji, row * 3 + i)} + > + +
+ {:else} +
+ + {emoji.sel} +
+ {/if} + {/each} +
+ {/each} +
+
+ + + +
+
+ {:else if step == "pin"} +
+
+

+ Enter your PIN code +

+
+ {#each [0, 1, 2] as row} +
+ {#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num} + + {/each} +
+ {/each} + +
+
+
+ + + +
+
+ {:else if step == "opening"} +
+ Opening your wallet...
+ Please wait - {:else} - - {/if} -
- {#if for_import} -
- Do you trust this device?
-
- Yes, save my wallet on this device -
-

- 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}
-

- {/if} -{:else if step == "pazzle"} -
- {#each [0, 1, 2, 3, 4] as row} -
- {#each emojis2[display]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i} -
select(row * 3 + i)} - on:keypress={() => select(row * 3 + i)} - > - -
- {/each} + {:else if step == "end"} + {#if error} +
+ An error occurred ! + + + {error} + + +
- {/each} -
-{:else if step == "order"} - -
- {#each [0, 1, 2] as row} -
- {#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i} - {#if !emoji.sel} -
select_order(emoji, row * 3 + i)} - on:keypress={() => select_order(emoji, row * 3 + i)} - > - -
- {:else} -
- - {emoji.sel} -
- {/if} - {/each} + {:else} +
+ Your wallet is opened!
Please wait while the app is loading... +
- {/each} -
-{:else if step == "pin"} -
-

- Enter your PIN code -

-
- {#each [0, 1, 2] as row} -
- {#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num} - - {/each} -
- {/each} - -
-
-{:else if step == "opening"} -
- Opening your wallet...
- Please wait - - - - -
-{:else if step == "end"} - {#if error} -
- An error occurred ! - - - {error} - - - -
- {:else} -
- Your wallet is opened!
Please wait while the app is loading... - -
+ {/if} {/if} -{/if} +
From a4a1e639771660a65f9365216a4f93a662acdc4c Mon Sep 17 00:00:00 2001 From: Laurin Weger Date: Thu, 27 Jun 2024 16:13:51 +0200 Subject: [PATCH 02/31] ng-app login: adjust pin pad to same size as emojis --- ng-app/src/lib/Login.svelte | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/ng-app/src/lib/Login.svelte b/ng-app/src/lib/Login.svelte index e64df77..87e4747 100644 --- a/ng-app/src/lib/Login.svelte +++ b/ng-app/src/lib/Login.svelte @@ -490,31 +490,33 @@ class:max-w-[360px]={mobile} class:max-w-[600px]={!mobile} > -
+

Enter your PIN code

-
- {#each [0, 1, 2] as row} -
- {#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num} - - {/each} -
- {/each} + {#each [0, 1, 2] as row} +
+ {#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num} + + {/each} +
+ {/each} +
+
+
From 1be5c5be50a6cd1e4f7e6a025bcae2d34574f0b9 Mon Sep 17 00:00:00 2001 From: Laurin Weger Date: Thu, 27 Jun 2024 16:25:31 +0200 Subject: [PATCH 03/31] fix misalignment of cancel button --- ng-app/src/lib/Login.svelte | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ng-app/src/lib/Login.svelte b/ng-app/src/lib/Login.svelte index 87e4747..14c28fe 100644 --- a/ng-app/src/lib/Login.svelte +++ b/ng-app/src/lib/Login.svelte @@ -337,7 +337,7 @@ - +
+ An error occurred ! + + + {error} + +
+
+ + +
{:else}
@@ -659,28 +678,4 @@ 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)); - } - } From dfdce388a455d09f0ac0f01a98b7bc4b9b27ed44 Mon Sep 17 00:00:00 2001 From: Laurin Weger Date: Thu, 27 Jun 2024 17:06:25 +0200 Subject: [PATCH 05/31] component descriptions --- ng-app/src/lib/Install.svelte | 6 +++++- ng-app/src/lib/NoWallet.svelte | 5 +++++ ng-app/src/routes/Home.svelte | 7 +++++-- ng-app/src/routes/User.svelte | 6 ++++++ ng-app/src/routes/WalletCreate.svelte | 7 +++++++ ng-app/src/routes/WalletLogin.svelte | 6 ++++++ 6 files changed, 34 insertions(+), 3 deletions(-) diff --git a/ng-app/src/lib/Install.svelte b/ng-app/src/lib/Install.svelte index 1b1af5a..14ef5bd 100644 --- a/ng-app/src/lib/Install.svelte +++ b/ng-app/src/lib/Install.svelte @@ -9,8 +9,12 @@ // according to those terms. --> + + -
+
{#if step == "load"}

How to open your wallet, step by step:

@@ -322,6 +356,14 @@ {:else}
+ -
{/if}
@@ -362,60 +396,8 @@

{/if} - {:else if step == "pazzle"} -
-
-

- - - Select your emoji of category: {emoji_cat[ - shuffle.category_indices[pazzlePage] - ]} -

- {#each [0, 1, 2, 3, 4] as row} -
- {#each emojis2[pazzlePage]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i (pazzlePage + "-" + row + "-" + i)} -
select(row * 3 + i)} - on:keypress={() => select(row * 3 + i)} - > - -
- {/each} -
- {/each} -
-
- - -
-
- {:else if step == "order"} - + + {:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"}
-
-

- Click your emojis in the correct order -

- {#each [0, 1, 2] as row} -
- {#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i} - {#if !emoji.sel} +
+ {#if step == "pazzle"} +

+ + + Select your emoji of category: {emoji_cat[ + shuffle.category_indices[pazzlePage] + ]} +

+ {#each [0, 1, 2, 3, 4] as row} +
+ {#each emojis2[pazzlePage]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i (pazzlePage + "-" + row + "-" + i)}
select_order(emoji, row * 3 + i)} - on:keypress={() => select_order(emoji, row * 3 + i)} + on:click={() => select(row * 3 + i)} + on:keypress={() => select(row * 3 + i)} > - +
- {:else} -
- - {emoji.sel} + {/each} + {:else if step == "order"} +

+ Click your emojis in the correct order +

+ {#each [0, 1, 2] as row} +
+ {#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i} + {#if !emoji.sel} +
select_order(emoji)} + on:keypress={() => select_order(emoji)} > -
- {/if} - {/each} + +
+ {:else} +
+ + {emoji.sel} +
+ {/if} + {/each} +
+ {/each} + {:else if step == "pin"} +

+ Enter your PIN code: + {#each pin_code as pin_key}*{/each} +

+ {#each [0, 1, 2] as row} +
+ {#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num} + + {/each} +
+ {/each} +
+
+ +
- {/each} + {/if}
+
- - -
-
- {:else if step == "pin"} -
-
-

- Enter your PIN code -

- {#each [0, 1, 2] as row} -
- {#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num} - - {/each} -
- {/each} -
-
- - -
-
-
- -
{:else if step == "opening"} @@ -660,6 +626,8 @@ {/if}
+ + diff --git a/ng-app/src/lib/NoWallet.svelte b/ng-app/src/lib/NoWallet.svelte index 12aa7a1..60fb913 100644 --- a/ng-app/src/lib/NoWallet.svelte +++ b/ng-app/src/lib/NoWallet.svelte @@ -16,7 +16,7 @@ import CenteredLayout from "./CenteredLayout.svelte"; - +