fix task #23 conection status. and merge into master

pull/23/head
Niko PLP 2 months ago
commit 3acb85b3ff
  1. 1
      .gitignore
  2. 18
      Cargo.lock
  3. 3
      Cargo.toml
  4. 36
      docker/Dockerfile.alpine
  5. 46
      docker/Dockerfile.fedora
  6. 47
      docker/Dockerfile.ubuntu
  7. 37
      nextgraph/src/local_broker.rs
  8. 3
      ng-app/src-tauri/Cargo.toml
  9. 3
      ng-app/src-tauri/gen/android/buildSrc/src/main/java/org/nextgraph/ng_app_native/kotlin/BuildTask.kt
  10. 49
      ng-app/src-tauri/src/lib.rs
  11. 9
      ng-app/src/App.svelte
  12. 21
      ng-app/src/api.ts
  13. 0
      ng-app/src/apps/JsonLdEditor.svelte
  14. 2
      ng-app/src/assets/nextgraph-nofill.svg
  15. 873
      ng-app/src/classes.ts
  16. 90
      ng-app/src/lib/CenteredLayout.svelte
  17. 187
      ng-app/src/lib/DataClassIcon.svelte
  18. 42
      ng-app/src/lib/FullLayout.svelte
  19. 4
      ng-app/src/lib/Home.svelte
  20. 34
      ng-app/src/lib/Install.svelte
  21. 798
      ng-app/src/lib/Login.svelte
  22. 7
      ng-app/src/lib/NoWallet.svelte
  23. 1
      ng-app/src/lib/Test.svelte
  24. 120
      ng-app/src/lib/ZeraIcon.svelte
  25. 78
      ng-app/src/lib/components/CopyToClipboard.svelte
  26. 34
      ng-app/src/lib/components/Logo.svelte
  27. 76
      ng-app/src/lib/components/PasswordInput.svelte
  28. 16
      ng-app/src/routes/Home.svelte
  29. 8
      ng-app/src/routes/Install.svelte
  30. 2
      ng-app/src/routes/NURI.svelte
  31. 2
      ng-app/src/routes/NotFound.svelte
  32. 35
      ng-app/src/routes/User.svelte
  33. 2
      ng-app/src/routes/UserRegistered.svelte
  34. 2360
      ng-app/src/routes/WalletCreate.svelte
  35. 10
      ng-app/src/routes/WalletLogin.svelte
  36. 143
      ng-app/src/store.ts
  37. 28
      ng-app/src/styles.css
  38. 2727
      ng-app/src/wallet_emojis.ts
  39. 15
      ng-app/src/worker.js
  40. 629
      ng-app/src/zeras.ts
  41. 8
      ng-app/tailwind.config.cjs
  42. 2
      ng-app/tsconfig.json
  43. 4
      ng-net/src/app_protocol.rs
  44. 4
      ng-oxigraph/src/oxigraph/sparql/update.rs
  45. 1
      ng-repo/src/errors.rs
  46. 5
      ng-repo/src/types.rs
  47. 28
      ng-repo/src/utils.rs
  48. 1
      ng-sdk-js/Cargo.toml
  49. 53
      ng-sdk-js/src/lib.rs
  50. 26
      ng-wallet/src/bip39.rs
  51. 7
      ng-wallet/src/lib.rs
  52. 3
      ng-wallet/src/types.rs
  53. 5
      ngaccount/.env
  54. 15
      ngaccount/README.md
  55. 7
      ngaccount/src/main.rs
  56. 4
      ngaccount/web/src/routes/Create.svelte
  57. 4
      ngaccount/web/src/routes/Delete.svelte
  58. 2
      ngone/web/src/routes/Install.svelte
  59. 2
      ngone/web/src/routes/WalletCreate.svelte

1
.gitignore vendored

