upgrade flowbite, full-layout

master
Niko PLP 9 months ago
parent c8f6416bc7
commit a2f1cf8316
  1. 3
      ng-app/package.json
  2. 6
      ng-app/src/App.svelte
  3. 16
      ng-app/src/assets/nextgraph-gray.svg
  4. 13
      ng-app/src/lib/CenteredLayout.svelte
  5. 212
      ng-app/src/lib/Home.svelte
  6. 14
      ng-app/src/lib/Install.svelte
  7. 81
      ng-app/src/lib/NoWallet.svelte
  8. 2
      ng-app/src/lib/Test.svelte
  9. 7
      ng-app/src/routes/Home.svelte
  10. 5
      ng-app/src/routes/Install.svelte
  11. 7
      ng-app/src/routes/NotFound.svelte
  12. 11
      ng-app/src/routes/UserRegistered.svelte
  13. 210
      ng-app/src/routes/WalletCreate.svelte
  14. 23
      ng-app/src/routes/WalletLogin.svelte
  15. 2
      ng-app/src/store.ts
  16. 7
      ng-app/src/styles.css
  17. 6
      ngaccount/web/src/routes/Create.svelte
  18. 4
      ngaccount/web/src/routes/Delete.svelte
  19. 6
      ngone/web/src/routes/Home.svelte
  20. 10
      ngone/web/src/routes/WalletCreate.svelte
  21. 54
      pnpm-lock.yaml

@ -22,7 +22,7 @@
"async-proxy": "^0.4.1",
"classnames": "^2.3.2",
"flowbite": "^1.6.5",
"flowbite-svelte": "^0.37.1",
"flowbite-svelte": "^0.43.3",
"ng-sdk-js": "workspace:^0.1.0",
"svelte-spa-router": "^3.3.0",
"vite-plugin-top-level-await": "^1.3.1"
@ -41,6 +41,7 @@
"shx": "^0.3.4",
"svelte": "^3.54.0",
"svelte-check": "^3.0.0",
"svelte-heros-v2": "^0.10.12",
"svelte-preprocess": "^5.0.3",
"tailwindcss": "^3.3.1",
"tslib": "^2.4.1",

