From ccc23b8ddab8ef45541cc365f50db8fd88da1f51 Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Sat, 6 Jul 2024 17:31:50 +0300
Subject: [PATCH] more GUI fixes

---
 ng-app/src/lib/Login.svelte                   | 72 ++++++++++---------
 .../src/lib/components/CopyToClipboard.svelte |  9 +--
 .../src/lib/components/PasswordInput.svelte   | 19 ++++-
 ng-app/src/routes/WalletCreate.svelte         | 52 +++++++-------
 ng-app/tsconfig.json                          |  2 +-
 5 files changed, 89 insertions(+), 65 deletions(-)

diff --git a/ng-app/src/lib/Login.svelte b/ng-app/src/lib/Login.svelte
index 84c7e01..4315cb9 100644
--- a/ng-app/src/lib/Login.svelte
+++ b/ng-app/src/lib/Login.svelte
@@ -113,7 +113,7 @@
 
   let error;
 
-  let trusted = false;
+  let trusted = true;
 
   let mnemonic = "";
 
@@ -331,7 +331,7 @@
   bind:this={top}
 >
   {#if step == "load"}
-    <div class="flex-col justify-center p-4 pt-6" class:flex={height > 660}>
+    <div class="flex flex-col justify-center p-4 pt-6">
       <h2 class="pb-5 text-xl self-start">
         How to open your wallet? You have 2 options:
       </h2>
@@ -383,28 +383,28 @@
         <li>Enter the PIN code that you chose when you created your wallet.</li>
       </ul>
 
-      <div class=" max-w-xl lg:px-8 mx-auto px-4 text-primary-700">
-        <!-- Save wallet? -->
-        {#if for_import}
-          <div class="max-w-xl lg:px-8 mx-auto px-4 mb-8">
-            <span class="text-xl">Do you trust this device? </span> <br />
-            <div class="flex justify-center items-center my-4">
-              <Toggle class="" bind:checked={trusted}
-                >Yes, save my wallet on this device</Toggle
-              >
-            </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 />
-            </p>
+      <!-- Save wallet? -->
+      {#if for_import}
+        <div class="max-w-xl lg:px-8 mx-auto px-4 mb-2">
+          <span class="text-xl">Do you trust this device? </span> <br />
+          <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 saving some cookies on your
+              browser.{/if}<br />
+          </p>
+          <div class="flex justify-center items-center my-4">
+            <Toggle class="" bind:checked={trusted}
+              >Yes, save my wallet on this device</Toggle
+            >
           </div>
-        {/if}
+        </div>
+      {/if}
 
+      <div class=" max-w-xl lg:px-8 mx-auto px-4 text-primary-700">
         <div class="flex flex-col justify-centerspace-x-12 mt-4 mb-4">
           {#if !loaded}
             Loading pazzle...
@@ -449,13 +449,15 @@
               class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none  group-hover:text-gray-900 dark:group-hover:text-white"
             />Cancel login</button
           >
-          <a
+          <span
             on:click={start_with_mnemonic}
+            on:keypress={start_with_mnemonic}
+            role="link"
             tabindex="0"
             class="mt-1 text-lg px-5 py-2.5 text-center inline-flex items-center mb-2 underline cursor-pointer"
           >
             Open with Mnemonic instead
-          </a>
+          </span>
         </div>
       </div>
     </div>
@@ -477,11 +479,11 @@
             <label
               for="mnemonic-input"
               class="block mb-2 text-xl text-gray-900 dark:text-white"
-              >Your 12 words mnemonic</label
+              >Enter your 12 words mnemonic</label
             >
             <PasswordInput
               id="mnemonic-input"
-              placeholder="Enter your 12 words mnemonic here separated by spaces"
+              placeholder="12 words separated by spaces"
               bind:value={mnemonic}
               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               auto_complete="mnemonic"
@@ -489,7 +491,7 @@
             <div class="flex">
               <Button
                 type="submit"
-                class="mt-3 ml-auto text-white bg-primary-700 disabled:opacity-65 focus:ring-4 focus:ring-blue-500 focus:border-blue-500 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                class="mt-3 mb-2 ml-auto text-white bg-primary-700 disabled:opacity-65 focus:ring-4 focus:ring-blue-500 focus:border-blue-500 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-blue-500 dark:focus:border-blue-500"
                 on:click={start_pin}
                 disabled={mnemonic.split(" ").length !== 12}
                 ><CheckCircle
@@ -553,7 +555,7 @@
                     />
                     <span
                       class="sel drop-shadow-[2px_2px_2px_rgba(255,255,255,1)]"
-                      class:text-[9em]={!mobile}
+                      class:text-[8em]={!mobile}
                       class:text-[6em]={mobile}>{emoji.sel}</span
                     >
                   </div>
@@ -574,6 +576,9 @@
                 <button
                   tabindex="0"
                   class="pindigit m-1 disabled:opacity-15 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
+                  class:h-[160px]={!mobile}
+                  class:h-[100px]={mobile}
+                  class:text-8xl={!mobile}
                   on:click={async () => await on_pin_key(num)}
                   disabled={pin_code.length >= 4}
                 >
@@ -587,6 +592,9 @@
             <button
               tabindex="0"
               class="pindigit disabled:opacity-15 m-1 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
+              class:h-[160px]={!mobile}
+              class:h-[100px]={mobile}
+              class:text-8xl={!mobile}
               on:click={async () => await on_pin_key(shuffle_pin[9])}
               disabled={pin_code.length >= 4}
             >
@@ -600,7 +608,7 @@
             >
               <LockOpen
                 tabindex="-1"
-                class="w-full h-[50%] transition duration-75 focus:outline-none select-none group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-[50%] h-[50%] transition duration-75 focus:outline-none select-none group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </Button>
           </div>
@@ -690,7 +698,7 @@
             />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"
+            class="mt-10 ml-2 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}
           >
             <ArrowPath
@@ -731,10 +739,10 @@
     min-height: 99px;
   }
 
-  .pazzleline {
+  /* .pazzleline {
     margin-right: auto;
     margin-left: auto;
-  }
+  } */
 
   .sel {
     position: absolute;
diff --git a/ng-app/src/lib/components/CopyToClipboard.svelte b/ng-app/src/lib/components/CopyToClipboard.svelte
index 49f226d..6760bc8 100644
--- a/ng-app/src/lib/components/CopyToClipboard.svelte
+++ b/ng-app/src/lib/components/CopyToClipboard.svelte
@@ -22,13 +22,14 @@
   };
 </script>
 
-<div class="w-full">
+<div class="w-full mt-2">
   <div class="relative">
-    <input
+    <textarea
       {id}
-      type="text"
+      rows="3"
+      style="resize: none;"
       {value}
-      class="col-span-6 pr-11 bg-gray-50 border border-gray-300 text-gray-600 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="col-span-6 pr-11 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"
       disabled
       readonly
     />
diff --git a/ng-app/src/lib/components/PasswordInput.svelte b/ng-app/src/lib/components/PasswordInput.svelte
index dd5549d..62210f4 100644
--- a/ng-app/src/lib/components/PasswordInput.svelte
+++ b/ng-app/src/lib/components/PasswordInput.svelte
@@ -7,6 +7,8 @@
 
   export let show: boolean = false;
 
+  let input;
+
   let type: "password" | "text" = "password";
   $: type = show ? "text" : "password";
 
@@ -14,10 +16,21 @@
     const target = event.target as HTMLInputElement;
     value = target.value;
   }
+
+  async function toggle() {
+    let { selectionStart, selectionEnd } = input;
+    show = !show;
+    input.focus();
+    setTimeout(function () {
+      input.selectionStart = selectionStart;
+      input.selectionEnd = selectionEnd;
+    }, 0);
+  }
 </script>
 
 <div class="relative">
   <input
+    bind:this={input}
     {value}
     {placeholder}
     {id}
@@ -32,7 +45,8 @@
   >
     <svg
       fill="none"
-      on:click={() => (show = !show)}
+      on:click={toggle}
+      on:keypress={toggle}
       class={`${show ? "block" : "hidden"} h-6 text-gray-700`}
       xmlns="http://www.w3.org/2000/svg"
       viewbox="0 0 576 512"
@@ -47,7 +61,8 @@
     <svg
       fill="none"
       class={`${!show ? "block" : "hidden"} h-6 text-gray-700`}
-      on:click={() => (show = !show)}
+      on:click={toggle}
+      on:keypress={toggle}
       xmlns="http://www.w3.org/2000/svg"
       viewbox="0 0 640 512"
     >
diff --git a/ng-app/src/routes/WalletCreate.svelte b/ng-app/src/routes/WalletCreate.svelte
index 5bcbc44..23ed52f 100644
--- a/ng-app/src/routes/WalletCreate.svelte
+++ b/ng-app/src/routes/WalletCreate.svelte
@@ -516,7 +516,7 @@
 <svelte:window bind:innerWidth={width} bind:innerHeight={height} />
 
 <CenteredLayout>
-  <div class="max-w-2xl lg:px-8 mx-auto" class:px-4={width > 328}>
+  <div class="max-w-2xl lg:px-8 mx-auto">
     {#if wait}
       <div class="lg:px-8 text-primary-700">
         {#if wait === true}
@@ -599,7 +599,7 @@
           </div>
         {:else if intro}
           <div class=" max-w-6xl lg:px-8 mx-auto px-4">
-            <p class="max-w-xl text-justify md:mx-auto lg:max-w-2xl">
+            <p class="max-w-xl text-left md:mx-auto lg:max-w-2xl">
               A <b>NextGraph Wallet</b> is unique to each person. It stores your
               credentials and authorizations to access documents. You need one
               in order to start using NextGraph.<br /><br />If you already have
@@ -853,7 +853,7 @@
           </div>
         {:else if !invitation}
           <div class=" max-w-6xl lg:px-8 mx-auto px-4">
-            <p class="max-w-xl md:mx-auto lg:max-w-2xl">
+            <p class="max-w-xl md:mx-auto text-left lg:max-w-2xl">
               NextGraph is based on an efficient decentralized P2P network, and
               in order to join this network and start using the app, you need to
               first select a <b>broker&nbsp;server</b>.
@@ -1255,7 +1255,7 @@
                   class="font-bold text-xl">{digit}</span
                 >{/each}
             </Alert>
-            <div class="w-[295px] mx-auto mb-4">
+            <div class="w-[295px] mx-auto mb-10">
               {#each [0, 1, 2] as row}
                 <div class="">
                   {#each [1, 2, 3] as num}
@@ -1610,7 +1610,7 @@
               <div class="text-green-800 mx-auto flex flex-col items-center">
                 <div>Your wallet is ready!</div>
                 <svg
-                  class="my-10 h-16 w-16"
+                  class="my-4 h-16 w-16"
                   fill="none"
                   stroke="currentColor"
                   stroke-width="1.5"
@@ -1625,8 +1625,8 @@
                   />
                 </svg>
               </div>
-              {#if download_link}
-                <div class="text-center">
+              <div class="text-center">
+                {#if download_link}
                   Please download your wallet and keep it in a safe location<br
                   />
                   <a
@@ -1659,23 +1659,23 @@
                       Download my wallet
                     </button>
                   </a>
-                </div>
-                <br />
-              {:else if !options.trusted}
-                Your wallet file has been downloaded into your "Downloads"
-                folder, with the name<br /><span class="text-black">
-                  {download_name}</span
-                ><br />
-                <span class="font-bold"
-                  >Please move it to a safe and durable place.</span
-                ><br /><br />
-              {/if}
-              <!-- Pazzle -->
-              Here is your Pazzle
-              <br />
-              The <span class="font-bold">order</span> of each image is
-              <span class="font-bold">important</span>:
 
+                  <br />
+                {:else if !options.trusted}
+                  Your wallet file has been downloaded into your "Downloads"
+                  folder, with the name<br /><span class="text-black">
+                    {download_name}</span
+                  ><br />
+                  <span class="font-bold"
+                    >Please move it to a safe and durable place.</span
+                  ><br />
+                {/if}
+                <!-- Pazzle -->
+                Here below is your Pazzle.
+                <br />
+                The <span class="font-bold">order</span> of each image is
+                <span class="font-bold">important</span> !
+              </div>
               <div
                 class="mt-2 bg-white shadow-md rounded-lg max-w-2xl w-full mx-auto"
               >
@@ -1689,12 +1689,12 @@
                       {index + 1}
                     </div>
                     <div
-                      class="flex justify-center w-[2em] tall-sm:w-[2.5em] tall-md:w-[4em]"
+                      class="flex justify-center w-[3em] h-[3em]"
                       title={emoji.code}
                     >
                       <svelte:component
                         this={emoji.svg?.default}
-                        class="text-5xl w-full"
+                        class="w-[3em]  h-[3em] "
                       />
                     </div>
                     <div class="flex flex-col ml-4">
@@ -1712,7 +1712,7 @@
               <br />
 
               <!-- Mnemonic (copy button). TODO: once the component is available-->
-              <label for="mnemonic mb-2"
+              <label for="mnemonic"
                 >And here is your mnemonic (your alternative passphrase):</label
               >
               <CopyToClipboard
diff --git a/ng-app/tsconfig.json b/ng-app/tsconfig.json
index d383031..5895c4b 100644
--- a/ng-app/tsconfig.json
+++ b/ng-app/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
     "target": "ESNext",
-    "useDefineForClassFields": true,
+    "useDefineForClassFields": false,
     "module": "ESNext",
     "resolveJsonModule": true,
     "baseUrl": ".",