From 65d929c423b8bf0a88eb13e024dc4112589d3304 Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Mon, 2 Oct 2023 03:20:15 +0300
Subject: [PATCH] user panel

---
 ng-app/src/App.svelte                     |   2 +
 ng-app/src/lib/CenteredLayout.svelte      |  11 +
 ng-app/src/lib/FullLayout.svelte          |   4 +-
 ng-app/src/lib/Home.svelte                |  34 +--
 ng-app/src/lib/MobileBottomBar.svelte     |  11 +
 ng-app/src/lib/MobileBottomBarItem.svelte |  11 +
 ng-app/src/routes/User.svelte             | 256 ++++++++++++++++++++++
 ng-app/src/routes/WalletCreate.svelte     |   2 +-
 8 files changed, 294 insertions(+), 37 deletions(-)
 create mode 100644 ng-app/src/routes/User.svelte

diff --git a/ng-app/src/App.svelte b/ng-app/src/App.svelte
index 0beae8f..6ba0cdc 100644
--- a/ng-app/src/App.svelte
+++ b/ng-app/src/App.svelte
@@ -26,6 +26,7 @@
   import NotFound from "./routes/NotFound.svelte";
   import WalletCreate from "./routes/WalletCreate.svelte";
   import WalletLogin from "./routes/WalletLogin.svelte";
+  import User from "./routes/User.svelte";
   import UserRegistered from "./routes/UserRegistered.svelte";
   import Install from "./lib/Install.svelte";
 
@@ -36,6 +37,7 @@
   routes.set("/test", Test);
   routes.set("/wallet/login", WalletLogin);
   routes.set("/wallet/create", WalletCreate);
+  routes.set("/user", User);
   routes.set("/user/registered", UserRegistered);
   if (import.meta.env.NG_APP_WEB) routes.set("/install", Install);
   routes.set(/^\/ng(.*)/i, URI);
diff --git a/ng-app/src/lib/CenteredLayout.svelte b/ng-app/src/lib/CenteredLayout.svelte
index d49de8d..a748f29 100644
--- a/ng-app/src/lib/CenteredLayout.svelte
+++ b/ng-app/src/lib/CenteredLayout.svelte
@@ -1,3 +1,14 @@
+<!--
+// 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.
+-->
+
 <div class="centered">
   <slot />
 </div>
diff --git a/ng-app/src/lib/FullLayout.svelte b/ng-app/src/lib/FullLayout.svelte
index 08ac5bc..9941d38 100644
--- a/ng-app/src/lib/FullLayout.svelte
+++ b/ng-app/src/lib/FullLayout.svelte
@@ -47,17 +47,15 @@
     mobile = true;
   }
 
+  let top;
   async function scrollToTop() {
     await tick();
-    console.log("scrollToTop");
     top.scrollIntoView();
   }
   onMount(async () => await scrollToTop());
 
   $: activeUrl = "#" + $location;
 
-  let top;
-
   let asideClass = "w-48";
   let spanClass = "flex-1 ml-3 whitespace-nowrap";
   let nonActiveClass =
diff --git a/ng-app/src/lib/Home.svelte b/ng-app/src/lib/Home.svelte
index b020997..9c2b286 100644
--- a/ng-app/src/lib/Home.svelte
+++ b/ng-app/src/lib/Home.svelte
@@ -78,38 +78,6 @@
       </div>
     </nav>
   {/if}
-
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-
-  <h1>Welcome</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: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"
-    >
-      <ArrowRightOnRectangle tabindex="-1" class="w-8 h-8 mr-2 -ml-1" />
-
-      Logout
-    </button>
-  </div>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>Welcome</h1>
-  <h1>End</h1>
+  <div />
 </FullLayout>
 <svelte:window bind:innerWidth={width} />
diff --git a/ng-app/src/lib/MobileBottomBar.svelte b/ng-app/src/lib/MobileBottomBar.svelte
index 57a721f..f27a724 100644
--- a/ng-app/src/lib/MobileBottomBar.svelte
+++ b/ng-app/src/lib/MobileBottomBar.svelte
@@ -1,3 +1,14 @@
+<!--
+// 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 lang="ts">
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
diff --git a/ng-app/src/lib/MobileBottomBarItem.svelte b/ng-app/src/lib/MobileBottomBarItem.svelte
index 979a834..a9ba32f 100644
--- a/ng-app/src/lib/MobileBottomBarItem.svelte
+++ b/ng-app/src/lib/MobileBottomBarItem.svelte
@@ -1,3 +1,14 @@
+<!--
+// 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 lang="ts">
   import { getContext } from "svelte";
   import type { ComponentType } from "svelte";
