From a2f1cf8316b4275fb4573f885f7198b5bc68af09 Mon Sep 17 00:00:00 2001 From: Niko PLP Date: Sun, 1 Oct 2023 02:43:18 +0300 Subject: [PATCH] upgrade flowbite, full-layout --- ng-app/package.json | 3 +- ng-app/src/App.svelte | 6 +- ng-app/src/assets/nextgraph-gray.svg | 16 + ng-app/src/lib/CenteredLayout.svelte | 13 + ng-app/src/lib/Home.svelte | 218 ++- ng-app/src/lib/Install.svelte | 14 +- ng-app/src/lib/NoWallet.svelte | 81 + ng-app/src/lib/Test.svelte | 2 +- ng-app/src/routes/Home.svelte | 7 +- ng-app/src/routes/Install.svelte | 5 +- ng-app/src/routes/NotFound.svelte | 13 +- ng-app/src/routes/UserRegistered.svelte | 149 +- ng-app/src/routes/WalletCreate.svelte | 2118 +++++++++++----------- ng-app/src/routes/WalletLogin.svelte | 95 +- ng-app/src/store.ts | 2 + ng-app/src/styles.css | 7 +- ngaccount/web/src/routes/Create.svelte | 6 +- ngaccount/web/src/routes/Delete.svelte | 4 +- ngone/web/src/routes/Home.svelte | 6 +- ngone/web/src/routes/WalletCreate.svelte | 10 +- pnpm-lock.yaml | 54 +- 21 files changed, 1538 insertions(+), 1291 deletions(-) create mode 100644 ng-app/src/assets/nextgraph-gray.svg create mode 100644 ng-app/src/lib/CenteredLayout.svelte create mode 100644 ng-app/src/lib/NoWallet.svelte diff --git a/ng-app/package.json b/ng-app/package.json index acc14aa..a5db204 100644 --- a/ng-app/package.json +++ b/ng-app/package.json @@ -22,7 +22,7 @@ "async-proxy": "^0.4.1", "classnames": "^2.3.2", "flowbite": "^1.6.5", - "flowbite-svelte": "^0.37.1", + "flowbite-svelte": "^0.43.3", "ng-sdk-js": "workspace:^0.1.0", "svelte-spa-router": "^3.3.0", "vite-plugin-top-level-await": "^1.3.1" @@ -41,6 +41,7 @@ "shx": "^0.3.4", "svelte": "^3.54.0", "svelte-check": "^3.0.0", + "svelte-heros-v2": "^0.10.12", "svelte-preprocess": "^5.0.3", "tailwindcss": "^3.3.1", "tslib": "^2.4.1", diff --git a/ng-app/src/App.svelte b/ng-app/src/App.svelte index d0a8590..0beae8f 100644 --- a/ng-app/src/App.svelte +++ b/ng-app/src/App.svelte @@ -158,12 +158,10 @@ }); -
- - -
+ diff --git a/ng-app/src/assets/nextgraph-gray.svg b/ng-app/src/assets/nextgraph-gray.svg new file mode 100644 index 0000000..a403f35 --- /dev/null +++ b/ng-app/src/assets/nextgraph-gray.svg @@ -0,0 +1,16 @@ + + + + + + + \ No newline at end of file diff --git a/ng-app/src/lib/CenteredLayout.svelte b/ng-app/src/lib/CenteredLayout.svelte new file mode 100644 index 0000000..d49de8d --- /dev/null +++ b/ng-app/src/lib/CenteredLayout.svelte @@ -0,0 +1,13 @@ +
+ +
+ + diff --git a/ng-app/src/lib/Home.svelte b/ng-app/src/lib/Home.svelte index 14eead6..c9f9c67 100644 --- a/ng-app/src/lib/Home.svelte +++ b/ng-app/src/lib/Home.svelte @@ -9,109 +9,157 @@ // according to those terms. --> - -{#if display_login_create} -
-
-
-

