From d79acc94d2de934ccc734bada0c1ac770788eb24 Mon Sep 17 00:00:00 2001 From: Laurin Weger Date: Wed, 3 Jul 2024 15:17:57 +0200 Subject: [PATCH] improvements --- .../src/lib/components/CopyToClipboard.svelte | 65 + .../src/lib/components/PasswordInput.svelte | 2 +- ng-app/src/routes/WalletCreate.svelte | 2345 +++++++++-------- 3 files changed, 1334 insertions(+), 1078 deletions(-) create mode 100644 ng-app/src/lib/components/CopyToClipboard.svelte diff --git a/ng-app/src/lib/components/CopyToClipboard.svelte b/ng-app/src/lib/components/CopyToClipboard.svelte new file mode 100644 index 0000000..b30efae --- /dev/null +++ b/ng-app/src/lib/components/CopyToClipboard.svelte @@ -0,0 +1,65 @@ + + +
+
+ + +
+
diff --git a/ng-app/src/lib/components/PasswordInput.svelte b/ng-app/src/lib/components/PasswordInput.svelte index e2d88b2..dd5549d 100644 --- a/ng-app/src/lib/components/PasswordInput.svelte +++ b/ng-app/src/lib/components/PasswordInput.svelte @@ -23,7 +23,7 @@ {id} {type} on:input={handleInput} - class={`${className} text-md block`} + class={`${className} pr-12 text-md block`} autocomplete={auto_complete} /> diff --git a/ng-app/src/routes/WalletCreate.svelte b/ng-app/src/routes/WalletCreate.svelte index be9de2b..87ca62d 100644 --- a/ng-app/src/routes/WalletCreate.svelte +++ b/ng-app/src/routes/WalletCreate.svelte @@ -17,9 +17,10 @@ --> + + - {#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. You need one in - order to start using NextGraph.

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 -

-
+ {:else if intro} +
+

+ A NextGraph Wallet is unique to each person. It stores your + credentials and authorizations to access documents. You need one + in order to start using NextGraph.

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 + 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} +
+ +
- - 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. - -
  • +
    +
    • -
  • - +
    • + {/if} + +
    + +
    + {#if false && mobile} +
    +
    -
    - {#if pre_invitation} + Scan an invitation QRcode + +
    + {/if}
    -
    - {:else} -
    -
    - -
    +
    - {/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 +
      • +
    -
    - + {/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. +
      • +
    - Enter an invitation link - -
    - {#if false && mobile} -
    +
    + {#if security_txt && security_img} + + {/if} + { + event.preventDefault(); + }} + on:change={handleChange} + > +

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

    + +     + your security + {: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? +

    + {/if} -
    - {/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} -
    + {:else} +
    +
    +
    Your wallet is ready!
    +
    + {#if download_link} + Please download your wallet and keep it in a safe location
    + + - {/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 !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 +
    + The order of each image is + important: + +
    - - your security - {: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. + {#each pazzle_emojis as emoji, index} +

    +
    + {index + 1}: {emoji.cat} +
    +
    + +
    +
    + {emoji.code} +
    +
    + {/each} +
    +
    - 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
    - + Copy both on a piece of paper. You + should try to memorize the pazzle. Once you did, you won't need + the paper anymore. + +

    + Now click on "Continue to Login" and select your new wallet. +
    + It is important that you login with + this wallet + at least once + from this {#if tauri_platform}device{:else}browser tab{/if},
    + while connected to the internet, so your personal site can be created + on your broker.

    +
    -
    - {: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 (The order of - each image is - important): -
    -
    - {#each display_pazzle(ready.pazzle) as emoji} - {emoji}
    - {/each} -
    - -

    - - And here is your mnemonic:
    - "{ready.mnemonic_str.join( - " " - )}"

    - -

    - You can use both the pazzle and the mnemonic to unlock your wallet. The - pazzle is easier to remember. The mnemonic is convenient, when you use - a secure password manager which can copy it to the corresponding wallet - unlock field. Copy both on a piece of paper. Use that until you memorized - it, then throw it away. -

    - Now click on "Continue to Login" and select your wallet.
    It is - important that you login with this wallet at least once from this {#if tauri_platform}device{:else}browser - tab{/if},
    - while connected to the internet, so your personal site can be created - on your broker.

    - - - + The pazzle and the mnemonic will not be shown to you again. + Please make sure, you have written it down. +
    + + + + + +
    + +
    + {/if} + {:else} +
    + An error occurred ! + + + {error} + +
    {/if} - {:else} -
    - An error occurred ! - - - {error} - - -
    - {/if} -
    - {/if} +
    + {/if} +