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
pull/19/head
Niko PLP 1 year ago
parent 85c99329f4
commit b32b687951
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. // according to those terms.
--> -->
<script> <script lang="ts">
import { Button, Alert, Dropzone, Toggle } from "flowbite-svelte"; import { Button, Alert, Dropzone, Toggle } from "flowbite-svelte";
import { link, querystring } from "svelte-spa-router"; import { link, querystring } from "svelte-spa-router";
// @ts-ignore // @ts-ignore
@ -86,6 +86,7 @@
}; };
let intro = true; let intro = true;
let wait: any = false;
let registration_error; let registration_error;
let registration_success; let registration_success;
let pin = []; let pin = [];
@ -301,6 +302,7 @@
}, },
}; };
let ca = await ng.encode_create_account(create); 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.location.href = bsp_url + "?ca=" + ca;
//window.open(), "_self").focus(); //window.open(), "_self").focus();
} else { } else {
@ -309,6 +311,7 @@
redirect_url: undefined, redirect_url: undefined,
}, },
}; };
wait = "Complete the registration in the popup window";
let ca = await ng.encode_create_account(create); let ca = await ng.encode_create_account(create);
await ng.open_window( await ng.open_window(
bsp_url + "?ca=" + ca, bsp_url + "?ca=" + ca,
@ -321,6 +324,7 @@
unsub_register_accepted = await event_api.listen( unsub_register_accepted = await event_api.listen(
"accepted", "accepted",
async (event) => { async (event) => {
wait = false;
console.log("got accepted with payload", event.payload); console.log("got accepted with payload", event.payload);
unsub_register(); unsub_register();
let reg_popup = window_api.Window.getByLabel("registration"); let reg_popup = window_api.Window.getByLabel("registration");
@ -330,6 +334,7 @@
} }
); );
unsub_register_error = await event_api.listen("error", async (event) => { unsub_register_error = await event_api.listen("error", async (event) => {
wait = false;
console.log("got error with payload", event.payload); console.log("got error with payload", event.payload);
if (event.payload) registration_error = event.payload.error; if (event.payload) registration_error = event.payload.error;
else intro = true; else intro = true;
@ -342,6 +347,7 @@
let reg_popup = window_api.Window.getByLabel("registration"); let reg_popup = window_api.Window.getByLabel("registration");
unsub_register_close = await reg_popup.onCloseRequested(async (event) => { unsub_register_close = await reg_popup.onCloseRequested(async (event) => {
console.log("onCloseRequested"); console.log("onCloseRequested");
wait = false;
intro = true; intro = true;
unsub_register_close = undefined; unsub_register_close = undefined;
unsub_register(); unsub_register();
@ -372,7 +378,37 @@
}; };
</script> </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"> <div class="row">
<a href="#/"> <a href="#/">
<Logo class="logo block h-40" alt="NextGraph Logo" /> <Logo class="logo block h-40" alt="NextGraph Logo" />
@ -437,11 +473,14 @@
</div> </div>
{#if $has_wallets} {#if $has_wallets}
<Alert color="yellow" class="mt-5"> <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> <a href="/wallet/login" use:link>click here.</a>
</Alert> </Alert>
{/if} {/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"> <div class="max-w-xl md:mx-auto sm:text-center lg:max-w-2xl">
<h2 class="pb-5 text-xl"> <h2 class="pb-5 text-xl">
What is a wallet? <span class="text-sm">Please read</span> What is a wallet? <span class="text-sm">Please read</span>
@ -487,8 +526,9 @@
/> />
</svg> </svg>
<span <span
>In your wallet, we store all the permissions to access documents >In your wallet, we store all the permissions to access
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>
<li class="flex space-x-3"> <li class="flex space-x-3">
@ -511,9 +551,9 @@
<span <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 and a
<b>PIN code</b> of 4 digits. Your personal pazzle (contraction of puzzle <b>PIN code</b> of 4 digits. Your personal pazzle (contraction of
and password) is composed of 9 images you should remember. The order puzzle and password) is composed of 9 images you should remember.
of the images is important too.</span The order of the images is important too.</span
> >
</li> </li>
<li class="flex space-x-3"> <li class="flex space-x-3">
@ -559,9 +599,9 @@
/> />
</svg> </svg>
<span <span
>You should only create <b>one unique wallet for yourself</b>. All >You should only create <b>one unique wallet for yourself</b>.
your accounts, identities and permissions will be added to this All your accounts, identities and permissions will be added to
unique wallet later on. Do not create another wallet if you this unique wallet later on. Do not create another wallet if you
already have one. Instead, you will already have one. Instead, you will
<b>import</b> your existing wallet in all the apps and websites where <b>import</b> your existing wallet in all the apps and websites where
you need it</span you need it</span
@ -608,9 +648,9 @@
/> />
</svg> </svg>
<span <span
>We at NextGraph will never see the content of your wallet. It is >We at NextGraph will never see the content of your wallet. It
encrypted and we do not know your pazzle, so we cannot see what is is encrypted and we do not know your pazzle, so we cannot see
inside.</span what is inside.</span
> >
</li> </li>
<li class="flex space-x-3 under"> <li class="flex space-x-3 under">
@ -632,8 +672,8 @@
</svg> </svg>
<span <span
>For the same reason, we won't be able to help you if you forget >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 your pazzle or PIN code, or if you loose the wallet file. There
no "password recovery" option in this case. You can note your 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 pazzle down on a piece of paper until you remember it, but don't
forget to destroy this note after a while.</span forget to destroy this note after a while.</span
> >
@ -673,7 +713,9 @@
select a <b>broker&nbsp;server</b>. select a <b>broker&nbsp;server</b>.
</p> </p>
</div> </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"> <div class="max-w-xl md:mx-auto sm:text-center lg:max-w-2xl">
<h2 class="pb-5 text-xl"> <h2 class="pb-5 text-xl">
What is a broker? <span class="text-sm">Please read</span> What is a broker? <span class="text-sm">Please read</span>
@ -697,9 +739,9 @@
</svg> </svg>
<span> <span>
The broker helps you keep all your data in <b>sync</b>, as it is 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 connected to the internet 24/7 and keeps a copy of the updates
you. This way, even if the devices of the other participants are for you. This way, even if the devices of the other participants
offline, you can still see their changes</span are offline, you can still see their changes</span
> >
</li> </li>
<li class="flex space-x-3"> <li class="flex space-x-3">
@ -720,8 +762,8 @@
</svg> </svg>
<span> <span>
All your data is secure and <b>end-to-end encrypted</b>, and the 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 broker cannot see the content of the documents as it does not
the keys to decrypt them.</span have the keys to decrypt them.</span
> >
</li> </li>
<li class="flex space-x-3"> <li class="flex space-x-3">
@ -741,8 +783,8 @@
/> />
</svg> </svg>
<span> <span>
The broker helps you enforce your <b>privacy</b> as it hides your internet The broker helps you enforce your <b>privacy</b> as it hides your
address (IP) from other users you share documents with.</span internet address (IP) from other users you share documents with.</span
> >
</li> </li>
<li class="flex space-x-3"> <li class="flex space-x-3">
@ -764,8 +806,8 @@
<span> <span>
It will be possible in the future to use NextGraph without any It will be possible in the future to use NextGraph without any
broker and to have direct connections between peers, but this will broker and to have direct connections between peers, but this
imply a less smooth experience.</span will imply a less smooth experience.</span
> >
</li> </li>
<li class="flex space-x-3"> <li class="flex space-x-3">
@ -786,7 +828,9 @@
</svg> </svg>
<span> <span>
At anytime you can decide to switch to another broker service 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 and can freely move to another broker.</span
> >
</li> </li>
@ -808,12 +852,12 @@
</svg> </svg>
<span> <span>
Soon we will offer you the opportunity to host your own broker at <b Soon we will offer you the opportunity to host your own broker
>home</b at <b>home</b>
>
or <b>office</b>. Instead of using a "broker service provider", or <b>office</b>. Instead of using a "broker service provider",
you will own a small device that you connect behind your internet you will own a small device that you connect behind your
router. It is called <b>NG Box</b> and will be available soon.</span internet router. It is called <b>NG Box</b> and will be available
soon.</span
> >
</li> </li>
<li class="flex space-x-3"> <li class="flex space-x-3">
@ -834,13 +878,12 @@
</svg> </svg>
<span> <span>
Organizations and companies have the opportunity to host a broker <b Organizations and companies have the opportunity to host a
>on-premise</b broker <b>on-premise</b>
>
or in the <b>cloud</b>, as the software is open source. or in the <b>cloud</b>, as the software is open source.
Individuals can also Individuals can also
<b>self-host</b> a broker on any VPS server or at home, on their dedicated <b>self-host</b> a broker on any VPS server or at home, on their
hardware.</span dedicated hardware.</span
> >
</li> </li>
</ul> </ul>
@ -1000,7 +1043,8 @@
>Let's start creating your wallet by choosing a PIN code</span >Let's start creating your wallet by choosing a PIN code</span
> >
<Alert color="yellow" class="mt-5"> <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 /> <br />
Your credit card PIN, by example, is a good choice.<br />We at Your credit card PIN, by example, is a good choice.<br />We at
NextGraph will never see your PIN. NextGraph will never see your PIN.
@ -1049,7 +1093,8 @@
{:else if pin_confirm.length < 4} {:else if pin_confirm.length < 4}
<div class=" max-w-6xl lg:px-8 mx-auto px-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"> <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 Enter the same PIN again
</p> </p>
@ -1093,16 +1138,16 @@
Now let's enter a security phrase and a security image Now let's enter a security phrase and a security image
</h2> </h2>
<p class="max-w-xl md:mx-auto lg:max-w-2xl text-left"> <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 As a verification step, this phrase and image will be presented to
every time you are about to enter your pazzle and PIN in order to you every time you are about to enter your pazzle and PIN in order
unlock your wallet.<br /> to unlock your wallet.<br />
This security measure will prevent you from entering your pazzle and PIN This security measure will prevent you from entering your pazzle and
on malicious sites and apps. PIN on malicious sites and apps.
<Alert color="red" class="mt-5"> <Alert color="red" class="mt-5">
Every time you will use your wallet, if you do not see and recognize Every time you will use your wallet, if you do not see and
your own security phrase and image before entering your pazzle, recognize your own security phrase and image before entering your
please stop and DO NOT enter your pazzle, as you would be the victim pazzle, please stop and DO NOT enter your pazzle, as you would be
of a phishing attempt. the victim of a phishing attempt.
</Alert> </Alert>
</p> </p>
<p class="text-left mt-5"> <p class="text-left mt-5">
@ -1123,15 +1168,17 @@
The image should be minimum 150x150px. There is no need to provide The image should be minimum 150x150px. There is no need to provide
more than 400x400px as it will be scaled down anyway. more than 400x400px as it will be scaled down anyway.
</li> </li>
<li>We accept several formats like JPEG, PNG, GIF, WEBP and more.</li>
<li> <li>
The image should be unique to you. But it should not be too personal We accept several formats like JPEG, PNG, GIF, WEBP and more.
neither. </li>
<li>
The image should be unique to you. But it should not be too
personal neither.
</li> </li>
<li>Do not upload your face picture, this is not a profile pic.</li> <li>Do not upload your face picture, this is not a profile pic.</li>
<li> <li>
The best would be a landscape you like or any other picture that you The best would be a landscape you like or any other picture that
will recognize as unique. you will recognize as unique.
</li> </li>
<li> <li>
Please be aware that other people who are sharing this device with 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 can help you to use and keep your wallet. But we also want to be careful
with your security and privacy.<br /><br /> with your security and privacy.<br /><br />
Remember that in any case, once your wallet will be created, you will download 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 a file that you should keep privately somewhere on your device, USB key
hard-disk. This is the default way you can use and keep your wallet. Now or hard-disk. This is the default way you can use and keep your wallet.
let's look at some options that can make your life a bit easier. Now let's look at some options that can make your life a bit easier.
</p> </p>
<p class="max-w-xl md:mx-auto lg:max-w-2xl text-left"> <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 /> <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 If you do, if this device is yours or is used by few trusted persons of
family or workplace, and you would like to login again from this device in your family or workplace, and you would like to login again from this device
the future, then you can save your wallet on this device. To the contrary, 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 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 here. {#if !tauri_platform}By selecting this option, you agree to save
some cookies on your browser.{/if}<br /> some cookies on your browser.{/if}<br />
@ -1254,11 +1301,12 @@
</p> </p>
<p class="max-w-xl md:mx-auto mt-10 lg:max-w-2xl text-left"> <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 /> <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 Are you afraid that you will loose the file containing your wallet? If
would happen, your wallet would be lost forever, together with all your documents. this would happen, your wallet would be lost forever, together with all
We can keep an encrypted copy of your wallet in our cloud. Only you will your documents. We can keep an encrypted copy of your wallet in our cloud.
be able to download it with a special link. You would have to keep this link Only you will be able to download it with a special link. You would have
safely though. By selecting this option, you agree to the to keep this link safely though. By selecting this option, you agree to
the
<a target="_blank" href="https://nextgraph.one/#/tos" <a target="_blank" href="https://nextgraph.one/#/tos"
>Terms of Service of our cloud</a >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"> <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 /> <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 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 wallet, unencrypted. You should print this file and then delete the PDF
empty the trash). Keep this printed document in a safe place. It contains (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 all the information to regenerate your wallet in case you lost access to
it. it.
<br /> <br />
@ -1284,12 +1332,12 @@
<span class="text-xl" <span class="text-xl"
>Create a link to access your wallet easily? >Create a link to access your wallet easily?
</span> <br /> </span> <br />
When you want to use your wallet on the web or from other devices, we can When you want to use your wallet on the web or from other devices, we
help you find your wallet by creating a simple link accessible from anywhere. can help you find your wallet by creating a simple link accessible from
Only you will have access to this link. In order to do so, we will keep anywhere. Only you will have access to this link. In order to do so,
your wallet ID and some information about your broker on our cloud servers. we will keep your wallet ID and some information about your broker on
If you prefer to opt out, just uncheck this option. By selecting this option, our cloud servers. If you prefer to opt out, just uncheck this option.
you agree to the By selecting this option, you agree to the
<a target="_blank" href="https://nextgraph.one/#/tos" <a target="_blank" href="https://nextgraph.one/#/tos"
>Terms of Service of our cloud</a >Terms of Service of our cloud</a
>. >.
@ -1396,8 +1444,9 @@
</a><br /> </a><br />
{:else if !options.trusted} {:else if !options.trusted}
Your wallet file has been downloaded into your "Downloads" folder, 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 /> Please move it to a safe and durable place.<br /><br />
{/if} {/if}
{#each display_pazzle(ready.pazzle) as emoji} {#each display_pazzle(ready.pazzle) as emoji}
@ -1441,7 +1490,8 @@
</button> </button>
</div> </div>
{/if} {/if}
</main> </main>
{/if}
<style> <style>
</style> </style>

Write Preview
Loading…
Cancel
Save