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

improvements

Browse Source
pull/26/head
Laurin Weger 6 months ago
parent 7547039998
commit d79acc94d2
No known key found for this signature in database
GPG Key ID: 9B372BB0B792770F
3 changed files with 1334 additions and 1078 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. 65
      ng-app/src/lib/components/CopyToClipboard.svelte
  2. 2
      ng-app/src/lib/components/PasswordInput.svelte
  3. 413
      ng-app/src/routes/WalletCreate.svelte

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

@ -0,0 +1,65 @@
<script lang="ts">
export let value: string = "";
export let id: string;
let has_success: boolean = false;
const on_click = (e) => {
has_success = true;
setTimeout(() => (has_success = false), 2_000);
navigator.clipboard.writeText(value);
};
</script>
<div class="w-full">
<div class="relative">
<input
{id}
type="text"
{value}
class="col-span-6 pr-11 bg-gray-50 border border-gray-300 text-gray-600 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"
disabled
readonly
/>
<button
on:click={on_click}
class="absolute end-2 top-1/2 -translate-y-1/2 bg-gray-50 shadow-none text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg p-2 inline-flex items-center justify-center"
>
<span id="default-icon" class:hidden={has_success}>
<svg
class="w-3.5 h-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 18 20"
>
<path
d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"
/>
</svg>
</span>
<span
id="success-icon"
class="inline-flex items-center"
class:hidden={!has_success}
>
<svg
class="w-3.5 h-3.5 text-blue-700 dark:text-blue-500"
aria-hidden={!has_success}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 16 12"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5"
/>
</svg>
</span>
</button>
</div>
</div>

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

@ -23,7 +23,7 @@
{id}
{type}
on:input={handleInput}
class={`${className} text-md block`}
class={`${className} pr-12 text-md block`}
autocomplete={auto_complete}
/>

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

