From 4d6c7411b94285580db7d963426cfbdd418fb6f0 Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Sun, 19 Oct 2025 02:16:03 +0300
Subject: [PATCH] refactor of third aprty webapp login is working

---
 DEV.md                                        |   2 +-
 engine/broker/auth/src/App.svelte             |   3 +-
 engine/broker/src/server_ws.rs                |  26 +-
 infra/ngaccount/README.md                     |   3 +-
 infra/ngaccount/web/index.html                |   2 +-
 infra/ngaccount/web/jsconfig.json             |   2 +-
 infra/ngaccount/web/src/main.js               |   2 +-
 .../ngaccount/web/src/routes/NotFound.svelte  |   1 -
 infra/ngaccount/web/src/styles.css            | 368 ++++++++++++++++++
 infra/ngnet/Cargo.toml                        |   3 +
 infra/ngnet/README.md                         |   2 +-
 infra/ngnet/bootstrap/src/App.svelte          |   4 +-
 infra/ngnet/src/main.rs                       |   5 +-
 infra/ngnet/web/index.html                    |   2 +-
 infra/ngnet/web/package.json                  |   1 -
 sdk/js/examples/react-ldo/README.md           |  19 +-
 sdk/js/web/src/index.ts                       |   4 +-
 17 files changed, 414 insertions(+), 35 deletions(-)
 create mode 100644 infra/ngaccount/web/src/styles.css

diff --git a/DEV.md b/DEV.md
index 352bef5..7ca596f 100644
--- a/DEV.md
+++ b/DEV.md
@@ -6,7 +6,7 @@
 
 On OpenBSD, for LLVM you need to choose llvm-17.
 
