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

several fixes on Login and CreateWallet screens

Browse Source
pull/26/head
Niko PLP 3 months ago
parent c17d9c538b
commit 71d1607693
7 changed files with 230 additions and 201 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. 3
      Cargo.toml
  2. 16
      ng-app/src/lib/FullLayout.svelte
  3. 4
      ng-app/src/lib/Home.svelte
  4. 139
      ng-app/src/lib/Login.svelte
  5. 28
      ng-app/src/routes/User.svelte
  6. 165
      ng-app/src/routes/WalletCreate.svelte
  7. 2
      ngone/web/src/routes/WalletCreate.svelte

3
Cargo.toml
Unescape View File

@ -38,6 +38,9 @@ documentation = "https://docs.nextgraph.org/"
lto = true lto = true
opt-level = 's' opt-level = 's'
[profile.dev]
opt-level = 2
[patch.crates-io] [patch.crates-io]
# tauri = { git = "https://github.com/simonhyll/tauri.git", branch="fix/ipc-mixup"} # tauri = { git = "https://github.com/simonhyll/tauri.git", branch="fix/ipc-mixup"}
# tauri = { git = "https://git.nextgraph.org/NextGraph/tauri.git", branch="alpha.11-nextgraph", features = ["no-ipc-custom-protocol"] } # tauri = { git = "https://git.nextgraph.org/NextGraph/tauri.git", branch="alpha.11-nextgraph", features = ["no-ipc-custom-protocol"] }

16
ng-app/src/lib/FullLayout.svelte
Unescape View File

@ -112,7 +112,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<Home <Home
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
@ -120,7 +120,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<Bolt <Bolt
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
@ -128,7 +128,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<MagnifyingGlass <MagnifyingGlass
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
@ -136,7 +136,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<PlusCircle <PlusCircle
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
@ -144,7 +144,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<Users <Users
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
@ -152,7 +152,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<User <User
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
@ -164,7 +164,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<PaperAirplane <PaperAirplane
tabindex="-1" tabindex="-1"
class="-rotate-45 w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="-rotate-45 w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
<span <span
class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200" class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"
@ -181,7 +181,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<Bell <Bell
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
<span <span
class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200" class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"

4
ng-app/src/lib/Home.svelte
Unescape View File

@ -49,7 +49,7 @@
<LogoGray class="w-7 h-7 tall-xs:w-10 tall-xs:h-10" /> <LogoGray class="w-7 h-7 tall-xs:w-10 tall-xs:h-10" />
{/if} {/if}
<span <span
class="ml-4 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap" class="ml-2 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"
>NextGraph</span >NextGraph</span
> >
</a> </a>
@ -60,7 +60,7 @@
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none" class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none"
/> />
</a> </a>
<a href="#/messages" class="ml-6 row items-center" on:click> <a href="#/messages" class="ml-4 row items-center" on:click>
<PaperAirplane <PaperAirplane
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none" class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none"

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

