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

waiting screen when redirecting to BSP registration page

Browse Source
Niko PLP 1 year ago
parent 91115fdea8
commit f3d554dcd9
1 changed files with 1016 additions and 966 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. 202
      ng-app/src/routes/WalletCreate.svelte

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

@ -9,7 +9,7 @@
// according to those terms.
-->
<script>
<script lang="ts">
import { Button, Alert, Dropzone, Toggle } from "flowbite-svelte";
import { link, querystring } from "svelte-spa-router";
// @ts-ignore
@ -86,6 +86,7 @@
};
let intro = true;
let wait: any = false;
let registration_error;
let registration_success;
let pin = [];
@ -301,6 +302,7 @@
},
};
let ca = await ng.encode_create_account(create);
wait = "Redirecting to the Broker Service Provider registration page";
window.location.href = bsp_url + "?ca=" + ca;
//window.open(), "_self").focus();
} else {
@ -309,6 +311,7 @@
redirect_url: undefined,
},
};
wait = "Complete the registration in the popup window";
let ca = await ng.encode_create_account(create);
await ng.open_window(
bsp_url + "?ca=" + ca,
@ -321,6 +324,7 @@
unsub_register_accepted = await event_api.listen(
"accepted",
async (event) => {
wait = false;
console.log("got accepted with payload", event.payload);
unsub_register();
let reg_popup = window_api.Window.getByLabel("registration");
@ -330,6 +334,7 @@
}
);
unsub_register_error = await event_api.listen("error", async (event) => {
wait = false;
console.log("got error with payload", event.payload);
if (event.payload) registration_error = event.payload.error;
else intro = true;
@ -342,6 +347,7 @@
let reg_popup = window_api.Window.getByLabel("registration");
unsub_register_close = await reg_popup.onCloseRequested(async (event) => {
console.log("onCloseRequested");
wait = false;
intro = true;
unsub_register_close = undefined;
unsub_register();
@ -372,7 +378,37 @@
};
</script>
<main class="container3" bind:this={top}>
{#if wait}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700">
{#if wait === true}
Please wait...
{:else}
{wait}
{/if}
<svg
class="animate-spin mt-10 h-14 w-14 mx-auto"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
</div>
{:else}
<main class="container3" bind:this={top}>
<div class="row">
<a href="#/">
<Logo class="logo block h-40" alt="NextGraph Logo" />
@ -437,11 +473,14 @@
</div>
{#if $has_wallets}
<Alert color="yellow" class="mt-5">
Some wallets are saved on this device,<br /> to log in with one of them,
Some wallets are saved on this device,<br /> to log in with one of
them,
<a href="/wallet/login" use:link>click here.</a>
</Alert>
{/if}
<div class="px-4 pt-5 mx-auto max-w-6xl lg:px-8 lg:pt-10 dark:bg-slate-800">
<div
class="px-4 pt-5 mx-auto max-w-6xl lg:px-8 lg:pt-10 dark:bg-slate-800"
>
<div class="max-w-xl md:mx-auto sm:text-center lg:max-w-2xl">
<h2 class="pb-5 text-xl">
What is a wallet? <span class="text-sm">Please read</span>
@ -487,8 +526,9 @@
/>
</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
>In your wallet, we store all the permissions to access
documents you have been granted with, or that you have created
yourself.</span
>
</li>
<li class="flex space-x-3">
@ -511,9 +551,9 @@
<span
>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 of puzzle
and password) is composed of 9 images you should remember. The order
of the images is important too.</span
<b>PIN code</b> 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.</span
>
</li>
<li class="flex space-x-3">
@ -559,9 +599,9 @@
/>
</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
>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
@ -608,9 +648,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">
@ -632,8 +672,8 @@
</svg>
<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
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
>
@ -673,7 +713,9 @@
select a <b>broker&nbsp;server</b>.
</p>
</div>
<div class="px-4 pt-3 mx-auto max-w-6xl lg:px-8 lg:pt-10 dark:bg-slate-800">
<div
class="px-4 pt-3 mx-auto max-w-6xl lg:px-8 lg:pt-10 dark:bg-slate-800"
>
<div class="max-w-xl md:mx-auto sm:text-center lg:max-w-2xl">
<h2 class="pb-5 text-xl">
What is a broker? <span class="text-sm">Please read</span>
@ -697,9 +739,9 @@
</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 updates for
you. This way, even if the devices of the other participants are
offline, you can still see their changes</span
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
>
</li>
<li class="flex space-x-3">
@ -720,8 +762,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
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">
@ -741,8 +783,8 @@
/>
</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">
@ -764,8 +806,8 @@
<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
broker and to have direct connections between peers, but this
will imply a less smooth experience.</span
>
</li>
<li class="flex space-x-3">
@ -786,7 +828,9 @@
</svg>
<span>
At anytime you can decide to switch to another broker service
provider or host it yourself. Your data is totally <b>portable</b>
provider or host it yourself. Your data is totally <b
>portable</b
>
and can freely move to another broker.</span
>
</li>
@ -808,12 +852,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
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">
@ -834,13 +878,12 @@
</svg>
<span>
Organizations and companies have the opportunity to host a broker <b
>on-premise</b
>
Organizations and companies have the opportunity to host a
broker <b>on-premise</b>
or in the <b>cloud</b>, as the software is open source.
Individuals can also
<b>self-host</b> a broker on any VPS server or at home, on their dedicated
hardware.</span
<b>self-host</b> a broker on any VPS server or at home, on their
dedicated hardware.</span
>
</li>
</ul>
@ -1000,7 +1043,8 @@
>Let's start creating your wallet by choosing a PIN code</span
>
<Alert color="yellow" class="mt-5">
We recommend you to choose a PIN code that you already know very well.
We recommend you to choose a PIN code that you already know very
well.
<br />
Your credit card PIN, by example, is a good choice.<br />We at
NextGraph will never see your PIN.
@ -1049,7 +1093,8 @@
{:else if pin_confirm.length < 4}
<div class=" max-w-6xl lg:px-8 mx-auto px-4">
<p class="max-w-xl md:mx-auto lg:max-w-2xl">
<span class="animate-bounce text-xl">Please confirm your PIN code.</span
<span class="animate-bounce text-xl"
>Please confirm your PIN code.</span
>
Enter the same PIN again
</p>
@ -1093,16 +1138,16 @@
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 your pazzle,
please stop and DO NOT enter your pazzle, as you would be the victim
of a phishing attempt.
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.
</Alert>
</p>
<p class="text-left mt-5">
@ -1123,15 +1168,17 @@
The image should be minimum 150x150px. There is no need to provide
more than 400x400px as it will be scaled down anyway.
</li>
<li>We accept several formats like JPEG, PNG, GIF, WEBP and more.</li>
<li>
The image should be unique to you. But it should not be too personal
neither.
We accept several formats like JPEG, PNG, GIF, WEBP and more.
</li>
<li>
The image should be unique to you. But it should not be too
personal neither.
</li>
<li>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 with
@ -1236,15 +1283,15 @@
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.
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.
</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 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 />
@ -1254,11 +1301,12 @@
</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
<a target="_blank" href="https://nextgraph.one/#/tos"
>Terms of Service of our cloud</a
>.
@ -1270,8 +1318,8 @@
<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
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 />
@ -1284,12 +1332,12 @@
<span class="text-xl"
>Create a link to access your wallet easily?
</span> <br />
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
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
<a target="_blank" href="https://nextgraph.one/#/tos"
>Terms of Service of our cloud</a
>.
@ -1396,8 +1444,9 @@
</a><br />
{:else if !options.trusted}
Your wallet file has been downloaded into your "Downloads" folder,
with the name<br /><span class="text-black"> {download_name}</span><br
/>
with the name<br /><span class="text-black">
{download_name}</span
><br />
Please move it to a safe and durable place.<br /><br />
{/if}
{#each display_pazzle(ready.pazzle) as emoji}
@ -1441,7 +1490,8 @@
</button>
</div>
{/if}
</main>
</main>
{/if}
<style>
</style>

Write Preview
Loading…
Cancel
Save