Rust implementation of NextGraph, a Decentralized and local-first web 3.0 ecosystem
https://nextgraph.org
byzantine-fault-tolerancecrdtsdappsdecentralizede2eeeventual-consistencyjson-ldlocal-firstmarkdownocapoffline-firstp2pp2p-networkprivacy-protectionrdfrich-text-editorself-hostedsemantic-websparqlweb3collaboration
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1275 lines
54 KiB
1275 lines
54 KiB
<!--
|
|
// Copyright (c) 2022-2023 Niko Bonnieure, Par le Peuple, NextGraph.org developers
|
|
// All rights reserved.
|
|
// Licensed under the Apache License, Version 2.0
|
|
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
|
|
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
|
|
// at your option. All files in the project carrying such
|
|
// notice may not be copied, modified, or distributed except
|
|
// according to those terms.
|
|
-->
|
|
|
|
<script>
|
|
import { Button, Alert, Dropzone, Toggle } from "flowbite-svelte";
|
|
import { link, querystring } from "svelte-spa-router";
|
|
import EULogo from "../assets/EU.svg?component";
|
|
import Logo from "../assets/nextgraph.svg?component";
|
|
import { NG_EU_BSP, NG_NET_BSP, default as ng } from "../api";
|
|
import { display_pazzle } from "../wallet_emojis";
|
|
|
|
import { onMount, tick } from "svelte";
|
|
|
|
const params = new URLSearchParams($querystring);
|
|
|
|
let tauri_platform = import.meta.env.TAURI_PLATFORM;
|
|
|
|
let mobile = tauri_platform == "android" || tauri_platform == "ios";
|
|
|
|
const onFileSelected = (image) => {
|
|
animate_bounce = false;
|
|
if (!security_txt) phrase.focus();
|
|
let reader = new FileReader();
|
|
reader.readAsArrayBuffer(image);
|
|
reader.onload = async (e) => {
|
|
security_img = e.target.result;
|
|
console.log(security_img);
|
|
var blob = new Blob([security_img], {
|
|
type: image.type,
|
|
});
|
|
image_url = URL.createObjectURL(blob);
|
|
phrase.scrollIntoView();
|
|
if (security_txt) {
|
|
await tick();
|
|
validate_button.focus();
|
|
}
|
|
};
|
|
};
|
|
|
|
const security_phrase_ok = async (e) => {
|
|
if (!e || e.key == "Enter" || e.keyCode == 13) {
|
|
phrase.blur();
|
|
if (!security_img) {
|
|
animate_bounce = true;
|
|
img_preview.scrollIntoView();
|
|
} else {
|
|
await tick();
|
|
validate_button.scrollIntoView();
|
|
validate_button.focus();
|
|
}
|
|
}
|
|
};
|
|
|
|
const dropHandle = (event) => {
|
|
event.preventDefault();
|
|
const files = event.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
onFileSelected(files[0]);
|
|
}
|
|
};
|
|
|
|
const handleChange = (event) => {
|
|
const files = event.target.files;
|
|
if (files.length > 0) {
|
|
onFileSelected(files[0]);
|
|
}
|
|
};
|
|
|
|
let intro = false;
|
|
let pin = [];
|
|
let pin_confirm = [];
|
|
let security_txt = "";
|
|
let security_img;
|
|
let top;
|
|
let img_preview;
|
|
let phrase;
|
|
let validate_button;
|
|
let animate_bounce;
|
|
let image_url;
|
|
let info_options;
|
|
let options;
|
|
let creating = false;
|
|
let error;
|
|
let ready;
|
|
let download_link;
|
|
let download_name;
|
|
let cloud_link;
|
|
let animateDownload = true;
|
|
let invitation;
|
|
|
|
function scrollToTop() {
|
|
top.scrollIntoView();
|
|
}
|
|
|
|
function sel_pin(val) {
|
|
if (pin.length < 4) {
|
|
pin.push(val);
|
|
pin = pin;
|
|
}
|
|
}
|
|
|
|
function confirm_pin(val) {
|
|
if (pin_confirm.length < 4) {
|
|
pin_confirm.push(val);
|
|
pin_confirm = pin_confirm;
|
|
}
|
|
}
|
|
|
|
const api_url = import.meta.env.PROD
|
|
? "api/v1/"
|
|
: "http://localhost:3030/api/v1/";
|
|
|
|
let display_note_on_local_wallets = false;
|
|
|
|
async function bootstrap() {
|
|
console.log(await ng.client_info());
|
|
invitation = await ng.get_local_bootstrap(location.href, params.get("i"));
|
|
console.log(invitation);
|
|
// TODO: implement this error screen and link button
|
|
if (!invitation && params.get("i")) {
|
|
console.error(
|
|
"got an invitation for another broker. click on the link below to be redirected to the right broker"
|
|
);
|
|
}
|
|
scrollToTop();
|
|
let bs;
|
|
try {
|
|
bs = localStorage.getItem("bootstrap");
|
|
} catch (e) {}
|
|
if (bs) {
|
|
display_note_on_local_wallets = true;
|
|
}
|
|
}
|
|
|
|
function create_wallet() {
|
|
intro = false;
|
|
scrollToTop();
|
|
}
|
|
|
|
async function save_security() {
|
|
options = {
|
|
trusted: true,
|
|
cloud: false,
|
|
bootstrap: true,
|
|
pdf: true,
|
|
};
|
|
console.log("saved");
|
|
await tick();
|
|
scrollToTop();
|
|
}
|
|
|
|
async function do_wallet() {
|
|
creating = true;
|
|
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, // this is only used for tauri apps
|
|
result_with_wallet_file: false, // this will be automatically changed to true for browser app
|
|
};
|
|
console.log(params);
|
|
try {
|
|
let res = await ng.wallet_create_wallet(params);
|
|
console.log(res);
|
|
console.log(display_pazzle(res.pazzle));
|
|
ready = res;
|
|
download_name = "wallet-" + res.wallet_name + ".ngw";
|
|
if (options.cloud) {
|
|
cloud_link = "https://nextgraph.one/#/w/" + res.wallet_name;
|
|
}
|
|
if (res.wallet_file.length) {
|
|
const blob = new Blob([res.wallet_file]);
|
|
download_link = URL.createObjectURL(blob);
|
|
|
|
// we also save the wallet to localStorage here, and only if options.trusted is true
|
|
// indeed if a wallet_file is sent in the result, it means we are not on tauri app
|
|
// therefor we are on a web-browser.
|
|
if (options.trusted) {
|
|
//TODO save in localStorage
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.log(e);
|
|
error = e;
|
|
}
|
|
}
|
|
|
|
async function getWallet() {
|
|
const opts = {
|
|
method: "get",
|
|
};
|
|
const response = await fetch(
|
|
api_url + "bootstrap/I8tuoVE-LRH1wuWQpDBPivlSX8Wle39uHSL576BTxsk",
|
|
opts
|
|
);
|
|
const result = await response.json();
|
|
console.log("Result:", result);
|
|
}
|
|
|
|
onMount(async () => await bootstrap());
|
|
|
|
const selectEU = (event) => {
|
|
if (!tauri_platform) {
|
|
window.open(NG_EU_BSP + "/#/wallet/create", "_blank").focus();
|
|
}
|
|
};
|
|
const selectNET = (event) => {};
|
|
const enterINVITE = (event) => {};
|
|
const enterQRcode = (event) => {};
|
|
</script>
|
|
|
|
<main class="container3" bind:this={top}>
|
|
<div class="row">
|
|
<a href="#/">
|
|
<Logo class="logo block h-40" alt="NextGraph Logo" />
|
|
</a>
|
|
</div>
|
|
{#if intro}
|
|
<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. <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
|
|
>
|
|
If you never created a NextGraph Wallet before, please follow the instructions
|
|
below in order to create your unique personal wallet.
|
|
</p>
|
|
</div>
|
|
{#if display_note_on_local_wallets}
|
|
<Alert color="yellow" class="mt-5">
|
|
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="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>
|
|
</h2>
|
|
<ul class="mb-8 space-y-4 text-left text-gray-500 dark:text-gray-400">
|
|
<li class="flex space-x-3">
|
|
<!-- Icon -->
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
|
|
/>
|
|
</svg>
|
|
<span
|
|
>It is a secure and encrypted small file that contains some
|
|
important information that only you should have access to.</span
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3">
|
|
<!-- Icon -->
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
|
|
/>
|
|
</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
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3">
|
|
<!-- Icon -->
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z"
|
|
/>
|
|
</svg>
|
|
<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
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3">
|
|
<!-- Icon -->
|
|
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
|
|
/>
|
|
</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 than a complex
|
|
password. The entropy of your pazzle is <b>66bits</b>, which is
|
|
considered very high by all standards.</span
|
|
>
|
|
</li>
|
|
|
|
<li class="flex space-x-3">
|
|
<!-- Icon -->
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
|
|
/>
|
|
</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
|
|
<b>import</b> your existing wallet in all the apps and websites where
|
|
you need it</span
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3">
|
|
<!-- Icon -->
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"
|
|
/>
|
|
</svg>
|
|
<span
|
|
>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.</span
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3">
|
|
<!-- Icon -->
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
|
|
/>
|
|
</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
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3 under">
|
|
<!-- Icon -->
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
|
|
/>
|
|
</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
|
|
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>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-20">
|
|
<button
|
|
on:click|once={create_wallet}
|
|
role="button"
|
|
class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:outline-none 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"
|
|
>
|
|
<svg
|
|
class="w-8 h-8 mr-2 -ml-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"
|
|
/>
|
|
</svg>
|
|
Ok, I create my wallet now !
|
|
</button>
|
|
</div>
|
|
{: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 first
|
|
select a <b>broker 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="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>
|
|
</h2>
|
|
<ul class="mb-8 space-y-4 text-left text-gray-500 dark:text-gray-400">
|
|
<li class="flex space-x-3">
|
|
<svg
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
|
|
/>
|
|
</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
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3">
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
|
|
/>
|
|
</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
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3">
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
|
|
/>
|
|
</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
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3">
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</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
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3">
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
|
|
/>
|
|
</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>
|
|
and can freely move to another broker.</span
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3">
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
|
/>
|
|
</svg>
|
|
|
|
<span>
|
|
Very 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 NG Box and will be
|
|
available soon.</span
|
|
>
|
|
</li>
|
|
<li class="flex space-x-3">
|
|
<svg
|
|
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"
|
|
/>
|
|
</svg>
|
|
|
|
<span>
|
|
Large organizations and companies have the opportunity to host a
|
|
broker <b>on-premise</b> or in the cloud, as the software is open
|
|
source. Individuals can also <b>self-host</b> a broker on any VPS server
|
|
or at home.</span
|
|
>
|
|
</li>
|
|
</ul>
|
|
<h2 class="mt-3 text-xl">Please choose one broker among the list</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-5">
|
|
{#if !tauri_platform}
|
|
<a href="https://nextgraph.eu/#/wallet/create">
|
|
<button
|
|
tabindex="-1"
|
|
class="text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none 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" />
|
|
For European Union citizens
|
|
</button>
|
|
</a>
|
|
{:else}
|
|
<button
|
|
on:click|once={selectEU}
|
|
class="choice-button text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none 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" />
|
|
For European Union citizens
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="row mt-5">
|
|
{#if !tauri_platform}
|
|
<a href="https://nextgraph.net/#/wallet/create">
|
|
<button
|
|
tabindex="-1"
|
|
class="text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none 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"
|
|
>
|
|
<svg
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
class="mr-4 block h-10 w-10"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
|
|
/>
|
|
</svg>
|
|
For the rest of the world
|
|
</button>
|
|
</a>
|
|
{:else}
|
|
<button
|
|
on:click|once={selectNET}
|
|
class="choice-button text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none 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"
|
|
>
|
|
<svg
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
class="mr-4 block h-10 w-10"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
|
|
/>
|
|
</svg>
|
|
For the rest of the world
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="row mt-5">
|
|
<button
|
|
on:click|once={enterINVITE}
|
|
class="choice-button text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none 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"
|
|
>
|
|
<svg
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
class="mr-4 block h-10 w-10"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
|
|
/>
|
|
</svg>
|
|
|
|
Enter an invitation link
|
|
</button>
|
|
</div>
|
|
{#if mobile}
|
|
<div class="row mt-5">
|
|
<button
|
|
on:click|once={enterQRcode}
|
|
class="choice-button text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none 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"
|
|
><svg
|
|
class="mr-4 block h-10 w-10"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z"
|
|
/>
|
|
</svg>
|
|
|
|
Scan an invitation QRcode
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
<div class="row mt-5">
|
|
<a href="https://nextgraph.org/self-host">
|
|
<button
|
|
tabindex="-1"
|
|
class="choice-button text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none 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"
|
|
>
|
|
<svg
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
class="mr-4 block h-10 w-10"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"
|
|
/>
|
|
</svg>
|
|
Self-hosted broker
|
|
</button>
|
|
</a>
|
|
</div>
|
|
<div class="row mt-5 mb-12">
|
|
<a href="https://nextgraph.org/ng-box/">
|
|
<button
|
|
tabindex="-1"
|
|
class="choice-button text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none 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"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
version="1.1"
|
|
viewBox="0 0 225 225"
|
|
class="mr-4 block h-10 w-10"
|
|
stroke="currentColor"
|
|
stroke-width="12"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M 88.332599,179.77884 C 72.858008,177.42608 59.581081,170.564 48.8817,159.38898 36.800075,146.77026 30.396139,130.74266 30.396139,113.12381 c 0,-8.81477 1.466462,-16.772273 4.503812,-24.439156 3.697755,-9.333883 8.658122,-16.726264 15.988284,-23.827148 4.07992,-3.952299 5.699054,-5.267377 9.730928,-7.903581 10.263753,-6.710853 20.852276,-10.247623 32.861256,-10.976317 17.083161,-1.036581 33.737521,4.410501 47.100151,15.404873 1.30009,1.069669 2.35446,2.035155 2.34305,2.145524 -0.0114,0.110369 -3.32807,3.135042 -7.37038,6.721489 -4.04229,3.586437 -8.6667,7.731233 -10.27646,9.210635 -1.60975,1.479412 -3.05439,2.689839 -3.21032,2.689839 -0.15591,0 -1.2075,-0.642795 -2.33686,-1.428431 -6.49544,-4.518567 -13.79659,-6.747116 -22.104843,-6.747116 -10.982241,0 -20.054641,3.741852 -27.727158,11.435891 -5.517107,5.532575 -9.233107,12.555305 -10.782595,20.377588 -0.596045,3.00901 -0.594915,11.67153 0.0017,14.67182 3.195984,16.0665 15.801761,28.55358 31.607491,31.30987 3.592183,0.62643 10.334745,0.61437 13.792675,-0.0247 12.10383,-2.2368 22.30712,-9.80603 27.83192,-20.64689 0.66747,-1.30971 1.08703,-2.48825 0.93235,-2.61898 -0.1547,-0.13073 -5.9299,-1.01605 -12.83381,-1.96739 -8.43575,-1.16241 -12.87296,-1.9096 -13.52955,-2.27826 -1.31171,-0.73647 -2.44642,-2.49122 -2.44642,-3.78325 0,-1.012 1.74837,-13.68832 2.1486,-15.57814 0.25598,-1.20873 2.0923,-3.01339 3.3151,-3.25795 0.53677,-0.10735 7.61424,0.73799 15.7688,1.88346 8.13723,1.14303 14.89071,1.97925 15.00772,1.85826 0.11702,-0.12098 0.96445,-5.648553 1.88315,-12.283473 0.95557,-6.900944 1.90122,-12.59548 2.20977,-13.306594 0.29667,-0.683692 0.95765,-1.595052 1.46889,-2.025218 1.77972,-1.497534 2.7114,-1.539742 10.52745,-0.476938 8.31229,1.130266 9.2373,1.347581 10.59333,2.488613 1.41776,1.192951 1.96085,2.424677 1.94866,4.419342 -0.006,0.950347 -0.79507,7.156475 -1.75393,13.791395 -0.95885,6.634933 -1.70069,12.111623 -1.64854,12.170443 0.0522,0.0588 6.18174,0.95872 13.62132,1.99978 9.57969,1.34053 13.80866,2.0595 14.49353,2.46406 1.3199,0.77969 2.13943,2.28402 2.1135,3.87957 -0.0399,2.45278 -2.08103,15.63263 -2.5664,16.57122 -0.57073,1.10369 -2.24485,2.197 -3.38232,2.20889 -0.44831,0.004 -6.79249,-0.82755 -14.09817,-1.84941 -7.3057,-1.02186 -13.34942,-1.79161 -13.43049,-1.71053 -0.0811,0.0811 -1.02469,6.33285 -2.09694,13.89286 -1.24218,8.75802 -2.1547,14.1778 -2.51495,14.93697 -0.62565,1.31846 -2.38302,2.64205 -3.91461,2.94836 -0.8254,0.16509 -9.4024,-0.80047 -11.73007,-1.32049 -0.47193,-0.10544 -1.63157,0.58011 -3.8898,2.29957 -9.71515,7.39729 -20.99725,11.99799 -33.08692,13.49241 -3.79574,0.46921 -13.565667,0.37348 -17.125664,-0.16779 z"
|
|
/>
|
|
<rect
|
|
ry="37.596001"
|
|
y="10.583322"
|
|
x="14.363095"
|
|
height="204.86308"
|
|
width="195.79167"
|
|
/>
|
|
</svg>
|
|
NG Box (owned or invited)
|
|
</button>
|
|
</a>
|
|
</div>
|
|
{:else if pin.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="text-xl">Let's start 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.
|
|
<br />
|
|
Your credit card PIN, by example, is a good choice. (We at NextGraph will
|
|
never see your PIN)
|
|
</Alert>
|
|
</p>
|
|
<p class="text-left mt-5">Here are the rules for the PIN :</p>
|
|
<ul class="text-left list-disc list-inside">
|
|
<li>It cannot be a series like 1234 or 8765</li>
|
|
<li>
|
|
The same digit cannot repeat more than once. By example 4484 is
|
|
invalid
|
|
</li>
|
|
<li>
|
|
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
|
|
>{/each}
|
|
</Alert>
|
|
<div class="w-[325px] mx-auto">
|
|
{#each [0, 1, 2] as row}
|
|
<div class="">
|
|
{#each [1, 2, 3] as num}
|
|
<button
|
|
tabindex="0"
|
|
class="m-1 select-none align-bottom text-7xl w-[100px] h-[100px] p-0"
|
|
on:click={async () => sel_pin(num + row * 3)}
|
|
>
|
|
<span>{num + row * 3}</span>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
<button
|
|
tabindex="0"
|
|
class="m-1 select-none mx-auto align-bottom text-7xl w-[100px] h-[100px] p-0"
|
|
on:click={async () => sel_pin(0)}
|
|
>
|
|
<span>0</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{: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="text-xl">Please confirm your PIN code.</span>
|
|
Enter the same PIN again
|
|
</p>
|
|
<Alert color="blue" class="mt-5">
|
|
You have chosen: {#each pin_confirm as digit}<span
|
|
class="font-bold text-xl">{digit}</span
|
|
>{/each}
|
|
</Alert>
|
|
<div class="w-[325px] mx-auto">
|
|
{#each [0, 1, 2] as row}
|
|
<div class="">
|
|
{#each [1, 2, 3] as num}
|
|
<button
|
|
tabindex="0"
|
|
class="m-1 select-none align-bottom text-7xl w-[100px] h-[100px] p-0"
|
|
on:click={async () => confirm_pin(num + row * 3)}
|
|
>
|
|
<span>{num + row * 3}</span>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
<button
|
|
tabindex="0"
|
|
class="m-1 select-none mx-auto align-bottom text-7xl w-[100px] h-[100px] p-0"
|
|
on:click={async () => confirm_pin(0)}
|
|
>
|
|
<span>0</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{:else if !options}
|
|
<div class=" max-w-6xl lg:px-8 mx-auto px-4">
|
|
{#if pin.toString() === pin_confirm.toString()}
|
|
<Alert color="green" class="mt-5">
|
|
Your PIN is confirmed as : {#each pin_confirm as digit}<span
|
|
class="font-bold text-xl">{digit}</span
|
|
>{/each}
|
|
</Alert>
|
|
<h2 class="text-xl my-5">
|
|
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 before you
|
|
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.
|
|
</Alert>
|
|
</p>
|
|
<p class="text-left mt-5">
|
|
Here are the rules for the security phrase and image :
|
|
</p>
|
|
<ul class="text-left list-disc list-inside">
|
|
<li>The phrase should be at least 10 characters long</li>
|
|
<li>
|
|
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.
|
|
</li>
|
|
<li>
|
|
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.
|
|
</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.
|
|
</li>
|
|
<li>
|
|
Please be aware that other people who are sharing this device with
|
|
you, will be able to see this image and phrase.
|
|
</li>
|
|
</ul>
|
|
<input
|
|
bind:this={phrase}
|
|
class="mt-10 mr-0"
|
|
id="security-phrase-input"
|
|
placeholder="Type a security phrase..."
|
|
bind:value={security_txt}
|
|
on:keydown={security_phrase_ok}
|
|
/><button on:click={async () => await security_phrase_ok()}>
|
|
Ok
|
|
</button><br />
|
|
{#if security_txt && security_img}
|
|
<button
|
|
on:click|once={save_security}
|
|
bind:this={validate_button}
|
|
class="animate-bounce mt-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:outline-none 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"
|
|
>
|
|
<svg
|
|
class="w-8 h-8 mr-2 -ml-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z"
|
|
/>
|
|
</svg>
|
|
|
|
Save security phrase & image
|
|
</button>
|
|
{/if}
|
|
<Dropzone
|
|
class="mt-10 mb-10"
|
|
defaultClass="flex flex-col justify-center items-center w-full h-30 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
|
|
id="dropzone"
|
|
accept=".jpg, .jpeg, .png, .gif, .webp, .pnm, .tiff, .tif, .tga, .bmp, .avif, .qoi, .exr, .ppm"
|
|
on:drop={dropHandle}
|
|
on:dragover={(event) => {
|
|
event.preventDefault();
|
|
}}
|
|
on:change={handleChange}
|
|
>
|
|
<p class="mt-2 mb-5 text-gray-500 dark:text-gray-400">
|
|
{#if mobile}
|
|
<span class="font-semibold">Tap to upload an image</span>
|
|
{:else}
|
|
<span class="font-semibold">Click to select an image</span> or drag
|
|
and drop
|
|
{/if}
|
|
</p>
|
|
<svg
|
|
aria-hidden="true"
|
|
class="mb-3 w-20 mx-auto h-20 text-gray-400"
|
|
class:animate-bounce={animate_bounce}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
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"
|
|
/></svg
|
|
>
|
|
</Dropzone>
|
|
<img
|
|
bind:this={img_preview}
|
|
class="max-w-[300px] h-[300px] mx-auto mb-10"
|
|
src={image_url}
|
|
/>
|
|
{:else}
|
|
<Alert color="red" class="mt-5">
|
|
You didn't enter the same PIN twice
|
|
</Alert>
|
|
<button
|
|
class="select-none"
|
|
on:click={async () => {
|
|
pin_confirm = [];
|
|
pin = [];
|
|
}}
|
|
>
|
|
Start over
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{:else if !creating}
|
|
<div class=" max-w-6xl lg:px-8 mx-auto px-4" bind:this={info_options}>
|
|
<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 />
|
|
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.
|
|
</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 />
|
|
<Toggle class="mt-3" bind:checked={options.trusted}
|
|
>Save your 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
|
|
<a target="_blank" href="https://nextgraph.one/tos"
|
|
>Terms and Conditions of our cloud</a
|
|
>.
|
|
<br />
|
|
<Toggle class="mt-3" bind:checked={options.cloud}
|
|
>Save your wallet in the cloud?</Toggle
|
|
>
|
|
</p>
|
|
<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 documented in a safe place. It contains
|
|
all the information to regenerate your wallet in case you lost access to
|
|
it.
|
|
<br />
|
|
<Toggle class="mt-3" bind:checked={options.pdf}
|
|
>Create a PDF of my wallet?</Toggle
|
|
>
|
|
</p>
|
|
{#if !options.cloud}
|
|
<p class="max-w-xl md:mx-auto mt-10 lg:max-w-2xl text-left">
|
|
<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 in other apps, 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.
|
|
<br />
|
|
<Toggle class="mt-3" bind:checked={options.bootstrap}
|
|
>Create a link to my wallet?</Toggle
|
|
>
|
|
</p>
|
|
{/if}
|
|
<button
|
|
on:click|once={do_wallet}
|
|
class="mt-10 mb-8 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:outline-none 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"
|
|
>
|
|
<svg
|
|
class="w-8 h-8 mr-2 -ml-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
|
|
Let's create this wallet
|
|
</button>
|
|
</div>
|
|
{:else if !error}
|
|
{#if !ready}
|
|
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700">
|
|
We are creating your wallet...
|
|
<svg
|
|
class="animate-spin mt-10 h-6 w-6 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}
|
|
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-green-800">
|
|
Your wallet is ready!
|
|
<svg
|
|
class="my-10 h-16 w-16 mx-auto"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
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>
|
|
{#if download_link}
|
|
Please download your wallet and keep it in a safe location<br />
|
|
<a href={download_link} target="_blank" download={download_name}>
|
|
<button
|
|
tabindex="-1"
|
|
class:animate-bounce={animateDownload}
|
|
on:click={() => (animateDownload = false)}
|
|
class="mt-10 mb-8 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:outline-none 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"
|
|
>
|
|
<svg
|
|
class="w-8 h-8 mr-2 -ml-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
|
|
/>
|
|
</svg>
|
|
|
|
Download my wallet
|
|
</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"> {download_name}</span><br
|
|
/>
|
|
Please move it to a safe and durable place.<br /><br />
|
|
{/if}
|
|
{#each display_pazzle(ready.pazzle) as emoji}
|
|
<span>{emoji}</span><br />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
|
|
An error occurred !
|
|
<svg
|
|
fill="none"
|
|
class="animate-bounce mt-10 h-10 w-10 mx-auto"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
|
|
/>
|
|
</svg>
|
|
<Alert color="red" class="mt-5">
|
|
{error}
|
|
</Alert>
|
|
<button
|
|
class="mt-10 select-none"
|
|
on:click={async () => {
|
|
pin_confirm = [];
|
|
pin = [];
|
|
options = undefined;
|
|
creating = false;
|
|
error = undefined;
|
|
animateDownload = true;
|
|
}}
|
|
>
|
|
Start over
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</main>
|
|
|
|
<style>
|
|
</style>
|
|
|