qr page

4 files changed, 79 insertions, 19 deletions

diff --git a/src/locales/en.json b/src/locales/en.json
index 36357ef2..9752a41d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,4 +1,7 @@
 {
+  "accounts": {
+    "savings": "Savings"
+  },
 	"404": {
 		"404": "404",
 		"pageNotFound": "Page not found."
diff --git a/src/routes/(app)/account/pass/+page.svelte b/src/routes/(app)/account/pass/+page.svelte
index cf4e80e6..f5e956ff 100644
--- a/src/routes/(app)/account/pass/+page.svelte
+++ b/src/routes/(app)/account/pass/+page.svelte
@@ -19,7 +19,8 @@
   let { user } = data;
 
   let confirm, password, revealPassword, revealConfirm;
-      let type = "bitcoin";
+  let type = "bitcoin";
+  let name = $t("accounts.savings");
 
   onMount(() => {
     if (!$mnemonic) goto("/account/savings");
@@ -45,7 +46,7 @@
       let fingerprint = child.fingerprint.toString(16).padStart(8, "0");
 
       let receiving = child.deriveChild(0);
-      await post("/api/accounts", { fingerprint, pubkey, seed, type });
+      await post("/api/accounts", { fingerprint, pubkey, name, seed, type });
       goto(`/${user.username}`);
     } catch (e) {
       console.log(e);
@@ -90,6 +91,7 @@
         />
       {/if}
       <button
+        tabindex="-1"
         type="button"
         on:click={() => (revealPassword = !revealPassword)}
         class="absolute right-5 -translate-y-1/2 top-1/2"
@@ -110,7 +112,6 @@
         />
       {:else}
         <input
-          name="password"
           type="password"
           placeholder="Confirm password"
           required
@@ -120,6 +121,7 @@
       {/if}
       <button
         type="button"
+        tabindex="-1"
         on:click={() => (revealConfirm = !revealConfirm)}
         class="absolute right-5 -translate-y-1/2 top-1/2"
       >
diff --git a/src/routes/(app)/qr/[text]/+page.svelte b/src/routes/(app)/qr/[text]/+page.svelte
index 8b6d48ab..5469c084 100644
--- a/src/routes/(app)/qr/[text]/+page.svelte
+++ b/src/routes/(app)/qr/[text]/+page.svelte
@@ -7,21 +7,16 @@
 </script>
 
 <div class="container px-4 max-w-4xl mx-auto space-y-5">
-  <div class="flex justify-center items-center">
-    <div
-      class="md:shadow-xl rounded-3xl md:px-10 pt-5 pb-10 space-y-5 w-full md:mx-5"
-    >
-      <Qr {src} />
+  <Qr {src} />
 
-      <button
-        type="button"
-        class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border text-xl hover:bg-slate-100"
-        on:click={() => copy(text)}
-      >
-        <div class="my-auto">
-          {text}
-        </div>
-      </button>
-    </div>
-  </div>
+  <button
+     type="button"
+     class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border text-xl hover:bg-slate-100"
+     on:click={() => copy(text)}
+     >
+     <Icon icon="copy" style="w-8" />
+     <div class="my-auto">
+       {text}
+     </div>
+  </button>
 </div>
diff --git a/src/routes/(app)/qr/create/+page.svelte b/src/routes/(app)/qr/create/+page.svelte
new file mode 100644
index 00000000..fd99a54b
--- /dev/null
+++ b/src/routes/(app)/qr/create/+page.svelte
@@ -0,0 +1,60 @@
+<script>
+  import { goto } from "$app/navigation";
+  import { browser } from "$app/environment";
+  import { t } from "$lib/translations";
+  import Icon from "$comp/Icon.svelte";
+  let el, text, pasted;
+
+  let keypress = (e) =>
+    e.key === "Enter" ? e.preventDefault() || el.click() : (pasted = false);
+
+  let paste = async () => {
+    text = await navigator.clipboard.readText();
+    pasted = true;
+  };
+
+  let submit = () => goto(`/qr/${encodeURIComponent(text)}`);
+
+  $: if (browser && pasted && text) el.click() && (pasted = false);
+</script>
+
+<div class="container px-4 max-w-lg mx-auto space-y-5 mt-20">
+  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
+    Create QR
+  </h1>
+
+  <form on:submit|preventDefault={submit} class="space-y-2 text-xl">
+    <div class="mb-2">
+      <textarea
+        use:focus
+        name="text"
+        placeholder="Enter some text or a URL to put in a QR"
+        on:keypress={keypress}
+        class="w-full p-4 border rounded-xl h-32 text-xl"
+        bind:value={text}
+        on:paste={() => (pasted = true)}
+        autocapitalize="none"
+      />
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full bg-primary justify-center gap-2"
+        on:click={paste}
+      >
+        <Icon icon="paste" style="w-8 my-auto" />
+        <div class="my-auto">{$t("user.send.paste")}</div>
+      </button>
+
+      <button
+        bind:this={el}
+        type="submit"
+        class="flex bg-black text-white border rounded-2xl px-6 py-5 w-full font-bold gap-2 justify-center"
+      >
+        <Icon icon="send" style="w-8 my-auto invert" />
+        <div class="my-auto">{$t("user.dashboard.go")}</div>
+      </button>
+    </div>
+  </form>
+</div>