feat/ng-app: design for device name input

ng-app/src/lib/Login.svelte

@@ -122,6 +122,11 @@
 
   let unlockWith: "pazzle" | "mnemonic" | undefined;
 
+  let device_name;
+
+  // TODO: @niko Implement API
+  // ng.get_device_name().then((name) => (device_name = name));
+
   function order() {
     step = "order";
     ordered = [];
@@ -168,6 +173,7 @@
     // open the wallet
     try {
       if (tauri_platform) {
+        // TODO @niko: Add device_name as param to open_with_* APIs
         let opened_wallet =
           unlockWith === "pazzle"
             ? await ng.wallet_open_with_pazzle(wallet, pazzle, pin_code)
@@ -191,6 +197,7 @@
           wallet: opened_wallet,
           id: opened_wallet.V0.wallet_id,
           trusted,
+          device_name,
         });
       } else {
         let worker_import = await import("../worker.js?worker&inline");
@@ -211,9 +218,14 @@
           //console.log("Message received from worker", msg.data);
           if (msg.data.loaded) {
             if (unlockWith === "pazzle") {
-              myWorker.postMessage({ wallet, pazzle, pin_code });
+              myWorker.postMessage({ wallet, pazzle, pin_code, device_name });
             } else {
-              myWorker.postMessage({ wallet, mnemonic_words, pin_code });
+              myWorker.postMessage({
+                wallet,
+                mnemonic_words,
+                pin_code,
+                device_name,
+              });
             }
             //console.log("postMessage");
           } else if (msg.data.success) {
@@ -233,6 +245,7 @@
               wallet: msg.data.success,
               id: msg.data.success.V0.wallet_id,
               trusted,
+              device_name,
             });
           } else {
             console.error(msg.data.error);
@@ -374,7 +387,7 @@
 
       <!-- Save wallet? -->
       {#if for_import}
-        <div class="max-w-xl lg:px-8 mx-auto px-4 mb-2">
+        <div class="text-left max-w-xl mx-auto mb-2">
           <span class="text-xl"
             >{$t("pages.wallet_create.save_wallet_options.trust")}
           </span> <br />
@@ -383,12 +396,23 @@
             {#if !tauri_platform}
               {$t("pages.login.trust_device_allow_cookies")}{/if}<br />
           </p>
-          <div class="flex justify-center items-center my-4">
+          <div class="flex mt-2 mb-4">
             <Toggle class="" bind:checked={trusted}
               >{$t("pages.login.trust_device_yes")}</Toggle
             >
-            <!-- Ask for Device Name -->
           </div>
+          <label for="device-name-input" class="text-sm">
+            {$t("pages.login.device_name_label")}
+          </label>
+          <input
+            id="device-name-input"
+            disabled
+            bind:value={device_name}
+            placeholder={$t("pages.login.device_name_placeholder")}
+            type="text"
+            autocomplete="device-name"
+            class="cursor-not-allowed opacity-50 bg-gray-50 border border-gray-300 text-gray-900 text-xs 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"
+          />
         </div>
       {/if}
 

ng-app/src/locales/en.json

@@ -84,6 +84,8 @@
       },
       "trust_device_allow_cookies": "By selecting this option, you agree to saving some cookies on your browser.",
       "trust_device_yes": "Yes, save my wallet on this device",
+      "device_name_label": "Name of device as seen on your other devices",
+      "device_name_placeholder": "Display name of this device",
       "loading_pazzle": "Loading Pazzle",
       "open_with_pazzle": "Open With Pazzle",
       "login_cancel": "Cancel Login",
@@ -191,6 +193,8 @@
         "trust": "Do you trust this device?",
         "trust_description": "If you do, if this device is yours, or it is used by a 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.",
         "trust_toggle": "Save my wallet on this device?",
+        "device_name_description": "To see which devices you are connected with, every device should have a name (e.g. Bob's laptop). Please enter it here.",
+        "device_name_placeholder": "Display name of this device",
         "cloud": "Keep a copy in the cloud?",
         "cloud_description": "Are you afraid that you will loose the file containing your wallet? If this would happen, your wallet would be lost forever, together with all your documents. We can keep an encrypted copy of your wallet in our cloud. Only you will be able to download it with a special link. You would have to keep this link safely though. By selecting this option, you agree to the",
         "cloud_toggle": "Save my wallet in the cloud?",

ng-app/src/routes/WalletCreate.svelte

@@ -139,6 +139,11 @@
   /** The emojis for the newly created pazzle. */
   let pazzle_emojis = [];
   let confirm_modal_open = false;
+  let device_name;
+
+  // TODO @niko add API
+  // ng.get_device_name().then((name) => (device_name = name));
+
   function scrollToTop() {
     top.scrollIntoView();
   }
@@ -254,6 +259,7 @@
       core_bootstrap: invitation.V0.bootstrap,
       core_registration,
       additional_bootstrap,
+      device_name,
     };
     //console.log("do wallet with params", params);
     try {
@@ -1424,8 +1430,25 @@
                   "pages.wallet_create.save_wallet_options.trust_toggle"
                 )}</Toggle
               >
-              <!-- Device Name-->
             </p>
+            <br />
+            <p class="max-w-xl md:mx-auto lg:max-w-2xl text-left">
+              {@html $t(
+                "pages.wallet_create.save_wallet_options.device_name_description"
+              )}
+            </p>
+            <input
+              id="device-name-input"
+              disabled
+              class="cursor-not-allowed opacity-50 mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-xs 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"
+              bind:value={device_name}
+              placeholder={$t(
+                "pages.wallet_create.save_wallet_options.device_name_placeholder"
+              )}
+              type="text"
+              autocomplete="device-name"
+            />
+
             <p class="max-w-xl md:mx-auto mt-10 lg:max-w-2xl text-left">
               <span class="text-xl"
                 >{@html $t(

ng-app/src/store.ts

@@ -454,7 +454,7 @@ export const branch_subs = function(nuri) {
 };
 
 let blob_cache = {};
-export async function get_blob(ref: { nuri: string | number; reference: { key: any; id: any; }; }) {
+export async function get_blob(ref: { nuri: string; reference: { key: any; id: any; }; }) {
     if (!ref) return false;
     const cached = blob_cache[ref.nuri];
     if (cached) {