-Until this [PR](https://github.com/rustwasm/wasm-pack/pull/1271) is accepted, will have to install wasm-pack this way:
+On all platforms, we have to install wasm-pack this way:
 
 ```
 cargo install wasm-pack --git https://git.nextgraph.org/NextGraph/wasm-pack.git --branch master
diff --git a/engine/broker/auth/src/App.svelte b/engine/broker/auth/src/App.svelte
index 244c639..d032906 100644
--- a/engine/broker/auth/src/App.svelte
+++ b/engine/broker/auth/src/App.svelte
@@ -89,9 +89,10 @@
   //   let walls = await ng.get_wallets();
   //   wallets.set(walls);
   // };
+  const redirect_server = import.meta.env.NG_REDIR_SERVER || "nextgraph.net";
   const iframe_config = import.meta.env.DEV ? {src:"http://localhost:14404/?o=", origin: "http://localhost:14404"} :
     import.meta.env.NG_DEV ? {src:"http://localhost:1421/auth.html?o=", origin: "http://localhost:1421"} :
-                             {src:"https://nextgraph.net/auth/?o=", origin: "https://nextgraph.net"} ;
+                             {src:`https://${redirect_server}/auth/?o=`, origin: `https://${redirect_server}`} ;
   // to test ngnet
   //const iframe_config = {src:"http://127.0.0.1:3033/auth/?o=", origin: "http://127.0.0.1:3033"}; 
 
diff --git a/engine/broker/src/server_ws.rs b/engine/broker/src/server_ws.rs
index 2707b16..4d8f3ca 100644
--- a/engine/broker/src/server_ws.rs
+++ b/engine/broker/src/server_ws.rs
@@ -277,19 +277,19 @@ fn upgrade_ws_or_serve_app(
             // if referer.is_none() || referer.unwrap().to_str().is_err() || referer.unwrap().to_str().unwrap() != "https://nextgraph.net/" {
             //     return Err(make_error(StatusCode::FORBIDDEN));
             // }
-            let webapp_origin = match uri.query() {
-                Some(query) => {
-                    if query.starts_with("o=") {
-                        match decode(&query.chars().skip(2).collect::<String>()) {
-                            Err(_) => return Err(make_error(StatusCode::BAD_REQUEST)),
-                            Ok(cow) => cow.into_owned(),
-                        }
-                    } else {
-                        return Err(make_error(StatusCode::BAD_REQUEST));
-                    }
-                }
-                None => return Err(make_error(StatusCode::BAD_REQUEST)),
-            };
+            // let webapp_origin = match uri.query() {
+            //     Some(query) => {
+            //         if query.starts_with("o=") {
+            //             match decode(&query.chars().skip(2).collect::<String>()) {
+            //                 Err(_) => return Err(make_error(StatusCode::BAD_REQUEST)),
+            //                 Ok(cow) => cow.into_owned(),
+            //             }
+            //         } else {
+            //             return Err(make_error(StatusCode::BAD_REQUEST));
+            //         }
+            //     }
+            //     None => return Err(make_error(StatusCode::BAD_REQUEST)),
+            // };
             let sha_file = AppAuth::get("index.sha256").unwrap();
             let sha = format!(
                 "\"{}\"",
diff --git a/infra/ngaccount/README.md b/infra/ngaccount/README.md
index dc66aa0..3eb561e 100644
--- a/infra/ngaccount/README.md
+++ b/infra/ngaccount/README.md
@@ -7,7 +7,7 @@ This server is used internally by NextGraph to handle the creation of accounts a
 ```
 cd web
 npm install -g pnpm
-pnpm --ignore-workspace install
+pnpm install
 ```
 
 ## Dev
@@ -28,7 +28,6 @@ export NG_ACCOUNT_SERVER=127.0.0.1,14400,[YOUR_NGD_PEER_ID]
 export RUST_LOG=debug
 ```
 
-
 ```bash
 cd web
 pnpm run dev --host
diff --git a/infra/ngaccount/web/index.html b/infra/ngaccount/web/index.html
index 46cadf2..e436f1a 100644
--- a/infra/ngaccount/web/index.html
+++ b/infra/ngaccount/web/index.html
@@ -58,7 +58,7 @@
     <title>NextGraph</title>
     <style>
       .splashing {
-        height: 95vh;display: grid;
+        height: 100vh;display: flex; justify-content: center; width: 100%;
       }
       .noshow {
         display: none !important;
diff --git a/infra/ngaccount/web/jsconfig.json b/infra/ngaccount/web/jsconfig.json
index a30f361..5696a2d 100644
--- a/infra/ngaccount/web/jsconfig.json
+++ b/infra/ngaccount/web/jsconfig.json
@@ -28,5 +28,5 @@
    * Use global.d.ts instead of compilerOptions.types
    * to avoid limiting type declarations.
    */
-  "include": ["../../helpers/ngaccount/web/src/**/*.d.ts", "../../helpers/ngaccount/web/src/**/*.js", "../../helpers/ngaccount/web/src/**/*.svelte"]
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
 }
diff --git a/infra/ngaccount/web/src/main.js b/infra/ngaccount/web/src/main.js
index ff8e791..5dca7b7 100644
--- a/infra/ngaccount/web/src/main.js
+++ b/infra/ngaccount/web/src/main.js
@@ -1,5 +1,5 @@
 import './app.postcss'
-import "../../../../app/nextgraph/src/styles.css";
+import "./styles.css";
 import App from './App.svelte'
 
 const app = new App({
diff --git a/infra/ngaccount/web/src/routes/NotFound.svelte b/infra/ngaccount/web/src/routes/NotFound.svelte
index 8f549de..f4fbb23 100644
--- a/infra/ngaccount/web/src/routes/NotFound.svelte
+++ b/infra/ngaccount/web/src/routes/NotFound.svelte
@@ -11,7 +11,6 @@
 
 <script>
   import { Alert } from "flowbite-svelte";
-  export let params;
 </script>
 
 <div class="p-8">
diff --git a/infra/ngaccount/web/src/styles.css b/infra/ngaccount/web/src/styles.css
new file mode 100644
index 0000000..92b7764
--- /dev/null
+++ b/infra/ngaccount/web/src/styles.css
@@ -0,0 +1,368 @@
+/*
+// Copyright (c) 2022-2025 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.
+*/
+
+td.hljs {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+/** To format paths, like Settings > Wallet > Generate Wallet QR */
+.path {
+    font-family: monospace;
+    background-color: rgba(73, 114, 165, 0.1);
+}
+/* .splash-loaded {
+    display: none;
+} */
+
+.split-editor {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+}
+
+.split-editor:has(.milkdown-split-editor.hidden) {
+    grid-template-columns: repeat(1, 1fr);
+}
+
+.milkdown-split-editor.hidden {
+    display: none;
+}
+
+.ProseMirror.editor_empty::before {
+    position: absolute;
+    content: attr(data-placeholder);
+    pointer-events: none;
+    color: rgb(170, 170, 170);
+}
+
+.prosemirror-editor,
+.prosemirror-editor .milkdown,
+.prosemirror-editor .milkdown .ProseMirror {
+    height: 100%;
+    overflow-wrap: anywhere !important;
+}
+.prosemirror-editor:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+.post-rich-text em,
+.prose em {
+    font-style: italic;
+    font-family: Verdana, Arial, sans-serif;
+}
+/*
+.post-rich-text h1 {
+    font-size: 2.5rem;
+    line-height: 4rem;
+}
+
+.post-rich-text h2 {
+    font-size: 2rem;
+    line-height: 3rem;
+}
+
+.post-rich-text h3 {
+    font-size: 1.5rem;
+    line-height: 2.5rem;
+}
+
+.post-rich-text h4 {
+    font-size: 1.25rem;
+    line-height: 2rem;
+    font-weight: 700;
+}
+
+.post-rich-text h5 {
+    font-size: 1.125rem;
+    line-height: 2rem;
+} */
+.prose {
+    max-width: 100%;
+}
+
+.prose .emoji {
+    width: 25px;
+}
+
+.prose li p,
+.prose dd p {
+    margin: 0;
+}
+
+.prose table {
+    width: calc(100% - 32px) !important;
+}
+
+@media (max-width: 400px) {
+    .popup-bg-modal + div {
+        padding: 0 !important;
+    }
+}
+
+.menu-bg-modal + div {
+    padding: 0 !important;
+    height: 100%;
+}
+.menu-bg-modal + div > div {
+    width: 320px !important;
+    height: 100%;
+}
+.menu-modal {
+    border-radius: 0;
+}
+.menu-modal div {
+    padding: 0;
+}
+.menu-modal div.commit {
+    padding: 8px;
+}
+.menu-modal > button {
+    display: none;
+}
+.menu-modal li {
+    margin: 5px;
+}
+.menu-modal li.submenu {
+    padding-left: 30px;
+}
+.toggle * {
+    cursor: pointer;
+}
+
+.error-popover h3 {
+    text-align: center;
+    color: rgb(200 30 30);
+}
+.error-popover > div:first-child {
+    background-color: rgb(200 30 30);
+}
+.error-popover > div:first-child > h3 {
+    color: white;
+}
+
+/*
+#scanner-div {
+    border: none !important;
+}
+/* #scanner-div * {
+    display: none;
+} 
+#scanner-div__scan_region {
+    display: block;
+}
+#scanner-div__scan_region * {
+    display: block;
+}
+#html5-qrcode-button-camera-permission {
+    display: none !important;
+}
+/* #scanner-div__dashboard_section_csr {
+    display: none !important;
+} 
+#html5-qrcode-anchor-scan-type-change {
+    display: none !important;
+}
+[alt="Camera based scan"] {
+    display: none !important;
+}
+[alt="Info icon"] {
+    display: none !important;
+}*/
+
+.logo {
+    padding: 1.5em;
+    will-change: filter;
+    transition: 0.75s;
+    padding-bottom: 1em;
+}
+
+@keyframes pulse-logo-color {
+    0%,
+    100% {
+        fill: rgb(73, 114, 165);
+        stroke: rgb(73, 114, 165);
+    }
+    50% {
+        /* Mid-transition color */
+        stroke: #bbb;
+        fill: #bbb;
+    }
+}
+
+.logo-pulse path {
+    animation: pulse-logo-color 2s infinite;
+    animation-timing-function: cubic-bezier(0.65, 0.01, 0.59, 0.83);
+}
+
+.logo-gray path {
+    fill: #bbb;
+    stroke: #bbb;
+}
+
+.logo-blue path {
+    fill: rgb(73, 114, 165);
+    stroke: rgb(73, 114, 165);
+}
+
+.jse-absolute-popup-content {
+    left: 0 !important;
+}
+
+.container3 {
+    margin: 0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
+
+.container3 aside {
+    width: 20rem !important;
+}
+
+div[role="alert"] div {
+    display: block;
+}
+
+.spinner-overlay button {
+    display: none;
+}
+
+.choice-button {
+    min-width: 305px;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.row {
+    display: flex;
+    justify-content: center;
+}
+
+.deactivated-menu > svg {
+    color: rgb(156 163 175) !important;
+}
+
+:root {
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    color: #0f0f0f;
+    background-color: white;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 305px;
+    min-height: 100vh;
+}
+
+#app {
+    width: 100%;
+}
+/* #app {
+  /*max-width: 1280px;
+  margin: 0 auto;
+  padding: 0rem;
+  text-align: center;
+} */
+
+/* .container2 {
+  padding-top: 10vh;
+} */
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+.toast {
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 49;
+    cursor: pointer;
+}
+
+input,
+button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    color: #0f0f0f;
+    background-color: #ffffff;
+    transition: border-color 0.25s;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+button {
+    cursor: pointer;
+}
+
+button:hover {
+    border-color: #396cd8;
+}
+button:active {
+    border-color: #396cd8;
+    background-color: #e8e8e8;
+}
+
+/* input,
+button {
+  outline: none;
+} */
+
+button:focus,
+button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+}
+
+/* @media (prefers-color-scheme: dark) {
+    :root {
+        color: #f6f6f6;
+        background-color: #2f2f2f;
+    }
+
+    a:hover {
+        color: #24c8db;
+    }
+
+    input,
+    button {
+        color: #ffffff;
+        background-color: #0f0f0f98;
+    }
+    button:active {
+        background-color: #0f0f0f69;
+    }
+} */
diff --git a/infra/ngnet/Cargo.toml b/infra/ngnet/Cargo.toml
index 7865e3b..82f1e98 100644
--- a/infra/ngnet/Cargo.toml
+++ b/infra/ngnet/Cargo.toml
@@ -13,6 +13,9 @@ keywords.workspace = true
 documentation.workspace = true
 rust-version.workspace = true
 
+[package.metadata.scripts]
+buildfront = "pnpm -C ./web build && pnpm -C ./bootstrap build && pnpm -C ./auth build && pnpm -C ./redir build"
+
 [dependencies]
 serde = { version = "1.0.142", features = ["derive"] }
 tokio = { version = "1.27", features = ["full"] }
diff --git a/infra/ngnet/README.md b/infra/ngnet/README.md
index fe91875..9b4eece 100644
--- a/infra/ngnet/README.md
+++ b/infra/ngnet/README.md
@@ -35,7 +35,7 @@ cargo watch -c -w src -x run
 ## Prod
 
 ```
-pnpm buildfront
+cargo run-script buildfront
 cargo build -r
 ```
 
diff --git a/infra/ngnet/bootstrap/src/App.svelte b/infra/ngnet/bootstrap/src/App.svelte
index 933c6e0..104d272 100644
--- a/infra/ngnet/bootstrap/src/App.svelte
+++ b/infra/ngnet/bootstrap/src/App.svelte
@@ -80,6 +80,7 @@
   try {
     url = new URL(decodeURIComponent(param.get("ab")));
     msgs = JSON.parse(base64UrlDecode(param.get("b")));
+    console.log(JSON.stringify(msgs));
     if (!method)
       throw new Error("InvalidValue");
   }
@@ -118,7 +119,7 @@
 
       let key;
 
-      //console.log("ng_bootstrap received msg",JSON.stringify(data), is_ng_box, is_domain,is_lan,is_local,new URL(origin_url).hostname, new URL(origin_url).hostname === data.domain, data.domain && is_domain && new URL(origin_url).hostname === data.domain  )
+      console.log("ng_bootstrap received msg",JSON.stringify(data), is_ng_box, is_domain,is_lan,is_local,new URL(origin_url).hostname, new URL(origin_url).hostname === data.domain, data.domain && is_domain && new URL(origin_url).hostname === data.domain  )
 
       if (data.ngbox && (is_ng_box || is_lan || is_local || is_domain)) {
         key = "Self-hosted / NGbox";
@@ -161,6 +162,7 @@
           //console.log("removed",key);
         }
       }
+      console.log(JSON.stringify(bootstraps));
       localStorage.setItem("ng_bootstrap",JSON.stringify(bootstraps));
     } catch (e) {
       abort("NoLocalStorage");
diff --git a/infra/ngnet/src/main.rs b/infra/ngnet/src/main.rs
index fd29abe..bbd5b83 100644
--- a/infra/ngnet/src/main.rs
+++ b/infra/ngnet/src/main.rs
@@ -116,6 +116,7 @@ async fn main() -> anyhow::Result<()> {
         .boxed();
 
     let static_files_redir = warp::get()
+        .and(warp::path!("redir" / ..))
         .and(warp_embed::embed(&RedirStatic))
         //.with(warp::reply::with::headers(headers))
         .boxed();
@@ -183,7 +184,9 @@ async fn main() -> anyhow::Result<()> {
 
     #[cfg(not(debug_assertions))]
     {
-        cors = cors.allow_origin(NG_NET_URL);
+        let o = option_env!("NG_REDIR_SERVER").unwrap_or(NG_NET_URL);
+        log::info!("own redirect URL: {o}");
+        cors = cors.allow_origin(format!("https://{o}").as_str());
         cors = cors.allow_origin(NG_APP_URL);
         cors = cors.allow_origin("http://localhost:14400");
         cors = cors.allow_origin("http://localhost:1421");
diff --git a/infra/ngnet/web/index.html b/infra/ngnet/web/index.html
index 1520650..1a6d5e7 100644
--- a/infra/ngnet/web/index.html
+++ b/infra/ngnet/web/index.html
@@ -58,7 +58,7 @@
     <title>NextGraph</title>
     <style>
       .splashing {
-        height: 95vh;display: grid;
+        height: 100vh;display: flex; justify-content: center; width: 100%;
       }
       .noshow {
         display: none !important;
diff --git a/infra/ngnet/web/package.json b/infra/ngnet/web/package.json
index 7e43718..7ae1843 100644
--- a/infra/ngnet/web/package.json
+++ b/infra/ngnet/web/package.json
@@ -6,7 +6,6 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build --base=./",
-    "buildfront": "pnpm -C ./web build && pnpm -C ./bootstrap build && pnpm -C ./auth builddev && pnpm -C ./redir builddev",
     "preview": "vite preview"
   },
   "dependencies": {
diff --git a/sdk/js/examples/react-ldo/README.md b/sdk/js/examples/react-ldo/README.md
index 9884048..423e97d 100644
--- a/sdk/js/examples/react-ldo/README.md
+++ b/sdk/js/examples/react-ldo/README.md
@@ -1,4 +1,4 @@
-# example-webapp-react
+# example-webapp-react-ldo
 
 Example of a Web app made with NextGraph, using React and LDO, and Vite
 
@@ -13,24 +13,29 @@ Example of a Web app made with NextGraph, using React and LDO, and Vite
 ## For developing against a public Broker
 
 ```
-npm install
-npm run dev
+pnpm install
+pnpm dev
 ```
 
-You will have to use a Wallet that was created on one of our public Broker Service Providers (nextgraph.eu by example) before you can actually login. We didn't implement yet the option to create a Wallet while you are using or developing a 3rd party app.
+You will have to use a Wallet that was created on one of our public Broker Service Providers (nextgraph.eu by example) before you can actually login. We didn't implement yet the option to create a Wallet while you are using or developing a 3rd party app, so you have to create the account before using the webapp.
+
+If you need to connect via the staging server, run these commands before starting your webapp:
+
+```
+export NG_REDIR_SERVER=staging.nextgraph.net
+pnpm run -C ../../web build
+```
 
 ## For developing locally
 
 you need to have a running local ngd server. See those [instructions first](https://git.nextgraph.org/NextGraph/nextgraph-rs/src/branch/master/DEV.md#first-run).
 
-If you are running a local devenv for the frontend of nextGraph on http://localhost:1421 , then (and only then) you need to compile the @ng-org/web package in dev mode:
+If you are running a local dev env for the frontend of NextGraph on http://localhost:1421 , then (and only then) you need to compile the @ng-org/web package in dev mode:
 
 ```
 pnpm run -C ../../web builddev
 ```
 
-Due to the way `npm link` works, you will have to run this command again, after each time you use `npm install`.
-
 Otherwise, if you are using http://localhost:14400 in your browser, just skip the line above, and continue with those:
 
 ```
diff --git a/sdk/js/web/src/index.ts b/sdk/js/web/src/index.ts
index bb84745..5dae98b 100644
--- a/sdk/js/web/src/index.ts
+++ b/sdk/js/web/src/index.ts
@@ -11,10 +11,10 @@ import { createAsyncProxy } from "async-proxy";
 
 let initialized = false;
 
-
+const redirect_server = import.meta.env.NG_REDIR_SERVER || "nextgraph.net";
 const config = import.meta.env.NG_DEV ? {redirect:"http://localhost:14402/#/?o=", origin: "http://localhost:14404"} :
       import.meta.env.NG_DEV_LOCAL_BROKER ? {redirect:"http://localhost:1421/redir.html#/?o=", origin: "http://localhost:1421"} : 
-                                {redirect:"https://nextgraph.net/redir/#/?o=", origin: "https://nextgraph.net"} ;
+                                {redirect:`https://${redirect_server}/redir/#/?o=`, origin: `https://${redirect_server}`} ;
 // to test ngnet
 //const config = {redirect:"http://127.0.0.1:3033/auth/#/?o=", origin: "http://127.0.0.1:3033"};