From f43b359f4526a615b643a60627668a14d4b5fff5 Mon Sep 17 00:00:00 2001 From: Samu Lang Date: Sat, 25 Apr 2026 14:33:44 +0100 Subject: [PATCH] Iteration: Solid & JSON --- package.json | 5 ++++ public/callback.html | 9 ++++++++ public/index.html | 1 + src/index.js | 54 ++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 65 insertions(+), 4 deletions(-) create mode 100644 public/callback.html diff --git a/package.json b/package.json index 56c3516..c74fbd8 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,11 @@ "scripts": { "start": "npm install && webpack serve --mode development --devtool source-map" }, + "dependencies": { + "@solid/reactive-authentication": "^0.1.2", + "@solid/object": "^0.5.0", + "n3": "^2.0.3" + }, "devDependencies": { "webpack": "^5", "webpack-cli": "^7", diff --git a/public/callback.html b/public/callback.html new file mode 100644 index 0000000..0d4e612 --- /dev/null +++ b/public/callback.html @@ -0,0 +1,9 @@ + + + + + Authorization Code callback + + + + diff --git a/public/index.html b/public/index.html index 37c97a3..8d703d2 100644 --- a/public/index.html +++ b/public/index.html @@ -27,5 +27,6 @@ + diff --git a/src/index.js b/src/index.js index 14ec857..10bb925 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,7 @@ +import * as A from "@solid/reactive-authentication" +import * as M from "@solid/object" +import * as N from "n3" + //#region Elements const editorForm = document.querySelector("form") @@ -5,9 +9,13 @@ const titleInput = document.querySelector("input.title") const nameInput = document.querySelector("input.name") const loadButton = document.querySelector("button.load") const removeButton = document.querySelector("button.remove") +const authorizationCodeFlow = document.querySelector("authorization-code-flow") //#endregion +let myWebId +await authenticate() + //#region Event handlers editorForm.addEventListener("submit", onSave) @@ -35,7 +43,7 @@ async function onRemove() { //#region Functional operations async function identify() { - return "bookData" + return new URL("bookData", await storage()).toString() } function populate(data) { @@ -65,20 +73,51 @@ function normalize(data) { `) } +async function authenticate() { + const callbackUri = new URL("/callback.html", location.href).toString() + + const dPoPTokenProvider = new A.DPoPTokenProvider(callbackUri, authorizationCodeFlow.getCode.bind(authorizationCodeFlow)) + new A.ReactiveFetchManager([dPoPTokenProvider]) +} + +async function storage() { + const profile = await webId() + + for (const storage of profile.pimStorage) return storage +} + +async function webId() { + if (myWebId === undefined) { + const webIdUrl = prompt("What is your WebID?") + const webIdResponse = await fetch(webIdUrl) + const webIdText = await webIdResponse.text() + const webIdDataset = parseRdf(webIdText, webIdUrl) + const webId = new M.WebIdDataset(webIdDataset, N.DataFactory) + + myWebId = webId.mainSubject + } + + return myWebId +} + //#endregion //#region Data operations async function load(id) { - return localStorage.getItem(id) ?? undefined + const response = await fetch(id) + + if (!response.ok) return undefined + + return await response.text() } async function save(id, data) { - localStorage.setItem(id, data) + await fetch(id, {method: "PUT", body: data, headers: {"Content-Type": "application/json"}}) } async function remove(id) { - localStorage.removeItem(id) + await fetch(id, {method: "DELETE"}) } function parse(data) { @@ -89,4 +128,11 @@ function serialize(data) { return JSON.stringify(data) } +function parseRdf(rdf, baseIRI) { + const store = new N.Store + store.addQuads(new N.Parser({baseIRI}).parse(rdf)); + + return store +} + //#endregion