@ -15,7 +15,7 @@
--> -->
<script lang="ts"> <script lang="ts">
import { Alert, Toggle } from "flowbite-svelte"; import { Alert, Toggle, Button } from "flowbite-svelte";
import { onMount, createEventDispatcher, tick } from "svelte"; import { onMount, createEventDispatcher, tick } from "svelte";
import ng from "../api"; import ng from "../api";
import { emoji_cat, emojis, load_svg } from "../wallet_emojis"; import { emoji_cat, emojis, load_svg } from "../wallet_emojis";
@ -27,12 +27,18 @@
LockOpen, LockOpen,
Key, Key,
CheckCircle, CheckCircle,
ArrowLeft,
} from "svelte-heros-v2"; } from "svelte-heros-v2";
import PasswordInput from "./components/PasswordInput.svelte"; import PasswordInput from "./components/PasswordInput.svelte";
//import Worker from "../worker.js?worker&inline"; //import Worker from "../worker.js?worker&inline";
export let wallet; export let wallet;
export let for_import = false; export let for_import = false;
let top;
function scrollToTop() {
top.scrollIntoView();
}
let tauri_platform = import.meta.env.TAURI_PLATFORM; let tauri_platform = import.meta.env.TAURI_PLATFORM;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -63,6 +69,8 @@
selection = []; selection = [];
error = undefined; error = undefined;
scrollToTop();
// This is only for awaiting that SVGs are loaded. // This is only for awaiting that SVGs are loaded.
await load_svg(); await load_svg();
loaded = true; loaded = true;
@ -72,11 +80,13 @@
loaded = false; loaded = false;
step = "pazzle"; step = "pazzle";
unlockWith = "pazzle"; unlockWith = "pazzle";
scrollToTop();
} }
function start_with_mnemonic() { function start_with_mnemonic() {
loaded = false; loaded = false;
step = "mnemonic"; step = "mnemonic";
unlockWith = "mnemonic"; unlockWith = "mnemonic";
scrollToTop();
} }
let emojis2 = []; let emojis2 = [];
@ -115,6 +125,7 @@
// In case, this is called by the cancel button, we need to reset the selection. // In case, this is called by the cancel button, we need to reset the selection.
selection.forEach((emoji) => (emoji.sel = undefined)); selection.forEach((emoji) => (emoji.sel = undefined));
selection = selection; selection = selection;
scrollToTop();
} }
async function start_pin() { async function start_pin() {
@ -281,9 +292,10 @@
selection = selection; selection = selection;
} }
} else if (step === "pin") { } else if (step === "pin") {
if (pin_code.length === 0) {
if (unlockWith === "mnemonic") { if (unlockWith === "mnemonic") {
start_with_mnemonic(); start_with_mnemonic();
} else if (pin_code.length === 0) { } else {
// Unselect the last two elements. // Unselect the last two elements.
const to_unselect = ordered.slice(-2); const to_unselect = ordered.slice(-2);
to_unselect.forEach((val) => { to_unselect.forEach((val) => {
@ -293,6 +305,7 @@
ordered = ordered.slice(0, -2); ordered = ordered.slice(0, -2);
selection = selection; selection = selection;
step = "order"; step = "order";
}
} else { } else {
pin_code = pin_code.slice(0, pin_code.length - 1); pin_code = pin_code.slice(0, pin_code.length - 1);
} }
@ -301,8 +314,8 @@
let width: number; let width: number;
let height: number; let height: number;
const breakPointWidth: number = 530; const breakPointWidth: number = 535;
const breakPointHeight: number = 900; const breakPointHeight: number = 1005;
let mobile = false; let mobile = false;
$: if (width >= breakPointWidth && height >= breakPointHeight) { $: if (width >= breakPointWidth && height >= breakPointHeight) {
mobile = false; mobile = false;
@ -312,14 +325,18 @@
</script> </script>
<div <div
class="flex flex-col justify-center md:max-w-2xl p-4 sm:px-8" class="flex-col justify-center md:max-w-2xl py-4 sm:px-8"
class:h-screen={step !== "load"} class:h-screen={step !== "load" && height > 660}
class:flex={height > 660}
bind:this={top}
> >
{#if step == "load"} {#if step == "load"}
<div class="flex flex-col justify-center p-4 pt-6"> <div class="flex-col justify-center p-4 pt-6" class:flex={height > 660}>
<h2 class="pb-5 text-xl self-start">How to open your wallet:</h2> <h2 class="pb-5 text-xl self-start">
<h3 class="pb-2 text-lg self-start">By your Pazzle</h3> How to open your wallet? You have 2 options:
<ul class="mb-8 ml-3 space-y-4 text-left list-decimal"> </h2>
<h3 class="pb-2 text-lg self-start">With your Pazzle</h3>
<ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal">
<li> <li>
For each one of the 9 categories of images, you will be presented with For each one of the 9 categories of images, you will be presented with
the 15 possible image choices. The categories are shuffled at every the 15 possible image choices. The categories are shuffled at every
@ -356,11 +373,11 @@
</ul> </ul>
<h3 class="pb-2 text-lg self-start"> <h3 class="pb-2 text-lg self-start">
By your 12 word Mnemonic (passphrase) With your 12 words Mnemonic (passphrase)
</h3> </h3>
<ul class="mb-8 ml-3 space-y-4 text-left list-decimal"> <ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal">
<li> <li>
Enter your twelve word mnemonic in the input field. The words must be Enter your twelve words mnemonic in the input field. The words must be
separated by spaces. separated by spaces.
</li> </li>
<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>
@ -419,32 +436,34 @@
> >
<PuzzlePiece <PuzzlePiece
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 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"
/> />
Open with Pazzle! Open with Pazzle!
</button> </button>
{/if} {/if}
<button
on:click={cancel}
class="mt-3 mb-2 text-gray-500 dark:text-gray-400 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"
><ArrowLeft
tabindex="-1"
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 <a
on:click={start_with_mnemonic} on:click={start_with_mnemonic}
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> </a>
<button
on:click={cancel}
class="mt-1 mb-2 bg-red-100 hover:bg-red-100/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"
><XCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button
>
</div> </div>
</div> </div>
</div> </div>
<!-- The following steps have navigation buttons and fixed layout --> <!-- The following steps have navigation buttons and fixed layout -->
{:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"} {:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"}
<div <div
class="flex flex-col justify-center h-screen p-4" class="flex-col justify-center h-screen"
class:flex={height > 660}
class:min-w-[310px]={mobile} class:min-w-[310px]={mobile}
class:min-w-[500px]={!mobile} class:min-w-[500px]={!mobile}
class:max-w-[370px]={mobile} class:max-w-[370px]={mobile}
@ -458,25 +477,25 @@
<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 word mnemonic</label >Your 12 words mnemonic</label
> >
<PasswordInput <PasswordInput
id="mnemonic-input" id="mnemonic-input"
placeholder="Enter your 12 word mnemonic here separated by spaces" placeholder="Enter your 12 words mnemonic here 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"
/> />
<div class="flex"> <div class="flex">
<button <Button
type="submit" type="submit"
class="mt-1 ml-auto text-white bg-primary-700 disabled:opacity-65 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-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"
on:click={start_pin} on:click={start_pin}
disabled={mnemonic.split(" ").length !== 12} disabled={mnemonic.split(" ").length !== 12}
><CheckCircle ><CheckCircle
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white" class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Confirm</button />Confirm</Button
> >
</div> </div>
</form> </form>
@ -484,7 +503,7 @@
<p class="max-w-xl mx-auto lg:max-w-2xl"> <p class="max-w-xl mx-auto lg:max-w-2xl">
<span class="text-xl"> <span class="text-xl">
<!-- TODO: Internationalization--> <!-- TODO: Internationalization-->
Select your emoji of category: {emoji_cat[ Select your emoji of category:<br />{emoji_cat[
shuffle.category_indices[pazzlePage] shuffle.category_indices[pazzlePage]
]}</span ]}</span
> >
@ -506,7 +525,7 @@
{/each} {/each}
{:else if step == "order"} {:else if step == "order"}
<p class="max-w-xl mx-auto lg:max-w-2xl mb-2"> <p class="max-w-xl mx-auto lg:max-w-2xl mb-2">
<span class="text-xl">Click your emojis in the correct order</span> <span class="text-xl">Select each image in the correct order</span>
</p> </p>
{#each [0, 1, 2] as row} {#each [0, 1, 2] as row}
<div class="columns-3 gap-0"> <div class="columns-3 gap-0">
@ -543,11 +562,8 @@
</div> </div>
{/each} {/each}
{:else if step == "pin"} {:else if step == "pin"}
<p class="flex items-center"> <p class="items-center">
<span class="text-xl">Enter your PIN code:</span> <span class="text-xl">Enter your PIN code</span>
<span class="text-xl min-w-[2em] ml-1 text-left"
>{#each pin_code as pin_key}*{/each}</span
>
</p> </p>
<!-- Chrome requires the columns-3 __flex__ to be set, or else it wraps the lines incorrectly. <!-- Chrome requires the columns-3 __flex__ to be set, or else it wraps the lines incorrectly.
However, this leads to the width decreasing and the buttons come together in mobile view. However, this leads to the width decreasing and the buttons come together in mobile view.
@ -557,7 +573,7 @@
{#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num} {#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num}
<button <button
tabindex="0" tabindex="0"
class="m-1 disabled:opacity-15 select-none align-bottom text-7xl p-0 w-full aspect-square border-0 pt-[5%]" 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"
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}
> >
@ -570,43 +586,47 @@
<div class="m-1 w-full aspect-square" /> <div class="m-1 w-full aspect-square" />
<button <button
tabindex="0" tabindex="0"
class="disabled:opacity-15 m-1 select-none align-bottom text-7xl p-0 w-full aspect-square border-0 pt-[5%]" 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"
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}
> >
<span>{shuffle_pin[9]}</span> <span>{shuffle_pin[9]}</span>
</button> </button>
<button <Button
tabindex="0" tabindex="0"
class="w-full bg-green-300 hover:bg-green-300/90 disabled:opacity-15 m-1 select-none align-bottom text-7xl p-0 w-full aspect-square border-0" class="w-full bg-green-300 hover:bg-green-300/90 enabled:animate-bounce disabled:bg-gray-200 disabled:opacity-15 m-1 select-none align-bottom text-7xl p-0 aspect-square border-0"
on:click={async () => await finish()} on:click={async () => await finish()}
disabled={pin_code.length < 4} disabled={pin_code.length < 4}
> >
<LockOpen <LockOpen
tabindex="-1" tabindex="-1"
class="w-full h-[50%] transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white" class="w-full h-[50%] transition duration-75 focus:outline-none select-none group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</button> </Button>
</div> </div>
<span class="mt-3 text-9xl min-h-[8rem] text-center"
>{#each pin_code as pin_key}*{/each}</span
>
{/if} {/if}
</div> </div>
<!-- Navigation Buttons for pazzle, order pin, mnemonic --> <!-- Navigation Buttons for pazzle, order pin, mnemonic -->
<div class="flex justify-between mt-auto"> <div class="flex justify-between mb-6 mt-auto">
<button <button
on:click={cancel} on:click={cancel}
class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55" class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55"
><XCircle ><XCircle
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white" class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button />Cancel</button
> >
<button <button
class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55" class="mt-1 ml-2 min-w-[141px] focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55"
on:click={go_back} on:click={go_back}
><Backspace ><Backspace
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white" class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Go Back</button />{#if step === "mnemonic" || (step === "pazzle" && pazzlePage === 0)}Go
back{:else}Correct{/if}</button
> >
</div> </div>
</div> </div>
@ -638,7 +658,7 @@
</div> </div>
{:else if step == "end"} {:else if step == "end"}
{#if error} {#if error}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800"> <div class=" max-w-6xl lg:px-8 mx-auto text-red-800">
<div class="mt-auto max-w-6xl lg:px-8"> <div class="mt-auto max-w-6xl lg:px-8">
An error occurred ! An error occurred !
<svg <svg
@ -661,24 +681,24 @@
</Alert> </Alert>
</div> </div>
<div class="flex justify-between mt-auto gap-4"> <div class="flex justify-between mt-auto gap-4">
<button
on:click={cancel}
class="mt-10 bg-red-100 hover:bg-red-100/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"
><XCircle
tabindex="-1"
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</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 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
tabindex="-1" tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 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"
/> />
Try again Try again
</button> </button>
<button
on:click={cancel}
class="mt-10 bg-red-100 hover:bg-red-100/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"
><XCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button
>
</div> </div>
</div> </div>
{:else} {:else}
@ -707,6 +727,10 @@
<svelte:window bind:innerWidth={width} bind:innerHeight={height} /> <svelte:window bind:innerWidth={width} bind:innerHeight={height} />
<style> <style>
.pindigit {
min-height: 99px;
}
.pazzleline { .pazzleline {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
@ -722,7 +746,6 @@
font-weight: 700; font-weight: 700;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-top: 25%;
} }
.sel-emoji { .sel-emoji {

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

@ -160,7 +160,7 @@
> >
<ArrowLeft <ArrowLeft
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
<span class="ml-3">Back</span> <span class="ml-3">Back</span>
</li> </li>
@ -171,7 +171,7 @@
{#if $online} {#if $online}
<Signal <Signal
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-green-600 transition duration-75 dark:text-green-400 " class="w-7 h-7 text-green-600 transition duration-75 focus:outline-none dark:text-green-400 "
/> />
<span class="ml-3 text-green-600 dark:text-green-400" <span class="ml-3 text-green-600 dark:text-green-400"
>Online</span >Online</span
@ -179,7 +179,7 @@
{:else} {:else}
<SignalSlash <SignalSlash
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-red-600 transition duration-75 dark:text-red-400 " class="w-7 h-7 text-red-600 transition duration-75 focus:outline-none dark:text-red-400 "
/> />
<span class="ml-3 text-red-600 dark:text-red-400">Offline</span> <span class="ml-3 text-red-600 dark:text-red-400">Offline</span>
{/if} {/if}
@ -194,7 +194,7 @@
> >
<ArrowRightOnRectangle <ArrowRightOnRectangle
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
<span class="ml-3">Logout</span> <span class="ml-3">Logout</span>
</li> </li>
@ -220,7 +220,7 @@
> >
<DocumentArrowDown <DocumentArrowDown
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
<span class="ml-3">Download wallet file</span> <span class="ml-3">Download wallet file</span>
</li> </li>
@ -231,7 +231,7 @@
> >
<NoSymbol <NoSymbol
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-red-700 transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-red-700 transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
<span class="ml-3 text-left" <span class="ml-3 text-left"
>Download failed:<br /> {download_error}</span >Download failed:<br /> {download_error}</span
@ -244,7 +244,7 @@
> >
<DocumentArrowDown <DocumentArrowDown
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-blue-700 transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-blue-700 transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
<span class="ml-3 text-left">Download in progress...</span> <span class="ml-3 text-left">Download in progress...</span>
</li> </li>
@ -274,7 +274,7 @@
> >
<DocumentArrowDown <DocumentArrowDown
tabindex="-1" tabindex="-1"
class="w-14 h-14 transition duration-75 dark:text-white dark:group-hover:text-white" class="w-14 h-14 transition duration-75 focus:outline-none dark:text-white dark:group-hover:text-white"
/> />
Click here to download the wallet file Click here to download the wallet file
</button> </button>
@ -285,7 +285,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<Cog6Tooth <Cog6Tooth
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
@ -293,7 +293,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<PuzzlePiece <PuzzlePiece
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
@ -301,7 +301,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<Key <Key
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
@ -309,7 +309,7 @@
<svelte:fragment slot="icon"> <svelte:fragment slot="icon">
<User <User
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
</svelte:fragment> </svelte:fragment>
</SidebarItem> </SidebarItem>
@ -370,7 +370,7 @@
> >
<Gift <Gift
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
<span class="ml-3">Donate to NextGraph</span> <span class="ml-3">Donate to NextGraph</span>
</li> </li>
@ -384,7 +384,7 @@
> >
<InformationCircle <InformationCircle
tabindex="-1" tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/> />
<span class="ml-3">About NextGraph</span> <span class="ml-3">About NextGraph</span>
</li> </li>

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

@ -430,76 +430,76 @@
} }
// Loads an example wallet. // Loads an example wallet.
const loadWallet = async () => { // const loadWallet = async () => {
options = { // options = {
trusted: true, // trusted: true,
cloud: false, // cloud: false,
bootstrap: false, // bootstrap: false,
pdf: false, // pdf: false,
}; // };
creating = true; // creating = true;
let local_invitation = await ng.get_local_bootstrap(location.href); // let local_invitation = await ng.get_local_bootstrap(location.href);
let additional_bootstrap; // let additional_bootstrap;
if (local_invitation) { // if (local_invitation) {
additional_bootstrap = local_invitation.V0.bootstrap; // additional_bootstrap = local_invitation.V0.bootstrap;
} // }
let core_registration; // let core_registration;
if (invitation?.V0.code) { // if (invitation?.V0.code) {
core_registration = invitation.V0.code.ChaCha20Key; // core_registration = invitation.V0.code.ChaCha20Key;
} // }
let params = { // let params = {
security_img: security_img, // security_img: security_img,
security_txt, // security_txt,
pin, // pin,
pazzle_length: 9, // pazzle_length: 9,
send_bootstrap: false, //options.cloud || options.bootstrap ? : undefined, // send_bootstrap: false, //options.cloud || options.bootstrap ? : undefined,
send_wallet: options.cloud, // send_wallet: options.cloud,
local_save: options.trusted, // local_save: options.trusted,
result_with_wallet_file: false, // this will be automatically changed to true for browser app // result_with_wallet_file: false, // this will be automatically changed to true for browser app
core_bootstrap: invitation?.V0.bootstrap, // core_bootstrap: invitation?.V0.bootstrap,
core_registration, // core_registration,
additional_bootstrap, // additional_bootstrap,
}; // };
try { // try {
ready = await import("./wallet.json"); // ready = await import("./wallet.json");
wallets.set(await ng.get_wallets()); // wallets.set(await ng.get_wallets());
if (!options.trusted && !tauri_platform) { // if (!options.trusted && !tauri_platform) {
let lws = $wallets[ready.wallet_name]; // let lws = $wallets[ready.wallet_name];
if (lws.in_memory) { // if (lws.in_memory) {
let new_in_mem = { // let new_in_mem = {
lws, // lws,
name: ready.wallet_name, // name: ready.wallet_name,
opened: false, // opened: false,
cmd: "new_in_mem", // cmd: "new_in_mem",
}; // };
window.wallet_channel.postMessage(new_in_mem, location.href); // window.wallet_channel.postMessage(new_in_mem, location.href);
} // }
} // }
console.log("pazzle ids", ready.pazzle); // console.log("pazzle ids", ready.pazzle);
console.log("pazzle emojis", emojis_from_pazzle_ids(ready.pazzle)); // console.log("pazzle emojis", emojis_from_pazzle_ids(ready.pazzle));
download_name = "wallet-" + ready.wallet_name + ".ngw"; // download_name = "wallet-" + ready.wallet_name + ".ngw";
if (options.cloud) { // if (options.cloud) {
cloud_link = "https://nextgraph.one/#/w/" + ready.wallet_name; // cloud_link = "https://nextgraph.one/#/w/" + ready.wallet_name;
} // }
if (ready.wallet_file.length) { // if (ready.wallet_file.length) {
const blob = new Blob([ready.wallet_file], { // const blob = new Blob([ready.wallet_file], {
type: "application/octet-stream", // type: "application/octet-stream",
}); // });
download_link = URL.createObjectURL(blob); // download_link = URL.createObjectURL(blob);
} // }
} catch (e) { // } catch (e) {
console.error(e); // console.error(e);
error = e; // error = e;
} // }
wait = false; // wait = false;
registration_error = false; // registration_error = false;
intro = false; // intro = false;
pin = [0, 8, 1, 5]; // pin = [0, 8, 1, 5];
pin_confirm = [0, 8, 1, 5]; // pin_confirm = [0, 8, 1, 5];
invitation = true; // invitation = true;
}; // };
loadWallet(); // loadWallet();
let width: number; let width: number;
let height: number; let height: number;
@ -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 px-4"> <div class="max-w-2xl lg:px-8 mx-auto" class:px-4={width > 328}>
{#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,11 +599,11 @@
</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 md:mx-auto lg:max-w-2xl"> <p class="max-w-xl text-justify 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
a wallet, you should not create a new one, instead, a wallet, you should not create a new one. Instead,
<a href="/wallet/login" use:link <a href="/wallet/login" use:link
>login here with your existing wallet.</a >login here with your existing wallet.</a
> >
@ -848,7 +848,7 @@
d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"
/> />
</svg> </svg>
Ok, I create my wallet now ! I create my wallet now !
</button> </button>
</div> </div>
{:else if !invitation} {:else if !invitation}
@ -1217,7 +1217,7 @@
</button> </button>
</div> </div>
{:else if pin.length < 4} {:else if pin.length < 4}
<div class=" max-w-6xl lg:px-8 mx-auto px-3"> <div class=" max-w-6xl lg:px-8 mx-auto">
{#if registration_success} {#if registration_success}
<Alert color="green" class="mb-5"> <Alert color="green" class="mb-5">
<span class="font-bold text-xl" <span class="font-bold text-xl"
@ -1237,8 +1237,8 @@
NextGraph will never see your PIN. NextGraph will never see your PIN.
</Alert> </Alert>
</p> </p>
<p class="text-left mt-5">Here are the rules for the PIN :</p> <p class="text-left mt-5 px-3">Here are the rules for the PIN :</p>
<ul class="text-left list-disc list-inside"> <ul class="text-left list-disc list-inside px-3">
<li>It cannot be a series like 1234 or 8765</li> <li>It cannot be a series like 1234 or 8765</li>
<li> <li>
The same digit cannot repeat more than once. By example 4484 is The same digit cannot repeat more than once. By example 4484 is
@ -1606,7 +1606,7 @@
</svg> </svg>
</div> </div>
{:else} {:else}
<div class="text-left"> <div class="text-left mx-4">
<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
@ -1626,7 +1626,9 @@
</svg> </svg>
</div> </div>
{#if download_link} {#if download_link}
Please download your wallet and keep it in a safe location<br /> <div class="text-center">
Please download your wallet and keep it in a safe location<br
/>
<a <a
href={download_link} href={download_link}
target="_blank" target="_blank"
@ -1656,7 +1658,9 @@
Download my wallet Download my wallet
</button> </button>
</a><br /> </a>
</div>
<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"
folder, with the name<br /><span class="text-black"> folder, with the name<br /><span class="text-black">
@ -1707,7 +1711,6 @@
<br /> <br />
<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 mb-2"
>And here is your mnemonic (your alternative passphrase):</label >And here is your mnemonic (your alternative passphrase):</label
@ -1769,7 +1772,7 @@
<span class="text-lg text-neutral-950"> <span class="text-lg text-neutral-950">
The pazzle and the mnemonic <span class="font-bold"> The pazzle and the mnemonic <span class="font-bold">
will not be shown to you again</span will not be shown to you again</span
>. Please make sure, you have written it down. >. Please make sure, you have written them down.
</span> </span>
<div> <div>
<button <button

2
ngone/web/src/routes/WalletCreate.svelte
Unescape View File

@ -51,7 +51,7 @@
A <b>NextGraph Wallet</b> is unique to each person.<br /> It stores your A <b>NextGraph Wallet</b> is unique to each person.<br /> It stores your
credentials to access documents. You need one in order to start using credentials to access documents. You need one in order to start using
NextGraph.<br />If you already have a wallet, you should not create a new NextGraph.<br />If you already have a wallet, you should not create a new
one, instead, one. Instead,
{#if display_note_on_local_wallets} {#if display_note_on_local_wallets}
<a href="/" use:link>login here with your existing wallet.</a> <a href="/" use:link>login here with your existing wallet.</a>
{:else} {:else}

Write Preview
Loading…
Cancel
Save