diff --git a/ng-app/src/routes/User.svelte b/ng-app/src/routes/User.svelte
new file mode 100644
index 0000000..77e5203
--- /dev/null
+++ b/ng-app/src/routes/User.svelte
@@ -0,0 +1,256 @@
+<!--
+// 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, push } from "svelte-spa-router";
+  import CenteredLayout from "../lib/CenteredLayout.svelte";
+  import { version } from "../../package.json";
+  // @ts-ignore
+  import Logo from "../assets/nextgraph.svg?component";
+  import {
+    ArrowLeft,
+    Signal,
+    SignalSlash,
+    ArrowRightOnRectangle,
+    Cog6Tooth,
+    PuzzlePiece,
+    Key,
+    User,
+    Gift,
+    InformationCircle,
+  } from "svelte-heros-v2";
+  import { onMount, tick } from "svelte";
+  import {
+    Sidebar,
+    SidebarGroup,
+    SidebarItem,
+    SidebarWrapper,
+  } from "flowbite-svelte";
+
+  import { online, close_active_wallet, active_session } from "../store";
+
+  import {
+    NG_EU_BSP,
+    NG_NET_BSP,
+    APP_ACCOUNT_REGISTERED_SUFFIX,
+    default as ng,
+  } from "../api";
+
+  let tauri_platform = import.meta.env.TAURI_PLATFORM;
+  let error;
+  let mobile = tauri_platform == "android" || tauri_platform == "ios";
+  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";
+
+  let top;
+  async function scrollToTop() {
+    await tick();
+    top.scrollIntoView();
+  }
+  onMount(async () => {
+    if (!$active_session) {
+      push("#/");
+    } else {
+      await scrollToTop();
+    }
+  });
+
+  function logout() {
+    close_active_wallet();
+  }
+</script>
+
+<CenteredLayout>
+  <div class="container3" bind:this={top}>
+    <div class="row mb-20">
+      <Sidebar {nonActiveClass}>
+        <SidebarWrapper
+          divClass="bg-gray-60 overflow-y-auto py-4 px-3 rounded dark:bg-gray-800"
+        >
+          <SidebarGroup ulClass="space-y-2">
+            <li>
+              <h2 class="text-xl mb-6">User panel</h2>
+            </li>
+            <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+            <li
+              tabindex="0"
+              class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+              on:keypress={() => window.history.go(-1)}
+              on:click={() => window.history.go(-1)}
+            >
+              <ArrowLeft
+                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"
+              />
+              <span class="ml-3">Back</span>
+            </li>
+
+            <li
+              class="flex items-center p-2 text-base font-normal text-gray-900"
+            >
+              {#if $online}
+                <Signal
+                  tabindex="-1"
+                  class="w-7 h-7 text-green-600 transition duration-75 dark:text-green-400 "
+                />
+                <span class="ml-3 text-green-600 dark:text-green-400"
+                  >Online</span
+                >
+              {:else}
+                <SignalSlash
+                  tabindex="-1"
+                  class="w-7 h-7 text-red-600 transition duration-75 dark:text-red-400 "
+                />
+                <span class="ml-3 text-red-600 dark:text-red-400">Offline</span>
+              {/if}
+            </li>
+
+            <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+            <li
+              tabindex="0"
+              class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+              on:keypress={logout}
+              on:click={logout}
+            >
+              <ArrowRightOnRectangle
+                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"
+              />
+              <span class="ml-3">Logout</span>
+            </li>
+
+            <SidebarItem label="Settings" href="#/user/settings" class="p-2">
+              <svelte:fragment slot="icon">
+                <Cog6Tooth
+                  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="Wallet" href="#/wallet" class="p-2">
+              <svelte:fragment slot="icon">
+                <PuzzlePiece
+                  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="Admin" href="#/user/admin" class="p-2">
+              <svelte:fragment slot="icon">
+                <Key
+                  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="Accounts" href="#/user/accounts" class="p-2">
+              <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>
+            <li
+              class="flex items-center p-2 text-base font-normal text-gray-900"
+            >
+              <Toggle checked={true}>Personal</Toggle>
+            </li>
+          </SidebarGroup>
+          <SidebarGroup border>
+            <SidebarItem
+              label="Donate to NextGraph"
+              href="https://nextgraph.org/donate"
+              target="_blank"
+              class="p-2"
+            >
+              <svelte:fragment slot="icon">
+                <Gift
+                  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="About NextGraph"
+              href="https://nextgraph.org"
+              target="_blank"
+              class="p-2"
+            >
+              <svelte:fragment slot="icon">
+                <InformationCircle
+                  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>
+            <li
+              class="flex items-center p-2 text-base font-normal text-gray-900"
+            >
+              Version: {version}
+            </li>
+          </SidebarGroup>
+        </SidebarWrapper>
+      </Sidebar>
+    </div>
+    {#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"
+          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 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>
+        {#if 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
+          </p>
+          <a use:link href="/">
+            <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 mb-2"
+            >
+              Login
+            </button>
+          </a>
+        {:else}
+          <p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5">
+            An error occurred:<br />{error}
+          </p>
+          <a use:link href="/">
+            <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 mb-2"
+            >
+              Go back to homepage
+            </button>
+          </a>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</CenteredLayout>
+
+<style>
+  li.clickable {
+    cursor: pointer;
+  }
+</style>
diff --git a/ng-app/src/routes/WalletCreate.svelte b/ng-app/src/routes/WalletCreate.svelte
index 2e032a5..ffaaeb9 100644
--- a/ng-app/src/routes/WalletCreate.svelte
+++ b/ng-app/src/routes/WalletCreate.svelte
@@ -1247,7 +1247,7 @@
               id="security-phrase-input"
               placeholder="Type a security phrase..."
               bind:value={security_txt}
-              on:keydown={security_phrase_ok}
+              on:keypress={security_phrase_ok}
             /><button on:click={async () => await security_phrase_ok()}>
               Ok
             </button><br />