@ -158,12 +158,10 @@
});
</script>
<main class="">
<!-- <p>
<!-- <p>
{JSON.stringify(Object.keys($wallets))}
{JSON.stringify($active_wallet)}
{JSON.stringify(Object.keys($opened_wallets))}
{JSON.stringify($active_session)}
</p> -->
<Router {routes} />
</main>
<Router {routes} />

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 225 225"
>
<g>
<circle
r="106.98013"
cy="112.90476"
cx="109.88096"
style="fill:#ffffff;stroke:none;stroke-width:0.268375" />
<path
d="M 98.343352,190.26108 C 80.403778,187.53354 65.011938,179.57839 52.608228,166.62327 38.602093,151.99448 31.178059,133.41381 31.178059,112.98841 c 0,-10.21889 1.700058,-19.44396 5.221234,-28.332119 4.28678,-10.820699 10.037295,-19.39063 18.535095,-27.62263 4.72982,-4.58187 6.60687,-6.10643 11.28099,-9.16256 11.89869,-7.779841 24.173884,-11.879991 38.095802,-12.724761 19.80437,-1.2017 39.11165,5.11306 54.60284,17.858751 1.50718,1.24006 2.72951,2.35934 2.71628,2.48729 -0.0132,0.12795 -3.85821,3.63443 -8.54442,7.79217 -4.6862,4.157729 -10.04724,8.96276 -11.91342,10.677819 -1.86617,1.715071 -3.54094,3.11831 -3.7217,3.11831 -0.18075,0 -1.39985,-0.745188 -2.70911,-1.655969 -7.53011,-5.23834 -15.99428,-7.82188 -25.62597,-7.82188 -12.731628,0 -23.249192,4.3379 -32.143882,13.257541 -6.39594,6.413868 -10.70387,14.555268 -12.50018,23.623578 -0.69099,3.48832 -0.68968,13.53072 0.002,17.00893 3.70508,18.62577 18.31886,33.10194 36.642322,36.29729 4.16439,0.72621 11.98099,0.71223 15.98975,-0.0286 14.03187,-2.59311 25.86047,-11.36806 32.26533,-23.93578 0.77379,-1.51834 1.26018,-2.88461 1.08086,-3.03616 -0.17934,-0.15156 -6.87448,-1.1779 -14.87813,-2.28078 -9.7795,-1.34758 -14.92353,-2.21379 -15.68471,-2.64117 -1.52067,-0.85379 -2.83611,-2.88806 -2.83611,-4.3859 0,-1.1732 2.02687,-15.86876 2.49085,-18.05962 0.29676,-1.40127 2.42559,-3.4934 3.84317,-3.77691 0.62227,-0.12445 8.82712,0.85555 18.28065,2.18348 9.43343,1.32511 17.26269,2.29453 17.39833,2.15427 0.13566,-0.14026 1.11808,-6.54833 2.18313,-14.24014 1.10778,-8.000208 2.20407,-14.60184 2.56177,-15.426229 0.34392,-0.792599 1.11019,-1.849131 1.70287,-2.34782 2.06321,-1.736079 3.1433,-1.785011 12.20439,-0.55291 9.63637,1.310309 10.70873,1.56224 12.28077,2.88503 1.64359,1.382979 2.2732,2.810909 2.25906,5.123309 -0.007,1.10173 -0.92172,8.29645 -2.03332,15.98826 -1.11158,7.69182 -1.97159,14.04091 -1.91113,14.1091 0.0605,0.0682 7.16644,1.11143 15.79109,2.31832 11.10566,1.55407 16.00827,2.38757 16.80223,2.85657 1.53015,0.90389 2.48023,2.64785 2.45017,4.49756 -0.0462,2.84349 -2.41252,18.12279 -2.97521,19.21089 -0.66164,1.27949 -2.60244,2.54696 -3.92109,2.56074 -0.51973,0.005 -7.87449,-0.95937 -16.34391,-2.144 -8.46944,-1.18464 -15.47588,-2.077 -15.56986,-1.98301 -0.094,0.094 -1.18792,7.34163 -2.43097,16.10589 -1.44004,10.15311 -2.49792,16.43621 -2.91556,17.31631 -0.72531,1.52848 -2.76261,3.06291 -4.53817,3.41802 -0.95688,0.19138 -10.90014,-0.92798 -13.59859,-1.53084 -0.5471,-0.12223 -1.89146,0.67252 -4.50941,2.66588 -11.2627,8.57562 -24.34195,13.90917 -38.35741,15.64164 -4.40038,0.54395 -15.72658,0.43298 -19.853658,-0.19451 z"
style="fill:#888;fill-opacity:1;stroke:#888;stroke-width:0.377976;stroke-opacity:1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

@ -0,0 +1,13 @@
<div class="centered">
<slot />
</div>
<style>
.centered {
/*max-width: 1280px;*/
margin: 0 auto;
padding: 0rem;
text-align: center;
width: fit-content;
}
</style>