@ -17,9 +17,10 @@
-->
<script lang="ts">
import { Button, Alert, Dropzone, Toggle } from "flowbite-svelte";
import { Button, Alert, Dropzone, Toggle, Modal } from "flowbite-svelte";
import { link, querystring } from "svelte-spa-router";
import CenteredLayout from "../lib/CenteredLayout.svelte";
import CopyToClipboard from "../lib/components/CopyToClipboard.svelte";
// @ts-ignore
import EULogo from "../assets/EU.svg?component";
// @ts-ignore
@ -34,7 +35,11 @@
APP_WALLET_CREATE_SUFFIX,
default as ng,
} from "../api";
import { display_pazzle } from "../wallet_emojis";
import {
display_pazzle,
emojis_from_pazzle_ids,
load_svg,
} from "../wallet_emojis";
import { onMount, onDestroy, tick } from "svelte";
import { wallets, set_active_session, has_wallets } from "../store";
@ -43,6 +48,11 @@
let tauri_platform = import.meta.env.TAURI_PLATFORM;
let mobile = tauri_platform == "android" || tauri_platform == "ios";
let is_touch_device =
"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
// @ts-ignore
navigator?.msMaxTouchPoints > 0;
const onFileSelected = (image) => {
animate_bounce = false;
@ -123,7 +133,9 @@
let unsub_register_accepted;
let unsub_register_error;
let unsub_register_close;
/** The emojis for the newly created pazzle. */
let pazzle_emojis = [];
let confirm_modal_open = false;
function scrollToTop() {
top.scrollIntoView();
}
@ -190,6 +202,9 @@
}
}
scrollToTop();
// We need them for display later.
load_svg();
}
function create_wallet() {
@ -253,8 +268,10 @@
window.wallet_channel.postMessage(new_in_mem, location.href);
}
}
console.log(ready.pazzle);
console.log(display_pazzle(ready.pazzle));
console.log("pazzle", ready.pazzle);
console.log("pazzle words", display_pazzle(ready.pazzle));
console.log("mnemonic", ready.mnemonic);
console.log("mnemonic words", ready.mnemonic_str);
download_name = "wallet-" + ready.wallet_name + ".ngw";
if (options.cloud) {
cloud_link = "https://nextgraph.one/#/w/" + ready.wallet_name;
@ -401,11 +418,106 @@
"Terms of Service NextGraph.one"
);
};
const load_pazzle_emojis = async (pazzle_ids: number[]) => {
// We wait until the SVGs are available. If they are already, we return immediately.
await load_svg();
pazzle_emojis = emojis_from_pazzle_ids(pazzle_ids);
};
$: if (ready?.pazzle) {
load_pazzle_emojis(ready.pazzle);
}
// Loads an example wallet.
const loadWallet = async () => {
options = {
trusted: true,
cloud: false,
bootstrap: false,
pdf: false,
};
creating = true;
let local_invitation = await ng.get_local_bootstrap(location.href);
let additional_bootstrap;
if (local_invitation) {
additional_bootstrap = local_invitation.V0.bootstrap;
}
let core_registration;
if (invitation?.V0.code) {
core_registration = invitation.V0.code.ChaCha20Key;
}
let params = {
security_img: security_img,
security_txt,
pin,
pazzle_length: 9,
send_bootstrap: false, //options.cloud || options.bootstrap ? : undefined,
send_wallet: options.cloud,
local_save: options.trusted,
result_with_wallet_file: false, // this will be automatically changed to true for browser app
core_bootstrap: invitation?.V0.bootstrap,
core_registration,
additional_bootstrap,
};
try {
ready = await import("./wallet.json");
wallets.set(await ng.get_wallets());
if (!options.trusted && !tauri_platform) {
let lws = $wallets[ready.wallet_name];
if (lws.in_memory) {
let new_in_mem = {
lws,
name: ready.wallet_name,
opened: false,
cmd: "new_in_mem",
};
window.wallet_channel.postMessage(new_in_mem, location.href);
}
}
console.log("pazzle ids", ready.pazzle);
console.log("pazzle emojis", emojis_from_pazzle_ids(ready.pazzle));
download_name = "wallet-" + ready.wallet_name + ".ngw";
if (options.cloud) {
cloud_link = "https://nextgraph.one/#/w/" + ready.wallet_name;
}
if (ready.wallet_file.length) {
const blob = new Blob([ready.wallet_file], {
type: "application/octet-stream",
});
download_link = URL.createObjectURL(blob);
}
} catch (e) {
console.error(e);
error = e;
}
wait = false;
registration_error = false;
intro = false;
pin = [0, 8, 1, 5];
pin_confirm = [0, 8, 1, 5];
invitation = true;
};
loadWallet();
let width: number;
let height: number;
const breakPointWidth: number = 450;
const breakPointHeight: number = 500;
let small_screen = false;
$: if (width >= breakPointWidth && height >= breakPointHeight) {
small_screen = false;
} else {
small_screen = true;
}
</script>
<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
<CenteredLayout>
<div class="max-w-2xl lg:px-8 mx-auto px-4">
{#if wait}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700">
<div class="lg:px-8 text-primary-700">
{#if wait === true}
Please wait...
{:else}
@ -437,7 +549,7 @@
<div class="container3" bind:this={top}>
<div class="row">
<a href="#/">
<Logo class="logo block h-40" alt="NextGraph Logo" />
<Logo class="logo block h-[8em]" alt="NextGraph Logo" />
</a>
</div>
{#if registration_error}
@ -488,9 +600,9 @@
<div class=" max-w-6xl lg:px-8 mx-auto px-4">
<p class="max-w-xl md:mx-auto lg:max-w-2xl">
A <b>NextGraph Wallet</b> is unique to each person. It stores your
credentials and authorizations to access documents. You need one in
order to start using NextGraph.<br /><br />If you already have a
wallet, you should not create a new one, instead,
credentials and authorizations to access documents. You need one
in order to start using NextGraph.<br /><br />If you already have
a wallet, you should not create a new one, instead,
<a href="/wallet/login" use:link
>login here with your existing wallet.</a
>
@ -556,8 +668,8 @@
</svg>
<span
>In your wallet, we store all the permissions to access
documents you have been granted with, or that you have created
yourself.</span
documents you have been granted with, or that you have
created yourself.</span
>
</li>
<li class="flex space-x-3">
@ -578,7 +690,8 @@
/>
</svg>
<span
>In order to open it, you will need to enter your <b>pazzle</b
>In order to open it, you will need to enter your <b
>pazzle</b
>
and a
<b>PIN code</b> of 4 digits. Your personal pazzle (contraction
@ -606,9 +719,10 @@
</svg>
<span
>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 <b>66bits</b>,
which is considered very high by all standards.</span
password like "69$g&ms%C*%", and it has the same strength as
a complex password. The entropy of your pazzle is <b
>66bits</b
>, which is considered very high by all standards.</span
>
</li>
@ -629,10 +743,10 @@
/>
</svg>
<span
>You should only create <b>one unique wallet for yourself</b>.
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
>You should only create <b>one unique wallet for yourself</b
>. 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
<b>import</b> your existing wallet in all the apps and websites
where you need it</span
>
@ -678,9 +792,9 @@
/>
</svg>
<span
>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.</span
>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.</span
>
</li>
<li class="flex space-x-3 under">
@ -703,10 +817,11 @@
<span
>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.</span
file. <span class="text-bold">
There is no "password recovery" option</span
> 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.</span
>
</li>
</ul>
@ -738,8 +853,8 @@
{:else if !invitation}
<div class=" max-w-6xl lg:px-8 mx-auto px-4">
<p class="max-w-xl md:mx-auto lg:max-w-2xl">
NextGraph is based on an efficient decentralized P2P network, and in
order to join this network and start using the app, you need to
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 <b>broker&nbsp;server</b>.
</p>
</div>
@ -770,8 +885,8 @@
/>
</svg>
<span>
The broker helps you keep all your data in <b>sync</b>, as it
is connected to the internet 24/7 and keeps a copy of the
The broker helps you keep all your data in <b>sync</b>, 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</span
>
@ -794,8 +909,8 @@
</svg>
<span>
All your data is secure and <b>end-to-end encrypted</b>, and
the broker cannot see the content of the documents as it does
not have the keys to decrypt them.</span
the broker cannot see the content of the documents as it
does not have the keys to decrypt them.</span
>
</li>
<li class="flex space-x-3">
@ -815,8 +930,9 @@
/>
</svg>
<span>
The broker helps you enforce your <b>privacy</b> as it hides your
internet address (IP) from other users you share documents with.</span
The broker helps you enforce your <b>privacy</b> as it hides
your internet address (IP) from other users you share documents
with.</span
>
</li>
<li class="flex space-x-3">
@ -837,9 +953,9 @@
</svg>
<span>
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.</span
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.</span
>
</li>
<li class="flex space-x-3">
@ -859,8 +975,8 @@
/>
</svg>
<span>
At anytime you can decide to switch to another broker service
provider or host it yourself. Your data is totally <b
At anytime you can decide to switch to another broker
service provider or host it yourself. Your data is totally <b
>portable</b
>
and can freely move to another broker.</span
@ -884,12 +1000,12 @@
</svg>
<span>
Soon we will offer you the opportunity to host your own broker
at <b>home</b>
Soon we will offer you the opportunity to host your own
broker at <b>home</b>
or <b>office</b>. Instead of using a "broker service
provider", you will own a small device that you connect behind
your internet router. It is called <b>NG Box</b> and will be available
soon.</span
provider", you will own a small device that you connect
behind your internet router. It is called <b>NG Box</b> and will
be available soon.</span
>
</li>
<li class="flex space-x-3">
@ -928,7 +1044,10 @@
<div class="row mt-5">
<button
on:click|once={async () => {
await select_bsp(pre_invitation.V0.url, pre_invitation.V0.name);
await select_bsp(
pre_invitation.V0.url,
pre_invitation.V0.name
);
}}
class="choice-button 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 mb-2"
>
@ -956,7 +1075,10 @@
on:click|once={selectEU}
class="choice-button text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2"
>
<EULogo class="mr-4 block h-10 w-10" alt="European Union flag" />
<EULogo
class="mr-4 block h-10 w-10"
alt="European Union flag"
/>
For European Union citizens
</button>
</div>
@ -1122,13 +1244,14 @@
invalid
</li>
<li>
Try to avoid birth date, last digits of phone number, or zip code
Try to avoid birth date, last digits of phone number, or zip
code
</li>
</ul>
<Alert color="blue" class="mt-5">
You have chosen: {#each pin as digit}<span class="font-bold text-xl"
>{digit}</span
You have chosen: {#each pin as digit}<span
class="font-bold text-xl">{digit}</span
>{/each}
</Alert>
<div class="w-[295px] mx-auto mb-4">
@ -1202,11 +1325,11 @@
Now let's enter a security phrase and a security image
</h2>
<p class="max-w-xl md:mx-auto lg:max-w-2xl text-left">
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.<br />
This security measure will prevent you from entering your pazzle and
PIN on malicious sites and apps.
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.<br />
This security measure will prevent you from entering your pazzle
and PIN on malicious sites and apps.
<Alert color="red" class="mt-5">
Every time you will use your wallet, if you do not see and
recognize your own security phrase and image before entering
@ -1214,7 +1337,9 @@
would be the victim of a phishing attempt.
</Alert>
</p>
<p class="max-w-xl md:mx-auto lg:max-w-2xl text-left mt-5 text-sm">
<p
class="max-w-xl md:mx-auto lg:max-w-2xl text-left mt-5 text-sm"
>
Here are the rules for the security phrase and image :
</p>
<ul
@ -1222,15 +1347,15 @@
>
<li>The phrase should be at least 10 characters long</li>
<li>
It should be something you will remember, but not something too
personal.
It should be something you will remember, but not something
too personal.
</li>
<li>
Do not enter your full name, nor address, nor phone number.
</li>
<li>
Instead, you can enter a quote, a small sentence that you like,
or something meaningless to others, but unique to you.
Instead, you can enter a quote, a small sentence that you
like, or something meaningless to others, but unique to you.
</li>
<li>
The image should be minimum 150x150px. There is no need to
@ -1247,8 +1372,8 @@
Do not upload your face picture, this is not a profile pic.
</li>
<li>
The best would be a landscape you like or any other picture that
you will recognize as unique.
The best would be a landscape you like or any other picture
that you will recognize as unique.
</li>
<li>
Please be aware that other people who are sharing this device
@ -1303,7 +1428,7 @@
on:change={handleChange}
>
<p class="mt-2 mb-5 text-gray-500 dark:text-gray-400">
{#if mobile}
{#if is_touch_device}
<span class="font-semibold">Tap to upload an image</span>
{:else}
<span class="font-semibold">Click to select an image</span> or
@ -1352,34 +1477,35 @@
<p class="max-w-xl mb-10 md:mx-auto lg:max-w-2xl">
<span class="text-xl">We are almost done !</span><br />
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.<br /><br />
options can help you to use and keep your wallet. But we also want
to be careful with your security and privacy.<br /><br />
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.
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.
</p>
<p class="max-w-xl md:mx-auto lg:max-w-2xl text-left">
<span class="text-xl">Do you trust this device? </span> <br />
If you do, if this device is yours or is used by few trusted persons
of your family or workplace, and you would like to login again from this
device in the future, then you can save your wallet on this device. To
the contrary, if this device is public and shared by strangers, do not
save your wallet here. {#if !tauri_platform}By selecting this
option, you agree to save some cookies on your browser.{/if}<br />
of your family or workplace, and you would like to login again from
this device in the future, then you can save your wallet on this device.
To the contrary, if this device is public and shared by strangers,
do not save your wallet here. {#if !tauri_platform}By selecting
this option, you agree to save some cookies on your browser.{/if}<br
/>
<Toggle class="mt-3" bind:checked={options.trusted}
>Save my wallet on this device?</Toggle
>
</p>
<p class="max-w-xl md:mx-auto mt-10 lg:max-w-2xl text-left">
<span class="text-xl">Keep a copy in the cloud? </span> <br />
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
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
<span
style="font-weight: 500;cursor: pointer; color: #646cff;"
tabindex="0"
@ -1395,11 +1521,11 @@
<p class="max-w-xl md:mx-auto mt-10 lg:max-w-2xl text-left">
<span class="text-xl">Create a PDF file of your wallet? </span>
<br />
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.
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.
<br />
<Toggle disabled class="mt-3" bind:checked={options.pdf}
>Create a PDF of my wallet?</Toggle
@ -1479,10 +1605,11 @@
</svg>
</div>
{:else}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-green-800">
Your wallet is ready!
<div class="text-left">
<div class="text-green-800 mx-auto flex flex-col items-center">
<div>Your wallet is ready!</div>
<svg
class="my-10 h-16 w-16 mx-auto"
class="my-10 h-16 w-16"
fill="none"
stroke="currentColor"
stroke-width="1.5"
@ -1496,9 +1623,14 @@
d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
/>
</svg>
</div>
{#if download_link}
Please download your wallet and keep it in a safe location<br />
<a href={download_link} target="_blank" download={download_name}>
<a
href={download_link}
target="_blank"
download={download_name}
>
<button
tabindex="-1"
class:animate-bounce={animateDownload}
@ -1525,8 +1657,8 @@
</button>
</a><br />
{:else if !options.trusted}
Your wallet file has been downloaded into your "Downloads" folder,
with the name<br /><span class="text-black">
Your wallet file has been downloaded into your "Downloads"
folder, with the name<br /><span class="text-black">
{download_name}</span
><br />
<span class="font-bold"
@ -1534,39 +1666,75 @@
><br /><br />
{/if}
<!-- Pazzle -->
Here is your Pazzle (The <span class="font-bold">order</span> of
each image is
<span class="font-bold">important</span>):
<br />
Here is your Pazzle
<br />
{#each display_pazzle(ready.pazzle) as emoji}
<span>{emoji}</span><br />
The <span class="font-bold">order</span> of each image is
<span class="font-bold">important</span>:
<div
class="mt-2 bg-white shadow-md rounded-lg max-w-2xl w-full mx-auto"
>
{#each pazzle_emojis as emoji, index}
<div
class="flex items-center w-full py-1 px-2"
class:border-b={index !== pazzle_emojis.length - 1}
class:justify-center={!small_screen}
>
<div class="w-[10em] font-bold text-left">
<span>{index + 1}</span>: <span>{emoji.cat}</span>
</div>
<div
class="flex justify-center items-center"
class:w-[3em]={!small_screen}
class:w-[1.8em]={small_screen}
title={emoji.code}
>
<svelte:component
this={emoji.svg?.default}
class="text-5xl"
/>
</div>
<div class="ml-2 w-[6em] font-bold text-left">
{emoji.code}
</div>
</div>
{/each}
</div>
<br />
<br /><br />
<!-- Mnemonic -->
And here is your mnemonic:<br />
<span class="select-none">"</span>{ready.mnemonic_str.join(
" "
)}<span class="select-none">"</span> <br /><br />
<!-- Mnemonic (copy button). TODO: once the component is available-->
<label for="mnemonic mb-2"
>And here is your mnemonic (your alternative passphrase):</label
>
<CopyToClipboard
id="mnemonic"
value={ready.mnemonic_str.join(" ")}
/>
<br />
You can use both the pazzle or the mnemonic to unlock your wallet.
The pazzle is easier to remember. The mnemonic is useful in some special
cases. We recommend that you use the pazzle.
<em class="font-bold">Copy both on a piece of paper.</em> You
should try to memorize the pazzle. Once you did, you won't need
the paper anymore.
<br /><br />
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.
<br /><br />
Now click on "Continue to Login" and select your wallet.<br />It is
important that you login with this wallet at least once from this {#if tauri_platform}device{:else}browser
tab{/if},<br />
Now click on "Continue to Login" and select your new wallet.
<br />
It is important that you <em class="font-bold">login</em> with
this wallet
<em class="font-bold">at least once</em>
from this {#if tauri_platform}device{:else}browser tab{/if},<br />
while connected to the internet, so your personal site can be created
on your broker.<br /><br />
<a href="/wallet/login" use:link>
<div class="flex flex-col items-center">
<button
tabindex="-1"
class="mb-20 text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mr-2"
on:click={() => (confirm_modal_open = true)}
>
<svg
class="w-8 h-8 mr-2 -ml-1"
@ -1585,8 +1753,30 @@
</svg>
Continue to Login
</button>
</div>
<Modal
autoclose
outsideclose
bind:open={confirm_modal_open}
title="Did you write down your login credentials?"
>
The pazzle and the mnemonic will not be shown to you again.
Please make sure, you have written it down.
<div>
<button
class="m-2"
on:click={() => (confirm_modal_open = false)}
>Take me back</button
>
<a href="/wallet/login" use:link>
<button class="m-2 bg-primary-700 text-white"
>Yes, I did</button
>
<!-- todo: blue button-->
</a>
</div>
</Modal>
</div>
{/if}
{:else}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
@ -1626,6 +1816,7 @@
{/if}
</div>
{/if}
</div>
</CenteredLayout>
<style>

Write Preview
Loading…
Cancel
Save