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 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": ".",