add navigation buttons for wallet login

ng-app/src/lib/Login.svelte

@@ -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 });
+    selection[pazzlePage] = { cat: cat_idx, index: idx };
-    //console.log(selection);
+    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.debug(last_one, val);
-    //console.log(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.
+          image that belongs to your pazzle. Find it and tap or click on that
-        The 15 images are shuffled too, they will not appear at the same
+          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
+          your keyboard to move to the desired item on the screen, then press
-        space bar to select each one.
+          the space bar to select each one.
         </li>
         <li>
-        Once you completed the last category, you will be presented with all the
+          Once you completed the last category, you will be presented with all
-        images you have previously selected. Their order is displayed as it was
+          the images you have previously selected. Their order is displayed as
-        when you picked them. But this is not the correct order of the images in
+          it was when you picked them. But this is not the correct order of the
-        your pazzle. You now have to order them correctly.
+          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
+          Find it on the screen and click or tap on it. It will be greyed out
-        the number 1 will appear on top of it.
+          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
+          Move on to the second image of your pazzle (that you memorized). Find
-        on the screen and tap on it. Repeat this step until you reached the last
+          it on the screen and tap on it. Repeat this step until you reached the
-        image.
+          last image.
         </li>
         <li>
-        Finally, your PIN code will be asked. enter it by clicking or tapping on
+          Finally, your PIN code will be asked. enter it by clicking or tapping
-        the digits.
+          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
+          If you do, if this device is yours or is used by few trusted persons
-        your family or workplace, and you would like to login again from this
+          of your family or workplace, and you would like to login again from
-        device in the future, then you can save your wallet on this device. To
+          this device in the future, then you can save your wallet on this
-        the contrary, if this device is public and shared by strangers, do not
+          device. To the contrary, if this device is public and shared by
-        save your wallet here. {#if !tauri_platform}By selecting this option,
+          strangers, do not save your wallet here. {#if !tauri_platform}By
-          you agree to save some cookies on your browser.{/if}<br />
+            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="flex flex-col justify-center h-screen p-4"
-    class:min-w-[320px]={mobile}
+      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
-      <button class="mt-10 ml-5 select-none" on:click={cancel}> Cancel </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>