NextGraph
/
nextgraph-rs
1
2
Fork 0
Code Issues 1 Pull Requests Packages Projects 2 Releases 3 Activity

more GUI fixes

Browse Source
pull/26/head
Niko PLP 4 months ago
parent 71d1607693
commit ccc23b8dda
5 changed files with 89 additions and 65 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 72
      ng-app/src/lib/Login.svelte
  2. 9
      ng-app/src/lib/components/CopyToClipboard.svelte
  3. 19
      ng-app/src/lib/components/PasswordInput.svelte
  4. 52
      ng-app/src/routes/WalletCreate.svelte
  5. 2
      ng-app/tsconfig.json

72
ng-app/src/lib/Login.svelte
Unescape View File

@ -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;

9
ng-app/src/lib/components/CopyToClipboard.svelte
Unescape View File

@ -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
/>

19
ng-app/src/lib/components/PasswordInput.svelte
Unescape View File

@ -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"
>

52
ng-app/src/routes/WalletCreate.svelte
Unescape View File

@ -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

2
ng-app/tsconfig.json
Unescape View File

@ -2,7 +2,7 @@
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"useDefineForClassFields": false,
"module": "ESNext",
"resolveJsonModule": true,
"baseUrl": ".",

Write Preview
Loading…
Cancel
Save