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

more GUI fixes

Browse Source
pull/26/head
Niko PLP 6 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. 54
      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. 28
      ng-app/src/routes/WalletCreate.svelte
  5. 2
      ng-app/tsconfig.json

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

@ -113,7 +113,7 @@
let error; let error;
let trusted = false; let trusted = true;
let mnemonic = ""; let mnemonic = "";
@ -331,7 +331,7 @@
bind:this={top} bind:this={top}
> >
{#if step == "load"} {#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"> <h2 class="pb-5 text-xl self-start">
How to open your wallet? You have 2 options: How to open your wallet? You have 2 options:
</h2> </h2>
@ -383,28 +383,28 @@
<li>Enter the PIN code that you chose when you created your wallet.</li> <li>Enter the PIN code that you chose when you created your wallet.</li>
</ul> </ul>
<div class=" max-w-xl lg:px-8 mx-auto px-4 text-primary-700">
<!-- Save wallet? --> <!-- Save wallet? -->
{#if for_import} {#if for_import}
<div class="max-w-xl lg:px-8 mx-auto px-4 mb-8"> <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 /> <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"> <div class="flex justify-center items-center my-4">
<Toggle class="" bind:checked={trusted} <Toggle class="" bind:checked={trusted}
>Yes, save my wallet on this device</Toggle >Yes, save my wallet on this device</Toggle
> >
</div> </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>
</div> </div>
{/if} {/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"> <div class="flex flex-col justify-centerspace-x-12 mt-4 mb-4">
{#if !loaded} {#if !loaded}
Loading pazzle... 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" 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 />Cancel login</button
> >
<a <span
on:click={start_with_mnemonic} on:click={start_with_mnemonic}
on:keypress={start_with_mnemonic}
role="link"
tabindex="0" tabindex="0"
class="mt-1 text-lg px-5 py-2.5 text-center inline-flex items-center mb-2 underline cursor-pointer" 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 Open with Mnemonic instead
</a> </span>
</div> </div>
</div> </div>
</div> </div>
@ -477,11 +479,11 @@
<label <label
for="mnemonic-input" for="mnemonic-input"
class="block mb-2 text-xl text-gray-900 dark:text-white" class="block mb-2 text-xl text-gray-900 dark:text-white"
>Your 12 words mnemonic</label >Enter your 12 words mnemonic</label
> >
<PasswordInput <PasswordInput
id="mnemonic-input" id="mnemonic-input"
placeholder="Enter your 12 words mnemonic here separated by spaces" placeholder="12 words separated by spaces"
bind:value={mnemonic} 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" 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" auto_complete="mnemonic"
@ -489,7 +491,7 @@
<div class="flex"> <div class="flex">
<Button <Button
type="submit" 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} on:click={start_pin}
disabled={mnemonic.split(" ").length !== 12} disabled={mnemonic.split(" ").length !== 12}
><CheckCircle ><CheckCircle
@ -553,7 +555,7 @@
/> />
<span <span
class="sel drop-shadow-[2px_2px_2px_rgba(255,255,255,1)]" 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 class:text-[6em]={mobile}>{emoji.sel}</span
> >
</div> </div>
@ -574,6 +576,9 @@
<button <button
tabindex="0" 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="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)} on:click={async () => await on_pin_key(num)}
disabled={pin_code.length >= 4} disabled={pin_code.length >= 4}
> >
@ -587,6 +592,9 @@
<button <button
tabindex="0" 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="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])} on:click={async () => await on_pin_key(shuffle_pin[9])}
disabled={pin_code.length >= 4} disabled={pin_code.length >= 4}
> >
@ -600,7 +608,7 @@
> >
<LockOpen <LockOpen
tabindex="-1" 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> </Button>
</div> </div>
@ -690,7 +698,7 @@
/>Cancel</button />Cancel</button
> >
<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} on:click={init}
> >
<ArrowPath <ArrowPath
@ -731,10 +739,10 @@
min-height: 99px; min-height: 99px;
} }
.pazzleline { /* .pazzleline {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} } */
.sel { .sel {
position: absolute; position: absolute;

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

@ -22,13 +22,14 @@
}; };
</script> </script>
<div class="w-full"> <div class="w-full mt-2">
<div class="relative"> <div class="relative">
<input <textarea
{id} {id}
type="text" rows="3"
style="resize: none;"
{value} {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 disabled
readonly readonly
/> />

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

@ -7,6 +7,8 @@
export let show: boolean = false; export let show: boolean = false;
let input;
let type: "password" | "text" = "password"; let type: "password" | "text" = "password";
$: type = show ? "text" : "password"; $: type = show ? "text" : "password";
@ -14,10 +16,21 @@
const target = event.target as HTMLInputElement; const target = event.target as HTMLInputElement;
value = target.value; value = target.value;
} }
async function toggle() {
let { selectionStart, selectionEnd } = input;
show = !show;
input.focus();
setTimeout(function () {
input.selectionStart = selectionStart;
input.selectionEnd = selectionEnd;
}, 0);
}
</script> </script>
<div class="relative"> <div class="relative">
<input <input
bind:this={input}
{value} {value}
{placeholder} {placeholder}
{id} {id}
@ -32,7 +45,8 @@
> >
<svg <svg
fill="none" fill="none"
on:click={() => (show = !show)} on:click={toggle}
on:keypress={toggle}
class={`${show ? "block" : "hidden"} h-6 text-gray-700`} class={`${show ? "block" : "hidden"} h-6 text-gray-700`}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 576 512" viewbox="0 0 576 512"
@ -47,7 +61,8 @@
<svg <svg
fill="none" fill="none"
class={`${!show ? "block" : "hidden"} h-6 text-gray-700`} 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" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 640 512" viewbox="0 0 640 512"
> >

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

