From b32b687951d89f449e961d6e0dd020ffe5943770 Mon Sep 17 00:00:00 2001 From: Niko PLP Date: Tue, 5 Sep 2023 23:46:14 +0300 Subject: [PATCH] waiting screen when redirecting to BSP registration page --- ng-app/src/routes/WalletCreate.svelte | 1982 +++++++++++++------------ 1 file changed, 1016 insertions(+), 966 deletions(-) diff --git a/ng-app/src/routes/WalletCreate.svelte b/ng-app/src/routes/WalletCreate.svelte index 5e41607..114016b 100644 --- a/ng-app/src/routes/WalletCreate.svelte +++ b/ng-app/src/routes/WalletCreate.svelte @@ -9,7 +9,7 @@ // according to those terms. --> - -
-
- - -
- {#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 than 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. +
    • +
  • + - - 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 - and can freely move to another broker. -
    • -
  • - + + Don't worry, it is easier to remember 9 images than a password + like "69$g&ms%C*%", and it has the same strength than a complex + password. The entropy of your pazzle is 66bits, which is + considered very high by all standards. +
    • - - Soon we will offer you the opportunity to host your own broker at home + + + 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. - 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 +
  • + + 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

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

+
+
- - For European Union citizens - -
+
+

+ 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 + and can freely move to another broker. +
    • +
  • + -
    -
    • +
  • + + + + 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

+
+
+
+ +
- Enter an invitation link - - - {#if 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 -
    • -
+ {#if mobile} +
+ - {/each} -
- {/each} + Scan an invitation QRcode + +
+ {/if} +
- - {: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. + {: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 security phrase and image : -

+

Here are the rules for the PIN :

    -
  • 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.
    • +
  • It cannot be a series like 1234 or 8765
  • - The best would be a landscape you like or any other picture that you - will recognize as unique. + The same digit cannot repeat more than once. By example 4484 is + invalid
  • - Please be aware that other people who are sharing this device with - you, will be able to see this image and phrase. + Try to avoid birth date, last digits of phone number, or zip code
-
- {#if security_txt && security_img} + + + 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} + + {/if} + { + event.preventDefault(); + }} + on:change={handleChange} > +

+ {#if mobile} + Tap to upload an image + {:else} + Click to select an image or drag + and drop + {/if} +

- - Save security phrase & image + stroke-width="2" + d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" + /> + + + {:else} + + You didn't enter the same PIN twice + + {/if} - { - event.preventDefault(); - }} - on:change={handleChange} - > -

- {#if mobile} - Tap to upload an image - {:else} - Click to select an image or drag - and drop - {/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} - - You didn't enter the same PIN twice - - - {/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? + Your wallet is ready! +

- {/if} - -
- {:else if !error} - {#if !ready} -
- Your wallet is being created... - - - - -
+ Download my wallet + +
+ {: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} + {#each display_pazzle(ready.pazzle) as emoji} + {emoji}
+ {/each} +
+ {/if} {:else} -
- Your wallet is ready! +
+ An error occurred ! - {#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} - {#each display_pazzle(ready.pazzle) as emoji} - {emoji}
- {/each} + + {error} + +
{/if} - {:else} -
- An error occurred ! - - - {error} - - -
- {/if} -
+ +{/if}