Welcome to NextGraph

+ let asideClass = "w-48"; + let spanClass = "flex-1 ml-3 whitespace-nowrap"; + let nonActiveClass = + "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"; + -

- We could not find a wallet saved on this device.
If you already have - a wallet, select "Log in", otherwise, select "Create Wallet" here below -

-
- - - -
-
- - - -
-
-{:else} -
-

Welcome to test

+ + + + + + + + + + + + + + + + + + + + + + 3 + + + + + + + + 10 + + + + + + + +
+

Welcoe {mobile}

-{/if} + + + + diff --git a/ng-app/src/lib/Install.svelte b/ng-app/src/lib/Install.svelte index bf60d59..4fa7e0a 100644 --- a/ng-app/src/lib/Install.svelte +++ b/ng-app/src/lib/Install.svelte @@ -55,7 +55,7 @@ + + +
+ + + +
+ + diff --git a/ng-app/src/lib/Test.svelte b/ng-app/src/lib/Test.svelte index ab49793..67dda3b 100644 --- a/ng-app/src/lib/Test.svelte +++ b/ng-app/src/lib/Test.svelte @@ -85,7 +85,7 @@ on:click={() => { fileinput.click(); }} - class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:outline-none focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mr-2 mb-2" + class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mr-2 mb-2" > - +{#if display_login_create} + +{:else} + +{/if} diff --git a/ng-app/src/routes/Install.svelte b/ng-app/src/routes/Install.svelte index 88b2bc3..eb414c2 100644 --- a/ng-app/src/routes/Install.svelte +++ b/ng-app/src/routes/Install.svelte @@ -15,6 +15,7 @@ import Install from "../lib/Install.svelte"; import { push } from "svelte-spa-router"; import { onMount, onDestroy } from "svelte"; + import CenteredLayout from "../lib/CenteredLayout.svelte"; import { wallets, active_wallet, @@ -33,4 +34,6 @@ }); - + + + diff --git a/ng-app/src/routes/NotFound.svelte b/ng-app/src/routes/NotFound.svelte index 59c0f9b..b5b8450 100644 --- a/ng-app/src/routes/NotFound.svelte +++ b/ng-app/src/routes/NotFound.svelte @@ -11,10 +11,13 @@ -
- - 404 Page not found. - -
+ +
+ + 404 Page not found. + +
+ diff --git a/ng-app/src/routes/UserRegistered.svelte b/ng-app/src/routes/UserRegistered.svelte index a763ccc..d9bedb5 100644 --- a/ng-app/src/routes/UserRegistered.svelte +++ b/ng-app/src/routes/UserRegistered.svelte @@ -12,6 +12,7 @@ -
-
- - -
- {#if error} -
- - {#if error == "AlreadyExists"} -

- The user is already registered with the selected broker.
Try logging - in instead -

- - - - {:else} -

- An error occurred:
{error} -

- - - - {/if} + +
+
+ +
- {:else if invite && user} -
- -

- You have been successfully
registered {#if invitation?.V0?.name} - to {invitation?.V0?.name}{/if} -

-
- {/if} -
+ {#if error} +
+ + {#if error == "AlreadyExists"} +

+ The user is already registered with the selected broker.
Try logging + in instead +

+ + + + {:else} +

+ An error occurred:
{error} +

+ + + + {/if} +
+ {:else if invite && user} +
+ +

+ You have been successfully
registered {#if invitation?.V0?.name} + to {invitation?.V0?.name}{/if} +

+
+ {/if} + + diff --git a/ng-app/src/routes/WalletCreate.svelte b/ng-app/src/routes/WalletCreate.svelte index 80b528d..54cea83 100644 --- a/ng-app/src/routes/WalletCreate.svelte +++ b/ng-app/src/routes/WalletCreate.svelte @@ -12,6 +12,7 @@ -{#if wait} -
- {#if wait === true} - Please wait... - {:else} - {wait} - {/if} - - - - -
-{:else} -
-
- - -
- {#if registration_error} -
- - {#if registration_error == "AlreadyExists"} -

- The user is already registered with the selected broker.
Try logging - in instead -

- - - - {:else} -

- An error occurred during registration:
{registration_error} -

- - - - {/if} -
- {:else if intro} -
-

- A NextGraph Wallet is unique to each person. It stores your - credentials and authorizations to access documents.

If you - already have a wallet, you should not create a new one, instead, - login here with your existing wallet. - If you never created a NextGraph Wallet before, please follow the instructions - below in order to create your unique personal wallet. -

-
- {#if $has_wallets} - - Some wallets are saved on this device,
to log in with one of - them, - click here. - + + {#if wait} +
+ {#if wait === true} + Please wait... + {:else} + {wait} {/if} -
-
-

- What is a wallet? Please read -

-
    -
  • - - - It is a secure and encrypted small file that contains some - important information that only you should have access to. -
    • -
  • - - - In your wallet, we store all the permissions to access - documents you have been granted with, or that you have created - yourself. -
    • -
  • - - - In order to open it, you will need to enter your pazzle - and a - PIN code of 4 digits. Your personal pazzle (contraction of - puzzle and password) is composed of 9 images you should remember. - The order of the images is important too. -
    • -
  • - - - - Don't worry, it is easier to remember 9 images than a password - like "69$g&ms%C*%", and it has the same strength as a complex - password. The entropy of your pazzle is 66bits, which is - considered very high by all standards. -
    • - -
  • - - - You should only create one unique wallet for yourself. - All your accounts, identities and permissions will be added to - this unique wallet later on. Do not create another wallet if you - already have one. Instead, you will - import your existing wallet in all the apps and websites where - you need it -
    • -
  • - - - Your wallet can be imported with the help of a small file that - you download, or with a QRcode. In any case, you should never - share this file or QRcode with anybody else. -
    • -
  • - - - We at NextGraph will never see the content of your wallet. It - is encrypted and we do not know your pazzle, so we cannot see - what is inside. -
    • -
  • - - - For the same reason, we won't be able to help you if you forget - your pazzle or PIN code, or if you loose the wallet file. There - is no "password recovery" option in this case. You can note your - pazzle down on a piece of paper until you remember it, but don't - forget to destroy this note after a while. -
    • -
-
+ + + +
+ {:else} +
+
+ +
-
- -
- {:else if !invitation} -
-

- 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 broker server. -

-
-
-
-

- What is a broker? Please read -

-
    -
  • - - - The broker helps you keep all your data in sync, as it is - connected to the internet 24/7 and keeps a copy of the updates - for you. This way, even if the devices of the other participants - are offline, you can still see their changes -
    • -
  • - - - All your data is secure and end-to-end encrypted, and the - broker cannot see the content of the documents as it does not - have the keys to decrypt them. -
    • -
  • - - - The broker helps you enforce your privacy as it hides your - internet address (IP) from other users you share documents with. + The user is already registered with the selected broker.
    Try + logging in instead +

    + +
    • -
  • - + {:else} +

    + An error occurred during registration:
    {registration_error} +

    + + + + {/if} +
+ {:else if intro} +
+

+ A NextGraph Wallet is unique to each person. It stores your + credentials and authorizations to access documents.

If + you already have a wallet, you should not create a new one, instead, + login here with your existing wallet. + If you never created a NextGraph Wallet before, please follow the instructions + below in order to create your unique personal wallet. +

+
+ {#if $has_wallets} + + Some wallets are saved on this device,
to log in with one of + them, + click here. + + {/if} +
+
+

+ What is a wallet? Please read +

+
    +
  • + + + It is a secure and encrypted small file that contains some + important information that only you should have access to. +
    • +
  • + + + In your wallet, we store all the permissions to access + documents you have been granted with, or that you have created + yourself. +
    • +
  • + + + In order to open it, you will need to enter your pazzle + and a + PIN code of 4 digits. Your personal pazzle (contraction + of puzzle and password) is composed of 9 images you should remember. + The order of the images is important too. +
    • +
  • + + + + Don't worry, it is easier to remember 9 images than a + password like "69$g&ms%C*%", and it has the same strength as a + complex password. The entropy of your pazzle is 66bits, + which is considered very high by all standards. +
    • + +
  • + + + You should only create one unique wallet for yourself. + All your accounts, identities and permissions will be added to + this unique wallet later on. Do not create another wallet if + you already have one. Instead, you will + import your existing wallet in all the apps and websites + where you need it +
    • +
  • + + + Your wallet can be imported with the help of a small file + that you download, or with a QRcode. In any case, you should + never share this file or QRcode with anybody else. +
    • +
  • + + + We at NextGraph will never see the content of your wallet. It + is encrypted and we do not know your pazzle, so we cannot see + what is inside. +
    • +
  • + + + For the same reason, we won't be able to help you if you + forget your pazzle or PIN code, or if you loose the wallet + file. There is no "password recovery" option in this case. You + can note your pazzle down on a piece of paper until you + remember it, but don't forget to destroy this note after a + while. +
    • +
+
+
+
+ +
+ {:else if !invitation} +
+

+ 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 broker server. +

+
+
+
+

+ What is a broker? Please read +

+
    +
  • + + + The broker helps you keep all your data in sync, as it + is connected to the internet 24/7 and keeps a copy of the + updates for you. This way, even if the devices of the other + participants are offline, you can still see their changes +
    • +
  • + + + All your data is secure and end-to-end encrypted, and + the broker cannot see the content of the documents as it does + not have the keys to decrypt them. +
    • +
  • + + + The broker helps you enforce your privacy as it hides your + internet address (IP) from other users you share documents with. +
    • +
  • + - - It will be possible in the future to use NextGraph without any - broker and to have direct connections between peers, but this - will imply a less smooth experience. -
    • -
  • - - - At anytime you can decide to switch to another broker service - provider or host it yourself. Your data is totally portable + It will be possible in the future to use NextGraph without any + broker and to have direct connections between peers, but this + will imply a less smooth experience. - and can freely move to another broker. -
    • -
  • +
    • +
  • + + + At anytime you can decide to switch to another broker service + provider or host it yourself. Your data is totally portable + and can freely move to another broker. +
    • +
  • + + + + Soon we will offer you the opportunity to host your own broker + at home + or office. Instead of using a "broker service + provider", you will own a small device that you connect behind + your internet router. It is called NG Box and will be available + soon. +
    • +
  • + + + + Organizations and companies have the opportunity to host a + broker on-premise + or in the cloud, as the software is open source. + Individuals can also + self-host a broker on any VPS server or at home, on their + dedicated hardware. +
    • +
+

+ Please choose one broker among the list +

+
+
+ {#if pre_invitation} +
+ +
+ {:else} +
+ +
- - Soon we will offer you the opportunity to host your own broker - at home - or office. Instead of using a "broker service provider", - you will own a small device that you connect behind your - internet router. It is called NG Box and will be available - soon. - -
  • +
    +
    • - -

    Please choose one broker among the list

    -
    -
    - {#if pre_invitation} -
    - -
    - {:else} -
    - -
    + For the rest of the world + +
    + {/if}
    - -
    - {/if} - -
    - -
    - {#if false && mobile} -
    - -
    - {/if} -
    - -
    -
    - -
    - {:else if pin.length < 4} -
    - {#if registration_success} - - You have been successfully registered to {registration_success} - - {/if} -

    - Let's start creating your wallet by choosing a PIN code - - We recommend you to choose a PIN code that you already know very - well. -
    - Your credit card PIN, by example, is a good choice.
    We at - NextGraph will never see your PIN. -     -

    -

    Here are the rules for the PIN :

    -
      -
    • It cannot be a series like 1234 or 8765
      • -
    • - The same digit cannot repeat more than once. By example 4484 is - invalid -
      • -
    • - Try to avoid birth date, last digits of phone number, or zip code -
      • -
    - - - You have chosen: {#each pin as digit}{digit}{/each} - -
    - {#each [0, 1, 2] as row} -
    - {#each [1, 2, 3] as num} - - {/each} -
    - {/each} - -
    -
    - {:else if pin_confirm.length < 4} -
    -

    - Please confirm your PIN code. - Enter the same PIN again -

    - - You have chosen: {#each pin_confirm as digit}{digit}{/each} - -
    - {#each [0, 1, 2] as row} -
    - {#each [1, 2, 3] as num} - - {/each} -
    - {/each} - -
    -
    - {:else if !options} -
    - {#if pin.toString() === pin_confirm.toString()} - - Your PIN is confirmed as : {#each pin_confirm as digit}{digit}{/each} - -

    - Now let's enter a security phrase and a security image -

    -

    - As a verification step, this phrase and image will be presented to - you every time you are about to enter your pazzle and PIN in order - to unlock your wallet.
    - This security measure will prevent you from entering your pazzle and - PIN on malicious sites and apps. - - Every time you will use your wallet, if you do not see and - recognize your own security phrase and image before entering your - pazzle, please stop and DO NOT enter your pazzle, as you would be - the victim of a phishing attempt. - -

    -

    - Here are the rules for the security phrase and image : -

    -
      -
    • The phrase should be at least 10 characters long
      • -
    • - It should be something you will remember, but not something too - personal. -
      • -
    • Do not enter your full name, nor address, nor phone number.
      • -
    • - Instead, you can enter a quote, a small sentence that you like, or - something meaningless to others, but unique to you. -
      • -
    • - The image should be minimum 150x150px. There is no need to provide - more than 400x400px as it will be scaled down anyway. -
      • -
    • - We accept several formats like JPEG, PNG, GIF, WEBP and more. -
      • -
    • - The image should be unique to you. But it should not be too - personal neither. -
      • -
    • Do not upload your face picture, this is not a profile pic.
      • -
    • - The best would be a landscape you like or any other picture that - you will recognize as unique. -
      • -
    • - Please be aware that other people who are sharing this device with - you, will be able to see this image and phrase. -
      • -
    -
    - {#if security_txt && security_img} + + Enter an invitation link + +
    + {#if false && mobile} +
    - {/if} - { - event.preventDefault(); - }} - on:change={handleChange} +
    + {/if} +
    + +
    +
    - {/if} -
    - {:else if !creating} -
    -

    - We are almost done !
    - There are 4 options to choose before we can create your wallet. Those options - can help you to use and keep your wallet. But we also want to be careful - with your security and privacy.

    - Remember that in any case, once your wallet will be created, you will download - a file that you should keep privately somewhere on your device, USB key - or hard-disk. This is the default way you can use and keep your wallet. - Now let's look at some options that can make your life a bit easier. -

    -

    - Do you trust this device?
    - 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}
    - Save my wallet on this device? -

    -

    - Keep a copy in the cloud?
    - Are you afraid that you will loose the file containing your wallet? If - this would happen, your wallet would be lost forever, together with all - your documents. We can keep an encrypted copy of your wallet in our cloud. - Only you will be able to download it with a special link. You would have - to keep this link safely though. By selecting this option, you agree to - the - Terms of Service of our cloud. -
    - Save my wallet in the cloud? -

    -

    - Create a PDF file of your wallet?
    - We can prepare for you a PDF file containing all the information of your - wallet, unencrypted. You should print this file and then delete the PDF - (and empty the trash). Keep this printed document in a safe place. It contains - all the information to regenerate your wallet in case you lost access to - it. -
    - Create a PDF of my wallet? -

    - {#if !options.cloud} -

    +

    + {:else if pin.length < 4} +
    + {#if registration_success} + + You have been successfully registered to {registration_success} + + {/if} +

    Create a link to access your wallet easily? -
    - When you want to use your wallet on the web or from other devices, we - can help you find your wallet by creating a simple link accessible from - anywhere. Only you will have access to this link. In order to do so, - we will keep your wallet ID and some information about your broker on - our cloud servers. If you prefer to opt out, just uncheck this option. - By selecting this option, you agree to the - Terms of Service of our cloud. -
    - Create a link to my wallet?Let's start creating your wallet by choosing a PIN code + + We recommend you to choose a PIN code that you already know very + well. +
    + Your credit card PIN, by example, is a good choice.
    We at + NextGraph will never see your PIN. +

    - {/if} - -
    - {:else if !error} - {#if !ready} -
    - Your wallet is being created... - - - - + + You have chosen: {#each pin as digit}{digit}{/each} + +
    + {#each [0, 1, 2] as row} +
    + {#each [1, 2, 3] as num} + + {/each} +
    + {/each} + +
    - {:else} -
    - Your wallet is ready! - - {#if download_link} - Please download your wallet and keep it in a safe location
    - + {:else if pin_confirm.length < 4} +
    +

    + Please confirm your PIN code. + Enter the same PIN again +

    + + You have chosen: {#each pin_confirm as digit}{digit}{/each} + +
    + {#each [0, 1, 2] as row} +
    + {#each [1, 2, 3] as num} + + {/each} +
    + {/each} + +
    +
    + {:else if !options} +
    + {#if pin.toString() === pin_confirm.toString()} + + Your PIN is confirmed as : {#each pin_confirm as digit}{digit}{/each} + +

    + Now let's enter a security phrase and a security image +

    +

    + As a verification step, this phrase and image will be presented to + you every time you are about to enter your pazzle and PIN in order + to unlock your wallet.
    + This security measure will prevent you from entering your pazzle and + PIN on malicious sites and apps. + + Every time you will use your wallet, if you do not see and + recognize your own security phrase and image before entering + your pazzle, please stop and DO NOT enter your pazzle, as you + would be the victim of a phishing attempt. + +

    +

    + Here are the rules for the security phrase and image : +

    +
      +
    • The phrase should be at least 10 characters long
      • +
    • + It should be something you will remember, but not something too + personal. +
      • +
    • + Do not enter your full name, nor address, nor phone number. +
      • +
    • + Instead, you can enter a quote, a small sentence that you like, + or something meaningless to others, but unique to you. +
      • +
    • + The image should be minimum 150x150px. There is no need to + provide more than 400x400px as it will be scaled down anyway. +
      • +
    • + We accept several formats like JPEG, PNG, GIF, WEBP and more. +
      • +
    • + The image should be unique to you. But it should not be too + personal neither. +
      • +
    • + Do not upload your face picture, this is not a profile pic. +
      • +
    • + The best would be a landscape you like or any other picture that + you will recognize as unique. +
      • +
    • + Please be aware that other people who are sharing this device + with you, will be able to see this image and phrase. +
      • +
    +
    + {#if security_txt && security_img} -
    - {:else if !options.trusted} - Your wallet file has been downloaded into your "Downloads" folder, - with the name
    - {download_name}
    - Please move it to a safe and durable place.

    - {/if} - Here is your Pazzle:

    - {#each display_pazzle(ready.pazzle) as emoji} - {emoji}
    - {/each} -

    - Copy it on a piece of paper.
    Use that until you memorized it,
    - then throw it away.
    The order of each image is important.
    - Now click on "Continue to Login"

    - - - + {/if} +
    + {:else if !creating} +
    +

    + We are almost done !
    + There are 4 options to choose before we can create your wallet. Those + options can help you to use and keep your wallet. But we also want to + be careful with your security and privacy.

    + Remember that in any case, once your wallet will be created, you will + download a file that you should keep privately somewhere on your device, + USB key or hard-disk. This is the default way you can use and keep your + wallet. Now let's look at some options that can make your life a bit + easier. +

    +

    + Do you trust this device?
    + 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}
    + Save my wallet on this device? +

    +

    + Keep a copy in the cloud?
    + Are you afraid that you will loose the file containing your wallet? If + this would happen, your wallet would be lost forever, together with all + your documents. We can keep an encrypted copy of your wallet in our cloud. + Only you will be able to download it with a special link. You would have + to keep this link safely though. By selecting this option, you agree + to the + Terms of Service of our cloud. +
    + Save my wallet in the cloud? +

    +

    + Create a PDF file of your wallet? +
    + We can prepare for you a PDF file containing all the information of your + wallet, unencrypted. You should print this file and then delete the PDF + (and empty the trash). Keep this printed document in a safe place. It + contains all the information to regenerate your wallet in case you lost + access to it. +
    + Create a PDF of my wallet? +

    + {#if !options.cloud} +

    + Create a link to access your wallet easily? +
    + When you want to use your wallet on the web or from other devices, + we can help you find your wallet by creating a simple link accessible + from anywhere. Only you will have access to this link. In order to + do so, we will keep your wallet ID and some information about your + broker on our cloud servers. If you prefer to opt out, just uncheck + this option. By selecting this option, you agree to the + Terms of Service of our cloud. +
    + Create a link to my wallet? +

    + {/if} + +
    + {:else if !error} + {#if !ready} +
    + Your wallet is being created... + + + + +
    + {:else} +
    + Your wallet is ready! + + {#if download_link} + Please download your wallet and keep it in a safe location
    + + +
    + {:else if !options.trusted} + Your wallet file has been downloaded into your "Downloads" folder, + with the name
    + {download_name}
    + Please move it to a safe and durable place.

    + {/if} + Here is your Pazzle:

    + {#each display_pazzle(ready.pazzle) as emoji} + {emoji}
    + {/each} +

    + Copy it on a piece of paper.
    Use that until you memorized it,
    + then throw it away.
    The order of each image is important.
    + Now click on "Continue to Login"

    + + + +
    + {/if} + {:else} +
    + An error occurred ! + + + {error} + +
    {/if} - {:else} -
    - An error occurred ! - - - {error} - - -
    - {/if} -
    -{/if} + + {/if} + diff --git a/ng-app/src/routes/WalletLogin.svelte b/ng-app/src/routes/WalletLogin.svelte index ae3bdb7..4233911 100644 --- a/ng-app/src/routes/WalletLogin.svelte +++ b/ng-app/src/routes/WalletLogin.svelte @@ -13,6 +13,7 @@ import { onMount, onDestroy } from "svelte"; import { link, push } from "svelte-spa-router"; import Login from "../lib/Login.svelte"; + import CenteredLayout from "../lib/CenteredLayout.svelte"; import ng from "../api"; import { Fileupload, Button } from "flowbite-svelte"; // @ts-ignore @@ -135,47 +136,47 @@ } -{#if error} -
    - + + {#if error} +
    + -

    - An error occurred:
    {error} -

    - -
    -{:else if wallet} - -{:else if !$active_wallet && !selected} -
    +

    + An error occurred:
    {error} +

    + +
    + {:else if wallet} + + {:else if !$active_wallet && !selected}
    @@ -217,7 +218,7 @@ on:change={handleWalletUpload} />
    -{:else if step == "security"}{:else if step == "qrcode"}{:else if step == "cloud"}{:else if step == "loggedin"}you - are logged in{/if} + {:else if step == "security"}{:else if step == "qrcode"}{:else if step == "cloud"}{:else if step == "loggedin"}you + are logged in{/if} +