@ -14,3 +14,4 @@ node_modules
*/tests/*.mnemonic
*/ng-example/*
.vscode/settings.json
.env.local

18
Cargo.lock generated

@ -3290,6 +3290,7 @@ dependencies = [
"serde",
"serde_bytes",
"serde_json",
"sys-locale",
"tauri",
"tauri-build",
"tauri-plugin-window",
@ -3408,7 +3409,7 @@ dependencies = [
"serde",
"sha1",
"sha2 0.10.8",
"siphasher 0.3.10",
"siphasher 1.0.1",
"thiserror",
"zstd",
]
@ -3449,7 +3450,7 @@ dependencies = [
[[package]]
name = "ng-rocksdb"
version = "0.21.0-ngpreview.4"
source = "git+https://git.nextgraph.org/NextGraph/rust-rocksdb.git?branch=master#e566341c319eead6637b1aecce5e92136e946ae5"
source = "git+https://git.nextgraph.org/NextGraph/rust-rocksdb.git?branch=master#f1ce2e345f3d729350a02bcffb47c526674edd85"
dependencies = [
"bindgen",
"bzip2-sys",
@ -3482,6 +3483,7 @@ dependencies = [
"serde_bare",
"serde_bytes",
"serde_json",
"sys-locale",
"wasm-bindgen",
"wasm-bindgen-futures",
"wasm-bindgen-test",
@ -5352,6 +5354,18 @@ dependencies = [
"unicode-xid",
]
[[package]]
name = "sys-locale"
version = "0.3.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e801cf239ecd6ccd71f03d270d67dd53d13e90aab208bf4b8fe4ad957ea949b0"
dependencies = [
"js-sys",
"libc",
"wasm-bindgen",
"web-sys",
]
[[package]]
name = "system-configuration"
version = "0.6.0"

@ -38,6 +38,9 @@ documentation = "https://docs.nextgraph.org/"
lto = true
opt-level = 's'
[profile.dev]
opt-level = 2
[patch.crates-io]
# tauri = { git = "https://github.com/simonhyll/tauri.git", branch="fix/ipc-mixup"}
# tauri = { git = "https://git.nextgraph.org/NextGraph/tauri.git", branch="alpha.11-nextgraph", features = ["no-ipc-custom-protocol"] }

@ -0,0 +1,36 @@
# Use rust's latest alpine image as base image.
FROM rust:alpine
ENV LD_LIBRARY_PATH=/lib:$LD_LIBRARY_PATH
RUN apk add git nodejs npm llvm-static llvm-dev clang-static clang-dev openssl openssl-dev perl gtk+3.0-dev webkit2gtk-dev librsvg-dev curl wget pkgconf eudev-dev build-base zlib-static bzip2-static build-base ncursers-static && \
# Install Rust and Node.js tools
cargo install cargo-watch && \
cargo install wasm-pack --git https://github.com/rustwasm/wasm-pack.git --rev c2b663f25abe50631a236d57a8c6d7fd806413b2 && \
cargo install tauri-cli --version "2.0.0-alpha.11" --locked && \
npm install -g pnpm
# Clone the nextgraph-rs repository
RUN git clone https://git.nextgraph.org/NextGraph/nextgraph-rs.git && \
cd /nextgraph-rs/ng-sdk-js && \
wasm-pack build --target bundler && npm install --no-save pkg &&
# Build ng-app web version
cd /nextgraph-rs/ng-app && pnpm install && pnpm webfilebuild
# From here the build fails due to llvm / clang linking issues...
#
# WORKDIR /nextgraph-rs
## Build the nextgraph-rs project and its subprojects
# RUN cd /nextgraph-rs && git pull && cargo update -p ng-rocksdb && \
# cargo build -r && \
# cargo build -r -p ngd && \
# cargo build -r -p ngcli
# TODO: Build the platform-specific ng-app versions
# cd /nextgraph-rs/ng-app && cargo tauri build --target x86_64-unknown-linux-gnu
# ...
# TODO: To remove the image size, remove ~/.cargo, ~/.rustup, and the build dependencies
# To build the image, run:
# docker build -t nextgraph-rs:alpine -f docker/Dockerfile.alpine .

@ -0,0 +1,46 @@
# Use fedora:40 as base image
FROM fedora:40
# Set the environment variable to ensure cargo is available in the PATH
ENV PATH="/root/.cargo/bin:${PATH}"
SHELL ["/bin/bash", "-c"]
# Install the required packages and Rust
RUN dnf install -y git clang-devel webkit2gtk4.1-devel openssl openssl-devel curl wget file libappindicator-gtk3-devel librsvg2-devel perl && \
dnf group install -y "C Development Tools and Libraries" && \
# Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | bash -s -- -y && \
# Node.js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash && \
export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" && \
nvm install 22 && \
npm install -g pnpm && \
# Clear Cache
rm -rf /var/cache/dnf && \
# Install Rust and Node.js tools
cargo install cargo-watch && \
cargo install wasm-pack --git https://github.com/rustwasm/wasm-pack.git --rev c2b663f25abe50631a236d57a8c6d7fd806413b2 && \
cargo install tauri-cli --version "2.0.0-alpha.11" --locked && \
# Clone the nextgraph-rs repository (TODO: It might be better to put this into a seperate RUN command to avoid rebuilding the image if the repository changes)
git clone https://git.nextgraph.org/NextGraph/nextgraph-rs.git && \
# Build sdk and ng-app web version
cd /nextgraph-rs/ng-sdk-js && wasm-pack build --target bundler && npm install --no-save pkg && \
cd /nextgraph-rs/ng-app && pnpm install && pnpm webfilebuild
# Build the nextgraph-rs project
RUN export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" && \
cd /nextgraph-rs && git pull && cargo update -p ng-rocksdb && \
cargo build -r && \
cargo build -r -p ngd && \
cargo build -r -p ngcli
# TODO: Build the platform-specific ng-app versions
# cd /nextgraph-rs/ng-app && cargo tauri build --target x86_64-unknown-linux-gnu
# ...
# TODO: To remove the image size, remove ~/.cargo, ~/.rustup, and the build dependencies
# To build the image, run:
# docker build -t nextgraph-rs:fedora -f docker/Dockerfile.fedora .

@ -0,0 +1,47 @@
# Use ubuntu 22.04 as base image
FROM ubuntu:22.04
SHELL ["/bin/bash", "-c"]
# Set the environment variable to ensure cargo is available in the PATH
ENV PATH="/root/.cargo/bin:${PATH}"
# Install the required packages and Rust
RUN apt update && \
apt upgrade -y && \
apt install -y git llvm-dev libclang-dev clang libssl-dev perl libappindicator3-dev libwebkit2gtk-4.0-dev librsvg2-dev curl wget pkg-config libudev-dev build-essential && \
rm -rf /var/cache/apt && \
# Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && \
# Node.js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash && \
export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" && \
nvm install 22 && \
npm install -g pnpm && \
# Install Rust and Node.js tools
cargo install cargo-watch && \
cargo install wasm-pack --git https://github.com/rustwasm/wasm-pack.git --rev c2b663f25abe50631a236d57a8c6d7fd806413b2 && \
cargo install tauri-cli --version "2.0.0-alpha.11" --locked && \
npm install -g pnpm && \
# Clone the nextgraph-rs repository (TODO: It might be better to put this into a seperate RUN command to avoid rebuilding the image if the repository changes)
git clone https://git.nextgraph.org/NextGraph/nextgraph-rs.git && \
# Build sdk and ng-app web version
cd /nextgraph-rs/ng-sdk-js && wasm-pack build --target bundler && npm install --no-save pkg && \
cd /nextgraph-rs/ng-app && \
pnpm install && pnpm webfilebuild
# Build the nextgraph-rs project and its subprojects
WORKDIR /nextgraph-rs
RUN cargo build -r && \
cargo build -r -p ngd && \
cargo build -r -p ngcli
# TODO: Build the platform-specific ng-app versions
# WORKDIR /nextgraph-rs/ng-app
# RUN cargo tauri build --target x86_64-unknown-linux-gnu
# TODO: To remove the image size, remove ~/.cargo, ~/.rustup, and the build dependencies
# To build the image, run:
# docker build -t nextgraph-rs:ubuntu -f docker/Dockerfile.ubuntu .

@ -40,6 +40,7 @@ use ng_verifier::types::*;
use ng_verifier::verifier::Verifier;
use ng_wallet::emojis::encode_pazzle;
use ng_wallet::bip39::encode_mnemonic;
use ng_wallet::{create_wallet_first_step_v0, create_wallet_second_step_v0, types::*};
#[cfg(not(target_family = "wasm"))]
@ -1555,6 +1556,27 @@ pub fn wallet_open_with_pazzle(
Ok(opened_wallet)
}
#[doc(hidden)]
/// This is a bit hard to use as the mnemonic words are encoded in u16.
/// prefer the function wallet_open_with_mnemonic_words
pub fn wallet_open_with_mnemonic(
wallet: &Wallet,
mnemonic: Vec<u16>,
pin: [u8; 4],
) -> Result<SensitiveWallet, NgError> {
if mnemonic.len() != 12 {
return Err(NgError::InvalidMnemonic);
}
// Convert from vec to array.
let mut mnemonic_arr = [0u16; 12];
for (place, element) in mnemonic_arr.iter_mut().zip(mnemonic.iter()) {
*place = *element;
}
let opened_wallet = ng_wallet::open_wallet_with_mnemonic(wallet, mnemonic_arr, pin)?;
Ok(opened_wallet)
}
/// Opens a wallet by providing an ordered list of words, and the pin.
///
/// If you are opening a wallet that is already known to the LocalBroker, you must then call [wallet_was_opened].
@ -1569,6 +1591,21 @@ pub fn wallet_open_with_pazzle_words(
wallet_open_with_pazzle(wallet, encode_pazzle(pazzle_words)?, pin)
}
/// Opens a wallet by providing an ordered list of mnemonic words, and the pin.
///
/// If you are opening a wallet that is already known to the LocalBroker, you must then call [wallet_was_opened].
/// Otherwise, if you are importing, then you must call [wallet_import].
pub fn wallet_open_with_mnemonic_words(
wallet: &Wallet,
mnemonic: &Vec<String>,
pin: [u8; 4],
) -> Result<SensitiveWallet, NgError> {
let encoded: Vec<u16> = encode_mnemonic(mnemonic)?;
wallet_open_with_mnemonic(wallet, encoded, pin)
}
/// Imports a wallet into the LocalBroker so the user can then access its content.
///
/// the wallet should have been previous opened with [wallet_open_with_pazzle_words].

@ -27,7 +27,8 @@ tauri-build = { version = "2.0.0-alpha.8", features = [] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
serde_bytes = "0.11.7"
async-std = { version = "1.12.0", features = ["attributes", "unstable"] }
async-std = { version = "1.12.0", features = ["attributes", "unstable"] }
sys-locale = { version = "0.3.1" }
ng-async-tungstenite = { git = "https://git.nextgraph.org/NextGraph/async-tungstenite.git", branch = "nextgraph", features = ["async-std-runtime", "async-native-tls"] }
tauri = { version = "2.0.0-alpha.14", features = [] }
tauri-plugin-window = "2.0.0-alpha.1"

@ -16,7 +16,8 @@ open class BuildTask : DefaultTask() {
@TaskAction
fun assemble() {
val executable = """/Users/nl/.cargo/bin/cargo-tauri""";
val homePath = System.getProperty("user.home");
val executable = "$homePath/.cargo/bin/cargo-tauri";
try {
runTauriCli(executable)
} catch (e: Exception) {

@ -13,6 +13,7 @@ use std::fs::write;
use async_std::stream::StreamExt;
use serde::{Deserialize, Serialize};
use serde_json::Value;
use sys_locale::get_locales;
use tauri::scope::ipc::RemoteDomainAccessScope;
use tauri::utils::config::WindowConfig;
use tauri::{path::BaseDirectory, App, Manager};
@ -38,6 +39,27 @@ pub use mobile::*;
pub type SetupHook = Box<dyn FnOnce(&mut App) -> Result<(), Box<dyn std::error::Error>> + Send>;
#[tauri::command(rename_all = "snake_case")]
async fn locales() -> Result<Vec<String>, ()> {
Ok(get_locales()
.filter_map(|lang| {
if lang == "C" || lang == "c" {
None
} else {
let mut split = lang.split('.');
let code = split.next().unwrap();
let code = code.replace("_", "-");
let mut split = code.rsplitn(2, '-');
let country = split.next().unwrap();
Some(match split.next() {
Some(next) => format!("{}-{}", next, country.to_uppercase()),
None => country.to_string(),
})
}
})
.collect())
}
#[tauri::command(rename_all = "snake_case")]
async fn test(app: tauri::AppHandle) -> Result<(), ()> {
let path = app
@ -86,6 +108,30 @@ async fn wallet_open_with_pazzle(
Ok(wallet)
}
#[tauri::command(rename_all = "snake_case")]
async fn wallet_open_with_mnemonic(
wallet: Wallet,
mnemonic: Vec<u16>,
pin: [u8; 4],
_app: tauri::AppHandle,
) -> Result<SensitiveWallet, String> {
let wallet = nextgraph::local_broker::wallet_open_with_mnemonic(&wallet, mnemonic, pin)
.map_err(|e| e.to_string())?;
Ok(wallet)
}
#[tauri::command(rename_all = "snake_case")]
async fn wallet_open_with_mnemonic_words(
wallet: Wallet,
mnemonic_words: Vec<String>,
pin: [u8; 4],
_app: tauri::AppHandle,
) -> Result<SensitiveWallet, String> {
let wallet = nextgraph::local_broker::wallet_open_with_mnemonic_words(&wallet, &mnemonic_words, pin)
.map_err(|e| e.to_string())?;
Ok(wallet)
}
#[tauri::command(rename_all = "snake_case")]
async fn wallet_get_file(wallet_name: String, app: tauri::AppHandle) -> Result<(), String> {
let ser = nextgraph::local_broker::wallet_get_file(&wallet_name)
@ -490,9 +536,12 @@ impl AppBuilder {
.plugin(tauri_plugin_window::init())
.invoke_handler(tauri::generate_handler![
test,
locales,
wallet_gen_shuffle_for_pazzle_opening,
wallet_gen_shuffle_for_pin,
wallet_open_with_pazzle,
wallet_open_with_mnemonic,
wallet_open_with_mnemonic_words,
wallet_was_opened,
wallet_create,
wallet_read_file,

@ -19,19 +19,20 @@
active_session,
close_active_session,
disconnections_subscribe,
select_default_lang,
} from "./store";
import Home from "./routes/Home.svelte";
import Test from "./routes/Test.svelte";
import URI from "./routes/URI.svelte";
import NURI from "./routes/NURI.svelte";
import NotFound from "./routes/NotFound.svelte";
import WalletCreate from "./routes/WalletCreate.svelte";
import Invitation from "./routes/Invitation.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";
import Install from "./routes/Install.svelte";
import ng from "./api";
@ -44,7 +45,7 @@
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);
routes.set(/^\/did:ng(.*)/i, NURI);
routes.set("*", NotFound);
let unsubscribe = () => {};
@ -60,7 +61,9 @@
onMount(async () => {
try {
await disconnections_subscribe();
await select_default_lang();
} catch (e) {
console.error(e);
//console.log("called disconnections_subscribe twice");
}
let tauri_platform = import.meta.env.TAURI_PLATFORM;

@ -16,6 +16,7 @@ const mapping = {
"wallet_gen_shuffle_for_pazzle_opening": ["pazzle_length"],
"wallet_gen_shuffle_for_pin": [],
"wallet_open_with_pazzle": ["wallet","pazzle","pin"],
"wallet_open_with_mnemonic_words": ["wallet","mnemonic_words","pin"],
"wallet_was_opened": ["opened_wallet"],
"wallet_create": ["params"],
"wallet_read_file": ["file"],
@ -97,6 +98,19 @@ const handler = {
};
//console.log(info,res);
return res;
} else if (path[0] === "locales") {
let from_rust = await tauri.invoke("locales",{});
let from_js = window.navigator.languages;
console.log(from_rust,from_js);
for (let lang of from_js) {
let split = lang.split("-");
if (split[1]) {
lang = split[0] + "-" + split[1].toUpperCase();
}
if (!from_rust.includes(lang)) { from_rust.push(lang);}
}
return from_rust;
} else if (path[0] === "disconnections_subscribe") {
let { getCurrent } = await import("@tauri-apps/plugin-window");
let callback = args[0];
@ -169,7 +183,7 @@ const handler = {
return false;
} else if (path[0] === "get_local_url") {
return false;
} else if (path[0] === "wallet_open_with_pazzle") {
} else if (path[0] === "wallet_open_with_pazzle" || path[0] === "wallet_open_with_mnemonic_words") {
let arg:any = {};
args.map((el,ix) => arg[mapping[path[0]][ix]]=el)
let img = Array.from(new Uint8Array(arg.wallet.V0.content.security_img));
@ -177,9 +191,8 @@ const handler = {
arg.wallet = {V0:{id:arg.wallet.V0.id, sig:arg.wallet.V0.sig, content:{}}};
Object.assign(arg.wallet.V0.content,old_content);
arg.wallet.V0.content.security_img = img;
return tauri.invoke(path[0],arg)
}
else {
return tauri.invoke(path[0],arg);
} else {
let arg = {};
args.map((el,ix) => arg[mapping[path[0]][ix]]=el)
return tauri.invoke(path[0],arg)

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

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

@ -0,0 +1,873 @@
// Copyright (c) 2022-2024 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.
// "post/rich", "post/md", "post/text", "post/html", "post/asciidoc", "page", "code", "code/*", "app", "app/z", "class", "schema", "schema/owl|rdfs|shacl|shex", "service", "service/rust", "service/deno", "contract", "app/n:xxx.xx.xx:", "app/o:",
// "query/sparql", "query/graphql", "query/text", "query/web",
// "data/graph", "data/json", "data/array", "data/map", "data/xml", "data/table", "data/collection", "data/board", "data/grid", "data/geomap",
// "e/email", "e/web", "e/http://[url of class in ontology]", "e/rdf" (read-only cache of RDF fetched from web2.0)
// "mc/text", "mc/link", "mc/card", "mc/pad",
// "doc/diagram","doc/chart", "doc/pdf", "doc/odf", "doc/latex", "doc/ps", "doc/music", "doc/maths", "doc/chemistry", "doc/braille", "doc/ancientscript",
// "media/image", "media/reel", "media/album", "media/video", "media/audio", "media/song", "media/subtitle", "media/overlay",
// "social/channel", "social/stream", "social/contact", "social/event", "social/calendar", "social/scheduler", "social/reaction"
// "prod/task", "prod/project", "prod/issue", "prod/form", "prod/filling", "prod/cad", "prod/slides", "prod/question", "prod/answer", "prod/poll", "prod/vote"
// "file", "file/iana/*", "file/gimp", "file/inkscape", "file/kdenlive", "file/blender", "file/openscad", "file/lyx", "file/scribus", "file/libreoffice",
// application/vnd.api+json
// application/activity+json
// epub, dejavu,
// animation: snap, lottie, smil editor: https://github.com/HaikuTeam/animator/
export const official_classes = {
"post/rich": {
"ng:crdt": "YXml",
"ng:n": "Post - Rich Text", // editor: y-ProseMirror, viewer: https://www.npmjs.com/package/prosemirror-to-html-js or https://prosemirror.net/docs/ref/version/0.4.0.html#toDOM https://prosemirror.net/docs/ref/version/0.4.0.html#toHTML
"ng:a": "A Post with Rich Text, including images, links, formatted text, and embeds of other content",
"ng:o": "n:g:z:post:rich",
"ng:w": "n:g:z:post_rich_editor",
"ng:x": {
"as":true,
},
"ng:compat": ["as:Article"],
},
"post/md": {
"ng:crdt": "YXml",
"ng:n": "Post - MarkDown", // editor y-MilkDown, viewer: https://github.com/wooorm/markdown-rs
"ng:a": "A Post with MarkDown, including images, links, formatted text, and embeds of other content",
"ng:o": "n:g:z:post:md",
"ng:w": "n:g:z:post_md_editor",
"ng:x": {
"as":true,
},
"ng:compat": ["file/iana/text/markdown", "code/markdown","as:Article"],
},
"post/text": {
"ng:crdt": "YText",
"ng:n": "Post - Plain Text",
"ng:a": "A Post with Plain Text",
"ng:o": "n:g:z:post:text",
"ng:w": "n:g:z:code_editor",
"ng:x": {
"as":true,
},
"ng:compat": ["file/iana/text/plain", "code/plaintext","as:Article"],
},
"post/html": {
"ng:crdt": "YXml",
"ng:n": "Post - TinyMCE",
"ng:x": {
"as":true,
},
"ng:a": "A Post based on TinyMCE, including images, links, formatted text, and embeds of other content",
"ng:compat": ["as:Article"],
},
"post/asciidoc": { // display with https://github.com/asciidoctor/asciidoctor.js/
"ng:crdt": "YText",
"ng:n": "Post - AsciiDoc",
"ng:a": "A Post based on AsciiDoc format",
"ng:x": {
"as":true,
},
"ng:compat": ["as:Article"],
},
"page": {
"ng:crdt": "YXml",
"ng:n": "Page", // based on GrapeJS, VvvebJs, or Astro ?
"ng:a": "A Page and Site builder",
"ng:compat": [],
},
"code": {
"ng:crdt": "YText",
"ng:n": "Source Code", // edited with CodeMirror, displayed with highlight.js
"ng:a": "A Source Code file. many languages supported",
"ng:o": "n:g:z:pre",
"ng:w": "n:g:z:code_editor",
"ng:compat": ["code/*","file/iana/text/javascript","file/iana/text/css","file/iana/text/html","file/iana/text/markdown", "file/iana/application/xml", "file/iana/application/yaml", "file/iana/text/xml", "file/iana/application/xhtml+xml"],
},
"app": {
"ng:n": "Official App",
"ng:a": "App provided by NextGraph platform",
},
"app/z": {
"ng:crdt": "Elmer",
"ng:n": "Application", // Editor: Monaco
"ng:a": "Create an Application based on NextGraph Framework",
"ng:o": "n:g:z:app_store",
"ng:w": "n:g:z:app_editor",
"ng:include": ["schema/*","service/*","code","file"],
"ng:compat": ["code/svelte"],
},
"class": {
"ng:crdt": "Graph",
"ng:n": "Class",
"ng:a": "Define a custom Class for your data",
"ng:x": {
"rdfs":true,
},
"ng:compat": ["rdfs:Class"],
},
"schema/rdfs": {
"ng:crdt": "Graph",
"ng:n": "Schema - RDFS",
"ng:a": "Define the Schema, Ontology or Vocabulary for your data and the relations between them, with RDFS",
"ng:o": "n:g:z:json_ld_editor", // default viewer
"ng:w": "n:g:z:ontology_editor", // default editor
"ng:x": {
"rdfs":true,
},
"ng:include": ["data/graph"],
"ng:compat": ["rdfs:*","class"],
},
"schema/owl": { // display with https://github.com/VisualDataWeb/WebVOWL
"ng:crdt": "Graph",
"ng:n": "Schema - OWL",
"ng:a": "Define the Schema, Ontology or Vocabulary for your data and the relations between them, with OWL",
"ng:o": "n:g:z:owl_viewer", // default viewer
"ng:w": "n:g:z:ontology_editor", // default editor
"ng:x": {
"owl":true,
},
"ng:include": ["data/graph"],
"ng:compat": ["owl:Ontology"],
},
"schema/shacl": {
"ng:crdt": "Graph",
"ng:n": "Schema - SHACL",
"ng:a": "Define the Schema, Ontology or Vocabulary for your data and the relations between them, with SHACL",
"ng:o": "n:g:z:json_ld_editor", // default viewer
"ng:w": "n:g:z:ontology_editor", // default editor
"ng:x": {
"sh":true,
},
"ng:include": ["data/graph"],
"ng:compat": ["sh:Shape", "file/iana/text/shaclc" ],
},
"schema/shex": {
"ng:crdt": "Graph",
"ng:n": "Schema - SHEX",
"ng:a": "Define the Schema, Ontology or Vocabulary for your data and the relations between them, with SHEX",
"ng:o": "n:g:z:json_ld_editor", // default viewer
"ng:w": "n:g:z:ontology_editor", // default editor
"ng:x": {
"shex":true,
},
"ng:include": ["data/graph"],
"ng:compat": ["shex:*", "file/iana/text/shex", "code/shexc" ],
},
"service": {
"ng:n": "Internal Service",
"ng:a": "Service provided by NextGraph framework",
"ng:o": "n:g:z:service_invoke", // default viewer
},
"service/rust": {
"ng:crdt": "YText",
"ng:n": "Service - Rust", // edited with CodeMirror, displayed with highlight.js
"ng:a": "Service written in Rust and compiled to WASM",
"ng:o": "external_service_invoke", // default viewer
"ng:w": "n:g:z:service_editor", // default editor
"ng:compat": ["code/rust", "file/iana/application/wasm"],
},
"service/deno": {
"ng:crdt": "YText",
"ng:n": "Service - Deno/JS", // edited with CodeMirror, displayed with highlight.js
"ng:a": "Service written in JS/TS for Deno or NodeJS",
"ng:o": "external_service_invoke", // default viewer
"ng:w": "n:g:z:service_editor", // default editor
"ng:compat": ["code/javascript", "code/typescript", "file/iana/text/javascript", "file/iana/application/node"],
},
"contract": {
"ng:crdt": "YText",
"ng:n": "Contract", // edited with CodeMirror, displayed with highlight.js
"ng:a": "Smart Contract with Rust or JS code",
"ng:compat": ["code/rust", "file/iana/application/wasm", "code/javascript", "code/typescript", "file/iana/text/javascript", "file/iana/application/node"],
},
"query/sparql": {
"ng:crdt": "YText",// uses ng:default_graph and ng:named_graph predicates
"ng:n": "SPARQL Query", // edited with YASGUI or Sparnatural, displayed with highlight.js https://github.com/highlightjs/highlightjs-turtle/tree/master
"ng:a": "Saved SPARQL Query that can be invoked",
"ng:o": "n:g:z:sparql:invoke",
"ng:w": "n:g:z:sparql_query:yasgui",
"ng:compat": ["code/sparql", "file/iana/application/sparql-query"],
},
"query/sparql_update": {
"ng:crdt": "YText",// uses ng:default_graph and ng:named_graph predicates
"ng:n": "SPARQL Update", // edited with YASGUI, displayed with highlight.js https://github.com/highlightjs/highlightjs-turtle/tree/master
"ng:a": "Saved SPARQL Update that can be invoked",
"ng:o": "n:g:z:sparql:invoke",
"ng:w": "n:g:z:sparql_update:yasgui",
"ng:compat": ["code/sparql", "file/iana/application/sparql-update"],
},
"query/graphql": {
"ng:crdt": "YText", // uses ng:default_graph predicate
"ng:n": "GraphQL Query", // edited with https://github.com/graphql/graphiql or https://github.com/graphql-editor/graphql-editor, displayed with highlight.js
"ng:a": "Saved GraphQL Query that can be invoked",
"ng:o": "n:g:z:graphql:invoke",
"ng:w": "n:g:z:graphql_query",
"ng:compat": ["code/graphql", "file/iana/application/graphql+json"],
},
"query/text": {
"ng:crdt": "Graph",
"ng:n": "Text Search",
"ng:a": "Saved Text Search and its results",
"ng:compat": [],
},
"query/web": {
"ng:crdt": "Graph",
"ng:n": "Web Search",
"ng:a": "Saved Web Search and its results",
"ng:compat": [],
},
"data/graph": {
"ng:crdt": "Graph", // https://github.com/highlightjs/highlightjs-turtle/tree/master
"ng:n": "Graph",
"ng:a": "Define the Graph of your data with Semantic Web / Linked Data",
"ng:o": "n:g:z:json_ld_editor", // default viewer
"ng:w": "n:g:z:json_ld_editor", // default editor
"ng:x": {
"rdf":true,
"xsd":true,
},
"ng:compat": [ "rdf:*", "xsd:*", "file/iana/text/n3", "file/iana/text/rdf+n3", "file/iana/text/turtle", "file/iana/application/n-quads", "file/iana/application/trig", "file/iana/application/n-triples", "file/iana/application/rdf+xml", "file/iana/application/ld+json"],
},
"data/json": {
"ng:crdt": "Automerge",
"ng:n": "JSON",
"ng:a": "JSON Data CRDT",
"ng:o": "n:g:z:json_editor", // default viewer
"ng:w": "n:g:z:json_editor", // default editor
"ng:compat": ["file/iana/application/json", "code:json"],
},
"data/array": {
"ng:crdt": "YArray",
"ng:n": "JSON Array",
"ng:a": "JSON Array CRDT",
"ng:o": "n:g:z:json_editor", // default viewer
"ng:w": "n:g:z:json_editor", // default editor
"ng:compat": ["file/iana/application/json", "code:json"],
},
"data/map": {
"ng:crdt": "YMap",
"ng:n": "JSON Map",
"ng:a": "JSON Map CRDT",
"ng:o": "n:g:z:json_editor", // default viewer
"ng:w": "n:g:z:json_editor", // default editor
"ng:compat": ["file/iana/application/json", "code:json"],
},
"data/xml": {
"ng:crdt": "YXml",
"ng:n": "XML",
"ng:a": "XML Data CRDT",
"ng:compat": ["file/iana/text/xml","file/iana/application/xml", "code:xml"],
},
"data/table": {
"ng:crdt": "Automerge", // see https://github.com/frappe/datatable
"ng:n": "Table", // see https://specs.frictionlessdata.io/table-schema displayed with pivot table see https://activetable.io/docs/data https://www.npmjs.com/package/pivottable https://socket.dev/npm/package/svelte-pivottable/alerts/0.2.0?tab=dependencies
"ng:a": "Data in a Table (columns and rows)",
"ng:o": "n:g:z:pivot",
"ng:compat": ["file/iana/application/sparql-results+json","file/iana/application/sparql-results+xml","file/iana/text/csv"],
},
"data/collection": {
"ng:crdt": "Graph",
"ng:n": "Collection",
"ng:a": "An ordered list of items",
"ng:o": "n:g:z:list",
"ng:x": {
"as": true,
"rdf": true,
},
"ng:compat": ["as:Collection","rdf:List","rdf:Seq"],
},
"data/container": {
"ng:crdt": "Graph",
"ng:n": "Container",
"ng:a": "An unordered list of items",
"ng:o": "n:g:z:list",
"ng:x": {
"rdf": true,
"rdfs": true,
"ldp": true,
},
"ng:compat": ["rdfs:member","ldp:contains","rdf:Bag","rdf:Alt"],
},
"data/board": {
"ng:crdt": "Graph",
"ng:n": "Board",
"ng:a": "Whiteboard, infinite canvas to arrange your content in 2D",
"ng:o": "n:g:z:board",
"ng:include": [],
"ng:compat": [], //https://jsoncanvas.org/ https://www.canvasprotocol.org/ https://github.com/orgs/ocwg/discussions/25 https://infinitecanvas.tools/gallery/
},
"data/grid": {
"ng:crdt": "Graph",
"ng:n": "Grid",
"ng:a": "Grid representation of a collection or container",
"ng:o": "n:g:z:grid",
"ng:include": ["data/container","data/collection","data/table","media/album"],
"ng:compat": [],
},
"data/geomap": { // https://github.com/leaflet/leaflet
"ng:crdt": "Graph",
"ng:n": "Geo Map",
"ng:a": "Geographical Map",
"ng:x": {
"wgs": true,
"gn": true,
"as": true,
},
"ng:compat": ["as:Place","wgs:*","gn:*", "file/iana/application/geo+json", "file/iana/application/vnd.mapbox-vector-tile"], // see also https://github.com/topojson/topojson
},
"e/email": {
"ng:crdt": "Graph",
"ng:n": "Email",
"ng:a": "Email content and headers",
"ng:x": {
"email": "http://www.invincea.com/ontologies/icas/1.0/email#" //https://raw.githubusercontent.com/twosixlabs/icas-ontology/master/ontology/email.ttl
},
"ng:compat": ["file/iana/message/rfc822","file/iana/multipart/related"],
},
"e/web": {
"ng:crdt": "Graph",
//https://www.npmjs.com/package/warcio https://github.com/N0taN3rd/node-warc
"ng:n": "Web Archive",
"ng:a": "Archive the content of a web page",
"ng:compat": ["file/iana/application/warc","file/iana/multipart/related"],
},
"e/rdf": {
"ng:crdt": "Graph",
"ng:n": "RDF Archive",
"ng:a": "Archive the triples of an RDF resource dereferenced with HTTP",
"ng:include": ["data/graph"],
},
"mc/text": {
"ng:crdt": "Graph",
"ng:n": "Text Selection",
"ng:a": "Text Selection copied into Magic Carpet",
},
"mc/link": {
"ng:crdt": "Graph",
"ng:n": "Link",
"ng:a": "Link to a document kept in Magic Carpet",
},
"plato/card": {
"ng:crdt": "Graph",
"ng:n": "Card",
"ng:a": "Card representation of a document",
"ng:o": "n:g:z:card",
},
"plato/pad": {
"ng:crdt": "Graph",
"ng:n": "Pad",
"ng:a": "Pad representation of a document",
"ng:o": "n:g:z:pad",
},
"doc/diagram/mermaid" : {
"ng:crdt": "YText",
"ng:n": "Diagram - Mermaid",
"ng:a": "Describe Diagrams with Mermaid",
"ng:compat": ["file/iana/application/vnd.mermaid"]
},
"doc/diagram/drawio" : {
"ng:crdt": "YXml",
"ng:n": "Diagram - DrawIo",
"ng:a": "Draw Diagrams with DrawIo",
"ng:compat": ["file/iana/application/vnd.jgraph.mxfile","file/iana/application/x-drawio"]
},
"doc/diagram/graphviz" : {
"ng:crdt": "YText",
"ng:n": "Diagram - Graphviz",
"ng:a": "Describe Diagrams with Graphviz",
"ng:compat": ["file/iana/text/vnd.graphviz"]
},
"doc/diagram/excalidraw" : {
"ng:crdt": "Automerge",
"ng:n": "Diagram - Excalidraw",
"ng:a": "Collaborate on Diagrams with Excalidraw",
"ng:compat": ["file/iana/application/vnd.excalidraw+json"]
},
"doc/diagram/gantt" : { //https://github.com/frappe/gantt
"ng:crdt": "Automerge",
"ng:n": "Diagram - Gantt",
"ng:a": "Interactive gantt chart",
"ng:compat": []
},
"doc/diagram/flowchart" : { //https://github.com/adrai/flowchart.js
"ng:crdt": "YText",
"ng:n": "Diagram - Flowchart",
"ng:a": "flow chart diagrams",
"ng:compat": []
},
"doc/diagram/sequence" : { //https://github.com/bramp/js-sequence-diagrams
"ng:crdt": "YText",
"ng:n": "Diagram - Sequence",
"ng:a": "sequence diagrams",
"ng:compat": []
},
// checkout https://www.mindmaps.app/ but it is AGPL
"doc/diagram/markmap" : { //https://github.com/markmap/markmap
"ng:crdt": "YText",
"ng:n": "Diagram - Markmap",
"ng:a": "mindmaps with markmap",
"ng:compat": []
},
"doc/diagram/mymind" : { //https://github.com/markmap/markmap
"ng:crdt": "YText", // see MyMind format, MindMup JSON, FreeMind XML and MindMap Architect XML
"ng:n": "Diagram - Mymind",
"ng:a": "mindmaps with mymind",
"ng:compat": [] // https://github.com/ondras/my-mind/wiki/Saving-and-loading#file-formats
},
"doc/diagram/jsmind" : { //https://github.com/hizzgdev/jsmind
"ng:crdt": "Automerge",
"ng:n": "Diagram - jsmind",
"ng:a": "mindmaps with jsmind",
"ng:compat": [] // https://hizzgdev.github.io/jsmind/docs/en/1.usage.html
},
// DC and C3 have Crossfilter https://github.com/dc-js/dc.js http://crossfilter.github.io/crossfilter/ https://github.com/c3js/c3 http://dc-js.github.io/dc.js/
// take inspiration from https://github.com/metabase/metabase
// have a look at https://github.com/observablehq
// another open source dashboard with many data sources https://github.com/getredash/redash
// and another one https://github.com/apache/superset
// https://github.com/Rich-Harris/pancake
// https://github.com/williamngan/pts
// https://visjs.org/
"doc/viz/cytoscape" : {
"ng:crdt": "Automerge",
"ng:n": "Viz - Cytoscape",
"ng:a": "Graph theory (network) visualization",
"ng:compat": [] // https://github.com/cytoscape/cytoscape.js
},
"doc/viz/vega" : {
"ng:crdt": "Automerge",
"ng:n": "Viz - Vega",
"ng:a": "Grammar for interactive graphics",
"ng:compat": [] // https://vega.github.io/vega-lite/docs/ https://github.com/vega/editor
},
"doc/viz/vizzu" : {
"ng:crdt": "Automerge",
"ng:n": "Viz - Vizzu",
"ng:a": "Animated data visualizations and data stories",
"ng:compat": [] // https://github.com/vizzuhq/vizzu-lib
},
"doc/viz/plotly" : { //https://github.com/plotly/plotly.js
"ng:crdt": "Automerge",
"ng:n": "Viz - Plotly",
"ng:a": "Declarative charts",
"ng:compat": [] // https://github.com/cytoscape/cytoscape.js
},
"doc/viz/avail" : {
"ng:crdt": "Automerge",
"ng:n": "Viz - Avail",
"ng:a": "Time Data Availability Visualization",
"ng:compat": [] // https://github.com/flrs/visavail
},
"doc/chart/frappecharts" : {
"ng:crdt": "Automerge",
"ng:n": "Charts - Frappe",
"ng:a": "GitHub-inspired responsive charts",
"ng:compat": [] // https://github.com/frappe/charts
},
"doc/chart/financial" : {
"ng:crdt": "Automerge",
"ng:n": "Charts - Financial",
"ng:a": "Financial charts",
"ng:compat": [] //https://github.com/tradingview/lightweight-charts
},
// have a look at https://github.com/cube-js/cube and https://awesome.cube.dev/ and https://frappe.io/products
"doc/chart/apexcharts" : {
"ng:crdt": "Automerge",
"ng:n": "Charts - ApexCharts",
"ng:a": "Interactive data visualizations",
"ng:compat": [] // https://github.com/apexcharts/apexcharts.js
},
//realtime data with https://github.com/square/cubism
"doc/chart/billboard" : {
"ng:crdt": "Automerge",
"ng:n": "Charts - BillBoard",
"ng:a": "Interactive data visualizations based on D3",
"ng:compat": [] // https://github.com/naver/billboard.js
},
"doc/chart/echarts" : {
"ng:crdt": "Automerge",
"ng:n": "Charts - ECharts",
"ng:a": "Interactive charting and data visualization with Apache ECharts",
"ng:compat": [] // https://github.com/apache/echarts
},
"doc/chart/chartjs" : {
"ng:crdt": "Automerge",
"ng:n": "Charts - Chart.js",
"ng:a": "Simple yet flexible charting for designers & developers with Chart.js",
"ng:compat": [] // https://github.com/chartjs/Chart.js
},
// see if to provide plain D3, and also all the https://github.com/antvis libraries: G2, G6, L7, S2, X6. Have a look at AVA
"doc/pdf": {
"ng:crdt": "Graph",
"ng:n": "PDF",
"ng:a": "upload and display a PDF file",
"ng:compat": ["file/iana/application/pdf"] // https://github.com/mozilla/pdf.js https://viewerjs.org/
},
"doc/odf": { //!!! becareful: AGPL
"ng:crdt": "Graph",
"ng:n": "OpenDocumentFormat (ODF)",
"ng:a": "upload and display an ODF file",
"ng:compat": ["file/iana/application/vnd.oasis.opendocument*"] // https://webodf.org/ https://github.com/webodf/WebODF https://viewerjs.org/
},
// see also https://github.com/Mathpix/mathpix-markdown-it
"doc/latex": {
"ng:crdt": "Graph",
"ng:n": "Latex",
"ng:a": "upload and display a Latex or Tex file",
"ng:compat": ["file/iana/application/x-tex","file/iana/text/x-tex"] // https://github.com/michael-brade/LaTeX.js https://github.com/mathjax/MathJax
},
"doc/ps": { //!!! becareful: AGPL https://github.com/ochachacha/ps-wasm
"ng:crdt": "Graph",
"ng:n": "Postscript",
"ng:a": "upload and display a PostScript file",
"ng:compat": ["file/iana/application/postscript"] // https://www.npmjs.com/package/ghostscript4js
},
"doc/music/abc": { //https://github.com/paulrosen/abcjs
"ng:crdt": "YText",
"ng:n": "Music ABC",
"ng:a": "sheet music notation",
"ng:compat": []
},
"doc/music/guitar": { //https://github.com/birdca/fretboard
"ng:crdt": "YText",
"ng:n": "Music - Guitar",
"ng:a": "charts for guitar chords and scales",
"ng:compat": []
},
"doc/maths": { //https://github.com/KaTeX/KaTeX
"ng:crdt": "YText",
"ng:n": "Maths",
"ng:a": "TeX math rendering",
"ng:compat": ["file/iana/application/x-tex","file/iana/text/x-tex"]
},
"doc/chemistry": { //GPL!! https://github.com/aeris-data/ChemDoodle/tree/master/ChemDoodleWeb-8.0.0 or https://github.com/aseevia/smiles-3d-vue
"ng:crdt": "YText",
"ng:n": "Chemical",
"ng:a": "simplified molecular-input line-entry system (SMILES)",
"ng:compat": ["file/iana/chemical/x-daylight-smiles"] // https://en.wikipedia.org/wiki/SYBYL_line_notation and http://fileformats.archiveteam.org/wiki/Chemical_data
},
"doc/ancientscript": { //https://dn-works.com/ufas/
"ng:crdt": "YText", // use Unicode and special fonts
"ng:n": "Ancient Script",
"ng:a": "Ancient Script",
"ng:compat": []
},
"doc/braille": { //https://en.wikipedia.org/wiki/Braille_Patterns
"ng:crdt": "YText", // use Unicode and special fonts
"ng:n": "Braille Patterns",
"ng:a": "Braille Patterns",
"ng:compat": []
},
"media/image": {
"ng:crdt": "Graph",
"ng:n": "Image",
"ng:a": "upload and display an image",
"ng:o": "n:g:z:media",
"ng:x": {
"as":true,
},
"ng:compat": ["file/iana/image*","as:Image"]
},
"media/reel": {
"ng:crdt": "Graph",
"ng:n": "Reel",
"ng:a": "upload and display a Reel (video from mobile)",
"ng:o": "n:g:z:media",
"ng:compat": ["file/iana/video*"]
},
"media/video": {
"ng:crdt": "Graph",
"ng:n": "Video",
"ng:a": "upload and display a Video (and film)",
"ng:o": "n:g:z:media",
"ng:x": {
"as":true,
},
"ng:compat": ["file/iana/video*","as:Video"]
},
"media/album": {
"ng:crdt": "Graph",
"ng:n": "Album",
"ng:a": "Assemble several images and/or videos into an ordered Album",
"ng:o": "n:g:z:gallery",
"ng:include": ["data/collection"],
"ng:compat": []
},
"media/audio": {
"ng:crdt": "Graph",
"ng:n": "Audio",
"ng:a": "upload and play an Audio file, Audio note or Voice message",
"ng:o": "n:g:z:media",
"ng:x": {
"as":true,
},
"ng:compat": ["file/iana/audio*","as:Audio"]
},
"media/song": {
"ng:crdt": "Graph",
"ng:n": "Song",
"ng:a": "A song from an artist,album and/or lyrics",
"ng:o": "n:g:z:media",
"ng:x": {
"music": "http://purl.org/ontology/mo/",
},
"ng:compat": ["music:MusicalWork","music:MusicArtist", "music:Lyrics"]
// see also https://polifonia-project.eu/wp-content/uploads/2022/01/Polifonia_D2.1_V1.0.pdf
// Music ontology http://musicontology.com/docs/faq.html with data based on existing databases https://musicbrainz.org/doc/MusicBrainz_Database/Schema https://github.com/megaconfidence/open-song-database https://www.discogs.com/developers
},
"media/subtitle": { //https://captioneasy.com/subtitle-file-formats/
"ng:crdt": "YText",
"ng:n": "Subtitles",
"ng:a": "Subtitles",
"ng:compat": [] // TBD
},
"media/overlay": {
"ng:crdt": "Graph",
"ng:n": "Overlay",
"ng:a": "Composition of an image, reel, text, icon, link, mention or other content into a layered content",
"ng:o": "n:g:z:media",
"ng:compat": []
},
"social/channel": {
"ng:crdt": "Graph",
"ng:n": "Channel",
"ng:a": "Broadcast channel with subscribers",
"ng:compat": []
},
"social/stream": {
"ng:crdt": "Graph",
"ng:n": "Stream",
"ng:a": "A document or store's stream branch",
"ng:compat": []
},
"social/contact": {
"ng:crdt": "Graph",
"ng:n": "Contact",
"ng:a": "Contact: an Individual, Organization or Group",
"ng:x": {
"vcard":true,
"foaf": true,
},
"ng:include": ["data/graph"],
"ng:compat": ["foaf:Person","foaf:Agent","vcard:Individual", "vcard:Organization", "vcard:Group", "file/iana/text/vcard", "file/iana/application/vcard+json", "file/iana/application/vcard+xml" ],
},
"social/event": {
"ng:crdt": "Graph",
"ng:n": "Event",
"ng:a": "An event occuring in specific location and time",
"ng:x": {
"as":true,
},
"ng:include": ["post/*"],
"ng:compat": ["as:Event"]
},
"social/calendar": {
"ng:crdt": "Graph",
"ng:n": "Calendar",
"ng:a": "A calendar where events are gathered",
"ng:x": {
"as":true,
"time": true,
},
"ng:include": ["data/collection"],
"ng:compat": ["time:TemporalEntity", "file/iana/text/calendar", "file/iana/application/calendar+xml", "file/iana/application/calendar+json"] //https://www.rfc-editor.org/rfc/rfc5545
},
"social/scheduler": {
"ng:crdt": "Graph",
"ng:n": "Scheduler",
"ng:a": "Helps finding a common time slot for several participants to a future event",
"ng:x": {
"as":true,
},
"ng:compat": ["as:Invite","as:Reject","as:Accept","as:TentativeAccept","as:TentativeReject"]
},
"social/reaction": {
"ng:crdt": "Graph",
"ng:n": "Reaction",
"ng:a": "A reaction by user to some content",
"ng:x": {
"as":true,
},
"ng:compat": ["as:Like", "as:Dislike", "as:Listen", "as:Read", "as:View"]
},
"prod/task": {
"ng:crdt": "Graph",
"ng:n": "Task",
"ng:a": "A task to be done",
"ng:x": {
"as":true,
"pair": "http://virtual-assembly.org/ontologies/pair#",
},
"ng:include": ["post/*"],
"ng:compat": ["pair:Task"] //see VTODO in iCalendar https://www.cs.utexas.edu/~mfkb/RKF/tree/components/specs/ontologies/Calendar-onto.html
// see todo and todoList of Mobilizon https://framagit.org/framasoft/mobilizon/-/blob/main/lib/federation/activity_stream/converter/todo.ex
// https://framagit.org/framasoft/mobilizon/-/blob/main/lib/federation/activity_stream/converter/todo_list.ex
},
"prod/project": {
"ng:crdt": "Graph",
"ng:n": "Project",
"ng:a": "A project management / KanBan",
"ng:x": {
"as":true,
"pair": "http://virtual-assembly.org/ontologies/pair#",
},
"ng:include": ["post/*"],
"ng:compat": ["pair:Project"]
},
// see SRO https://www.researchgate.net/publication/350158531_From_a_Scrum_Reference_Ontology_to_the_Integration_of_Applications_for_Data-Driven_Software_Development
// https://ceur-ws.org/Vol-1442/paper_4.pdf
// see focalbaord, specially for their import scripts https://github.com/mattermost/focalboard/tree/main/import
// and their data model https://github.com/mattermost/focalboard/tree/main/server/model
// https://github.com/leif81/bzkanban
// https://github.com/HigorLoren/donko (react)
// https://github.com/trobonox/kanri (GPL, Vue)
// https://github.com/waterrmalann/kards (vanilla JS)
// see also https://github.com/wekan/wekan
// see also https://taiga.io/ (for inspiration. as it is AGPL and python)
// see also https://github.com/plankanban/planka (for inspiration. as it is AGPL and React)
// see also https://kolaente.dev/vikunja/vikunja (for inspiration. AGPL. Vue and Go)
// see also https://github.com/laurent22/joplin/ (for inspiration. AGPL)
// see also https://github.com/SrGMC/kanbana
/// svelte: https://github.com/V-Py/svelte-kanban
// https://github.com/supabase-community/svelte-kanban
// https://github.com/therosbif/kanban
"prod/issue": {
"ng:crdt": "Graph",
"ng:n": "Issue",
"ng:a": "An issue to be solved",
"ng:x": {
"as":true,
"pair": "http://virtual-assembly.org/ontologies/pair#",
},
"ng:include": ["prod/task"],
"ng:compat": ["pair:Challenge"]
},
//https://github.com/go-gitea/gitea/issues/20232
// datamodel of gitea issues: https://github.com/go-gitea/gitea/blob/165346c15c6d021028a65121e692a17ffc927e2c/models/issue.go#L35-L79
"prod/form": {
"ng:crdt": "Graph",
"ng:n": "Form",
"ng:a": "A form to be filled-in",
"ng:x": {
"form" : "http://rdf.danielbeeke.nl/form/form-dev.ttl#",
},
"ng:compat": ["form:*","file/iana/application/schema+json"]
},
// https://jsonforms.io/docs/
// https://github.com/jsonform/jsonform
// https://jsonforms.io/docs/integrations/vue
// >>> https://github.com/json-editor/json-editor
// or >>> https://github.com/webgme/svelte-jsonschema-form
// or >>> https://github.com/restspace/svelte-schema-form
// see https://ceur-ws.org/Vol-1515/regular14.pdf
// and https://github.com/protegeproject/facsimile
// https://www.drupal.org/project/webform
// see https://www.semantic-mediawiki.org/wiki/Extension:Page_Forms
// https://www.mediawiki.org/wiki/Extension:Page_Forms
// https://rdf-form.danielbeeke.nl/
// consider using Shapes
"prod/filling": {
"ng:crdt": "Graph",
"ng:n": "Form filling",
"ng:a": "A form that has been filled-in",
"ng:compat": []
},
"prod/cad": { // https://mattferraro.dev/posts/cadmium
"ng:crdt": "Automerge",
"ng:n": "CAD",
"ng:a": "CADmium",
"ng:compat": []
},
"prod/slides": { //https://github.com/hakimel/reveal.js
//https://pandoc.org/MANUAL.html#slide-shows
"ng:crdt": "Graph",
"ng:n": "Slides",
"ng:a": "Slides and presentations",
"ng:include": ["post/*"],
"ng:compat": []
},
"prod/question" : {
"ng:crdt": "Graph",
"ng:n": "Question",
"ng:a": "A question that needs answers",
"ng:x": {
"as":true,
},
"ng:include": ["post/*"],
"ng:compat": ["as:Question"]
},
"prod/answer" :{
"ng:crdt": "Graph",
"ng:n": "Answer",
"ng:a": "An answer to a question",
"ng:x": {
"as":true,
},
"ng:include": ["post/*"],
"ng:compat": ["as:Note"]
},
"prod/poll" : {
"ng:crdt": "Graph",
"ng:n": "Poll",
"ng:a": "A poll where people will vote",
"ng:x": {
"as":true,
},
"ng:include": ["post/*"],
"ng:compat": ["as:Question"]
},
"prod/vote" : {
"ng:crdt": "Graph",
"ng:n": "Vote",
"ng:a": "A vote cast for a Poll",
"ng:x": {
"as":true,
},
"ng:compat": ["as:Note"]
},
"file" : {
"ng:crdt": "Graph",
"ng:n": "File",
"ng:a": "Binary file",
"ng:o": "n:g:z:file_viewer",
"ng:w": "n:g:z:file_viewer",
"ng:compat": []
},
"file/ng/wallet" : {
"ng:n": "NextGraph Wallet File",
"ng:a": "NextGraph Wallet File (.ngw)",
"ng:compat": []
},
"file/ng/doc" : {
"ng:n": "NextGraph Document File",
"ng:a": "NextGraph Document File (.ngd)",
"ng:compat": []
},
"file/ng/html" : {
"ng:n": "NextGraph Document Html",
"ng:a": "NextGraph Document Html standalone file",
"ng:compat": []
},
"file/text" : {
"ng:crdt": "Graph",
"ng:n": "File",
"ng:a": "Text file",
"ng:o": "n:g:z:file_viewer",
"ng:w": "n:g:z:file_viewer",
"ng:compat": ["file/iana/text/*", "image/svg+xml", "file/iana/application/n-quads", "file/iana/application/trig", "file/iana/application/n-triples", "file/iana/application/rdf+xml", "file/iana/application/ld+json",
"file/iana/application/xml", "file/iana/application/yaml", "file/iana/application/xhtml+xml", "file/iana/application/node","file/iana/application/sparql-results+json","file/iana/application/sparql-results+xml",
"file/iana/message/rfc822","file/iana/multipart/related", "file/iana/text/vnd.graphviz", "file/iana/application/vnd.excalidraw+json", "file/iana/application/x-tex","file/iana/text/x-tex",
"file/iana/application/vcard+json", "file/iana/application/vcard+xml", "file/iana/text/calendar", "file/iana/application/calendar+xml", "file/iana/application/calendar+json",
"file/iana/application/schema+json", "file/iana/application/geo+json", "file/iana/application/json" ]
},
};

@ -9,8 +9,91 @@
// according to those terms.
-->
<div class="centered">
<slot />
<script lang="ts">
import ng from "../api";
import { onMount, tick } from "svelte";
import { current_lang, available_languages } from "../store";
import { Language } from "svelte-heros-v2";
export let displayFooter = false;
let changingLang = false;
const changeLang = () => {
changingLang = true;
scrollToTop();
};
let top;
function scrollToTop() {
top.scrollIntoView();
}
const selectLang = async (lang) => {
current_lang.set(lang);
changingLang = false;
await tick();
scrollToTop();
};
let tauri_platform = import.meta.env.TAURI_PLATFORM;
const displayPopup = async (url, title) => {
if (!tauri_platform || tauri_platform == "android") {
window.open(url, "_blank").focus();
} else {
await ng.open_window(url, "viewer", title);
}
};
const displayNextgraphOrg = async () => {
await displayPopup("https://nextgraph.org", "NextGraph.org");
};
</script>
<div bind:this={top}>
{#if !changingLang}
<div class="centered">
<slot />
</div>
{#if displayFooter}
<div class="centered">
<div class="mb-20 mt-10">
<button
on:click={changeLang}
class="text-primary-700 bg-[#f6f6f6] bg-none ring-0 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"
>
<Language
tabindex="-1"
class="w-7 h-7 mr-2 transition duration-75 "
/>Change language <!--note to translator: DO NOT TRANSLATE! it should stay in english always-->
</button>
<br />
<button
on:click={displayNextgraphOrg}
class="text-primary-700 bg-[#f6f6f6] bg-none ring-0 hover:bg-primary-100/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2"
>About NextGraph
</button>
</div>
</div>
{/if}
{:else}
<div class="centered">
<ul class="mb-20 mt-10">
{#each Object.entries(available_languages) as lang}
<li
tabindex="0"
role="menuitem"
class="flex items-center p-2 text-lg mb-2 font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
on:keypress={() => selectLang(lang[0])}
on:click={() => selectLang(lang[0])}
>
<span class="mx-3">{lang[1]}</span>
</li>
{/each}
</ul>
</div>
{/if}
</div>
<style>
@ -21,4 +104,7 @@
text-align: center;
width: fit-content;
}
li.clickable {
cursor: pointer;
}
</style>

@ -0,0 +1,187 @@
<!--
// Copyright (c) 2022-2024 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 {
Icon,
BugAnt,
DocumentText,
Window,
CodeBracket,
SquaresPlus,
ViewfinderCircle,
ArrowsPointingOut,
Cube,
Briefcase,
MagnifyingGlass,
RocketLaunch,
Sun,
TableCells,
ListBullet,
RectangleGroup,
Squares2x2,
MapPin,
CircleStack,
Envelope,
GlobeAlt,
DocumentChartBar,
Document,
ClipboardDocumentList,
Photo,
Film,
RectangleStack,
Microphone,
MusicalNote,
Ticket,
CursorArrowRays,
Megaphone,
User,
Clock,
CalendarDays,
Calendar,
Stop,
Flag,
HandRaised,
Newspaper,
PencilSquare,
CubeTransparent,
PresentationChartBar,
QuestionMarkCircle,
CheckCircle,
ChartPie,
Bars3BottomLeft,
Link,
Square2Stack,
Clipboard,
StopCircle,
Bolt,
Heart,
} from "svelte-heros-v2";
export let config = {};
export let dataClass: string;
const exact_mapping = {
page: Window,
"app/z": SquaresPlus,
class: ViewfinderCircle,
contract: Briefcase,
"query/text": MagnifyingGlass,
"query/web": MagnifyingGlass,
"data/graph": Sun,
"data/table": TableCells,
"data/collection": ListBullet,
"data/board": RectangleGroup,
"data/grid": Squares2x2,
"data/geomap": MapPin,
"e/email": Envelope,
"mc/text": Bars3BottomLeft,
"mc/link": Link,
"plato/card": Clipboard,
"plato/pad": Square2Stack,
"media/image": Photo,
"media/reel": Film,
"media/video": Film,
"media/album": RectangleStack,
"media/audio": Microphone,
"media/song": MusicalNote,
"media/subtitle": Ticket,
"media/overlay": CursorArrowRays,
"social/channel": Megaphone,
"social/stream": Bolt,
"social/contact": User,
"social/event": Clock,
"social/calendar": CalendarDays,
"social/scheduler": Calendar,
"social/reaction": Heart,
"prod/task": Stop,
"prod/project": Flag,
"prod/issue": HandRaised,
"prod/form": Newspaper,
"prod/filling": PencilSquare,
"prod/cad": CubeTransparent,
"prod/slides": PresentationChartBar,
"prod/question": QuestionMarkCircle,
"prod/answer": CheckCircle,
"prod/poll": QuestionMarkCircle,
"prod/vote": CheckCircle,
};
const prefix_mapping = {
"post/": DocumentText,
code: CodeBracket,
schema: ArrowsPointingOut,
service: Cube,
"e/": GlobeAlt,
"app/": StopCircle,
"query/": RocketLaunch,
"data/": CircleStack,
"doc/diagram": DocumentChartBar,
"doc/chart": ChartPie,
"doc/viz": ChartPie,
"doc/": ClipboardDocumentList,
file: Document,
};
const find = (t) => {
let e = exact_mapping[t];
if (e) return e;
for (let prefix of Object.entries(prefix_mapping)) {
if (t.startsWith(prefix[0])) return prefix[1];
}
return BugAnt;
};
</script>
<!--
did:ng:n:g:z:[official apps]
did:ng:n:g:ns
did:ng:n:g:x list of context used by nextgraph
rdf: http://www.w3.org/1999/02/22-rdf-syntax-ns#
rdfs: http://www.w3.org/2000/01/rdf-schema#
schema: https://schema.org/
skos: http://www.w3.org/2004/02/skos/core#
owl: http://www.w3.org/2002/07/owl#
foaf: http://xmlns.com/foaf/0.1/
relationship: http://purl.org/vocab/relationship/
dcterms: http://purl.org/dc/terms/
dcmitype: http://purl.org/dc/dcmitype/
sh: http://www.w3.org/ns/shacl#
shex: http://www.w3.org/ns/shex#
xsd: http://www.w3.org/2001/XMLSchema#
as: https://www.w3.org/ns/activitystreams#
ldp: http://www.w3.org/ns/ldp#
vcard: http://www.w3.org/2006/vcard/ns#
sec: https://w3id.org/security#
wgs: http://www.w3.org/2003/01/geo/wgs84_pos#
cc: http://creativecommons.org/ns#
gn: https://www.geonames.org/ontology#
geo: http://www.opengis.net/ont/geosparql#
time: http://www.w3.org/2006/time#
ng: did:ng:n:g:ns# or http://nextgraph.org/ns#
did:ng:n:g:ns#post/rich
ng:class => shortcut for did:ng:n:g:ns#class
a rdfs:Class
a ng:class
did:ng:o:xxxx:yy:yy
did:ng:n:xx.xx#name
did:ng:n:x: curated list of ontologies
did:ng:k common list of things (keyword)
did:ng:n:c common data
did:ng:n:z: curated list of external apps and services
http://nextgraph.org/ns# => the ng: ontology (did:ng:n:g:ns#)
ng:compat -> owl:unionOf rdf:List (alphabetical order, including itself as first element)
-->
<Icon {...config} variation="outline" color="black" icon={find(dataClass)} />

@ -21,6 +21,8 @@
import MobileBottomBar from "./MobileBottomBar.svelte";
import Logo from "./components/Logo.svelte";
import { connection_status } from "../store";
import { onMount, tick } from "svelte";
import {
@ -87,9 +89,9 @@
<div class="full-layout">
<Sidebar {activeUrl} {asideClass} {nonActiveClass} class="fixed">
<SidebarWrapper
divClass="bg-gray-60 overflow-y-auto tall:py-4 px-3 rounded dark:bg-gray-800"
divClass="bg-gray-60 overflow-y-auto tall-xs:py-4 px-3 rounded dark:bg-gray-800"
>
<SidebarGroup ulClass="space-y-1 tall:space-y-2">
<SidebarGroup ulClass="space-y-1 tall-xs:space-y-2">
<SidebarItem label="NextGraph" href="#/user" class="mt-1">
<svelte:fragment slot="icon">
<Logo className="w-7 h-7 tall:w-10 tall:h-10" />
@ -99,60 +101,64 @@
label="Home"
href="#/"
on:click={scrollToTop}
class="py-1 tall:p-2"
class="py-1 tall-xs:p-2"
>
<svelte:fragment slot="icon">
<Home
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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Stream" href="#/stream" class="py-1 tall:p-2">
<SidebarItem label="Stream" href="#/stream" class="py-1 tall-xs:p-2">
<svelte:fragment slot="icon">
<Bolt
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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Search" href="#/search" class="py-1 tall:p-2">
<SidebarItem label="Search" href="#/search" class="py-1 tall-xs:p-2">
<svelte:fragment slot="icon">
<MagnifyingGlass
tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Create" href="#/create" class="py-1 tall:p-2">
<SidebarItem label="Create" href="#/create" class="py-1 tall-xs:p-2">
<svelte:fragment slot="icon">
<PlusCircle
tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Shared" href="#/shared" class="py-1 tall:p-2">
<SidebarItem label="Shared" href="#/shared" class="py-1 tall-xs:p-2">
<svelte:fragment slot="icon">
<Users
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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Site" href="#/site" class="py-1 tall:p-2">
<SidebarItem label="Site" href="#/site" class="py-1 tall-xs: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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Messages" href="#/messages" class="py-1 tall:p-2">
<SidebarItem
label="Messages"
href="#/messages"
class="py-1 tall-xs:p-2"
>
<svelte:fragment slot="icon">
<PaperAirplane
tabindex="-1"
class="-rotate-45 w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
class="-rotate-45 w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
<span
class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"
@ -164,12 +170,12 @@
<SidebarItem
label="Notifications"
href="#/notifications"
class="mt-1 py-1 tall:p-2"
class="mt-1 py-1 tall-xs:p-2"
>
<svelte:fragment slot="icon">
<Bell
tabindex="-1"
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
<span
class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"

@ -41,7 +41,7 @@
<a href="#/user" class="flex items-center" on:click>
<Logo className="w-7 h-7 tall:w-10 tall:h-10" />
<span
class="ml-4 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"
class="ml-2 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"
>NextGraph</span
>
</a>
@ -52,7 +52,7 @@
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none"
/>
</a>
<a href="#/messages" class="ml-6 row items-center" on:click>
<a href="#/messages" class="ml-4 row items-center" on:click>
<PaperAirplane
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 focus:outline-none"

File diff suppressed because one or more lines are too long

@ -9,24 +9,43 @@
// according to those terms.
-->
<!--
The Login Procedure.
Has multiple states (steps) through the user flow.
-->
<script lang="ts">
import { Alert, Toggle } from "flowbite-svelte";
import { Alert, Toggle, Button } from "flowbite-svelte";
import { onMount, createEventDispatcher, tick } from "svelte";
import ng from "../api";
import { emoji_cat, emojis, load_svg } from "../wallet_emojis";
import { PuzzlePiece } from "svelte-heros-v2";
import {
PuzzlePiece,
XCircle,
Backspace,
ArrowPath,
LockOpen,
Key,
CheckCircle,
ArrowLeft,
} from "svelte-heros-v2";
import PasswordInput from "./components/PasswordInput.svelte";
//import Worker from "../worker.js?worker&inline";
export let wallet;
export let for_import = false;
let top;
function scrollToTop() {
top.scrollIntoView();
}
let tauri_platform = import.meta.env.TAURI_PLATFORM;
let mobile = tauri_platform == "android" || tauri_platform == "ios";
const dispatch = createEventDispatcher();
onMount(async () => {
loaded = false;
await load_svg();
load_svg();
//console.log(wallet);
await init();
});
@ -46,16 +65,28 @@
}
emojis2 = emojis2;
display = 0;
pazzlePage = 0;
selection = [];
error = undefined;
scrollToTop();
// This is only for awaiting that SVGs are loaded.
await load_svg();
loaded = true;
}
function letsgo() {
function start_with_pazzle() {
loaded = false;
step = "pazzle";
unlockWith = "pazzle";
scrollToTop();
}
function start_with_mnemonic() {
loaded = false;
step = "mnemonic";
unlockWith = "mnemonic";
scrollToTop();
}
let emojis2 = [];
@ -68,29 +99,33 @@
let pazzle_length = 9;
let display = 0;
let pazzlePage = 0;
let selection = [];
/** The selected emojis by category (one for each pazzle page). First will be the selected of first pazzle page. */
let selection = [].fill(null, 0, pazzle_length);
let pin_code = [];
/** The selected order from the order page. */
let ordered = [];
let last_one = {};
let shuffle_pin;
let error;
let trusted = false;
let trusted = true;
let mnemonic = "";
let unlockWith: "pazzle" | "mnemonic" | undefined;
function order() {
step = "order";
ordered = [];
last_one = {};
for (let i = 0; i < pazzle_length; i++) {
last_one[i] = true;
}
// In case, this is called by the cancel button, we need to reset the selection.
selection.forEach((emoji) => (emoji.sel = undefined));
selection = selection;
scrollToTop();
}
async function start_pin() {
@ -101,20 +136,19 @@
//console.log(shuffle_pin);
}
/** Called on selecting emoji in a category. */
function select(val) {
//console.log(emojis2[display][val]);
let cat_idx = shuffle.category_indices[display];
let cat_idx = shuffle.category_indices[pazzlePage];
let cat = emojis[emoji_cat[cat_idx]];
let idx = shuffle.emoji_indices[display][val];
//console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code);
let idx = shuffle.emoji_indices[pazzlePage][val];
selection.push({ cat: cat_idx, index: idx });
//console.log(selection);
selection[pazzlePage] = { cat: cat_idx, index: idx };
if (display == pazzle_length - 1) {
if (pazzlePage == pazzle_length - 1) {
order();
} else {
display = display + 1;
pazzlePage = pazzlePage + 1;
}
}
@ -122,22 +156,23 @@
step = "opening";
let pazzle = [];
for (const emoji of ordered) {
pazzle.push((emoji.cat << 4) + emoji.index);
}
//console.log(pazzle);
//console.log(wallet);
const mnemonic_words = mnemonic.split(" ");
// open the wallet
try {
if (tauri_platform) {
let opened_wallet = await ng.wallet_open_with_pazzle(
wallet,
pazzle,
pin_code
);
let opened_wallet =
unlockWith === "pazzle"
? await ng.wallet_open_with_pazzle(wallet, pazzle, pin_code)
: await ng.wallet_open_with_mnemonic_words(
wallet,
mnemonic_words,
pin_code
);
// try {
// let client = await ng.wallet_was_opened(opened_wallet);
// opened_wallet.V0.client = client;
@ -172,7 +207,11 @@
myWorker.onmessage = async (msg) => {
//console.log("Message received from worker", msg.data);
if (msg.data.loaded) {
myWorker.postMessage({ wallet, pazzle, pin_code });
if (unlockWith === "pazzle") {
myWorker.postMessage({ wallet, pazzle, pin_code });
} else {
myWorker.postMessage({ wallet, mnemonic_words, pin_code });
}
//console.log("postMessage");
} else if (msg.data.success) {
//console.log(msg.data);
@ -214,23 +253,17 @@
dispatch("cancel");
}
async function pin(val) {
//console.log(val);
pin_code.push(val);
if (pin_code.length == 4) {
await finish();
}
async function on_pin_key(val) {
pin_code = [...pin_code, val];
}
async function select_order(val, pos) {
delete last_one[pos];
//console.log(last_one);
//console.log(val);
async function select_order(val) {
ordered.push(val);
val.sel = ordered.length;
selection = selection;
if (ordered.length == pazzle_length - 1) {
let last = selection[Object.keys(last_one)[0]];
let last = selection.find((emoji) => !emoji.sel);
ordered.push(last);
last.sel = ordered.length;
selection = selection;
@ -238,52 +271,379 @@
await start_pin();
}
}
function go_back() {
if (step === "mnemonic") {
init();
} else if (step === "pazzle") {
// Go to previous pazzle or init page, if on first pazzle.
if (pazzlePage === 0) {
init();
} else {
pazzlePage -= 1;
}
} else if (step === "order") {
if (ordered.length === 0) {
step = "pazzle";
} else {
const last_selected = ordered.pop();
last_selected.sel = null;
ordered = ordered;
selection = selection;
}
} else if (step === "pin") {
if (pin_code.length === 0) {
if (unlockWith === "mnemonic") {
start_with_mnemonic();
} else {
// Unselect the last two elements.
const to_unselect = ordered.slice(-2);
to_unselect.forEach((val) => {
val.sel = null;
});
ordered = ordered.slice(0, -2);
selection = selection;
step = "order";
}
} else {
pin_code = pin_code.slice(0, pin_code.length - 1);
}
}
}
let width: number;
let height: number;
const breakPointWidth: number = 535;
const breakPointHeight: number = 1005;
let mobile = false;
$: if (width >= breakPointWidth && height >= breakPointHeight) {
mobile = false;
} else {
mobile = true;
}
</script>
{#if step == "load"}
<div class=" max-w-xl lg:px-8 mx-auto px-4 mt-10">
<h2 class="pb-5 text-xl">How to open your wallet, step by step :</h2>
<ul class="mb-8 ml-3 space-y-4 text-left list-decimal">
<li>
For each one of the 9 categories of images, you will be presented with
the 15 possible image choices. The categories are shuffled at every
login. They will not always appear in the same order.
</li>
<li>
At each category, only one of the 15 displayed choices is the correct
image that belongs to your pazzle. Find it and tap or click on that one.
The 15 images are shuffled too, they will not appear at the same
position at each login. On a computer, you can also use the tab key on
your keyboard to move to the desired item on the screen, then press the
space bar to select each one.
</li>
<li>
Once you completed the last category, you will be presented with all the
images you have previously selected. Their order is displayed as it was
when you picked them. But this is not the correct order of the images in
your pazzle. You now have to order them correctly.
</li>
<li>
You must remember which image should be the first one in your pazzle.
Find it on the screen and click or tap on it. It will be greyed out and
the number 1 will appear on top of it.
</li>
<li>
Move on to the second image of your pazzle (that you memorized). Find it
on the screen and tap on it. Repeat this step until you reached the last
image.
</li>
<li>
Finally, your PIN code will be asked. enter it by clicking or tapping on
the digits.
</li>
</ul>
</div>
<div class=" max-w-xl lg:px-8 mx-auto px-4 text-primary-700">
{#if !loaded}
Loading pazzle...
<div
class="flex-col justify-center md:max-w-2xl py-4 sm:px-8"
class:h-screen={step !== "load" && height > 660}
class:flex={height > 660}
bind:this={top}
>
{#if step == "load"}
<div class="flex flex-col justify-center p-4 pt-6">
<h2 class="pb-5 text-xl self-start">
How to open your wallet? You have 2 options:
</h2>
<h3 class="pb-2 text-lg self-start">With your Pazzle</h3>
<ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal">
<li>
For each one of the 9 categories of images, you will be presented with
the 15 possible image choices. The categories are shuffled at every
login. They will not always appear in the same order.
</li>
<li>
At each category, only one of the 15 displayed choices is the correct
image that belongs to your pazzle. Find it and tap or click on that
one. The 15 images are shuffled too, they will not appear at the same
position at each login. On a computer, you can also use the tab key on
your keyboard to move to the desired item on the screen, then press
the space bar to select each one.
</li>
<li>
Once you completed the last category, you will be presented with all
the images you have previously selected. Their order is displayed as
it was when you picked them. But this is not the correct order of the
images in your pazzle. You now have to order them correctly.
</li>
<li>
You must remember which image should be the first one in your pazzle.
Find it on the screen and click or tap on it. It will be greyed out
and the number 1 will appear on top of it.
</li>
<li>
Move on to the second image of your pazzle (that you memorized). Find
it on the screen and tap on it. Repeat this step until you reached the
last image.
</li>
<li>
Finally, your PIN code will be asked. enter it by clicking or tapping
on the digits.
</li>
</ul>
<h3 class="pb-2 text-lg self-start">
With your 12 words Mnemonic (passphrase)
</h3>
<ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal">
<li>
Enter your twelve words mnemonic in the input field. The words must be
separated by spaces.
</li>
<li>Enter the PIN code that you chose when you created your wallet.</li>
</ul>
<!-- Save wallet? -->
{#if for_import}
<div class="max-w-xl lg:px-8 mx-auto px-4 mb-2">
<span class="text-xl">Do you trust this device? </span> <br />
<p class="text-sm">
If you do, if this device is yours or is used by few trusted persons
of your family or workplace, and you would like to login again from
this device in the future, then you can save your wallet on this
device. To the contrary, if this device is public and shared by
strangers, do not save your wallet here. {#if !tauri_platform}By
selecting this option, you agree to saving some cookies on your
browser.{/if}<br />
</p>
<div class="flex justify-center items-center my-4">
<Toggle class="" bind:checked={trusted}
>Yes, save my wallet on this device</Toggle
>
</div>
</div>
{/if}
<div class=" max-w-xl lg:px-8 mx-auto px-4 text-primary-700">
<div class="flex flex-col justify-centerspace-x-12 mt-4 mb-4">
{#if !loaded}
Loading pazzle...
<svg
class="animate-spin my-4 h-14 w-14 mx-auto"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
{:else}
<button
on:click={start_with_pazzle}
class="mt-1 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
>
<PuzzlePiece
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/>
Open with Pazzle!
</button>
{/if}
<button
on:click={cancel}
class="mt-3 mb-2 text-gray-500 dark:text-gray-400 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
><ArrowLeft
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel login</button
>
<span
on:click={start_with_mnemonic}
on:keypress={start_with_mnemonic}
role="link"
tabindex="0"
class="mt-1 text-lg px-5 py-2.5 text-center inline-flex items-center mb-2 underline cursor-pointer"
>
Open with Mnemonic instead
</span>
</div>
</div>
</div>
<!-- The following steps have navigation buttons and fixed layout -->
{:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"}
<div
class="flex-col justify-center h-screen"
class:flex={height > 660}
class:min-w-[310px]={mobile}
class:min-w-[500px]={!mobile}
class:max-w-[370px]={mobile}
class:max-w-[600px]={!mobile}
>
<div class="mt-auto flex flex-col justify-center">
<!-- Unlock Screens -->
{#if step == "mnemonic"}
<form on:submit|preventDefault={start_pin}>
<label
for="mnemonic-input"
class="block mb-2 text-xl text-gray-900 dark:text-white"
>Enter your 12 words mnemonic</label
>
<PasswordInput
id="mnemonic-input"
placeholder="12 words separated by spaces"
bind:value={mnemonic}
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
auto_complete="mnemonic"
/>
<div class="flex">
<Button
type="submit"
class="mt-3 mb-2 ml-auto text-white bg-primary-700 disabled:opacity-65 focus:ring-4 focus:ring-blue-500 focus:border-blue-500 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-blue-500 dark:focus:border-blue-500"
on:click={start_pin}
disabled={mnemonic.split(" ").length !== 12}
><CheckCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Confirm</Button
>
</div>
</form>
{:else if step == "pazzle"}
<p class="max-w-xl mx-auto lg:max-w-2xl">
<span class="text-xl">
<!-- TODO: Internationalization-->
Select your emoji of category:<br />{emoji_cat[
shuffle.category_indices[pazzlePage]
]}</span
>
</p>
{#each [0, 1, 2, 3, 4] as row}
<div class="columns-3 gap-0">
{#each emojis2[pazzlePage]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i (pazzlePage + "-" + row + "-" + i)}
<div
role="button"
tabindex="0"
class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
on:click={() => select(row * 3 + i)}
on:keypress={() => select(row * 3 + i)}
>
<svelte:component this={emoji.svg?.default} />
</div>
{/each}
</div>
{/each}
{:else if step == "order"}
<p class="max-w-xl mx-auto lg:max-w-2xl mb-2">
<span class="text-xl">Select each image in the correct order</span>
</p>
{#each [0, 1, 2] as row}
<div class="columns-3 gap-0">
{#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
{#if !emoji.sel}
<div
role="button"
tabindex="0"
class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
on:click={() => select_order(emoji)}
on:keypress={() => select_order(emoji)}
>
<svelte:component
this={emojis[emoji_cat[emoji.cat]][emoji.index].svg
?.default}
/>
</div>
{:else}
<div
class="w-full aspect-square opacity-25 select-none sel-emoji"
>
<svelte:component
this={emojis[emoji_cat[emoji.cat]][emoji.index].svg
?.default}
/>
<span
class="sel drop-shadow-[2px_2px_2px_rgba(255,255,255,1)]"
class:text-[8em]={!mobile}
class:text-[6em]={mobile}>{emoji.sel}</span
>
</div>
{/if}
{/each}
</div>
{/each}
{:else if step == "pin"}
<p class="items-center">
<span class="text-xl">Enter your PIN code</span>
</p>
<!-- Chrome requires the columns-3 __flex__ to be set, or else it wraps the lines incorrectly.
However, this leads to the width decreasing and the buttons come together in mobile view.
So we need a way to fix the width across all screens. -->
{#each [0, 1, 2] as row}
<div class="columns-3 flex">
{#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num}
<button
tabindex="0"
class="pindigit m-1 disabled:opacity-15 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
class:h-[160px]={!mobile}
class:h-[100px]={mobile}
class:text-8xl={!mobile}
on:click={async () => await on_pin_key(num)}
disabled={pin_code.length >= 4}
>
<span>{num}</span>
</button>
{/each}
</div>
{/each}
<div class="columns-3 flex">
<div class="m-1 w-full aspect-square" />
<button
tabindex="0"
class="pindigit disabled:opacity-15 m-1 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
class:h-[160px]={!mobile}
class:h-[100px]={mobile}
class:text-8xl={!mobile}
on:click={async () => await on_pin_key(shuffle_pin[9])}
disabled={pin_code.length >= 4}
>
<span>{shuffle_pin[9]}</span>
</button>
<Button
tabindex="0"
class="w-full bg-green-300 hover:bg-green-300/90 enabled:animate-bounce disabled:bg-gray-200 disabled:opacity-15 m-1 select-none align-bottom text-7xl p-0 aspect-square border-0"
on:click={async () => await finish()}
disabled={pin_code.length < 4}
>
<LockOpen
tabindex="-1"
class="w-[50%] h-[50%] transition duration-75 focus:outline-none select-none group-hover:text-gray-900 dark:group-hover:text-white"
/>
</Button>
</div>
<span class="mt-3 text-9xl min-h-[8rem] text-center"
>{#each pin_code as pin_key}*{/each}</span
>
{/if}
</div>
<!-- Navigation Buttons for pazzle, order pin, mnemonic -->
<div class="flex justify-between mb-6 mt-auto">
<button
on:click={cancel}
class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55"
><XCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button
>
<button
class="mt-1 ml-2 min-w-[141px] focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55"
on:click={go_back}
><Backspace
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>{#if step === "mnemonic" || (step === "pazzle" && pazzlePage === 0)}Go
back{:else}Correct{/if}</button
>
</div>
</div>
{:else if step == "opening"}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700">
Opening your wallet...<br />
Please wait
<svg
class="animate-spin my-4 h-14 w-14 mx-auto"
class="animate-spin mt-10 h-14 w-14 mx-auto"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
@ -303,213 +663,97 @@
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
{:else}
<button
on:click={letsgo}
class="mt-1 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
>
<PuzzlePiece
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>
Open my wallet now!
</button>
{/if}
</div>
{#if for_import}
<div class=" max-w-xl lg:px-8 mx-auto px-4 mb-8">
<span class="text-xl">Do you trust this device? </span> <br />
<div class="flex justify-center items-center my-4">
<Toggle class="" bind:checked={trusted}
>Yes, save my wallet on this device</Toggle
>
</div>
<p class="text-sm">
If you do, if this device is yours or is used by few trusted persons of
your family or workplace, and you would like to login again from this
device in the future, then you can save your wallet on this device. To
the contrary, if this device is public and shared by strangers, do not
save your wallet here. {#if !tauri_platform}By selecting this option,
you agree to save some cookies on your browser.{/if}<br />
</p>
</div>
{/if}
{:else if step == "pazzle"}
<div
class="h-screen aspect-[3/5] pazzleline"
class:min-w-[310px]={mobile}
class:min-w-[500px]={!mobile}
class:max-w-[360px]={mobile}
class:max-w-[600px]={!mobile}
>
{#each [0, 1, 2, 3, 4] as row}
<div class="columns-3 gap-0">
{#each emojis2[display]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
<div
role="button"
tabindex="0"
class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
on:click={() => select(row * 3 + i)}
on:keypress={() => select(row * 3 + i)}
{:else if step == "end"}
{#if error}
<div class=" max-w-6xl lg:px-8 mx-auto text-red-800">
<div class="mt-auto max-w-6xl lg:px-8">
An error occurred !
<svg
fill="none"
class="animate-bounce mt-10 h-10 w-10 mx-auto"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<svelte:component this={emoji.svg?.default} />
</div>
{/each}
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
</svg>
<Alert color="red" class="mt-5">
{error}
</Alert>
</div>
<div class="flex justify-between mt-auto gap-4">
<button
on:click={cancel}
class="mt-10 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
><XCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel</button
>
<button
class="mt-10 ml-2 select-none text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
on:click={init}
>
<ArrowPath
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/>
Try again
</button>
</div>
</div>
{/each}
</div>
{:else if step == "order"}
<!-- console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code); -->
<div
class="h-screen aspect-[3/3] pazzleline"
class:min-w-[320px]={mobile}
class:min-w-[500px]={!mobile}
class:max-w-[360px]={mobile}
class:max-w-[600px]={!mobile}
>
{#each [0, 1, 2] as row}
<div class="columns-3 gap-0">
{#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
{#if !emoji.sel}
<div
role="button"
tabindex="0"
class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
on:click={() => select_order(emoji, row * 3 + i)}
on:keypress={() => select_order(emoji, row * 3 + i)}
>
<svelte:component
this={emojis[emoji_cat[emoji.cat]][emoji.index].svg?.default}
/>
</div>
{:else}
<div class="w-full aspect-square opacity-25 select-none sel-emoji">
<svelte:component
this={emojis[emoji_cat[emoji.cat]][emoji.index].svg?.default}
/>
<span class="sel drop-shadow-[2px_2px_2px_rgba(255,255,255,1)]"
>{emoji.sel}</span
>
</div>
{/if}
{/each}
{:else}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-green-800">
Your wallet is opened! <br />Please wait while the app is loading...
<svg
class="my-10 h-16 w-16 mx-auto"
fill="none"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
/>
</svg>
</div>
{/each}
</div>
{:else if step == "pin"}
<div class=" max-w-6xl lg:px-8 mx-auto px-3">
<p class="max-w-xl md:mx-auto lg:max-w-2xl">
<span class="text-xl">Enter your PIN code</span>
</p>
<div class="w-[295px] mx-auto">
{#each [0, 1, 2] as row}
<div class="">
{#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num}
<button
tabindex="0"
class="m-1 select-none align-bottom text-7xl w-[90px] h-[90px] p-0"
on:click={async () => await pin(num)}
>
<span>{num}</span>
</button>
{/each}
</div>
{/each}
<button
tabindex="0"
class="m-1 select-none mx-auto align-bottom text-7xl w-[90px] h-[90px] p-0"
on:click={async () => await pin(shuffle_pin[9])}
>
<span>{shuffle_pin[9]}</span>
</button>
</div>
</div>
{:else if step == "opening"}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700">
Opening your wallet...<br />
Please wait
<svg
class="animate-spin mt-10 h-14 w-14 mx-auto"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
</div>
{:else if step == "end"}
{#if error}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
An error occurred !
<svg
fill="none"
class="animate-bounce mt-10 h-10 w-10 mx-auto"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
</svg>
<Alert color="red" class="mt-5">
{error}
</Alert>
<button class="mt-10 select-none" on:click={init}> Try again </button>
<button class="mt-10 ml-5 select-none" on:click={cancel}> Cancel </button>
</div>
{:else}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-green-800">
Your wallet is opened! <br />Please wait while the app is loading...
<svg
class="my-10 h-16 w-16 mx-auto"
fill="none"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
/>
</svg>
</div>
{/if}
{/if}
{/if}
</div>
<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
<style>
.pazzleline {
.pindigit {
min-height: 99px;
}
/* .pazzleline {
margin-right: auto;
margin-left: auto;
}
} */
.sel {
position: absolute;
display: flex;
width: 100%;
top: 45%;
height: 100%;
top: 0;
left: 0;
font-size: 100px;
font-weight: 700;
justify-content: center;
align-items: center;
}
.sel-emoji {

@ -9,6 +9,11 @@
// according to those terms.
-->
<!--
Component to inform the user, that no wallet is registered on this device.
Offers login or create wallet buttons.
-->
<script>
// @ts-ignore
import Logo from "../assets/nextgraph.svg?component";
@ -16,7 +21,7 @@
import CenteredLayout from "./CenteredLayout.svelte";
</script>
<CenteredLayout>
<CenteredLayout displayFooter={true}>
<div class="container3">
<div class="row">
<Logo class="logo block h-40" alt="NextGraph Logo" />

@ -25,6 +25,7 @@
import { link } from "svelte-spa-router";
import { onMount, onDestroy, tick } from "svelte";
import { Button } from "flowbite-svelte";
import DataClassIcon from "./DataClassIcon.svelte";
let is_tauri = import.meta.env.TAURI_PLATFORM;

@ -0,0 +1,120 @@
<!--
// Copyright (c) 2022-2024 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 {
Icon,
BugAnt,
DocumentText,
Window,
CodeBracket,
SquaresPlus,
ViewfinderCircle,
ArrowsPointingOut,
Cube,
Briefcase,
MagnifyingGlass,
RocketLaunch,
Sun,
TableCells,
ListBullet,
RectangleGroup,
Squares2x2,
MapPin,
CircleStack,
Envelope,
GlobeAlt,
DocumentChartBar,
Document,
ClipboardDocumentList,
Photo,
Film,
RectangleStack,
Microphone,
MusicalNote,
Ticket,
CursorArrowRays,
Megaphone,
User,
Clock,
CalendarDays,
Calendar,
Stop,
Flag,
HandRaised,
Newspaper,
PencilSquare,
CubeTransparent,
PresentationChartBar,
QuestionMarkCircle,
CheckCircle,
ChartPie,
Bars3BottomLeft,
Link,
Square2Stack,
Clipboard,
StopCircle,
Share,
Play,
DocumentArrowDown,
DocumentArrowUp,
CloudArrowUp,
CloudArrowDown,
Beaker,
Eye,
} from "svelte-heros-v2";
export let config = {};
export let zera: string;
const exact_mapping = {
json_ld_editor: TableCells,
json_editor: TableCells,
triple_editor: Share,
rdf_viewer: CircleStack,
graph_viewer: Sun,
sparql_query: RocketLaunch,
sparnatural: CursorArrowRays,
graphql: Cube,
invoke: Play,
ontology_viewer: ArrowsPointingOut,
download: DocumentArrowDown,
post_edit: PencilSquare,
file: Document,
source: CodeBracket,
post: DocumentText,
pad: Square2Stack,
card: Clipboard,
gallery: RectangleStack,
load_graph: CloudArrowUp,
load: DocumentArrowUp,
dump: CloudArrowDown,
ext: GlobeAlt,
app_store: SquaresPlus,
app_editor: Beaker,
list: ListBullet,
grid: Squares2x2,
view: Eye,
};
const prefix_mapping = {};
const find = (t) => {
let e = exact_mapping[t];
if (e) return e;
for (let prefix of Object.entries(prefix_mapping)) {
if (t.startsWith(prefix[0])) return prefix[1];
}
return BugAnt;
};
</script>
<Icon {...config} variation="outline" color="black" icon={find(zera)} />

@ -0,0 +1,78 @@
<script lang="ts">
export let value: string = "";
export let id: string;
let has_success: boolean = false;
const tauri_platform = import.meta.env.TAURI_PLATFORM;
const setClipboard = async (text: string) => {
if (tauri_platform) {
// TODO: this won't work for tauri platform.
// const { writeText } = await import("@tauri-apps/api/clipboard");
// await writeText(text);
} else {
navigator.clipboard.writeText(text);
}
};
const on_click = (e) => {
has_success = true;
setTimeout(() => (has_success = false), 2_000);
setClipboard(value);
};
</script>
<div class="w-full mt-2">
<div class="relative">
<textarea
{id}
rows="3"
style="resize: none;"
{value}
class="col-span-6 pr-11 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"
disabled
readonly
/>
{#if !tauri_platform}
<button
on:click={on_click}
class="absolute inset-y-0 right-0 p-3 flex items-center text-sm leading-5 bg-transparent shadow-none"
>
<span id="default-icon" class:hidden={has_success}>
<svg
class="w-3.5 h-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 18 20"
>
<path
d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"
/>
</svg>
</span>
<span
id="success-icon"
class="inline-flex items-center"
class:hidden={!has_success}
>
<svg
class="w-3.5 h-3.5 text-blue-700 dark:text-blue-500"
aria-hidden={!has_success}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 16 12"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5"
/>
</svg>
</span>
</button>
{/if}
</div>
</div>

@ -23,42 +23,18 @@ Provide classes using the `className` prop.
<script lang="ts">
import { connection_status } from "../../store";
// @ts-ignore
import Logo from "../../assets/nextgraph.svg?component";
import Logo from "../../assets/nextgraph-nofill.svg?component";
export let className: string = "";
let connection_status_class = "logo-blue";
// Color is adjusted to connection status.
let connection_status_class = ""; // Default is blue.
if ($connection_status === "connecting") {
$: if ($connection_status === "connecting") {
connection_status_class = "logo-pulse";
} else if ($connection_status === "disconnected") {
connection_status_class = "logo-gray";
} else {
connection_status_class = "logo-blue";
}
</script>
<Logo class={`${className} ${connection_status_class}`} />
<!-- Sorry for the global but this way we can change the Logo's css from this component. -->
<style global>
@keyframes pulse-logo-color {
0%,
100% {
/* Default colors come from the svg. */
}
50% {
/* Mid-transition color */
stroke: #888;
fill: #888;
}
}
.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: #888;
stroke: #888;
}
</style>

@ -0,0 +1,76 @@
<script lang="ts">
export let value: string | undefined = undefined;
export let placeholder: string | undefined = undefined;
export let className: string | undefined = undefined;
export let id: string | undefined = undefined;
export let auto_complete: string | undefined = undefined;
export let show: boolean = false;
let input;
let type: "password" | "text" = "password";
$: type = show ? "text" : "password";
function handleInput(event: Event) {
const target = event.target as HTMLInputElement;
value = target.value;
}
async function toggle() {
let { selectionStart, selectionEnd } = input;
show = !show;
input.focus();
setTimeout(function () {
input.selectionStart = selectionStart;
input.selectionEnd = selectionEnd;
}, 0);
}
</script>
<div class="relative">
<input
bind:this={input}
{value}
{placeholder}
{id}
{type}
on:input={handleInput}
class={`${className} pr-12 text-md block`}
autocomplete={auto_complete}
/>
<div
class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5"
>
<svg
fill="none"
on:click={toggle}
on:keypress={toggle}
class={`${show ? "block" : "hidden"} h-6 text-gray-700`}
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 576 512"
>
<path
fill="currentColor"
d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
>
</path>
</svg>
<svg
fill="none"
class={`${!show ? "block" : "hidden"} h-6 text-gray-700`}
on:click={toggle}
on:keypress={toggle}
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 640 512"
>
<path
fill="currentColor"
d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"
>
</path>
</svg>
</div>
</div>

@ -9,18 +9,28 @@
// 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 { Button } from "flowbite-svelte";
import { link } from "svelte-spa-router";
import Home from "../lib/Home.svelte";
import NoWallet from "../lib/NoWallet.svelte";
import { push } from "svelte-spa-router";
import { onMount, onDestroy } from "svelte";
import { active_wallet, has_wallets, derived } from "../store";
import {
active_wallet,
has_wallets,
derived,
cannot_load_offline,
} from "../store";
let display_login_create = !$has_wallets || !$active_wallet;
let unsubscribe;
onMount(() => {
cannot_load_offline.set(false);
//setTimeout(function () {}, 2);
const combined = derived([active_wallet, has_wallets], ([$s1, $s2]) => [
$s1,
$s2,

@ -18,15 +18,13 @@
import CenteredLayout from "../lib/CenteredLayout.svelte";
import { has_wallets } from "../store";
let display_has_wallets_warning: boolean = $has_wallets != 0;
let display_has_wallets_warning = $has_wallets != 0;
let unsubscribe;
onMount(() => {});
onDestroy(() => {
unsubscribe();
});
onDestroy(() => {});
</script>
<CenteredLayout>
<CenteredLayout displayFooter={true}>
<Install {display_has_wallets_warning} />
</CenteredLayout>

@ -19,6 +19,6 @@
<div
class="h-screen aspect-[3/5] pazzleline max-w-[720px] bg-yellow-300 inner"
>
<p>nextgraph URI {params[1]}</p>
<p>Nextgraph URI {params[1]}</p>
</div>
</div>

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

@ -8,6 +8,13 @@
// notice may not be copied, modified, or distributed except
// according to those terms.
-->
<!--
@component
"User Panel" page.
Provides wallet download, logout, offline/online switch, and other user actions.
-->
<script>
// @ts-nocheck
@ -153,7 +160,7 @@
>
<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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
<span class="ml-3">Back</span>
</li>
@ -164,7 +171,7 @@
{#if $online}
<Signal
tabindex="-1"
class="w-7 h-7 text-green-600 transition duration-75 dark:text-green-400 "
class="w-7 h-7 text-green-600 transition duration-75 focus:outline-none dark:text-green-400 "
/>
<span class="ml-3 text-green-600 dark:text-green-400"
>Online</span
@ -172,7 +179,7 @@
{:else}
<SignalSlash
tabindex="-1"
class="w-7 h-7 text-red-600 transition duration-75 dark:text-red-400 "
class="w-7 h-7 text-red-600 transition duration-75 focus:outline-none dark:text-red-400 "
/>
<span class="ml-3 text-red-600 dark:text-red-400">Offline</span>
{/if}
@ -187,7 +194,7 @@
>
<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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
<span class="ml-3">Logout</span>
</li>
@ -213,7 +220,7 @@
>
<DocumentArrowDown
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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
<span class="ml-3">Download wallet file</span>
</li>
@ -224,7 +231,7 @@
>
<NoSymbol
tabindex="-1"
class="w-7 h-7 text-red-700 transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
class="w-7 h-7 text-red-700 transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
<span class="ml-3 text-left"
>Download failed:<br /> {download_error}</span
@ -237,7 +244,7 @@
>
<DocumentArrowDown
tabindex="-1"
class="w-7 h-7 text-blue-700 transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
class="w-7 h-7 text-blue-700 transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
<span class="ml-3 text-left">Download in progress...</span>
</li>
@ -267,7 +274,7 @@
>
<DocumentArrowDown
tabindex="-1"
class="w-14 h-14 transition duration-75 dark:text-white dark:group-hover:text-white"
class="w-14 h-14 transition duration-75 focus:outline-none dark:text-white dark:group-hover:text-white"
/>
Click here to download the wallet file
</button>
@ -278,7 +285,7 @@
<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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
@ -286,7 +293,7 @@
<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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
@ -294,7 +301,7 @@
<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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
@ -302,7 +309,7 @@
<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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
</svelte:fragment>
</SidebarItem>
@ -363,7 +370,7 @@
>
<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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
<span class="ml-3">Donate to NextGraph</span>
</li>
@ -377,7 +384,7 @@
>
<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"
class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
/>
<span class="ml-3">About NextGraph</span>
</li>

@ -45,7 +45,7 @@
});
</script>
<CenteredLayout>
<CenteredLayout displayFooter={true}>
<div class="container3">
<div class="row">
<a href="#/">

File diff suppressed because it is too large Load Diff

@ -9,6 +9,12 @@
// according to those terms.
-->
<!--
"Select a wallet to login with" page.
This page is usually the first page the user sees when they visit the app.
It allows the user to select a wallet to login with, create, or import a wallet.
-->
<script lang="ts">
import { onMount, onDestroy, tick } from "svelte";
import { link, push } from "svelte-spa-router";
@ -186,7 +192,7 @@
</script>
<div bind:this={top}>
<CenteredLayout>
<CenteredLayout displayFooter={!wallet}>
{#if error}
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
<svg
@ -232,7 +238,7 @@
<Logo class="logo block h-40" alt="NextGraph Logo" />
</div>
<h2 class="pb-5 text-xl">Select a wallet to login with</h2>
<div class="flex flex-wrap justify-center gap-5 mb-20">
<div class="flex flex-wrap justify-center gap-5 mb-10">
{#each Object.entries($wallets) as wallet_entry}
<div
class="wallet-box"

@ -9,9 +9,129 @@
import { writable, readable, readonly, derived, get, type Writable } from "svelte/store";
import ng from "./api";
import { official_classes } from "./classes";
import { official_apps, official_services } from "./zeras";
let all_branches = {};
export const available_languages = {
"en": "English",
"de": "Deutsch",
"fr": "Français",
"ru": "Русский",
"es": "Español",
"it": "Italiano",
"zh": "中文",
"pt": "Português",
};
export const current_lang = writable("en");
export const select_default_lang = async() => {
let locales = await ng.locales();
for (let lo of locales) {
if (available_languages[lo]) {
// exact match (if locales is a 2 chars lang code, or if we support regionalized translations)
current_lang.set(lo);
return;
}
lo = lo.substr(0,2);
if (available_languages[lo]) {
current_lang.set(lo);
return;
}
}
};
let loaded_external_apps = {};
export const load_app = async (appName: string) => {
if (appName.startsWith("n:g:z")) {
let app = official_apps[appName];
if (!app) throw new Error("Unknown official app");
return await import(`./apps/${app["ng:b"]}.svelte`);
} else {
//TODO: load external app from its repo
// TODO: return IFrame component
}
};
export const invoke_service = async (serviceName: string, nuri:string, args: object) => {
if (serviceName.startsWith("n:g:z")) {
let service = official_services[serviceName];
if (!service) throw new Error("Unknown official service");
// TODO: do this in WebWorker
// TODO: if on native app or CLI: use deno
//return await ng.app_invoke(serviceName[6..], nuri, args);
} else {
// TODO: if on webapp: only allow those invocations from IFrame of external app or from n:g:z:external_service_invoke (which runs in an IFrame) and run it from webworker
// TODO: if on native app or CLI: use deno
// TODO: load external service from its repo
}
};
export const cur_tab = writable({
cur_store: {
has_outer : {
nuri_trail: ":v:l"
},
type: "public", // "protected", "private", "group", "dialog",
favicon: "",
title: "Group B",
},
cur_branch: {
b: "b:xxx", //branch id (can be null if not of type "branch")
c: "c:xxx", //commit(s) id
type: "main", // "stream", "detached", "branch", "in_memory" (does not save)
display: "c:X", // or main or stream or a:xx or branch:X (only 7 chars)
attachments: 1,
class: "data/graph",
title: false,
icon: false,
description: "",
app: "n:g:z:json_ld_editor", // current app being used
},
view_or_edit: false,
graph_viewer: "n:g:z:json_ld_editor", // selected viewer
graph_editor: "n:g:z:json_ld_editor", // selected editor
discrete_viewer: "n:g:z:json_ld_editor", // selected viewer
discrete_editor: "n:g:z:json_ld_editor", // selected editor
graph_viewers: ["n:g:z:json_ld_editor"], // list of available viewers
graph_editors: ["n:g:z:json_ld_editor"], // list of available editors
discrete_viewers: [], // list of available viewers
discrete_editors: [], // list of available editors
find: false,//or string to find
graph_or_discrete: true,
read_cap: 'r:',
doc: {
is_store: false,
is_member: false,
can_edit: false,
live_edit: true,
title: "Doc A",
authors: "",
icon: "",
description: "",
stream : {
notif: 1,
last: "",
},
live_editors: {
},
},
folders_pane: false,
toc_pane: false,
right_pane: false, // "folders", "toc", "branches", "files", "history", "comments", "info", "chat"
action: false, // "view_as", "edit_with", "share", "react", "repost", "copy", "dm_author", "new_block", "notifs", "schema", "signature", "permissions", "query",
});
export const opened_wallets = writable({});
/// { wallet:, id: }
@ -52,14 +172,14 @@ const updateConnectionStatus = ($connections: Record<string, any> ) => {
console.log("will try reconnect in 20 sec");
next_reconnect = setTimeout(async () => {
await reconnect();
connection_status.set("connecting");
next_reconnect = null;
}, 20000);
}
if (is_connected) {
connection_status.set("connected");
} else if (!is_connected && is_connecting) {
} else if (is_connecting) {
connection_status.set("connecting");
} else {
connection_status.set("disconnected");
@ -73,16 +193,20 @@ export const online = derived(connection_status,($connectionStatus) => $connecti
export const cannot_load_offline = writable(false);
if (!get(online) && !import.meta.env.TAURI_PLATFORM) {
if (get(connection_status) == "disconnected" && !import.meta.env.TAURI_PLATFORM) {
cannot_load_offline.set(true);
let unsubscribe = online.subscribe(async (value) => {
if (value) {
cannot_load_offline.set(false);
unsubscribe();
}
let unsubscribe = connection_status.subscribe(async (value) => {
if (value != "disconnected") {
cannot_load_offline.set(false);
if (value == "connected") {
unsubscribe();
}
} else {
cannot_load_offline.set(true);
}
});
}
}
export const has_wallets = derived(wallets,($wallets) => Object.keys($wallets).length);
@ -142,6 +266,7 @@ export const reconnect = async function() {
return;
}
console.log("attempting to connect...");
if (!get(online)) connection_status.set("connecting");
try {
let info = await ng.client_info()
//console.log("Connecting with",get(active_session).user);

@ -16,6 +16,34 @@
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);
}
.container3 {
margin: 0;
min-width: 280px;

File diff suppressed because it is too large Load Diff

@ -7,11 +7,20 @@ onmessage = (e) => {
//console.log("Message received by worker", e.data);
(async function() {
try {
let secret_wallet = await ng.wallet_open_with_pazzle(
let secret_wallet;
if (e.data.pazzle) {
secret_wallet = await ng.wallet_open_with_pazzle(
e.data.wallet,
e.data.pazzle,
e.data.pin_code
);
} else if (e.data.mnemonic_words) {
secret_wallet = await ng.wallet_open_with_mnemonic_words(
e.data.wallet,
e.data.pazzle,
e.data.mnemonic_words,
e.data.pin_code
);
);
}
postMessage({success:secret_wallet});
} catch (e) {
postMessage({error:e});

@ -0,0 +1,629 @@
// Copyright (c) 2022-2024 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.
// "n:g:z:hide" >> hides when in viewer mode
//"n:g:z:json_ld_editor", "n:g:z:json_editor", "n:g:z:triple_editor", "n:g:z:rdf_viewer:turtle", "n:g:z:rdf_viewer:n3", "n:g:z:rdf_viewer:json_ld", "n:g:z:rdf_viewer:graph",
//"n:g:z:sparql_query:yasgui", "n:g:z:sparql_query:sparnatural", "n:g:z:graphql_query", "n:g:z:sparql_update:yasgui", "n:g:z:ontology_editor", "n:g:z:owl_viewer", "n:g:z:sparql:invoke", "n:g:z:graphql:invoke", "n:g:z:dump_download",
// "n:g:z:post_rich_editor", "n:g:z:post_md_editor", "n:g:z:code_editor", "n:g:z:file_viewer", "n:g:z:file_source", "n:g:z:crdt_source_viewer:xml", "n:g:z:crdt_source_viewer:json", "n:g:z:crdt_source_viewer:text", "n:g:z:crdt_source_viewer:rdf"
//"n:g:z:post:rich", "n:g:z:post:md", "n:g:z:text", "n:g:z:pre", "n:g:z:pad", "n:g:z:card", "n:g:z:gallery", "n:g:z:columns", "n:g:z:tree", "n:g:z:summary", "n:g:z:list", "n:g:z:grid", "n:g:z:list_n_post", "n:g:z:grid_n_post", "n:g:z:board",
//"n:g:z:map", "n:g:z:chart", "n:g:z:pivot", "n:g:z:timeline", "n:g:z:email", "n:g:z:web_archive", "n:g:z:diagram_editor", "n:g:z:pdf", "n:g:z:latex", "n:g:z:media", "n:g:z:media_editor",
//"n:g:z:service_editor", "n:g:z:service_invoke", "n:g:z:external_service_invoke", "n:g:z:contract", "n:g:z:text_query", "n:g:z:web_query", "n:g:z:scan_qrcode", "n:g:z:upload_file",
//"n:g:z:messenger", "n:g:z:group", "n:g:z:contact", "n:g:z:event", "n:g:z:calendar", "n:g:z:scheduler",
//"n:g:z:task", "n:g:z:project", "n:g:z:issue", "n:g:z:form_editor", "n:g:z:form_filler", "n:g:z:cad", "n:g:z:slides", "n:g:z:question", "n:g:z:poll",
//"n:g:z:app_store", "n:g:z:app_editor", "n:xxx.xx.xx:yy", "o:xx:yy:zz"
export const official_apps = {
"n:g:z:json_ld_editor": {
"ng:n": "JSON-LD editor",
"ng:a": "View and edit the RDF Graph as JSON-LD",
"ng:c": "app",
"ng:u": "json_ld_editor",//favicon. can be a did:ng:j
"ng:g": "n:g:z:json_ld_editor",
"ng:b": "JsonLdEditor",
"ng:o": ["data/graph"],
"ng:w": ["data/graph"],
},
"n:g:z:json_editor": {
"ng:n": "JSON editor",
"ng:a": "View and edit your JSON data",
"ng:c": "app",
"ng:u": "json_editor",//favicon. can be a did:ng:j
"ng:g": "n:g:z:json_editor",
"ng:b": "JsonEditor",
"ng:o": ["data/json","data/array","data/map"],
"ng:w": ["data/json","data/array","data/map"],
},
"n:g:z:triple_editor": {
"ng:n": "Graph triples",
"ng:a": "Edit your RDF Graph as triples",
"ng:c": "app",
"ng:u": "triple_editor",//favicon. can be a did:ng:j
"ng:g": "n:g:z:triple_editor",
"ng:b": "TripleEditor",
"ng:o": ["data/graph"],
"ng:w": ["data/graph"],
},
"n:g:z:rdf_viewer:turtle": { // https://github.com/highlightjs/highlightjs-turtle/tree/master
"ng:n": "Turtle",
"ng:a": "View your RDF Graph in Turtle format",
"ng:c": "app",
"ng:u": "rdf_viewer",//favicon. can be a did:ng:j
"ng:g": "n:g:z:rdf_viewer:turtle",
"ng:b": "TurtleViewer",
"ng:o": ["data/graph"],
"ng:w": [],
},
"n:g:z:rdf_viewer:n3": { // ?
"ng:n": "N3",
"ng:a": "View your RDF Graph in N3 format",
"ng:c": "app",
"ng:u": "rdf_viewer",//favicon. can be a did:ng:j
"ng:g": "n:g:z:rdf_viewer:n3",
"ng:b": "N3Viewer",
"ng:o": ["data/graph"],
"ng:w": [],
},
"n:g:z:rdf_viewer:json_ld": { // highlight.js JSON
"ng:n": "JSON-LD",
"ng:a": "View your RDF Graph in N3 format",
"ng:c": "app",
"ng:u": "rdf_viewer",//favicon. can be a did:ng:j
"ng:g": "n:g:z:rdf_viewer:json_ld",
"ng:b": "JsonLdViewer",
"ng:o": ["data/graph"],
"ng:w": [],
},
"n:g:z:rdf_viewer:graph": {
"ng:n": "Graph Explorer",
"ng:a": "View your RDF Graph as interactive visualization",
"ng:c": "app",
"ng:u": "graph_viewer",//favicon. can be a did:ng:j
"ng:g": "n:g:z:rdf_viewer:graph",
"ng:b": "GraphViewer", // GraphExplorer https://github.com/zazuko/graph-explorer !! AGPL
"ng:o": ["data/graph"],
"ng:w": [],
},
"n:g:z:sparql_query:yasgui": {
"ng:n": "SPARQL Query",
"ng:a": "View, edit and invoke your Graph SPARQL query",
"ng:c": "app",
"ng:u": "sparql_query",//favicon. can be a did:ng:j
"ng:g": "n:g:z:sparql_query:yasgui",
"ng:b": "SparqlQueryEditor", // YASGUI of Zazuko https://github.com/zazuko/trifid/tree/main/packages/yasgui
"ng:o": [],
"ng:w": ["query/sparql"],
},
"n:g:z:sparql_query:sparnatural": {
"ng:n": "SPARQL natural Query",
"ng:a": "View, edit and invoke your Graph SPARQL query with SPARnatural tool",
"ng:c": "app",
"ng:u": "sparnatural",//favicon. can be a did:ng:j
"ng:g": "n:g:z:sparql_query:sparnatural",
"ng:b": "SparNaturalEditor",
"ng:o": [],
"ng:w": ["query/sparql"],
},
"n:g:z:graphql_query": {
"ng:n": "GraphQL Query",
"ng:a": "View, edit and invoke your GraphQL query",
"ng:c": "app",
"ng:u": "graphql",//favicon. can be a did:ng:j
"ng:g": "n:g:z:graphql_query",
"ng:b": "GraphqlEditor",
"ng:o": [],
"ng:w": ["query/graphql"],
},
"n:g:z:sparql_update:yasgui": {
"ng:n": "SPARQL Update",
"ng:a": "View, edit and invoke your Graph SPARQL Update",
"ng:c": "app",
"ng:u": "sparql_query",//favicon. can be a did:ng:j
"ng:g": "n:g:z:sparql_update:yasgui",
"ng:b": "SparqlUpdateEditor", // YASGUI of Zazuko https://github.com/zazuko/trifid/tree/main/packages/yasgui
"ng:o": [],
"ng:w": ["query/sparql_update"],
},
"n:g:z:ontology_editor": {
"ng:n": "Ontology editor",
"ng:a": "Edit your Ontology",
"ng:c": "app",
"ng:u": "json_ld_editor",//favicon. can be a did:ng:j
"ng:g": "n:g:z:ontology_editor",
"ng:b": "JsonLdEditor",
"ng:o": [],
"ng:w": ["schema/*"],
},
"n:g:z:owl_viewer": {
"ng:n": "OWL Ontology",
"ng:a": "View your OWL Ontology",
"ng:c": "app",
"ng:u": "ontology_viewer",//favicon. can be a did:ng:j
"ng:g": "n:g:z:owl_viewer",
"ng:b": "OwlViewer", // display with https://github.com/VisualDataWeb/WebVOWL
"ng:o": ["schema/owl"],
"ng:w": [],
},
"n:g:z:sparql:invoke": { // displayed with highlight.js https://github.com/highlightjs/highlightjs-turtle/tree/master
"ng:n": "SPARQL Invoke",
"ng:a": "View and invoke your saved SPARQL query",
"ng:c": "app",
"ng:u": "invoke",//favicon. can be a did:ng:j
"ng:g": "n:g:z:sparql:invoke",
"ng:b": "SparqlInvoker",
"ng:o": ["query/sparql","query/sparql_update"],
"ng:w": [],
},
"n:g:z:graphql:invoke": {
"ng:n": "GraphQL Invoke",
"ng:a": "View and invoke your saved GraphQL query",
"ng:c": "app",
"ng:u": "invoke",//favicon. can be a did:ng:j
"ng:g": "n:g:z:graphql:invoke",
"ng:b": "GraphqlInvoker",
"ng:o": ["query/graphql"],
"ng:w": [],
},
"n:g:z:dump_download": {
"ng:n": "Download",
"ng:a": "Download a file containing a document export data",
"ng:c": "app",
"ng:u": "download",//favicon. can be a did:ng:j
"ng:g": "n:g:z:dump_download",
"ng:b": "Downloader",
"ng:o": ["data/graph","file*","data/*"],
"ng:w": [],
},
"n:g:z:post_rich_editor": {
"ng:n": "Post Editor",
"ng:a": "Edit your post with ProseMirror",
"ng:c": "app",
"ng:u": "post_edit",//favicon. can be a did:ng:j
"ng:g": "n:g:z:post_rich_editor",
"ng:b": "ProseMirrorEditor",
"ng:o": [],
"ng:w": ["post/rich"],
},
"n:g:z:post_md_editor": {
"ng:n": "Post Editor",
"ng:a": "Edit your post with MilkDown",
"ng:c": "app",
"ng:u": "post_edit",//favicon. can be a did:ng:j
"ng:g": "n:g:z:post_md_editor",
"ng:b": "MilkDownEditor",
"ng:o": [],
"ng:w": ["post/md"],
},
"n:g:z:code_editor": {
"ng:n": "Code and Text Editor",
"ng:a": "Edit your code/text with CodeMirror",
"ng:c": "app",
"ng:u": "post_edit",//favicon. can be a did:ng:j
"ng:g": "n:g:z:code_editor",
"ng:b": "CodeMirrorEditor",
"ng:o": [],
"ng:w": ["code*","post/text"],
},
"n:g:z:file_viewer": {
"ng:n": "File details",
"ng:a": "See details about this file",
"ng:c": "app",
"ng:u": "file",//favicon. can be a did:ng:j
"ng:g": "n:g:z:file_viewer",
"ng:b": "FileDetails",
"ng:o": ["file*"],
"ng:w": ["file*"], // in editor mode: can change the name, and delete the file
},
"n:g:z:file_source": { // only works for files containing text source (SVG, HTML, JS, CSS, etc...)
"ng:n": "File source",
"ng:a": "See the source code of this file",
"ng:c": "app",
"ng:u": "source",//favicon. can be a did:ng:j
"ng:g": "n:g:z:file_source",
"ng:b": "FileSource",
"ng:o": ["file/text"],
"ng:w": [],
},
"n:g:z:crdt_source_viewer:xml": {
"ng:n": "XML source",
"ng:a": "See the source code of this document, in XML",
"ng:c": "app",
"ng:u": "source",//favicon. can be a did:ng:j
"ng:g": "n:g:z:crdt_source_viewer:xml",
"ng:b": "XmlSource", // displayed with highlight.js , with option to download
"ng:o": ["post/rich","post/md","post/html","page","data/xml", "doc/diagram/drawio"],
"ng:w": [],
},
"n:g:z:crdt_source_viewer:json": {
"ng:n": "JSON source",
"ng:a": "See the source code of this document, in JSON",
"ng:c": "app",
"ng:u": "source",//favicon. can be a did:ng:j
"ng:g": "n:g:z:crdt_source_viewer:json",
"ng:b": "JsonSource", // displayed with highlight.js , with option to download
"ng:o": ["data/json", "data/map", "data/array", "data/table", "doc/diagram/jsmind", "doc/diagram/gantt", "doc/diagram/excalidraw", "doc/viz/*", "doc/chart/*", "prod/cad"],
"ng:w": [],
},
"n:g:z:crdt_source_viewer:text": {
"ng:n": "Text source",
"ng:a": "See the source code of this document, in plain-text",
"ng:c": "app",
"ng:u": "source",//favicon. can be a did:ng:j
"ng:g": "n:g:z:crdt_source_viewer:text",
"ng:b": "TextViewer", // displayed with highlight.js , with option to download
"ng:o": ["post/text", "post/asciidoc", "code*", "service*", "contract", "query/sparql*","query/graphql","doc/diagram/mermaid","doc/diagram/graphviz","doc/diagram/flowchart",
"doc/diagram/sequence","doc/diagram/markmap","doc/diagram/mymind","doc/music*", "doc/maths", "doc/chemistry", "doc/ancientscript", "doc/braille", "media/subtitle"],
"ng:w": [],
},
"n:g:z:crdt_source_viewer:rdf": {
"ng:n": "RDF source",
"ng:a": "See the source graph of this document, in RDF (turtle)",
"ng:c": "app",
"ng:u": "source",//favicon. can be a did:ng:j
"ng:g": "n:g:z:crdt_source_viewer:rdf",
"ng:b": "TurtleViewer", //, with option to download
"ng:o": ["data/graph"],
"ng:w": [],
},
"n:g:z:post:rich": {
"ng:n": "Post",
"ng:a": "View a Rich Post",
"ng:c": "app",
"ng:u": "post",//favicon. can be a did:ng:j
"ng:g": "n:g:z:post:rich",
"ng:b": "PostRichViewer", // https://www.npmjs.com/package/prosemirror-to-html-js or https://prosemirror.net/docs/ref/version/0.4.0.html#toDOM https://prosemirror.net/docs/ref/version/0.4.0.html#toHTML
"ng:o": ["post/rich"],
"ng:w": [],
},
"n:g:z:post:md": {
"ng:n": "Post",
"ng:a": "View a Markdown Post",
"ng:c": "app",
"ng:u": "post",//favicon. can be a did:ng:j
"ng:g": "n:g:z:post:md",
"ng:b": "PostMdViewer", // https://github.com/wooorm/markdown-rs
"ng:o": ["post/md"],
"ng:w": [],
},
"n:g:z:post:text": {
"ng:n": "Text",
"ng:a": "View a Text Post",
"ng:c": "app",
"ng:u": "post",//favicon. can be a did:ng:j
"ng:g": "n:g:z:post:text",
"ng:b": "TextViewer", // displayed with a <p>
"ng:o": ["post/text"],
"ng:w": [],
},
"n:g:z:pre": {
"ng:n": "Source Code",
"ng:a": "View a Source Code",
"ng:c": "app",
"ng:u": "post",//favicon. can be a did:ng:j
"ng:g": "n:g:z:pre",
"ng:b": "PreTextViewer", // displayed with highlight.js
"ng:o": ["code*","post/text"],
"ng:w": [],
},
"n:g:z:pad": {
"ng:n": "Pad",
"ng:a": "Pad view of a document",
"ng:c": "app",
"ng:u": "pad",//favicon. can be a did:ng:j
"ng:g": "n:g:z:pad",
"ng:b": "Pad",
"ng:o": ["plato/pad"],
"ng:w": [],
},
"n:g:z:card": {
"ng:n": "Card",
"ng:a": "Card view of a document",
"ng:c": "app",
"ng:u": "card",//favicon. can be a did:ng:j
"ng:g": "n:g:z:card",
"ng:b": "Card",
"ng:o": ["plato/card"],
"ng:w": [],
},
"n:g:z:gallery": {
"ng:n": "Gallery",
"ng:a": "Gallery view of an album or collection",
"ng:c": "app",
"ng:u": "gallery",//favicon. can be a did:ng:j
"ng:g": "n:g:z:gallery",
"ng:b": "Gallery",
"ng:o": ["media/album","data/collection"],
"ng:w": [],
},
"n:g:z:app_store": {
"ng:n": "App Store",
"ng:a": "Install or remove Apps of NextGraph ecosystem",
"ng:c": "app",
"ng:u": "app_store",//favicon. can be a did:ng:j
"ng:g": "n:g:z:app_store",
"ng:b": "AppStore",
"ng:o": ["app/z"],
"ng:w": [],
},
"n:g:z:app_editor": {
"ng:n": "App editor",
"ng:a": "Create and modify your App with NextGraph IDE",
"ng:c": "app",
"ng:u": "app_editor",//favicon. can be a did:ng:j
"ng:g": "n:g:z:app_editor",
"ng:b": "AppEditor",
"ng:o": ["app/z"],
"ng:w": ["app/z"],
},
"n:g:z:list": {
"ng:n": "List view",
"ng:a": "See the content of document as a list",
"ng:c": "app",
"ng:u": "list",//favicon. can be a did:ng:j
"ng:g": "n:g:z:list",
"ng:b": "ListView",
"ng:o": ["data/graph"],
"ng:w": ["data/graph"],
},
"n:g:z:grid": {
"ng:n": "Grid view",
"ng:a": "See the content of document as a grid",
"ng:c": "app",
"ng:u": "grid",//favicon. can be a did:ng:j
"ng:g": "n:g:z:grid",
"ng:b": "GridView",
"ng:o": ["data/graph"],
"ng:w": ["data/graph"],
},
"n:g:z:media": {
"ng:n": "Media view",
"ng:a": "View media",
"ng:c": "app",
"ng:u": "view",//favicon. can be a did:ng:j
"ng:g": "n:g:z:media",
"ng:b": "MediaView",
"ng:o": ["media/*"],
"ng:w": [],
},
"n:g:z:service_editor": {
"ng:n": "Service Editor",
"ng:a": "Write and define your Service in Rust or JS/Deno",
"ng:c": "app",
"ng:u": "post_edit",//favicon. can be a did:ng:j
"ng:g": "n:g:z:service_editor",
"ng:b": "CodeMirrorEditor",
"ng:o": [],
"ng:w": ["service/*"],
},
"n:g:z:service_invoke": {
"ng:n": "Service Invoker",
"ng:a": "Invoke internal Service, with optional arguments",
"ng:c": "app",
"ng:u": "invoke",//favicon. can be a did:ng:j
"ng:g": "n:g:z:service_invoke",
"ng:b": "ServiceInvoker",
"ng:o": ["service"],
"ng:w": [],
},
"n:g:z:external_service_invoke": {
"ng:n": "Service Invoker",
"ng:a": "Invoke the Service, with optional arguments",
"ng:c": "app",
"ng:u": "invoke",//favicon. can be a did:ng:j
"ng:g": "n:g:z:external_service_invoke",
"ng:b": "ExternalServiceInvoker",
"ng:o": ["service/*"],
"ng:w": [],
},
"n:g:z:upload_file": {
"ng:n": "Upload file",
"ng:a": "Upload a binary file into a document",
"ng:c": "app",
"ng:u": "load",//favicon. can be a did:ng:j
"ng:g": "n:g:z:upload_file",
"ng:b": "UploadFile",
"ng:o": [],
"ng:w": ["data/graph"],
},
// TODO: "n:g:z:columns", "n:g:z:tree", "n:g:z:summary", "n:g:z:list_n_post", "n:g:z:grid_n_post", "n:g:z:board",
// TODO: "n:g:z:map", "n:g:z:chart", "n:g:z:pivot", "n:g:z:timeline", "n:g:z:email", "n:g:z:web_archive", "n:g:z:diagram_editor", "n:g:z:pdf", "n:g:z:latex", "n:g:z:media_editor",
// TODO: "n:g:z:contract", "n:g:z:text_query", "n:g:z:web_query", "n:g:z:scan_qrcode",
// TODO: "n:g:z:messenger", "n:g:z:group", "n:g:z:contact", "n:g:z:event", "n:g:z:calendar", "n:g:z:scheduler",
// TODO: "n:g:z:task", "n:g:z:project", "n:g:z:issue", "n:g:z:form_editor", "n:g:z:form_filler", "n:g:z:cad", "n:g:z:slides", "n:g:z:question", "n:g:z:poll",
};
// OFFICIAL SERVICES
//"n:g:z:dump_rdf:turtle", "n:g:z:dump_rdf:n3", "n:g:z:dump_rdf:json_ld", "n:g:z:load_rdf:turtle", "n:g:z:load_rdf:n3", "n:g:z:load_rdf:json_ld", "n:g:z:load_file", "n:g:z:dump_file",
//"n:g:z:dump_json", "n:g:z:dump_xml", "n:g:z:dump_text", "n:g:z:load_json", "n:g:z:load_xml", "n:g:z:load_text", "n:g:z:load_md", "n:g:z:sparql_query", "n:g:z:sparql_update", "n:g:z:dump_crdt_source", "n:g:z:dump_ng_html_file", "n:g:z:dump_ng_file"
export const official_services = {
"n:g:z:dump_rdf:turtle": {
"ng:n": "Turtle export",
"ng:a": "Export quads of RDF Graphs in Turtle format",
"ng:c": "service",
"ng:u": "data",// favicon. can be a did:ng:j
"ng:g": "n:g:z:dump_rdf:turtle",
"ng:o": ["data/graph"],
"ng:w": [],
"ng:result": ["file/iana/text/turtle"],
},
"n:g:z:dump_rdf:n3": {
"ng:n": "N3 export",
"ng:a": "Export quads of RDF Graphs in N3 format",
"ng:c": "service",
"ng:u": "data",// favicon. can be a did:ng:j
"ng:g": "n:g:z:dump_rdf:n3",
"ng:o": ["data/graph"],
"ng:w": [],
"ng:result": ["file/iana/text/n3"],
},
"n:g:z:dump_rdf:json_ld": {
"ng:n": "JSON-LD export",
"ng:a": "Export quads of RDF Graphs in JSON-LD format",
"ng:c": "service",
"ng:u": "data",// favicon. can be a did:ng:j
"ng:g": "n:g:z:dump_rdf:json_ld",
"ng:o": ["data/graph"],
"ng:w": [],
"ng:result": ["file/iana/application/ld+json"],
},
"n:g:z:load_rdf:turtle": {
"ng:n": "Import Turtle triples",
"ng:a": "Import Turtle triples into the document",
"ng:c": "service",
"ng:u": "load_graph",// favicon. can be a did:ng:j
"ng:g": "n:g:z:load_rdf:turtle",
"ng:o": [],
"ng:w": ["data/graph"],
},
"n:g:z:load_rdf:n3": {
"ng:n": "Import N3 triples",
"ng:a": "Import N3 triples into the document",
"ng:c": "service",
"ng:u": "load_graph",// favicon. can be a did:ng:j
"ng:g": "n:g:z:load_rdf:n3",
"ng:o": [],
"ng:w": ["data/graph"],
},
"n:g:z:load_rdf:json_ld": {
"ng:n": "Import JSON-LD triples",
"ng:a": "Import JSON-LD triples into the document",
"ng:c": "service",
"ng:u": "load_graph",// favicon. can be a did:ng:j
"ng:g": "n:g:z:load_rdf:json_ld",
"ng:o": [],
"ng:w": ["data/graph"],
},
"n:g:z:load_file": {
"ng:n": "Add file",
"ng:a": "Add a binary file in the document",
"ng:c": "service",
"ng:u": "load",// favicon. can be a did:ng:j
"ng:g": "n:g:z:load_file",
"ng:o": [],
"ng:w": ["data/graph"],
},
"n:g:z:dump_file": {
"ng:n": "Export file",
"ng:a": "Get the binary content of a file",
"ng:c": "service",
"ng:u": "dump",// favicon. can be a did:ng:j
"ng:g": "n:g:z:dump_file",
"ng:o": ["file*"],
"ng:result": ["file/iana/*"],
},
"n:g:z:dump_json": {
"ng:n": "JSON export",
"ng:a": "Export JSON content of document",
"ng:c": "service",
"ng:u": "data",// favicon. can be a did:ng:j
"ng:g": "n:g:z:dump_json",
"ng:o": ["data/json", "data/map", "data/array", "data/table", "doc/diagram/jsmind", "doc/diagram/gantt", "doc/diagram/excalidraw", "doc/viz/*", "doc/chart/*", "prod/cad"],
"ng:w": [],
"ng:result": ["file/iana/application/json"],
},
"n:g:z:dump_xml": {
"ng:n": "XML export",
"ng:a": "Export XML content of document",
"ng:c": "service",
"ng:u": "data",// favicon. can be a did:ng:j
"ng:g": "n:g:z:dump_xml",
"ng:o": ["post/rich","post/md","post/html","page","data/xml", "doc/diagram/drawio"],
"ng:w": [],
"ng:result": ["file/iana/text/xml"],
},
"n:g:z:dump_text": {
"ng:n": "Text export",
"ng:a": "Export plain-text content of document",
"ng:c": "service",
"ng:u": "dump",// favicon. can be a did:ng:j
"ng:g": "n:g:z:dump_text",
"ng:o": ["post/text", "post/asciidoc", "code*", "service*", "contract", "query/sparql*","query/graphql","doc/diagram/mermaid","doc/diagram/graphviz","doc/diagram/flowchart",
"doc/diagram/sequence","doc/diagram/markmap","doc/diagram/mymind","doc/music*", "doc/maths", "doc/chemistry", "doc/ancientscript", "doc/braille", "media/subtitle"],
"ng:w": [],
"ng:result": ["file/iana/text/plain"],
},
"n:g:z:dump_ng_html_file": {
"ng:n": "NextGraph Standalone file",
"ng:a": "Get a standalone HTML file of this Document",
"ng:c": "service",
"ng:u": "ext",// favicon. can be a did:ng:j
"ng:g": "n:g:z:dump_ng_html_file",
"ng:o": ["data/graph"],
"ng:w": [],
"ng:result": ["file/iana/text/html"],
},
"n:g:z:load_json": {
"ng:n": "Import JSON",
"ng:a": "Import some JSON into the document",
"ng:c": "service",
"ng:u": "load",// favicon. can be a did:ng:j
"ng:g": "n:g:z:load_json",
"ng:o": [],
"ng:w": ["data/json","data/map", "data/array"],
},
"n:g:z:load_xml": {
"ng:n": "Import XML",
"ng:a": "Import some XML into the document",
"ng:c": "service",
"ng:u": "load",// favicon. can be a did:ng:j
"ng:g": "n:g:z:load_xml",
"ng:o": [],
"ng:w": ["data/xml"],
},
"n:g:z:load_text": {
"ng:n": "Import Text",
"ng:a": "Import some text into the document",
"ng:c": "service",
"ng:u": "load",// favicon. can be a did:ng:j
"ng:g": "n:g:z:load_text",
"ng:o": [],
"ng:w": ["post/text","post/rich","post/md"],
},
"n:g:z:load_md": {
"ng:n": "Import Markdown",
"ng:a": "Import some Markdown into the document",
"ng:c": "service",
"ng:u": "load",// favicon. can be a did:ng:j
"ng:g": "n:g:z:load_md",
"ng:o": [],
"ng:w": ["post/md"],
},
"n:g:z:sparql_query": {
"ng:n": "SPARQL query",
"ng:a": "Invoke a SPARQL Query",
"ng:c": "service",
"ng:u": "sparql_query",// favicon. can be a did:ng:j
"ng:g": "n:g:z:sparql_query",
"ng:o": ["data/graph"],
"ng:w": [],
"ng:result": ["file/iana/application/sparql-results+json","file/iana/application/json"]
},
"n:g:z:sparql_update": {
"ng:n": "SPARQL update",
"ng:a": "Invoke a SPARQL Update",
"ng:c": "service",
"ng:u": "sparql_query",// favicon. can be a did:ng:j
"ng:g": "n:g:z:sparql_update",
"ng:o": [],
"ng:w": ["data/graph"],
},
"n:g:z:dump_crdt_source": { // uses dump_rdf, dump_text, dump_json or dump_xml depending on the CRDT type
"ng:n": "Export source",
"ng:a": "Export source of document as text file",
"ng:c": "service",
"ng:u": "source",// favicon. can be a did:ng:j
"ng:g": "n:g:z:dump_crdt_source",
"ng:o": ["data/graph"],
"ng:w": [],
"ng:result": ["file/iana/*"]
},
};

@ -16,7 +16,15 @@ const config = {
'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)' },
},
},

@ -2,7 +2,7 @@
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"useDefineForClassFields": false,
"module": "ESNext",
"resolveJsonModule": true,
"baseUrl": ".",

@ -560,7 +560,7 @@ pub struct DocAddFile {
#[derive(Clone, Debug, Serialize, Deserialize)]
pub struct DocCreate {
store: StoreRepo,
content_type: BranchContentType,
class: String,
}
#[derive(Clone, Debug, Serialize, Deserialize)]
@ -579,7 +579,7 @@ pub enum AppRequestPayloadV0 {
Delete(DocDelete),
//Invoke(InvokeArguments),
SmallFilePut(SmallFile),
RandomAccessFilePut(String), // content_type
RandomAccessFilePut(String), // content_type (iana media type)
RandomAccessFilePutChunk((u32, serde_bytes::ByteBuf)), // end the upload with an empty vec
}

@ -214,9 +214,7 @@ impl<'a, 'b: 'a> SimpleUpdateEvaluator<'a, 'b> {
GraphName::NamedNode(graph_name) => graph_name.into(),
GraphName::DefaultGraph => {
if let Some(default_graph) = &self.options.query_options.default_graph {
crate::oxrdf::GraphNameRef::NamedNode(NamedNodeRef::new_unchecked(
&default_graph,
))
GraphNameRef::NamedNode(NamedNodeRef::new_unchecked(&default_graph))
} else {
return Err(EvaluationError::NoDefaultGraph);
}

@ -37,6 +37,7 @@ pub enum NgError {
InvalidArgument,
PermissionDenied,
InvalidPazzle,
InvalidMnemonic,
CommitLoadError(CommitLoadError),
ObjectParseError(ObjectParseError),
StorageError(StorageError),

@ -1293,7 +1293,7 @@ pub enum Quorum {
#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
pub enum BranchContentType {
GraphOnly,
Graph,
YMap,
YXml,
YText,
@ -1302,8 +1302,7 @@ pub enum BranchContentType {
//Owl,
//Shacl,
//Shex,
None, // this is used by Store, Overlay and User BranchTypes
//Chat,
None, // this is used by Overlay and User BranchTypes
}
/// Branch definition

@ -230,3 +230,31 @@ pub fn display_timestamp(ts: &Timestamp) -> String {
}
pub(crate) type Receiver<T> = mpsc::UnboundedReceiver<T>;
#[cfg(test)]
mod test {
use crate::log::*;
#[test]
pub fn test_locales() {
let list = vec!["C", "c", "aa-bb-cc-dd", "aa-ff_bb.456d"];
let res: Vec<String> = list
.iter()
.filter_map(|lang| {
if *lang == "C" || *lang == "c" {
None
} else {
let mut split = lang.split('.');
let code = split.next().unwrap();
let code = code.replace("_", "-");
let mut split = code.rsplitn(2, '-');
let country = split.next().unwrap();
Some(match split.next() {
Some(next) => format!("{}-{}", next, country.to_uppercase()),
None => country.to_string(),
})
}
})
.collect();
log_debug!("{:?}", res);
}
}

@ -29,6 +29,7 @@ once_cell = "1.17.1"
getrandom = { version = "0.1.1", features = ["wasm-bindgen"] }
rand = { version = "0.7", features = ["getrandom"] }
wasm-bindgen = { version = "0.2", features = ["serde-serialize"] }
sys-locale = { version = "0.3.1", features = ["js"] }
ng-repo = { path = "../ng-repo" }
ng-net = { path = "../ng-net" }
ng-client-ws = { path = "../ng-client-ws" }

@ -26,6 +26,7 @@ use serde_json::json;
use async_std::stream::StreamExt;
use js_sys::Array;
use oxrdf::Triple;
use sys_locale::get_locales;
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::future_to_promise;
use wasm_bindgen_futures::JsFuture;
@ -54,6 +55,11 @@ use nextgraph::local_broker::*;
use crate::model::*;
#[wasm_bindgen]
pub async fn locales() -> Result<JsValue, JsValue> {
Ok(serde_wasm_bindgen::to_value(&get_locales().collect::<Vec<_>>()).unwrap())
}
#[wasm_bindgen]
pub async fn get_local_bootstrap(location: String, invite: JsValue) -> JsValue {
let res = retrieve_local_bootstrap(location, invite.as_string(), false).await;
@ -134,6 +140,53 @@ pub fn wallet_open_with_pazzle(
}
}
#[wasm_bindgen]
pub fn wallet_open_with_mnemonic(
wallet: JsValue,
mnemonic: Vec<u16>,
pin: JsValue,
) -> Result<JsValue, JsValue> {
let encrypted_wallet = serde_wasm_bindgen::from_value::<Wallet>(wallet)
.map_err(|_| "Deserialization error of wallet")?;
let pin = serde_wasm_bindgen::from_value::<[u8; 4]>(pin)
.map_err(|_| "Deserialization error of pin")?;
let res = nextgraph::local_broker::wallet_open_with_mnemonic(&encrypted_wallet, mnemonic, pin);
match res {
Ok(r) => Ok(r
.serialize(&serde_wasm_bindgen::Serializer::new().serialize_maps_as_objects(true))
.unwrap()),
Err(e) => Err(e.to_string().into()),
}
}
#[wasm_bindgen]
pub fn wallet_open_with_mnemonic_words(
wallet: JsValue,
mnemonic_words: Array,
pin: JsValue,
) -> Result<JsValue, JsValue> {
let encrypted_wallet = serde_wasm_bindgen::from_value::<Wallet>(wallet)
.map_err(|_| "Deserialization error of wallet")?;
let pin = serde_wasm_bindgen::from_value::<[u8; 4]>(pin)
.map_err(|_| "Deserialization error of pin")?;
let mnemonic_vec: Vec<String> = mnemonic_words
.iter()
.map(|word| word.as_string().unwrap())
.collect();
let res = nextgraph::local_broker::wallet_open_with_mnemonic_words(
&encrypted_wallet,
&mnemonic_vec,
pin,
);
match res {
Ok(r) => Ok(r
.serialize(&serde_wasm_bindgen::Serializer::new().serialize_maps_as_objects(true))
.unwrap()),
Err(e) => Err(e.to_string().into()),
}
}
#[wasm_bindgen]
pub fn wallet_update(wallet_id: JsValue, operations: JsValue) -> Result<JsValue, JsValue> {
let _wallet = serde_wasm_bindgen::from_value::<WalletId>(wallet_id)

@ -1,3 +1,6 @@
use ng_repo::errors::NgError;
use std::collections::HashMap;
#[allow(non_upper_case_globals)]
pub const bip39_wordlist: [&str; 2048] = [
"abandon", "ability", "able", "about", "above", "absent", "absorb", "abstract", "absurd",
@ -212,3 +215,26 @@ pub const bip39_wordlist: [&str; 2048] = [
"write", "wrong", "yard", "year", "yellow", "you", "young", "youth", "zebra", "zero", "zone",
"zoo",
];
lazy_static! {
pub static ref BIP39_WORD_MAP: HashMap<String, u16> = {
let mut m = HashMap::new();
for (i, word) in bip39_wordlist.iter().enumerate() {
m.insert(word.to_string(), i as u16);
}
m
};
}
/// Taking a list of bip39 words, returns a list of u16 codes
pub fn encode_mnemonic(words: &Vec<String>) -> Result<Vec<u16>, NgError> {
let mut res = vec![];
for word in words {
res.push(
*BIP39_WORD_MAP
.get(word.as_str())
.ok_or(NgError::InvalidMnemonic)?,
);
}
Ok(res)
}

@ -362,7 +362,7 @@ pub fn open_wallet_with_pazzle(
}
pub fn open_wallet_with_mnemonic(
wallet: Wallet,
wallet: &Wallet,
mut mnemonic: [u16; 12],
mut pin: [u8; 4],
) -> Result<SensitiveWallet, NgWalletError> {
@ -388,7 +388,7 @@ pub fn open_wallet_with_mnemonic(
mnemonic_key.zeroize();
Ok(SensitiveWallet::V0(dec_encrypted_block(
v0.content.encrypted,
v0.content.encrypted.clone(),
master_key,
v0.content.peer_id,
v0.content.nonce,
@ -786,6 +786,7 @@ pub async fn create_wallet_second_step_v0(
wallet_file,
pazzle,
mnemonic: mnemonic.clone(),
mnemonic_str: display_mnemonic(&mnemonic),
wallet_name: params.wallet_name.clone(),
client: params.client.clone(),
user,
@ -893,7 +894,7 @@ mod test {
let _opening_mnemonic = Instant::now();
let _w = open_wallet_with_mnemonic(Wallet::V0(v0.clone()), res.mnemonic, pin.clone())
let _w = open_wallet_with_mnemonic(&Wallet::V0(v0.clone()), res.mnemonic, pin.clone())
.expect("open with mnemonic");
//log_debug!("encrypted part {:?}", w);

@ -1303,6 +1303,8 @@ pub struct CreateWalletResultV0 {
/// randomly generated mnemonic. It is an alternate way to open the wallet.
/// A BIP39 list of 12 words. We argue that the Pazzle is easier to remember than this.
pub mnemonic: [u16; 12],
/// The words of the mnemonic, in a human readable form.
pub mnemonic_str: Vec<String>,
#[zeroize(skip)]
/// a string identifying uniquely the wallet
pub wallet_name: String,
@ -1368,6 +1370,7 @@ pub enum NgWalletError {
InvalidPin,
InvalidPazzle,
InvalidPazzleLength,
InvalidMnemonic,
InvalidSecurityImage,
InvalidSecurityText,
SubmissionError,

@ -0,0 +1,5 @@
NG_ACCOUNT_DOMAIN=
NG_ACCOUNT_ADMIN=
NG_ACCOUNT_LOCAL_PEER_KEY=
NG_ACCOUNT_SERVER=127.0.0.1,1440,[the broker's peer ID]
RUST_LOG=

@ -12,16 +12,23 @@ pnpm --ignore-workspace install
## Dev
```
```bash
cd web
pnpm run dev --host
// in another terminal
# In another terminal...
cd ../
export NG_ACCOUNT_DOMAIN=[?]; export NG_ACCOUNT_ADMIN=[?]; export NG_ACCOUNT_LOCAL_PEER_KEY=[?]; export NG_ACCOUNT_SERVER=127.0.0.1,14400,[?]; export RUST_LOG=debug
# Please set the required environment variables in the .env and then source it it with:
source .env
cargo watch -c -w src -x run
// then open http://localhost:5173/
# Then open http://localhost:5173/#/create
```
> Currently, the ng-account server api is listening on http://127.0.0.1:3031 only which might cause you trouble (coded in `main.rs`, `Create.svelte` and `Delete.svelte`).
> If you need to test from a (virtual) android device, you can use adb to tunnel the connection like: [`adb reverse tcp:3031 tcp:3031`](https://justinchips.medium.com/proxying-adb-client-connections-2ab495f774eb).
## Prod
```

@ -258,7 +258,7 @@ async fn main() -> anyhow::Result<()> {
"Content-Security-Policy",
HeaderValue::from_static(
#[cfg(debug_assertions)]
"default-src 'self' data:; connect-src ipc: https://ipc.localhost 'self' http://192.168.192.2:3031",
"default-src 'self' data:; connect-src ipc: https://ipc.localhost 'self' http://localhost:3031",
#[cfg(not(debug_assertions))]
"default-src 'self' data:; connect-src ipc: https://ipc.localhost 'self'",
@ -304,9 +304,10 @@ async fn main() -> anyhow::Result<()> {
{
log_debug!("CORS: any origin");
cors = cors.allow_any_origin();
log::info!("Starting server on http://192.168.192.2:3031");
log::info!("Starting server on http://localhost:3031");
warp::serve(api_v1.or(static_files).with(cors).with(incoming_log))
.run(([192, 168, 192, 2], 3031))
// TODO: Change this to local network ip?
.run(([127, 0, 0, 1], 3031))
.await;
}

@ -27,7 +27,7 @@
let top;
const api_url = import.meta.env.PROD
? "api/v1/"
: "http://192.168.192.2:3031/api/v1/";
: "http://127.0.0.1:3031/api/v1/";
async function register() {
wait = true;
@ -375,7 +375,7 @@
</div>
</div>
{#if ca}
<div class="row mb-20">
<div class="row mb-10">
<button
on:click|once={accept}
class="mr-5 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"

@ -27,7 +27,7 @@
let top;
const api_url = import.meta.env.PROD
? "api/v1/"
: "http://192.168.192.2:3031/api/v1/";
: "http://127.0.0.1:3031/api/v1/";
async function bootstrap() {}
let error;
@ -154,7 +154,7 @@
</ul>
</div>
</div>
<div class="row mb-20">
<div class="row mb-10">
<button
on:click|once={accept}
class="mr-5 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"

@ -21,7 +21,7 @@
onMount(() => {});
onDestroy(() => {
unsubscribe();
//unsubscribe();
});
</script>

@ -51,7 +51,7 @@
A <b>NextGraph Wallet</b> is unique to each person.<br /> It stores your
credentials to access documents. You need one in order to start using
NextGraph.<br />If you already have a wallet, you should not create a new
one, instead,
one. Instead,
{#if display_note_on_local_wallets}
<a href="/" use:link>login here with your existing wallet.</a>
{:else}

Loading…
Cancel
Save