@ -9,109 +9,157 @@
// according to those terms.
-->
<script>
import { Button } from "flowbite-svelte";
import { link } from "svelte-spa-router";
<script lang="ts">
import {
Sidebar,
SidebarGroup,
SidebarItem,
SidebarWrapper,
} from "flowbite-svelte";
import { link, location } from "svelte-spa-router";
// @ts-ignore
import Logo from "../assets/nextgraph.svg?component";
import { close_active_wallet } from "../store";
// @ts-ignore
import LogoGray from "../assets/nextgraph-gray.svg?component";
import { close_active_wallet, online } from "../store";
import { onMount } from "svelte";
export let display_login_create = false;
import {
Home,
Bolt,
MagnifyingGlass,
PlusCircle,
PaperAirplane,
Bell,
User,
ArrowRightOnRectangle,
} from "svelte-heros-v2";
let width: number;
let breakPoint: number = 660;
let mobile = false;
$: if (width >= breakPoint) {
mobile = false;
} else {
mobile = true;
}
$: activeUrl = "#" + $location;
function logout() {
close_active_wallet();
}
</script>
{#if display_login_create}
<main class="container3">
<div class="row">
<Logo class="logo block h-40" alt="NextGraph Logo" />
</div>
<h1 class="text-2xl mb-10">Welcome to NextGraph</h1>
let asideClass = "w-48";
let spanClass = "flex-1 ml-3 whitespace-nowrap";
let nonActiveClass =
"flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700";
</script>
<p class="max-w-sm">
We could not find a wallet saved on this device.<br /> If you already have
a wallet, select "Log in", otherwise, select "Create Wallet" here below
</p>
<div class="row mt-10">
<a href="/wallet/create" use:link>
<button
<div class="full-layout">
<Sidebar {activeUrl} {asideClass} {nonActiveClass} class="fixed">
<SidebarWrapper class="bg-gray-60">
<SidebarGroup>
<SidebarItem label="NextGraph" href="#/user">
<svelte:fragment slot="icon">
{#if $online}
<Logo class="w-10 h-10" />
{:else}
<LogoGray class="w-10 h-10" />
{/if}
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Home" href="#/">
<svelte:fragment slot="icon">
<Home
tabindex="-1"
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 mr-2 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"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svg>
Create wallet
</button>
</a>
</div>
<div class="row mt-10">
<a href="/wallet/login" use:link>
<button
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Stream" href="#/stream">
<svelte:fragment slot="icon">
<Bolt
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 mr-2 mb-2"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Search" href="#/search">
<svelte:fragment slot="icon">
<MagnifyingGlass
tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Create" href="#/create">
<svelte:fragment slot="icon">
<PlusCircle
tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Site" href="#/site">
<svelte:fragment slot="icon">
<User
tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Messages" href="#/messages">
<svelte:fragment slot="icon">
<PaperAirplane
tabindex="-1"
class="-rotate-45 w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
<span
class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
3
</span>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Notifications" href="#/notifications">
<svelte:fragment slot="icon">
<Bell
tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svg>
Log in
</button>
</a>
</div>
</main>
{:else}
<main class="container3">
<h1>Welcome to test</h1>
<span
class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"
>
10
</span>
</svelte:fragment>
</SidebarItem>
</SidebarGroup>
</SidebarWrapper>
</Sidebar>
<main class="ml-48">
<h1>Welcoe {mobile}</h1>
<div class="row mt-10">
<button
on:click={logout}
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 mr-2 mb-2"
class="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 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="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.25V15m3 0l3-3m0 0l-3-3m3 3H9"
/>
</svg>
<ArrowRightOnRectangle tabindex="-1" class="w-8 h-8 mr-2 -ml-1" />
Logout
</button>
</div>
</main>
{/if}
</div>
<svelte:window bind:innerWidth={width} />
<style>
.full-layout {
height: 100vh;
}
</style>

@ -55,7 +55,7 @@
<a href="#">
<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 mr-2 mb-2"
class="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 mb-2"
>
<svg
role="img"
@ -75,7 +75,7 @@
<a href="https://nextgraph.org/download/#android">
<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 mr-2 mb-2"
class="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 mb-2"
>
<svg
role="img"
@ -95,7 +95,7 @@
<a href="#">
<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 mr-2 mb-2"
class="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 mb-2"
>
<svg
role="img"
@ -116,7 +116,7 @@
<a href="https://nextgraph.org/download/#macos">
<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 mr-2 mb-2"
class="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 mb-2"
>
<svg
role="img"
@ -137,7 +137,7 @@
<a href="https://nextgraph.org/download/#linux">
<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 mr-2 mb-2"
class="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 mb-2"
>
<svg
role="img"
@ -158,7 +158,7 @@
<a href="https://nextgraph.org/download/#windows">
<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 mr-2 mb-2"
class="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 mb-2"
>
<svg
role="img"
@ -179,7 +179,7 @@
<a href="https://nextgraph.org/self-host">
<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 mr-2 mb-2"
class="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 mb-2"
>
<svg
fill="currentColor"

@ -0,0 +1,81 @@
<!--
// 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>
// @ts-ignore
import Logo from "../assets/nextgraph.svg?component";
import { link } from "svelte-spa-router";
import CenteredLayout from "./CenteredLayout.svelte";
</script>
<CenteredLayout>
<div class="container3">
<div class="row">
<Logo class="logo block h-40" alt="NextGraph Logo" />
</div>
<h1 class="text-2xl mb-10">Welcome to NextGraph</h1>
<p class="max-w-sm">
We could not find a wallet saved on this device.<br /> If you already have
a wallet, select "Log in", otherwise, select "Create Wallet" here below
</p>
<div class="row mt-10">
<a href="/wallet/create" use:link>
<button
tabindex="-1"
class="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 mr-2 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>
Create wallet
</button>
</a>
</div>
<div class="row mt-10">
<a href="/wallet/login" use:link>
<button
tabindex="-1"
class="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 mb-2"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
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 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
/>
</svg>
Log in
</button>
</a>
</div>
</div>
</CenteredLayout>

@ -85,7 +85,7 @@
on:click={() => {
fileinput.click();
}}
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 mr-2 mb-2"
class="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 mr-2 mb-2"
>
<svg
class="w-8 h-8 mr-2 -ml-1"

@ -13,6 +13,7 @@
import { Button } from "flowbite-svelte";
import { link } from "svelte-spa-router";
import Home from "../lib/Home.svelte";
import NoWallet from "../lib/NoWallet.svelte";
import { push } from "svelte-spa-router";
import { onMount, onDestroy } from "svelte";
import {
@ -44,4 +45,8 @@
});
</script>
<Home {display_login_create} />
{#if display_login_create}
<NoWallet />
{:else}
<Home />
{/if}

@ -15,6 +15,7 @@
import Install from "../lib/Install.svelte";
import { push } from "svelte-spa-router";
import { onMount, onDestroy } from "svelte";
import CenteredLayout from "../lib/CenteredLayout.svelte";
import {
wallets,
active_wallet,
@ -33,4 +34,6 @@
});
</script>
<Install {display_has_wallets_warning} />
<CenteredLayout>
<Install {display_has_wallets_warning} />
</CenteredLayout>

@ -11,10 +11,13 @@
<script>
import { Alert } from "flowbite-svelte";
import CenteredLayout from "../lib/CenteredLayout.svelte";
</script>
<div class="p-8">
<CenteredLayout>
<div class="p-8">
<Alert color="red">
<span class="font-medium">404</span> Page not found.
</Alert>
</div>
</div>
</CenteredLayout>

@ -12,6 +12,7 @@
<script>
import { Button, Alert, Dropzone, Toggle } from "flowbite-svelte";
import { link, querystring } from "svelte-spa-router";
import CenteredLayout from "../lib/CenteredLayout.svelte";
// @ts-ignore
import Logo from "../assets/nextgraph.svg?component";
@ -44,7 +45,8 @@
});
</script>
<main class="container3">
<CenteredLayout>
<div class="container3">
<div class="row">
<a href="#/">
<Logo class="logo block h-40" alt="NextGraph Logo" />
@ -75,7 +77,7 @@
<a use:link href="/">
<button
tabindex="-1"
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"
class="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"
>
Login
</button>
@ -87,7 +89,7 @@
<a use:link href="/">
<button
tabindex="-1"
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"
class="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"
>
Go back to homepage
</button>
@ -117,7 +119,8 @@
</p>
</div>
{/if}
</main>
</div>
</CenteredLayout>
<style>
</style>