@ -516,7 +516,7 @@
<svelte:window bind:innerWidth={width} bind:innerHeight={height} /> <svelte:window bind:innerWidth={width} bind:innerHeight={height} />
<CenteredLayout> <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} {#if wait}
<div class="lg:px-8 text-primary-700"> <div class="lg:px-8 text-primary-700">
{#if wait === true} {#if wait === true}
@ -599,7 +599,7 @@
</div> </div>
{:else if intro} {:else if intro}
<div class=" max-w-6xl lg:px-8 mx-auto px-4"> <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 A <b>NextGraph Wallet</b> is unique to each person. It stores your
credentials and authorizations to access documents. You need one credentials and authorizations to access documents. You need one
in order to start using NextGraph.<br /><br />If you already have in order to start using NextGraph.<br /><br />If you already have
@ -853,7 +853,7 @@
</div> </div>
{:else if !invitation} {:else if !invitation}
<div class=" max-w-6xl lg:px-8 mx-auto px-4"> <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 NextGraph is based on an efficient decentralized P2P network, and
in order to join this network and start using the app, you need to in order to join this network and start using the app, you need to
first select a <b>broker&nbsp;server</b>. first select a <b>broker&nbsp;server</b>.
@ -1255,7 +1255,7 @@
class="font-bold text-xl">{digit}</span class="font-bold text-xl">{digit}</span
>{/each} >{/each}
</Alert> </Alert>
<div class="w-[295px] mx-auto mb-4"> <div class="w-[295px] mx-auto mb-10">
{#each [0, 1, 2] as row} {#each [0, 1, 2] as row}
<div class=""> <div class="">
{#each [1, 2, 3] as num} {#each [1, 2, 3] as num}
@ -1610,7 +1610,7 @@
<div class="text-green-800 mx-auto flex flex-col items-center"> <div class="text-green-800 mx-auto flex flex-col items-center">
<div>Your wallet is ready!</div> <div>Your wallet is ready!</div>
<svg <svg
class="my-10 h-16 w-16" class="my-4 h-16 w-16"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-width="1.5" stroke-width="1.5"
@ -1625,8 +1625,8 @@
/> />
</svg> </svg>
</div> </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 Please download your wallet and keep it in a safe location<br
/> />
<a <a
@ -1659,7 +1659,7 @@
Download my wallet Download my wallet
</button> </button>
</a> </a>
</div>
<br /> <br />
{:else if !options.trusted} {:else if !options.trusted}
Your wallet file has been downloaded into your "Downloads" Your wallet file has been downloaded into your "Downloads"
@ -1668,14 +1668,14 @@
><br /> ><br />
<span class="font-bold" <span class="font-bold"
>Please move it to a safe and durable place.</span >Please move it to a safe and durable place.</span
><br /><br /> ><br />
{/if} {/if}
<!-- Pazzle --> <!-- Pazzle -->
Here is your Pazzle Here below is your Pazzle.
<br /> <br />
The <span class="font-bold">order</span> of each image is The <span class="font-bold">order</span> of each image is
<span class="font-bold">important</span>: <span class="font-bold">important</span> !
</div>
<div <div
class="mt-2 bg-white shadow-md rounded-lg max-w-2xl w-full mx-auto" class="mt-2 bg-white shadow-md rounded-lg max-w-2xl w-full mx-auto"
> >
@ -1689,12 +1689,12 @@
{index + 1} {index + 1}
</div> </div>
<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} title={emoji.code}
> >
<svelte:component <svelte:component
this={emoji.svg?.default} this={emoji.svg?.default}
class="text-5xl w-full" class="w-[3em] h-[3em] "
/> />
</div> </div>
<div class="flex flex-col ml-4"> <div class="flex flex-col ml-4">
@ -1712,7 +1712,7 @@
<br /> <br />
<!-- Mnemonic (copy button). TODO: once the component is available--> <!-- 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 >And here is your mnemonic (your alternative passphrase):</label
> >
<CopyToClipboard <CopyToClipboard

2
ng-app/tsconfig.json
Unescape View File

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

Write Preview
Loading…
Cancel
Save