parent
2f9a2d8668
commit
9c1165653b
@ -0,0 +1,24 @@ |
|||||||
|
# Logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
pnpm-debug.log* |
||||||
|
lerna-debug.log* |
||||||
|
|
||||||
|
node_modules |
||||||
|
dist |
||||||
|
dist-ssr |
||||||
|
*.local |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.vscode/* |
||||||
|
!.vscode/extensions.json |
||||||
|
.idea |
||||||
|
.DS_Store |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw? |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
<!-- |
||||||
|
// 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. |
||||||
|
--> |
||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<title>NextGraph Auth</title> |
||||||
|
<style> |
||||||
|
.splashing { |
||||||
|
height: 95vh; |
||||||
|
width:100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.noshow { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
.nextgraph-app-auth-iframe { |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
.nextgraph-app-auth-iframe.nextgraph-app-auth-iframe--active { |
||||||
|
visibility: visible; |
||||||
|
} |
||||||
|
#banner { |
||||||
|
padding-right: 36px !important; |
||||||
|
width: 100%; position: fixed; left:0; top:0; min-height:36px; background-color: rgb(73, 114, 165); color: white; text-align:center ;z-index:10; padding:3px; font-size: 1.25rem; |
||||||
|
line-height: 1.75rem; overflow-wrap: break-word; |
||||||
|
} |
||||||
|
#close-auth { |
||||||
|
position: fixed; right:0; top:0; width: 36px; height: 36px; background-color: rgb(73, 114, 165);z-index:11; |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
<iframe id="nextgraph-app-auth-iframe" class="nextgraph-app-auth-iframe" scrolling="auto" frameborder="0" |
||||||
|
style="position: fixed; left: 0; top: 0; height: 100%; width: 100%; overflow:auto;"> |
||||||
|
</iframe> |
||||||
|
<div id="banner"> |
||||||
|
</div> |
||||||
|
<div id="close-auth"> |
||||||
|
<svg data-slot="icon" fill="none" stroke-width="1.5" stroke="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> |
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
<script> |
||||||
|
document.getElementById("close-auth").onclick = (e)=> { |
||||||
|
window.ng_status_callback.write({status:"cancelled"}); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<div id="splash" class="splashing"> |
||||||
|
<div style="flex-direction: column;justify-content: center;color:#4972a5;width:100%;text-align:center;font-family: Inter, Avenir, Helvetica, Arial, sans-serif;"> |
||||||
|
<svg |
||||||
|
style="width:100px;height:100px;margin: 0 auto 20px ;display:flex;" |
||||||
|
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:#4972a5;fill-opacity:1;stroke:#4972a5;stroke-width:0.377976;stroke-opacity:1" /> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
<div> Loading ...</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div id="app" class="noshow"> |
||||||
|
</div> |
||||||
|
<!-- # INSERT SCRIPT HERE --> |
||||||
|
<script type="module" src="/src/main.ts"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"moduleResolution": "bundler", |
||||||
|
"target": "ESNext", |
||||||
|
"module": "ESNext", |
||||||
|
/** |
||||||
|
* svelte-preprocess cannot figure out whether you have |
||||||
|
* a value or a type, so tell TypeScript to enforce using |
||||||
|
* `import type` instead of `import` for Types. |
||||||
|
*/ |
||||||
|
"verbatimModuleSyntax": true, |
||||||
|
"isolatedModules": true, |
||||||
|
"resolveJsonModule": true, |
||||||
|
/** |
||||||
|
* To have warnings / errors of the Svelte compiler at the |
||||||
|
* correct position, enable source maps by default. |
||||||
|
*/ |
||||||
|
"sourceMap": true, |
||||||
|
"esModuleInterop": true, |
||||||
|
"skipLibCheck": true, |
||||||
|
/** |
||||||
|
* Typecheck JS in `.svelte` and `.js` files by default. |
||||||
|
* Disable this if you'd like to use dynamic types. |
||||||
|
*/ |
||||||
|
"checkJs": true |
||||||
|
}, |
||||||
|
/** |
||||||
|
* Use global.d.ts instead of compilerOptions.types |
||||||
|
* to avoid limiting type declarations. |
||||||
|
*/ |
||||||
|
"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
{ |
||||||
|
"name": "@ng-org/ngnet-auth", |
||||||
|
"private": true, |
||||||
|
"version": "0.1.2", |
||||||
|
"type": "module", |
||||||
|
"scripts": { |
||||||
|
"dev": "vite", |
||||||
|
"build": "vite build --base=./ && shx rm -rf ./dist/assets", |
||||||
|
"builddev": "cross-env NG_DEV=1 vite build --base=./ && shx rm -rf ./dist/assets && shx mkdir -p ../../../app/nextgraph/public_dev && cp ./dist/index.html ../../../app/nextrgaph/public_dev/auth.html", |
||||||
|
"preview": "vite preview" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"flowbite": "^1.6.5", |
||||||
|
"flowbite-svelte": "^0.37.1", |
||||||
|
"svelte-spa-router": "^3.3.0", |
||||||
|
"@tailwindcss/typography": "^0.5.13", |
||||||
|
"svelte-i18n": "^4.0.0", |
||||||
|
"@ng-org/ui-common": "workspace:*", |
||||||
|
"async-proxy": "^0.4.1", |
||||||
|
"remote-web-streams": "^0.2.0" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"shx": "^0.3.4", |
||||||
|
"cross-env": "^7.0.3", |
||||||
|
"node-gzip": "^1.1.2", |
||||||
|
"@sveltejs/vite-plugin-svelte": "^2.0.4", |
||||||
|
"svelte": "^3.58.0", |
||||||
|
"vite": "^4.3.9", |
||||||
|
"postcss": "^8.4.23", |
||||||
|
"postcss-load-config": "^4.0.1", |
||||||
|
"svelte-heros-v2": "^0.10.12", |
||||||
|
"svelte-preprocess": "^5.0.3", |
||||||
|
"tailwindcss": "^3.3.1", |
||||||
|
"autoprefixer": "^10.4.14", |
||||||
|
"vite-plugin-svelte-svg": "^2.2.1", |
||||||
|
"vite-plugin-top-level-await": "1.3.1", |
||||||
|
"vite-plugin-singlefile": "0.13.5", |
||||||
|
"vite-plugin-wasm": "3.2.2" |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@ |
|||||||
|
const tailwindcss = require("tailwindcss"); |
||||||
|
const autoprefixer = require("autoprefixer"); |
||||||
|
|
||||||
|
const config = { |
||||||
|
plugins: [ |
||||||
|
//Some plugins, like tailwindcss/nesting, need to run before Tailwind, |
||||||
|
tailwindcss(), |
||||||
|
//But others, like autoprefixer, need to run after, |
||||||
|
autoprefixer, |
||||||
|
], |
||||||
|
}; |
||||||
|
|
||||||
|
module.exports = config; |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
var crypto = require('crypto') |
||||||
|
, fs = require('fs') |
||||||
|
const {gzip, } = require('node-gzip'); |
||||||
|
|
||||||
|
var algorithm = 'sha256' |
||||||
|
, shasum = crypto.createHash(algorithm) |
||||||
|
|
||||||
|
const sha_file = './dist/index.sha256'; |
||||||
|
const gzip_file = './dist/index.gzip'; |
||||||
|
var filename = './dist/index.html' |
||||||
|
, s = fs.ReadStream(filename) |
||||||
|
|
||||||
|
var bufs = []; |
||||||
|
s.on('data', function(data) { |
||||||
|
shasum.update(data) |
||||||
|
bufs.push(data); |
||||||
|
}) |
||||||
|
|
||||||
|
s.on('end', function() { |
||||||
|
var hash = shasum.digest('hex') |
||||||
|
console.log(hash + ' ' + filename) |
||||||
|
|
||||||
|
fs.writeFileSync(sha_file, hash, 'utf8'); |
||||||
|
|
||||||
|
var buf = Buffer.concat(bufs); |
||||||
|
gzip(buf).then((compressed) => {fs.writeFileSync(gzip_file, compressed);}); |
||||||
|
|
||||||
|
fs.rm(filename,()=>{}); |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,180 @@ |
|||||||
|
<!-- |
||||||
|
// 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. |
||||||
|
--> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import { push, default as Router } from "svelte-spa-router"; |
||||||
|
import { isLoading } from "svelte-i18n"; |
||||||
|
|
||||||
|
import { onMount, tick, onDestroy } from "svelte"; |
||||||
|
import { ng, brokers_info } from "./store"; |
||||||
|
import { |
||||||
|
NotFound, |
||||||
|
Test, |
||||||
|
WalletCreate, |
||||||
|
Invitation, |
||||||
|
WalletLogin, |
||||||
|
WalletInfo, |
||||||
|
User, |
||||||
|
UserRegistered, |
||||||
|
Install, |
||||||
|
ScanQRWeb, |
||||||
|
AccountInfo, |
||||||
|
WalletLoginUsername, |
||||||
|
WalletLoginQr, |
||||||
|
WalletLoginTextCode |
||||||
|
} from "@ng-org/ui-common/routes"; |
||||||
|
import { Bowser } from "../../../../sdk/js/lib-wasm/jsland/bowser.js"; |
||||||
|
|
||||||
|
import Home from "./routes/Home.svelte"; |
||||||
|
|
||||||
|
const routes = new Map(); |
||||||
|
routes.set("/", Home); |
||||||
|
// routes.set("/test", Test); |
||||||
|
// routes.set("/wallet/login", WalletLogin); |
||||||
|
// routes.set("/wallet/username", WalletLoginUsername); |
||||||
|
// routes.set("/wallet/login-qr", WalletLoginQr); |
||||||
|
// routes.set("/wallet/login-text-code", WalletLoginTextCode); |
||||||
|
// routes.set("/wallet/create", WalletCreate); |
||||||
|
// routes.set("/i/:invitation", Invitation); |
||||||
|
// routes.set("/user", User); |
||||||
|
// routes.set("/user/registered", UserRegistered); |
||||||
|
// routes.set("/wallet", WalletInfo); |
||||||
|
// routes.set("/user/accounts", AccountInfo); |
||||||
|
// routes.set("/scanqr", ScanQRWeb); |
||||||
|
// routes.set("/install", Install); |
||||||
|
routes.set("*", NotFound); |
||||||
|
|
||||||
|
// window.refresh_wallets = async () => { |
||||||
|
// let walls = await ng.get_wallets(); |
||||||
|
// wallets.set(walls); |
||||||
|
// }; |
||||||
|
|
||||||
|
let no_local_storage = false; |
||||||
|
let is_safari = false; |
||||||
|
|
||||||
|
function load_bootstraps(bs: string | null) { |
||||||
|
if (bs) { |
||||||
|
let bootstrap_map = JSON.parse(bs); |
||||||
|
brokers_info.set(bootstrap_map); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onMount(async () => { |
||||||
|
|
||||||
|
window.document.getElementById("splash").className="noshow"; |
||||||
|
window.document.getElementById("app").className=""; |
||||||
|
|
||||||
|
let info = Bowser.parse(window.navigator.userAgent); |
||||||
|
//console.log(info); |
||||||
|
is_safari = info.browser.name == "Safari"; |
||||||
|
if (is_safari) return; |
||||||
|
|
||||||
|
window.addEventListener("storage", (event) => { |
||||||
|
//console.log("localStorage event", event); |
||||||
|
if (event.storageArea != localStorage) return; |
||||||
|
if (event.key === "ng_bootstrap") { |
||||||
|
load_bootstraps(event.newValue); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
let ls; |
||||||
|
try { |
||||||
|
ls = localStorage; |
||||||
|
|
||||||
|
try { |
||||||
|
let ret = await document.requestStorageAccess({ localStorage: true }); |
||||||
|
ls = ret.localStorage; |
||||||
|
console.log("REQUEST STORAGE ACCESS GRANTED by chrome"); |
||||||
|
} |
||||||
|
catch(e) { |
||||||
|
console.warn("requestStorageAccess of chrome failed. falling back to previous api", e) |
||||||
|
try { |
||||||
|
await document.requestStorageAccess(); |
||||||
|
localStorage; |
||||||
|
console.log("REQUEST STORAGE ACCESS GRANTED"); |
||||||
|
} catch (e) { |
||||||
|
console.error("REQUEST STORAGE ACCESS DENIED",e); |
||||||
|
no_local_storage = true; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} catch (e) { |
||||||
|
no_local_storage = true; |
||||||
|
console.log("no access to localStorage",e) |
||||||
|
} |
||||||
|
|
||||||
|
if (!no_local_storage) { |
||||||
|
try { |
||||||
|
load_bootstraps(ls.getItem("ng_bootstrap")); |
||||||
|
} catch (e) { |
||||||
|
console.log("load_bootstraps failed") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
</script> |
||||||
|
{#if is_safari} |
||||||
|
|
||||||
|
<div class="text-center 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> |
||||||
|
<p class="mb-5"> |
||||||
|
We are sorry but Safari is not supported yet<br/>for WebApps authentication with your Wallet.<br/>Please use another browser. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
{:else if no_local_storage} |
||||||
|
|
||||||
|
<div class="text-center 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> |
||||||
|
<p class="mb-5"> |
||||||
|
Please give access to localStorage for the website<br/> |
||||||
|
{location.origin} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
{:else} |
||||||
|
|
||||||
|
{#if $isLoading} |
||||||
|
<p class="text-center">Loading translations...</p> |
||||||
|
{:else} |
||||||
|
<Router {routes} /> |
||||||
|
{/if} |
||||||
|
|
||||||
|
{/if} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
/* Write your global styles here, in PostCSS syntax */ |
||||||
|
@tailwind base; |
||||||
|
@tailwind components; |
||||||
|
@tailwind utilities; |
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1,160 @@ |
|||||||
|
<!-- |
||||||
|
// 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. |
||||||
|
--> |
||||||
|
<script lang="ts"> |
||||||
|
import { onMount } from "svelte"; |
||||||
|
import { t, locale } from "svelte-i18n"; |
||||||
|
import { CenteredLayout } from "@ng-org/ui-common/lib"; |
||||||
|
import { LogoSimple } from "@ng-org/ui-common/components"; |
||||||
|
import { |
||||||
|
Sidebar, |
||||||
|
SidebarGroup, |
||||||
|
SidebarItem, |
||||||
|
SidebarWrapper, |
||||||
|
} from "flowbite-svelte"; |
||||||
|
import { |
||||||
|
ComputerDesktop, |
||||||
|
GlobeAlt, |
||||||
|
ServerStack |
||||||
|
} from "svelte-heros-v2"; |
||||||
|
|
||||||
|
import { web_origin, brokers_info, selected_broker } from '../store'; |
||||||
|
import { fromWritablePort, RemoteReadableStream } from 'remote-web-streams'; |
||||||
|
|
||||||
|
let top; |
||||||
|
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"; |
||||||
|
|
||||||
|
const AUTH_HOME = "#/"; |
||||||
|
|
||||||
|
function select(broker: Object) { |
||||||
|
|
||||||
|
let url; |
||||||
|
if (import.meta.env.NG_DEV && broker.localhost === 14400) { |
||||||
|
// dev mode |
||||||
|
url = "http://localhost:1421/appauth.html"; |
||||||
|
} else if (broker.localhost) { |
||||||
|
url = `http://localhost:${broker.localhost}/auth/`; |
||||||
|
} else if (broker.private) { |
||||||
|
//TODO |
||||||
|
url = `http://unimplemented/auth/`; |
||||||
|
} else if (broker.domain) { |
||||||
|
url = `https://${broker.domain}/auth/`; |
||||||
|
} else if (broker.ngbox) { |
||||||
|
url = `https://nextgraph.app/auth/`; |
||||||
|
} else return; |
||||||
|
|
||||||
|
selected_broker.set(broker); |
||||||
|
let iframe = window.document.getElementById("nextgraph-app-auth-iframe"); |
||||||
|
iframe?.classList.add('nextgraph-app-auth-iframe--active'); |
||||||
|
window.document.getElementById("app").style["display"] = "none"; |
||||||
|
|
||||||
|
(<any>window).ng_iframe_origin = new URL(url).origin; |
||||||
|
|
||||||
|
iframe.addEventListener("load", function() { |
||||||
|
|
||||||
|
(<any>window).ng_broker_selected = this.contentWindow; |
||||||
|
const ready_handler = async function(m) { |
||||||
|
if (m.data.ready && m.origin === (<any>window).ng_iframe_origin) { |
||||||
|
//console.log("got ready message",m); |
||||||
|
//remove this listener |
||||||
|
window.removeEventListener("message",ready_handler); |
||||||
|
const { readable, writablePort } = new RemoteReadableStream(); |
||||||
|
//console.log("sending init message to app-auth"); |
||||||
|
(<any>window).ng_broker_selected.postMessage({ method: "init", manifest:window.ng_manifest, port: writablePort }, (<any>window).ng_iframe_origin, [writablePort]); |
||||||
|
const reader = readable.getReader(); |
||||||
|
for (var msg; msg = await reader.read(); ) { |
||||||
|
if (msg.done) { |
||||||
|
(<any>window).ng_status_callback.close(); |
||||||
|
break; |
||||||
|
} else { |
||||||
|
//console.log("forwarding upstream",msg.value); |
||||||
|
(<any>window).ng_status_callback.write(msg.value); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
window.addEventListener("message",ready_handler); |
||||||
|
}); |
||||||
|
|
||||||
|
iframe.src = url+"?o="+location.search.substring(3)+AUTH_HOME; |
||||||
|
} |
||||||
|
|
||||||
|
onMount(() => { |
||||||
|
if (Object.keys($brokers_info).length == 1) { |
||||||
|
select(Object.values($brokers_info)[0]); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
{#if Object.keys($brokers_info).length > 1} |
||||||
|
<CenteredLayout> |
||||||
|
<div class="container3" bind:this={top}> |
||||||
|
<div class="row"> |
||||||
|
<LogoSimple/> |
||||||
|
</div> |
||||||
|
<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" role="menu"> |
||||||
|
<li> |
||||||
|
<h2 class="text-xl mb-6">{@html $t("auth.select_broker", {values: { origin:$web_origin }})}</h2> |
||||||
|
</li> |
||||||
|
{#each Object.entries($brokers_info) as broker} |
||||||
|
<li |
||||||
|
tabindex="0" |
||||||
|
role="menuitem" |
||||||
|
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={()=>select(broker[1])} |
||||||
|
on:click={()=>select(broker[1])} |
||||||
|
> |
||||||
|
{#if broker[1].localhost} |
||||||
|
<ComputerDesktop tabindex="-1" |
||||||
|
class="w-10 h-10 mr-4 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"/> |
||||||
|
{:else if broker[1].domain} |
||||||
|
<GlobeAlt tabindex="-1" |
||||||
|
class="w-10 min-w-10 h-10 mr-4 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"/> |
||||||
|
{:else if broker[1].private} |
||||||
|
<ServerStack tabindex="-1" |
||||||
|
class="w-10 h-10 mr-4 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"/> |
||||||
|
{:else if broker[1].ngbox} |
||||||
|
<svg |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
version="1.1" |
||||||
|
viewBox="0 0 225 225" |
||||||
|
class="mr-4 block h-10 w-10" |
||||||
|
stroke="currentColor" |
||||||
|
stroke-width="12" |
||||||
|
fill="none" |
||||||
|
> |
||||||
|
<path |
||||||
|
d="M 88.332599,179.77884 C 72.858008,177.42608 59.581081,170.564 48.8817,159.38898 36.800075,146.77026 30.396139,130.74266 30.396139,113.12381 c 0,-8.81477 1.466462,-16.772273 4.503812,-24.439156 3.697755,-9.333883 8.658122,-16.726264 15.988284,-23.827148 4.07992,-3.952299 5.699054,-5.267377 9.730928,-7.903581 10.263753,-6.710853 20.852276,-10.247623 32.861256,-10.976317 17.083161,-1.036581 33.737521,4.410501 47.100151,15.404873 1.30009,1.069669 2.35446,2.035155 2.34305,2.145524 -0.0114,0.110369 -3.32807,3.135042 -7.37038,6.721489 -4.04229,3.586437 -8.6667,7.731233 -10.27646,9.210635 -1.60975,1.479412 -3.05439,2.689839 -3.21032,2.689839 -0.15591,0 -1.2075,-0.642795 -2.33686,-1.428431 -6.49544,-4.518567 -13.79659,-6.747116 -22.104843,-6.747116 -10.982241,0 -20.054641,3.741852 -27.727158,11.435891 -5.517107,5.532575 -9.233107,12.555305 -10.782595,20.377588 -0.596045,3.00901 -0.594915,11.67153 0.0017,14.67182 3.195984,16.0665 15.801761,28.55358 31.607491,31.30987 3.592183,0.62643 10.334745,0.61437 13.792675,-0.0247 12.10383,-2.2368 22.30712,-9.80603 27.83192,-20.64689 0.66747,-1.30971 1.08703,-2.48825 0.93235,-2.61898 -0.1547,-0.13073 -5.9299,-1.01605 -12.83381,-1.96739 -8.43575,-1.16241 -12.87296,-1.9096 -13.52955,-2.27826 -1.31171,-0.73647 -2.44642,-2.49122 -2.44642,-3.78325 0,-1.012 1.74837,-13.68832 2.1486,-15.57814 0.25598,-1.20873 2.0923,-3.01339 3.3151,-3.25795 0.53677,-0.10735 7.61424,0.73799 15.7688,1.88346 8.13723,1.14303 14.89071,1.97925 15.00772,1.85826 0.11702,-0.12098 0.96445,-5.648553 1.88315,-12.283473 0.95557,-6.900944 1.90122,-12.59548 2.20977,-13.306594 0.29667,-0.683692 0.95765,-1.595052 1.46889,-2.025218 1.77972,-1.497534 2.7114,-1.539742 10.52745,-0.476938 8.31229,1.130266 9.2373,1.347581 10.59333,2.488613 1.41776,1.192951 1.96085,2.424677 1.94866,4.419342 -0.006,0.950347 -0.79507,7.156475 -1.75393,13.791395 -0.95885,6.634933 -1.70069,12.111623 -1.64854,12.170443 0.0522,0.0588 6.18174,0.95872 13.62132,1.99978 9.57969,1.34053 13.80866,2.0595 14.49353,2.46406 1.3199,0.77969 2.13943,2.28402 2.1135,3.87957 -0.0399,2.45278 -2.08103,15.63263 -2.5664,16.57122 -0.57073,1.10369 -2.24485,2.197 -3.38232,2.20889 -0.44831,0.004 -6.79249,-0.82755 -14.09817,-1.84941 -7.3057,-1.02186 -13.34942,-1.79161 -13.43049,-1.71053 -0.0811,0.0811 -1.02469,6.33285 -2.09694,13.89286 -1.24218,8.75802 -2.1547,14.1778 -2.51495,14.93697 -0.62565,1.31846 -2.38302,2.64205 -3.91461,2.94836 -0.8254,0.16509 -9.4024,-0.80047 -11.73007,-1.32049 -0.47193,-0.10544 -1.63157,0.58011 -3.8898,2.29957 -9.71515,7.39729 -20.99725,11.99799 -33.08692,13.49241 -3.79574,0.46921 -13.565667,0.37348 -17.125664,-0.16779 z" |
||||||
|
/> |
||||||
|
<rect |
||||||
|
ry="37.596001" |
||||||
|
y="10.583322" |
||||||
|
x="14.363095" |
||||||
|
height="204.86308" |
||||||
|
width="195.79167" |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
{/if} |
||||||
|
<span class="text-left text-xl ml-3" style="overflow-wrap: anywhere;">{broker[0]}</span> |
||||||
|
</li> |
||||||
|
{/each} |
||||||
|
</SidebarGroup> |
||||||
|
</SidebarWrapper> |
||||||
|
</Sidebar> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</CenteredLayout> |
||||||
|
{/if} |
||||||
@ -0,0 +1,120 @@ |
|||||||
|
// 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.
|
||||||
|
|
||||||
|
import "./app.postcss"; |
||||||
|
import "../../../../app/ui-common/src/styles.css"; |
||||||
|
import { link, push } from "svelte-spa-router"; |
||||||
|
import App from "./App.svelte"; |
||||||
|
import { fromWritablePort, RemoteReadableStream } from 'remote-web-streams'; |
||||||
|
import { web_origin } from './store'; |
||||||
|
|
||||||
|
import { select_default_lang } from "@ng-org/ui-common/lang"; |
||||||
|
select_default_lang(()=>{return window.navigator.languages;}).then(() => {}); |
||||||
|
|
||||||
|
//let status_callback : WritableStreamDefaultWriter<any> | undefined = undefined;
|
||||||
|
|
||||||
|
const origin = decodeURIComponent(location.search.substring(3)); |
||||||
|
|
||||||
|
document.getElementById("banner").innerText = "Opening Wallet for "+ new URL(origin).host; |
||||||
|
|
||||||
|
async function rpc( method:string, args?: any) : Promise<any> { |
||||||
|
const { readable, writablePort } = new RemoteReadableStream(); |
||||||
|
(<any>window).ng_broker_selected.postMessage({ method, args, port: writablePort }, (<any>window).ng_iframe_origin, [writablePort]); |
||||||
|
const reader = readable.getReader(); |
||||||
|
let ret = await reader.read(); |
||||||
|
await reader.read(); // the close
|
||||||
|
return ret.value; |
||||||
|
} |
||||||
|
|
||||||
|
async function rpc_stream( method:string, args: any, writer:WritableStreamDefaultWriter<any>) { |
||||||
|
const { readable, writablePort } = new RemoteReadableStream(); |
||||||
|
(<any>window).ng_broker_selected.postMessage({ method, args, port: writablePort }, (<any>window).ng_iframe_origin, [writablePort]); |
||||||
|
const reader = readable.getReader(); |
||||||
|
for (var msg; msg = await reader.read(); ) { |
||||||
|
if (msg.done) { |
||||||
|
writer.close(); |
||||||
|
break; |
||||||
|
} |
||||||
|
if (msg.value.error) { |
||||||
|
writer.write(msg.value); |
||||||
|
writer.close(); |
||||||
|
break; |
||||||
|
} else if (msg.value.stream) { |
||||||
|
writer.write(msg.value); |
||||||
|
} |
||||||
|
// TODO: deal with end of stream
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const AUTH_HOME = "#/"; |
||||||
|
// const AUTH_USER_PANEL = "#/user";
|
||||||
|
// const AUTH_USER_ACCOUNTS = "#/user/accounts";
|
||||||
|
// const AUTH_WALLET = "#/wallet";
|
||||||
|
|
||||||
|
window.addEventListener("message", async (event)=>{ |
||||||
|
if (event.data.ready) return; |
||||||
|
const { method, port } = event.data; |
||||||
|
const writable = fromWritablePort(port); |
||||||
|
const writer = writable.getWriter(); |
||||||
|
if (event.origin !== origin) { |
||||||
|
console.error("invalid origin",event.origin,origin) |
||||||
|
writer.write({status:'error', error:'invalid origin'}); |
||||||
|
writer.close(); |
||||||
|
} else if ( method === "init" ) { |
||||||
|
|
||||||
|
(<any>window).ng_status_callback = writer; |
||||||
|
web_origin.set(new URL(origin).host); |
||||||
|
|
||||||
|
// make API call with origin, event.data.singleton and event.data.access_requests
|
||||||
|
// in order to get full manifest (including security info)
|
||||||
|
|
||||||
|
(<any>window).ng_manifest = { |
||||||
|
origin: origin, |
||||||
|
singleton: event.data.singleton, |
||||||
|
access_request: event.data.access_requests, |
||||||
|
name: "", |
||||||
|
title: "", |
||||||
|
description: "", // etc...
|
||||||
|
security_info: {} |
||||||
|
}; |
||||||
|
|
||||||
|
} else if ( method === "login" ) { |
||||||
|
|
||||||
|
if (!(<any>window).ng_broker_selected) { |
||||||
|
push(AUTH_HOME); |
||||||
|
writer.write({ok:true, ret: false}); |
||||||
|
writer.close(); |
||||||
|
} else { |
||||||
|
writer.write(await rpc("login")); |
||||||
|
writer.close(); |
||||||
|
} |
||||||
|
} else if ( method === "doc_subscribe" ) { |
||||||
|
|
||||||
|
//console.log("net forward doc_subscribe to app", method, event.data.args)
|
||||||
|
await rpc_stream(method, event.data.args, writer); |
||||||
|
|
||||||
|
} else { |
||||||
|
//console.log("net forward to app", method, event.data.args)
|
||||||
|
// forward to app auth iframe
|
||||||
|
writer.write(await rpc(method, event.data.args)); |
||||||
|
writer.close(); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
}, false); |
||||||
|
|
||||||
|
/// for test purposes only, when testing with http://localhost:14402/?o=http://localhost:14402
|
||||||
|
// const { readable, writablePort } = new RemoteReadableStream();
|
||||||
|
// window.postMessage({method:"init", port: writablePort }, location.origin, [writablePort]);
|
||||||
|
|
||||||
|
const app = new App({ |
||||||
|
target: document.getElementById("app"), |
||||||
|
}); |
||||||
|
|
||||||
|
export default app; |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
<!-- |
||||||
|
// 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. |
||||||
|
--> |
||||||
|
|
||||||
|
<!-- |
||||||
|
Home page to display for logged in users. |
||||||
|
Redirects to no-wallet or login page, if not logged in. |
||||||
|
--> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Home from "../lib/Home.svelte"; |
||||||
|
import { t, locale } from "svelte-i18n"; |
||||||
|
import { NoWallet } from "@ng-org/ui-common/lib"; |
||||||
|
import { push } from "svelte-spa-router"; |
||||||
|
import { onMount, onDestroy } from "svelte"; |
||||||
|
import { brokers_info, web_origin } from "../store"; |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
{#if Object.keys($brokers_info).length == 0} |
||||||
|
<!-- <NoWallet /> --> |
||||||
|
{#if import.meta.env.NG_DEV} |
||||||
|
<div class="text-center 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> |
||||||
|
<p class="mb-5"> |
||||||
|
We could not find a wallet in your browser.<br/> |
||||||
|
This is probably due to the recent changes made to the framework.<br/> |
||||||
|
Please create a new wallet from this browser and try again, |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
{:else} |
||||||
|
<div class="text-center max-w-6xl lg:px-8 mx-auto px-4 text-blue-600"> |
||||||
|
|
||||||
|
<svg |
||||||
|
class="y-10 h-16 w-16 mx-auto mb-3" |
||||||
|
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> |
||||||
|
We could not find a wallet in your browser.<br/> |
||||||
|
For now, creating a new wallet while a Web App<br/> |
||||||
|
is authenticating, is not implemented. Please<br/> |
||||||
|
create or import your wallet in a new tab by<br/><a href="https://nextgraph.eu" target="_blank">clicking here</a> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
{:else if $web_origin} |
||||||
|
<Home /> |
||||||
|
{:else} |
||||||
|
<div class="text-center 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> |
||||||
|
<p class="mb-5"> |
||||||
|
{@html $t("auth.unexpected_error")} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
// 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.
|
||||||
|
|
||||||
|
import { |
||||||
|
writable, |
||||||
|
readable, |
||||||
|
readonly, |
||||||
|
derived, |
||||||
|
get, |
||||||
|
type Writable, |
||||||
|
} from "svelte/store"; |
||||||
|
|
||||||
|
import { createAsyncProxy } from "async-proxy"; |
||||||
|
import { RemoteReadableStream } from 'remote-web-streams'; |
||||||
|
|
||||||
|
export const selected_broker = writable<undefined | Object>( undefined ); |
||||||
|
|
||||||
|
export const brokers_info = writable( {} ); |
||||||
|
|
||||||
|
export const unlocked_wallet = writable(undefined); |
||||||
|
|
||||||
|
export const web_origin = writable(""); |
||||||
|
|
||||||
|
import worker_ from "./worker.js?worker&inline"; |
||||||
|
const worker = new worker_(); |
||||||
|
|
||||||
|
async function rpc( method:string, args?: any) : Promise<any> { |
||||||
|
const { readable, writablePort } = new RemoteReadableStream(); |
||||||
|
worker.postMessage({ method, args, port: writablePort }, [writablePort]); |
||||||
|
const reader = readable.getReader(); |
||||||
|
let ret = await reader.read(); |
||||||
|
await reader.read(); // the close.
|
||||||
|
return ret.value; |
||||||
|
} |
||||||
|
|
||||||
|
const handler = { |
||||||
|
async apply(_target: object, path: PropertyKey[], _caller: any, args?: any) :Promise<any> { |
||||||
|
|
||||||
|
if (path[0] === "login") { |
||||||
|
|
||||||
|
} else { |
||||||
|
return await rpc(<string>path[0], args); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
export const ng = createAsyncProxy({}, handler); |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
/// <reference types="svelte" />
|
||||||
|
/// <reference types="vite/client" />
|
||||||
@ -0,0 +1,26 @@ |
|||||||
|
// 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.
|
||||||
|
|
||||||
|
//import * as sdk from "@ng-org/wasm-tools-auth";
|
||||||
|
import { fromWritablePort } from 'remote-web-streams'; |
||||||
|
|
||||||
|
self.onmessage = (event) => { |
||||||
|
(async function() { |
||||||
|
const { method, args, port } = event.data; |
||||||
|
const writable = fromWritablePort(port); |
||||||
|
const writer = writable.getWriter(); |
||||||
|
console.log("Message received by worker", method, args); |
||||||
|
|
||||||
|
let ret = await Reflect.apply(sdk[method], null, args); |
||||||
|
writer.write(ret); |
||||||
|
writer.close(); |
||||||
|
})(); |
||||||
|
} |
||||||
|
|
||||||
|
console.log("worker loaded"); |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import preprocess from "svelte-preprocess"; |
||||||
|
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; |
||||||
|
|
||||||
|
const config = { |
||||||
|
// preprocess: [
|
||||||
|
// vitePreprocess(),
|
||||||
|
// preprocess({
|
||||||
|
// postcss: true,
|
||||||
|
// }),
|
||||||
|
// ],
|
||||||
|
}; |
||||||
|
|
||||||
|
export default config; |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
/** @type {import('tailwindcss').Config}*/ |
||||||
|
const defaultTheme = require('tailwindcss/defaultTheme') |
||||||
|
const config = { |
||||||
|
content: [ |
||||||
|
"./src/**/*.{html,js,svelte,ts}", |
||||||
|
"./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}", |
||||||
|
"./node_modules/@nng-org/ui-common/src/**/*.{html,js,svelte,ts}", |
||||||
|
], |
||||||
|
theme: { |
||||||
|
extend: { |
||||||
|
colors: { |
||||||
|
primary: { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#1E88E5", "700": "#4972A5", "800": "#1e40af", "900": "#1e3a8a" } |
||||||
|
}, |
||||||
|
}, |
||||||
|
screens: { |
||||||
|
'xxs': '400px', |
||||||
|
'xs': '500px', |
||||||
|
...defaultTheme.screens, |
||||||
|
|
||||||
|
'tall': { 'raw': '(min-height: 450px)' }, |
||||||
|
'tall-xxs': { 'raw': '(min-height: 360px)' }, |
||||||
|
'tall-xs': { 'raw': '(min-height: 480px)' }, |
||||||
|
'tall-sm': { 'raw': '(min-height: 640px)' }, |
||||||
|
'tall-md': { 'raw': '(min-height: 800px)' }, |
||||||
|
'tall-l': { 'raw': '(min-height: 1000px)' }, |
||||||
|
'tall-xl': { 'raw': '(min-height: 1200px)' }, |
||||||
|
'tall-xxl': { 'raw': '(min-height: 1400px)' }, |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
plugins: [ |
||||||
|
require('flowbite/plugin'), |
||||||
|
require('@tailwindcss/typography') |
||||||
|
], |
||||||
|
darkMode: 'selector', |
||||||
|
}; |
||||||
|
|
||||||
|
module.exports = config; |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
import { defineConfig } from 'vite' |
||||||
|
import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte' |
||||||
|
import sveltePreprocess from "svelte-preprocess"; |
||||||
|
import svelteSVG from "vite-plugin-svelte-svg"; |
||||||
|
import wasm from "vite-plugin-wasm"; |
||||||
|
import topLevelAwait from "vite-plugin-top-level-await"; |
||||||
|
import { viteSingleFile } from "vite-plugin-singlefile" |
||||||
|
|
||||||
|
const jsToBottom = () => { |
||||||
|
return { |
||||||
|
name: "script-at-end-of-body", |
||||||
|
transformIndexHtml(html) { |
||||||
|
let scriptTag = html.match(/<script type[^>]*>(.*?)<\/script[^>]*>/)[0] |
||||||
|
//console.log("\n SCRIPT TAG", scriptTag, "\n")
|
||||||
|
html = html.replace(scriptTag, "") |
||||||
|
html = html.replace("<!-- # INSERT SCRIPT HERE -->", scriptTag) |
||||||
|
return html; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({ |
||||||
|
envPrefix: ["VITE_", "NG_"], |
||||||
|
server: { |
||||||
|
port: 14402 |
||||||
|
}, |
||||||
|
worker: { |
||||||
|
format: 'es', |
||||||
|
plugins : [ |
||||||
|
topLevelAwait(), |
||||||
|
wasm(), |
||||||
|
viteSingleFile() |
||||||
|
] |
||||||
|
}, |
||||||
|
plugins: [ |
||||||
|
topLevelAwait(), |
||||||
|
wasm(), |
||||||
|
svelte({ |
||||||
|
preprocess: [ |
||||||
|
vitePreprocess(), |
||||||
|
sveltePreprocess({ |
||||||
|
typescript: false, |
||||||
|
postcss: true, |
||||||
|
}), |
||||||
|
], |
||||||
|
}), |
||||||
|
svelteSVG({ |
||||||
|
svgoConfig: { |
||||||
|
plugins: [ |
||||||
|
{ |
||||||
|
name: 'preset-default', |
||||||
|
params: { |
||||||
|
overrides: { |
||||||
|
// disable plugins
|
||||||
|
removeViewBox: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'prefixIds', |
||||||
|
} |
||||||
|
], |
||||||
|
}, // See https://github.com/svg/svgo#configuration
|
||||||
|
requireSuffix: true, // Set false to accept '.svg' without the '?component'
|
||||||
|
}), |
||||||
|
viteSingleFile(), |
||||||
|
jsToBottom(), |
||||||
|
] |
||||||
|
}) |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,24 @@ |
|||||||
|
# Logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
pnpm-debug.log* |
||||||
|
lerna-debug.log* |
||||||
|
|
||||||
|
node_modules |
||||||
|
dist |
||||||
|
dist-ssr |
||||||
|
*.local |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.vscode/* |
||||||
|
!.vscode/extensions.json |
||||||
|
.idea |
||||||
|
.DS_Store |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw? |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
Apache 2.0 License |
||||||
|
|
||||||
|
Copyright (c) 2022-2025 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||||
|
All rights reserved. |
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||||
|
you may not use this file except in compliance with the License. |
||||||
|
You may obtain a copy of the License at |
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software |
||||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
See the License for the specific language governing permissions and |
||||||
|
limitations under the License. |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
MIT License |
||||||
|
|
||||||
|
Copyright (c) 2022-2025 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||||
|
All rights reserved. |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
@ -0,0 +1,165 @@ |
|||||||
|
# @ng-org/web |
||||||
|
|
||||||
|
[![Apache 2.0 Licensed][license-image]][license-link] |
||||||
|
[![MIT Licensed][license-image2]][license-link2] |
||||||
|
[](https://forum.nextgraph.org) |
||||||
|
|
||||||
|
JavaScript/TypeScript package containing the SDK of NextGraph for developing third-party Web Apps |
||||||
|
|
||||||
|
## NextGraph |
||||||
|
|
||||||
|
> NextGraph brings about the convergence of P2P and Semantic Web technologies, towards a decentralized, secure and privacy-preserving cloud, based on CRDTs. |
||||||
|
> |
||||||
|
> This open source ecosystem provides solutions for end-users (a platform) and software developers (a framework), wishing to use or create **decentralized** apps featuring: **live collaboration** on rich-text documents, peer to peer communication with **end-to-end encryption**, offline-first, **local-first**, portable and interoperable data, total ownership of data and software, security and privacy. Centered on repositories containing **semantic data** (RDF), **rich text**, and structured data formats like **JSON**, synced between peers belonging to permissioned groups of users, it offers strong eventual consistency, thanks to the use of **CRDTs**. Documents can be linked together, signed, shared securely, queried using the **SPARQL** language and organized into sites and containers. |
||||||
|
> |
||||||
|
> More info here [https://nextgraph.org](https://nextgraph.org) |
||||||
|
|
||||||
|
## Support |
||||||
|
|
||||||
|
Documentation can be found here [https://docs.nextgraph.org](https://docs.nextgraph.org) |
||||||
|
|
||||||
|
And our community forum where you can ask questions is here [https://forum.nextgraph.org](https://forum.nextgraph.org) |
||||||
|
|
||||||
|
## For developers |
||||||
|
|
||||||
|
Read our [getting started guide](https://docs.nextgraph.org/en/getting-started/). |
||||||
|
|
||||||
|
You need to create a Wallet for yourself, on one of our Public Broker Service Provider. Alternatively, you can do everything locally, as [described below](#local-development) |
||||||
|
|
||||||
|
``` |
||||||
|
npm i nextgraphweb |
||||||
|
``` |
||||||
|
|
||||||
|
Additionally, you can use [LDO (Linked Data Object) library](https://ldo.js.org/latest/guides/nextgraph/) to help you with RDF handling in the client side. |
||||||
|
|
||||||
|
``` |
||||||
|
npm i @ldo/connected-nextgraph |
||||||
|
``` |
||||||
|
|
||||||
|
More documentation on LDO can be found [here](https://www.npmjs.com/package/@ldo/connected-nextgraph). |
||||||
|
|
||||||
|
The LDO library also offers a React plugin that will be demonstrated in another example. |
||||||
|
|
||||||
|
You will find a full example web app [here](https://git.nextgraph.org/NextGraph/nextgraph-rs/src/branch/master/ng-sdk-js/example-webapp-vite). |
||||||
|
Specially you will find there instructions for setting up your local dev env. |
||||||
|
|
||||||
|
You have to first call the `init()` and `ng.login()`, then once you receive the status `loggedin` in the callback, you can start using the whole API. |
||||||
|
|
||||||
|
## APIs |
||||||
|
|
||||||
|
All the functions are async. you must use them with `await` (or `.then()`). |
||||||
|
|
||||||
|
They all can throw errors. You must enclose them in `try {} catch(e) {}` |
||||||
|
|
||||||
|
- `ng.doc_create()` |
||||||
|
- `ng.sparql_query(session_id, "[SPARQL query]", base, nuri)` returns or: |
||||||
|
- for SELECT queries: a JSON Sparql Query Result as a Javascript object. [SPARQL Query Results JSON Format](https://www.w3.org/TR/sparql11-results-json/) |
||||||
|
- for CONSTRUCT queries: a list of quads in the format [RDF-JS data model](http://rdf.js.org/data-model-spec/) that can be used as ingress to RDFjs lib. |
||||||
|
- for ASK queries: a boolean |
||||||
|
- `ng.sparql_update(session_id, "[SPARQL update]")` returns nothing, but can throw an error. |
||||||
|
|
||||||
|
Here is the format of the config object to be supplied in the calls to `init_headless` and `admin_create_user`: |
||||||
|
|
||||||
|
## Local development |
||||||
|
|
||||||
|
you need to have a running local ngd server and a local ng-app frontend too. See those [instructions first](https://git.nextgraph.org/NextGraph/nextgraph-rs/src/branch/master/DEV.md#first-run). |
||||||
|
|
||||||
|
You will need to create an admin wallet on the local ngd instance, as explained in the above link. |
||||||
|
|
||||||
|
Then you can use that wallet to log in inside your webapp. |
||||||
|
|
||||||
|
Then compile the nextgraphweb package in dev mode: |
||||||
|
|
||||||
|
``` |
||||||
|
pnpm run -C ../../helpers/nextgraphweb builddev |
||||||
|
``` |
||||||
|
|
||||||
|
Then create your app, by example, with the command: |
||||||
|
|
||||||
|
``` |
||||||
|
npm create vite@latest |
||||||
|
``` |
||||||
|
|
||||||
|
change directory to where our app is located. and install dependencies, then run the dev server. |
||||||
|
|
||||||
|
``` |
||||||
|
npm install |
||||||
|
npm link ../../helpers/nextgraphweb |
||||||
|
npm run dev |
||||||
|
``` |
||||||
|
|
||||||
|
Due to the way `npm link` works, you will have to run this command again, after every time you use `npm install`. |
||||||
|
|
||||||
|
See the example code in [src/main.js](./src/main.js) |
||||||
|
|
||||||
|
## Example usage |
||||||
|
|
||||||
|
call : |
||||||
|
|
||||||
|
```javascript |
||||||
|
import { default as ng, init } from "nextgraphweb"; |
||||||
|
|
||||||
|
await init( |
||||||
|
(event) => { |
||||||
|
// callback |
||||||
|
// once you receive event.status == "loggedin" |
||||||
|
// you can use the full API |
||||||
|
}, |
||||||
|
true, // singleton: boolean (will your app create many docs in the system, or should it be launched as a unique instance) |
||||||
|
[] |
||||||
|
); //list of AccessRequests (for now, leave this empty) |
||||||
|
|
||||||
|
await ng.login(); // this will return false at the first attempt. but it will open the wallet login page so the user can login. |
||||||
|
// if you call it again later once the user has logged in already, it will return true, and nothing more will happen |
||||||
|
``` |
||||||
|
|
||||||
|
You can alternatively wrap the callback inside a Promise in order to wait for the "loggedin" event. |
||||||
|
|
||||||
|
```javascript |
||||||
|
import {default as ng, init} from "nextgraphweb"; |
||||||
|
|
||||||
|
let loggedin = new Promise( async (resolve) => { |
||||||
|
await init( (event) => { |
||||||
|
// callback |
||||||
|
// once you receive event.status == "loggedin" |
||||||
|
// you can use the full API |
||||||
|
if (event.status == "loggedin") resolve(event.session); |
||||||
|
else if (event.status == "cancelled" || event.status == "error") resolve(false); |
||||||
|
} |
||||||
|
, true // singleton: boolean (will your app create many docs in the system, or should it be launched as a unique instance) |
||||||
|
, []); //list of AccessRequests (for now, leave this empty) |
||||||
|
}); |
||||||
|
|
||||||
|
await ng.login(); // this will return false at the first attempt. but it will open the wallet login page so the user can login. |
||||||
|
// if you call it again later once the user has logged in already, it will return true, and nothing more will happen |
||||||
|
|
||||||
|
let session = await loggedin; |
||||||
|
if (session) { |
||||||
|
|
||||||
|
await ng.doc_create(session.session_id,...); |
||||||
|
|
||||||
|
await ng.sparql_query(session.session_id,...); |
||||||
|
|
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## License |
||||||
|
|
||||||
|
Licensed under either of |
||||||
|
|
||||||
|
- Apache License, Version 2.0 ([LICENSE-APACHE2](LICENSE-APACHE2) or http://www.apache.org/licenses/LICENSE-2.0) |
||||||
|
- MIT license ([LICENSE-MIT](LICENSE-MIT) or http://opensource.org/licenses/MIT) |
||||||
|
at your option. |
||||||
|
|
||||||
|
`SPDX-License-Identifier: Apache-2.0 OR MIT` |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
NextGraph received funding through the [NGI Assure Fund](https://nlnet.nl/assure) and the [NGI Zero Commons Fund](https://nlnet.nl/commonsfund/), both funds established by [NLnet](https://nlnet.nl/) Foundation with financial support from the European Commission's [Next Generation Internet](https://ngi.eu/) programme, under the aegis of DG Communications Networks, Content and Technology under grant agreements No 957073 and No 101092990, respectively. |
||||||
|
|
||||||
|
[license-image]: https://img.shields.io/badge/license-Apache2.0-blue.svg |
||||||
|
[license-link]: https://git.nextgraph.org/NextGraph/nextgraph-rs/raw/branch/master/LICENSE-APACHE2 |
||||||
|
[license-image2]: https://img.shields.io/badge/license-MIT-blue.svg |
||||||
|
[license-link2]: https://git.nextgraph.org/NextGraph/nextgraph-rs/src/branch/master/LICENSE-MIT |
||||||
@ -0,0 +1,75 @@ |
|||||||
|
{ |
||||||
|
"name": "@ng-org/web", |
||||||
|
"collaborators": [ |
||||||
|
"Niko PLP <niko@nextgraph.org>" |
||||||
|
], |
||||||
|
"description": "JS/TS SDK of NextGraph for third-party web apps", |
||||||
|
"version": "0.1.2", |
||||||
|
"license": "MIT/Apache-2.0", |
||||||
|
"repository": { |
||||||
|
"type": "git", |
||||||
|
"url": "https://git.nextgraph.org/NextGraph/nextgraph-rs" |
||||||
|
}, |
||||||
|
"type": "module", |
||||||
|
"files": ["dist"], |
||||||
|
"main": "./dist/ngweb.umd.cjs", |
||||||
|
"module": "./dist/ngweb.js", |
||||||
|
"types": "./dist/index.d.ts", |
||||||
|
"exports": { |
||||||
|
".": { |
||||||
|
"import":{ |
||||||
|
"types": "./dist/index.d.ts", |
||||||
|
"default": "./dist/ngweb.js" |
||||||
|
}, |
||||||
|
"require": { |
||||||
|
"types": "./dist/index.d.ts", |
||||||
|
"default": "./dist/ngweb.umd.cjs" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
"scripts": { |
||||||
|
"dev": "vite", |
||||||
|
"build": "tsc && vite build", |
||||||
|
"builddev": "tsc && cross-env NG_DEV=1 vite build", |
||||||
|
"preview": "vite preview" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"async-proxy": "^0.4.1", |
||||||
|
"remote-web-streams": "^0.2.0" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@types/node": "^18.7.10", |
||||||
|
"typescript": "~5.7.2", |
||||||
|
"vite": "^6.2.0", |
||||||
|
"vite-plugin-dts": "^4.5.3", |
||||||
|
"cross-env": "^7.0.3" |
||||||
|
}, |
||||||
|
"keywords": [ |
||||||
|
"crdt", |
||||||
|
"dapp", |
||||||
|
"decentralized", |
||||||
|
"e2ee", |
||||||
|
"local-first", |
||||||
|
"p2p", |
||||||
|
"semantic-web", |
||||||
|
"eventual-consistency", |
||||||
|
"json-ld", |
||||||
|
"markdown", |
||||||
|
"ocap", |
||||||
|
"vc", |
||||||
|
"offline-first", |
||||||
|
"p2p-network", |
||||||
|
"collaboration", |
||||||
|
"privacy-protection", |
||||||
|
"rdf", |
||||||
|
"rich-text-editor", |
||||||
|
"self-hosted", |
||||||
|
"sparql", |
||||||
|
"byzantine-fault-tolerance", |
||||||
|
"web3", |
||||||
|
"graph-database", |
||||||
|
"database", |
||||||
|
"triplestore" |
||||||
|
], |
||||||
|
"homepage": "https://nextgraph.org" |
||||||
|
} |
||||||
@ -0,0 +1,194 @@ |
|||||||
|
// 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.
|
||||||
|
|
||||||
|
import { createAsyncProxy } from "async-proxy"; |
||||||
|
import { RemoteReadableStream } from 'remote-web-streams'; |
||||||
|
|
||||||
|
let initialized: null | Window = null; |
||||||
|
|
||||||
|
const css = `.nextgraph-auth-modal {
|
||||||
|
visibility: hidden; |
||||||
|
background-color: rgba(0, 0, 0, 0.4); |
||||||
|
|
||||||
|
display: grid; |
||||||
|
place-items: center; |
||||||
|
|
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
|
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.nextgraph-auth-modal.nextgraph-auth-modal--fade { |
||||||
|
opacity: 0; |
||||||
|
transition: 0.2s; |
||||||
|
} |
||||||
|
|
||||||
|
.nextgraph-auth-modal.nextgraph-auth-modal--active { |
||||||
|
visibility: visible; |
||||||
|
z-index: 9999; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.nextgraph-auth-modal__content { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.nextgraph-auth-modal.nextgraph-auth-modal--active.nextgraph-auth-modal--fade { |
||||||
|
opacity: 1; |
||||||
|
animation-name: fadeInOpacity; |
||||||
|
animation-iteration-count: 1; |
||||||
|
animation-timing-function: ease-in; |
||||||
|
animation-duration: 0.5s; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes fadeInOpacity { |
||||||
|
0% { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
100% { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
}`;
|
||||||
|
|
||||||
|
const html = ` |
||||||
|
<div id="nextgraph-auth" class="nextgraph-auth-modal nextgraph-auth-modal--fade"> |
||||||
|
<div class="nextgraph-auth-modal__content"> |
||||||
|
<iframe id="nextgraph-auth-iframe" scrolling="auto" frameborder="0" |
||||||
|
style="position: relative; height: 100%; width: 100%; overflow:auto;"> |
||||||
|
</iframe> |
||||||
|
</div> |
||||||
|
</div>`;
|
||||||
|
|
||||||
|
// const javascript = `
|
||||||
|
// `;
|
||||||
|
|
||||||
|
function addTags() { |
||||||
|
const style = window.document.createElement('style'); |
||||||
|
style.textContent = css; |
||||||
|
window.document.head.append(style); |
||||||
|
|
||||||
|
let body = document.getElementsByTagName("body")[0]; |
||||||
|
body.insertAdjacentHTML("afterbegin", html); |
||||||
|
|
||||||
|
// const js = window.document.createElement('script');
|
||||||
|
// js.type = "text/javascript";
|
||||||
|
// js.textContent = javascript;
|
||||||
|
// body.append(js);
|
||||||
|
} |
||||||
|
|
||||||
|
const iframe_config = 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"} ; |
||||||
|
// when developing net-auth
|
||||||
|
//const iframe_config = {src:"http://localhost:14402/?o=", origin: "http://localhost:14402"};
|
||||||
|
// to test ngnet
|
||||||
|
//const iframe_config = {src:"http://127.0.0.1:3033/auth/?o=", origin: "http://127.0.0.1:3033"};
|
||||||
|
|
||||||
|
export const init = async function(callback:Function, singleton:boolean, access_requests:any) { |
||||||
|
if (initialized === null) { |
||||||
|
if (!window) throw new Error("init(callback,..) can only be called from a browser's window"); |
||||||
|
let origin = location.origin; |
||||||
|
let encoded_origin = encodeURIComponent(origin); |
||||||
|
addTags(); |
||||||
|
let iframe: HTMLIFrameElement = <HTMLIFrameElement>window.document.getElementById('nextgraph-auth-iframe'); |
||||||
|
if (iframe) { |
||||||
|
return new Promise(async (resolve) => { |
||||||
|
iframe.addEventListener("load", async function() { |
||||||
|
initialized = this.contentWindow; |
||||||
|
const { readable, writablePort } = new RemoteReadableStream(); |
||||||
|
initialized?.postMessage({ method: "init", singleton, access_requests, port: writablePort }, iframe_config.origin, [writablePort]); |
||||||
|
const reader = readable.getReader(); |
||||||
|
resolve(true); |
||||||
|
for (var msg; msg = await reader.read(); ) { |
||||||
|
if (msg.done) break; |
||||||
|
if (msg.value.status == "error") { |
||||||
|
console.error(msg.value.error); |
||||||
|
} else if ( msg.value.status == "cancelled") { |
||||||
|
hide_nextgraph_auth(); |
||||||
|
} else if (msg.value.status == "loggedin") { |
||||||
|
hide_nextgraph_auth(); |
||||||
|
} |
||||||
|
await (callback)(msg.value); |
||||||
|
} |
||||||
|
}); |
||||||
|
iframe.src = `${iframe_config.src}${encoded_origin}`; |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function show_nextgraph_auth() { |
||||||
|
window.document.getElementById("nextgraph-auth")?.classList.add('nextgraph-auth-modal--active'); |
||||||
|
} |
||||||
|
|
||||||
|
function hide_nextgraph_auth() { |
||||||
|
window.document.getElementById("nextgraph-auth")?.classList.remove('nextgraph-auth-modal--active'); |
||||||
|
}
|
||||||
|
|
||||||
|
async function rpc( method:string, args?: any) : Promise<any> { |
||||||
|
const { readable, writablePort } = new RemoteReadableStream(); |
||||||
|
//console.log("POSTING",method, args);
|
||||||
|
if (method==="doc_subscribe") { |
||||||
|
let callback = args[2]; |
||||||
|
let new_args = [args[0],args[1]]; |
||||||
|
initialized?.postMessage({ method, args:new_args, port: writablePort }, iframe_config.origin, [writablePort]); |
||||||
|
const reader = readable.getReader(); |
||||||
|
let unsub = new Promise(async (resolve)=> { |
||||||
|
resolve(()=>{
|
||||||
|
// unsub function that does nothing.
|
||||||
|
//TODO: implement it
|
||||||
|
}); |
||||||
|
for (var msg; msg = await reader.read(); ) { |
||||||
|
if (msg.done) break; |
||||||
|
if (msg.value.error) { |
||||||
|
throw new Error(msg.value.ret); |
||||||
|
} else if (msg.value.stream) { |
||||||
|
(callback)(msg.value.ret); |
||||||
|
} |
||||||
|
// TODO: deal with end of stream
|
||||||
|
} |
||||||
|
}); |
||||||
|
return unsub; |
||||||
|
|
||||||
|
} else { |
||||||
|
initialized?.postMessage({ method, args, port: writablePort }, iframe_config.origin, [writablePort]); |
||||||
|
const reader = readable.getReader(); |
||||||
|
let ret = await reader.read(); |
||||||
|
//console.log(ret)
|
||||||
|
await reader.read(); // the close
|
||||||
|
if (ret.value.ok)
|
||||||
|
return ret.value.ret; |
||||||
|
else |
||||||
|
throw new Error(ret.value.ret); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
const handler = { |
||||||
|
async apply(_target: object, path: PropertyKey[], _caller: any, args?: any) :Promise<any> { |
||||||
|
if (initialized === null) { |
||||||
|
throw new Error("you must call init() first (and once)"); |
||||||
|
} |
||||||
|
if (path[0] === "login") { |
||||||
|
if (await rpc("login") !== true) { |
||||||
|
show_nextgraph_auth(); |
||||||
|
return false; |
||||||
|
} else { |
||||||
|
return true; |
||||||
|
} |
||||||
|
} else { |
||||||
|
return await rpc(<string>path[0], args); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
export const ng = createAsyncProxy({}, handler); |
||||||
@ -0,0 +1 @@ |
|||||||
|
/// <reference types="vite/client" />
|
||||||
@ -0,0 +1,24 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"target": "ES2020", |
||||||
|
"useDefineForClassFields": true, |
||||||
|
"module": "ESNext", |
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"], |
||||||
|
"skipLibCheck": true, |
||||||
|
|
||||||
|
/* Bundler mode */ |
||||||
|
"moduleResolution": "bundler", |
||||||
|
"allowImportingTsExtensions": true, |
||||||
|
"isolatedModules": true, |
||||||
|
"moduleDetection": "force", |
||||||
|
"noEmit": true, |
||||||
|
|
||||||
|
/* Linting */ |
||||||
|
"strict": true, |
||||||
|
"noUnusedLocals": true, |
||||||
|
"noUnusedParameters": true, |
||||||
|
"noFallthroughCasesInSwitch": true, |
||||||
|
"noUncheckedSideEffectImports": true |
||||||
|
}, |
||||||
|
"include": ["src"] |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import { resolve } from 'path'; |
||||||
|
import { defineConfig } from 'vite'; |
||||||
|
import dts from 'vite-plugin-dts'; |
||||||
|
|
||||||
|
// https://vitejs.dev/guide/build.html#library-mode
|
||||||
|
export default defineConfig({ |
||||||
|
build: { |
||||||
|
lib: { |
||||||
|
entry: resolve(__dirname, 'src/index.ts'), |
||||||
|
name: 'ngweb', |
||||||
|
fileName: 'ngweb', |
||||||
|
}, |
||||||
|
}, |
||||||
|
envPrefix: ["VITE_", "NG_"], |
||||||
|
plugins: [dts()], |
||||||
|
}); |
||||||
Loading…
Reference in new issue