@ -12,6 +12,7 @@
<script lang="ts">
import { Button, Alert, Dropzone, Toggle } from "flowbite-svelte";
import { link, querystring } from "svelte-spa-router";
import CenteredLayout from "../lib/CenteredLayout.svelte";
// @ts-ignore
import EULogo from "../assets/EU.svg?component";
// @ts-ignore
@ -388,7 +389,8 @@
};
</script>
{#if wait}
<CenteredLayout>
{#if wait}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700">
{#if wait === true}
Please wait...
@ -417,8 +419,8 @@
/>
</svg>
</div>
{:else}
<main class="container3" bind:this={top}>
{:else}
<div class="container3" bind:this={top}>
<div class="row">
<a href="#/">
<Logo class="logo block h-40" alt="NextGraph Logo" />
@ -443,13 +445,13 @@
</svg>
{#if registration_error == "AlreadyExists"}
<p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5">
The user is already registered with the selected broker.<br /> Try logging
in instead
The user is already registered with the selected broker.<br /> Try
logging in instead
</p>
<a use:link href="/wallet/login">
<button
tabindex="-1"
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"
class="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"
>
Login
</button>
@ -461,7 +463,7 @@
<a use:link href="/">
<button
tabindex="-1"
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"
class="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"
>
Go back to homepage
</button>
@ -472,8 +474,8 @@
<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,
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
>
@ -495,7 +497,9 @@
<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">
<ul
class="mb-8 space-y-4 text-left text-gray-500 dark:text-gray-400"
>
<li class="flex space-x-3">
<!-- Icon -->
<svg
@ -559,10 +563,11 @@
/>
</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 of
puzzle and password) is composed of 9 images you should remember.
<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>
@ -585,10 +590,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
>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
>
</li>
@ -611,10 +616,10 @@
<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
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">
@ -635,9 +640,9 @@
/>
</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
>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">
@ -681,11 +686,12 @@
/>
</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
>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>
@ -695,7 +701,7 @@
<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"
class="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"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
@ -719,8 +725,8 @@
<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&nbsp;server</b>.
order to join this network and start using the app, you need to
first select a <b>broker&nbsp;server</b>.
</p>
</div>
<div
@ -730,7 +736,9 @@
<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">
<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"
@ -748,10 +756,10 @@
/>
</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
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">
@ -771,9 +779,9 @@
/>
</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
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">
@ -864,9 +872,9 @@
<span>
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
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
>
</li>
@ -897,7 +905,9 @@
>
</li>
</ul>
<h2 class="mt-3 text-xl">Please choose one broker among the list</h2>
<h2 class="mt-3 text-xl">
Please choose one broker among the list
</h2>
</div>
</div>
{#if pre_invitation}
@ -906,7 +916,7 @@
on:click|once={async () => {
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: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"
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"
>
<svg
fill="none"
@ -930,7 +940,7 @@
<div class="row mt-5">
<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"
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" />
For European Union citizens
@ -940,7 +950,7 @@
<div class="row mt-5">
<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"
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"
>
<svg
fill="none"
@ -967,7 +977,7 @@
disabled
style="justify-content: left;"
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"
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"
>
<svg
fill="none"
@ -992,7 +1002,7 @@
<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"
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"
><svg
class="mr-4 block h-10 w-10"
fill="none"
@ -1021,7 +1031,7 @@
<div class="row mt-5">
<button
on:click={displaySelfHost}
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"
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"
>
<svg
fill="none"
@ -1044,7 +1054,7 @@
<div class="row mt-5 mb-12">
<button
on:click={displayNGbox}
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"
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"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -1185,9 +1195,9 @@
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.
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">
@ -1199,14 +1209,16 @@
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.
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.
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.
@ -1215,14 +1227,16 @@
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>
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.
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
@ -1239,7 +1253,7 @@
<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"
class="animate-bounce mt-10 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"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
@ -1275,8 +1289,8 @@
{#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
<span class="font-semibold">Click to select an image</span> or
drag and drop
{/if}
</p>
<svg
@ -1319,22 +1333,23 @@
<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.
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 />
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 my wallet on this device?</Toggle
>
@ -1345,8 +1360,8 @@
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
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
>.
@ -1356,12 +1371,13 @@
>
</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 />
<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.
(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
@ -1372,12 +1388,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
>.
@ -1389,7 +1405,7 @@
{/if}
<button
on:click|once={do_wallet}
class="mt-10 mb-20 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"
class="mt-10 mb-20 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"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
@ -1461,7 +1477,7 @@
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"
class="mt-10 mb-8 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"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
@ -1496,12 +1512,13 @@
<br /><br />
Copy it on a piece of paper.<br /> Use that until you memorized it,<br
/>
then throw it away.<br /> The order of each image is important.<br />
then throw it away.<br /> The order of each image is important.<br
/>
Now click on "Continue to Login"<br /><br />
<a href="/wallet/login" use:link>
<button
tabindex="-1"
class="mb-20 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 mr-2"
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"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
@ -1559,8 +1576,9 @@
</button>
</div>
{/if}
</main>
{/if}
</div>
{/if}
</CenteredLayout>
<style>
</style>

@ -13,6 +13,7 @@
import { onMount, onDestroy } from "svelte";
import { link, push } from "svelte-spa-router";
import Login from "../lib/Login.svelte";
import CenteredLayout from "../lib/CenteredLayout.svelte";
import ng from "../api";
import { Fileupload, Button } from "flowbite-svelte";
// @ts-ignore
@ -135,7 +136,8 @@
}
</script>
{#if error}
<CenteredLayout>
{#if error}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
<svg
class="animate-bounce mt-10 h-16 w-16 mx-auto"
@ -162,20 +164,19 @@
error = undefined;
wallet = undefined;
}}
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"
class="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"
>
Start over
</button>
</div>
{:else if wallet}
{:else if wallet}
<Login
{wallet}
on:error={gotError}
on:opened={gotWallet}
on:cancel={cancelLogin}
/>
{:else if !$active_wallet && !selected}
<main class="">
{:else if !$active_wallet && !selected}
<div class="row">
<Logo class="logo block h-40" alt="NextGraph Logo" />
</div>
@ -217,7 +218,7 @@
on:change={handleWalletUpload}
/>
<button
class=" mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/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-100/55 mb-2"
class=" mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/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-100/55 mb-2"
on:click={() => {
document.getElementById("import_wallet_file").click();
}}
@ -242,7 +243,7 @@
<Button
style="min-width: 250px;justify-content: left;"
disabled
class="disabled mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/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 justify-center dark:focus:ring-primary-100/55 mb-2"
class="disabled mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/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 justify-center dark:focus:ring-primary-100/55 mb-2"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
@ -269,7 +270,7 @@
<Button
style="min-width: 250px;justify-content: left;"
disabled
class="mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/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-100/55 mb-2"
class="mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/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-100/55 mb-2"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
@ -292,7 +293,7 @@
<a href="/wallet/create" use:link>
<button
tabindex="-1"
class="mt-1 text-white bg-primary-700 hover:bg-primary-700/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-700/55 mb-2"
class="mt-1 text-white bg-primary-700 hover:bg-primary-700/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-700/55 mb-2"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
@ -314,9 +315,9 @@
</a>
</div>
</div>
</main>
{:else if step == "security"}{:else if step == "qrcode"}{:else if step == "cloud"}{:else if step == "loggedin"}you
{:else if step == "security"}{:else if step == "qrcode"}{:else if step == "cloud"}{:else if step == "loggedin"}you
are logged in{/if}
</CenteredLayout>
<style>
.wallet-box {

@ -19,6 +19,8 @@ export const active_wallet = writable(undefined);
export const wallets = writable({});
export const online = writable(false);
export const has_wallets = derived(wallets,($wallets) => Object.keys($wallets).length);
export const active_session = writable(undefined);

@ -63,11 +63,14 @@ body {
}
#app {
/*max-width: 1280px;*/
width: 100%;
}
/* #app {
/*max-width: 1280px;
margin: 0 auto;
padding: 0rem;
text-align: center;
}
} */
/* .container2 {
padding-top: 10vh;

@ -169,7 +169,7 @@
{#if go_back}
<button
on:click|once={close}
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"
class="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"
>
Go back
</button>
@ -374,7 +374,7 @@
<div class="row mb-20">
<button
on:click|once={accept}
class="mr-5 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"
class="mr-5 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"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
@ -395,7 +395,7 @@
</button>
<button
on:click|once={refuse}
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 mr-2 mb-2"
class="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 mb-2"
>
I refuse
</button>

@ -157,7 +157,7 @@
<div class="row mb-20">
<button
on:click|once={accept}
class="mr-5 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"
class="mr-5 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"
>
<svg
class="w-8 h-8 mr-2 -ml-1"
@ -178,7 +178,7 @@
</button>
<button
on:click|once={refuse}
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 mr-2 mb-2"
class="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 mb-2"
>
Cancel
</button>

@ -12,7 +12,7 @@
<script>
import { Button } from "flowbite-svelte";
import { link } from "svelte-spa-router";
import Home from "../../../../ng-app/src/lib/Home.svelte";
import NoWallet from "../../../../ng-app/src/lib/NoWallet.svelte";
import { onMount } from "svelte";
@ -52,4 +52,6 @@
onMount(() => bootstrap());
</script>
<Home {display_login_create} />
{#if display_login_create}
<NoWallet />
{/if}

@ -69,7 +69,7 @@
<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 mr-2 mb-2"
class="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 mb-2"
>
<EULogo class="mr-4 block h-10 w-10" alt="European Union flag" />
For European Union citizens
@ -81,7 +81,7 @@
<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 mr-2 mb-2"
class="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 mb-2"
>
<svg
fill="none"
@ -106,7 +106,7 @@
<a href="/install" use:link>
<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 mr-2 mb-2"
class="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 mb-2"
>
<svg
fill="none"
@ -189,7 +189,7 @@
<a href="https://nextgraph.org/self-host">
<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 mr-2 mb-2"
class="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 mb-2"
>
<svg
fill="none"
@ -214,7 +214,7 @@
<a href="https://nextgraph.org/ng-box/">
<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 mr-2 mb-2"
class="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 mb-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"

@ -19,7 +19,7 @@ importers:
classnames: ^2.3.2
cross-env: ^7.0.3
flowbite: ^1.6.5
flowbite-svelte: ^0.37.1
flowbite-svelte: ^0.43.3
internal-ip: ^7.0.0
ng-sdk-js: workspace:^0.1.0
node-gzip: ^1.1.2
@ -28,6 +28,7 @@ importers:
shx: ^0.3.4
svelte: ^3.54.0
svelte-check: ^3.0.0
svelte-heros-v2: ^0.10.12
svelte-preprocess: ^5.0.3
svelte-spa-router: ^3.3.0
tailwindcss: ^3.3.1
@ -45,7 +46,7 @@ importers:
async-proxy: 0.4.1
classnames: 2.3.2
flowbite: 1.6.5
flowbite-svelte: 0.37.3_svelte@3.59.1
flowbite-svelte: 0.43.3_svelte@3.59.1
ng-sdk-js: link:../ng-sdk-js/pkg
svelte-spa-router: 3.3.0
vite-plugin-top-level-await: 1.3.1_vite@4.3.9
@ -63,6 +64,7 @@ importers:
shx: 0.3.4
svelte: 3.59.1
svelte-check: 3.4.3_sxhny56dlbcmwov4vk7qwrzshi
svelte-heros-v2: 0.10.12_svelte@3.59.1
svelte-preprocess: 5.0.4_vmz4xia4c7tzh4ii3qac2x3tom
tailwindcss: 3.3.2
tslib: 2.5.3
@ -287,6 +289,23 @@ packages:
requiresBuild: true
optional: true
/@floating-ui/core/1.5.0:
resolution: {integrity: sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==}
dependencies:
'@floating-ui/utils': 0.1.4
dev: false
/@floating-ui/dom/1.5.3:
resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
dependencies:
'@floating-ui/core': 1.5.0
'@floating-ui/utils': 0.1.4
dev: false
/@floating-ui/utils/0.1.4:
resolution: {integrity: sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==}
dev: false
/@jridgewell/gen-mapping/0.3.3:
resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
engines: {node: '>=6.0.0'}
@ -993,6 +1012,18 @@ packages:
svelte: 3.59.1
dev: false
/flowbite-svelte/0.43.3_svelte@3.59.1:
resolution: {integrity: sha512-yxaBPT/TEZe8g5JQ/O8Tuw1FGz3OYOwPwGdnMxe3laACPgnFnc2fJsWVqvrgxnH0J5lOdfVy9/0XwmDsv/RRgQ==}
engines: {node: '>=16.0.0', npm: '>=7.0.0'}
peerDependencies:
svelte: ^3.55.1 || ^4.0.0
dependencies:
'@floating-ui/dom': 1.5.3
flowbite: 1.8.1
svelte: 3.59.1
tailwind-merge: 1.14.0
dev: false
/flowbite/1.6.5:
resolution: {integrity: sha512-eI4h3pIRI9d7grlYq14r0A01KUtw7189sPLLx/O2i7JyPEWpbleScfYuEc48XTeNjk1xxm/JHgZkD9kjyOWAlA==}
dependencies:
@ -1000,6 +1031,13 @@ packages:
mini-svg-data-uri: 1.4.4
dev: false
/flowbite/1.8.1:
resolution: {integrity: sha512-lXTcO8a6dRTPFpINyOLcATCN/pK1Of/jY4PryklPllAiqH64tSDUsOdQpar3TO59ZXWwugm2e92oaqwH6X90Xg==}
dependencies:
'@popperjs/core': 2.11.8
mini-svg-data-uri: 1.4.4
dev: false
/fraction.js/4.2.0:
resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
dev: true
@ -1654,6 +1692,14 @@ packages:
- sugarss
dev: true
/svelte-heros-v2/0.10.12_svelte@3.59.1:
resolution: {integrity: sha512-0wspy0z9UFS9f/iPKQQ1JDHlNY6e7h+LVW+wJ0qJnuWDpvsJllmoCX2g0frYbMPDWZJEwh2pkO25Dp3lDGCxGQ==}
peerDependencies:
svelte: ^3.54.0 || ^4.0.0
dependencies:
svelte: 3.59.1
dev: true
/svelte-hmr/0.15.2_svelte@3.59.1:
resolution: {integrity: sha512-q/bAruCvFLwvNbeE1x3n37TYFb3mTBJ6TrCq6p2CoFbSTNhDE9oAtEfpy+wmc9So8AG0Tja+X0/mJzX9tSfvIg==}
engines: {node: ^12.20 || ^14.13.1 || >= 16}
@ -1832,6 +1878,10 @@ packages:
picocolors: 1.0.0
dev: true
/tailwind-merge/1.14.0:
resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
dev: false
/tailwindcss/3.3.2:
resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
engines: {node: '>=14.0.0'}

Loading…
Cancel
Save