feat: use re-bundles solid client to login (#81)

* build: re-bundle inrupt sdk

* build: export all modules of the solid client

* build: minify solid client bundle

* feat: login by using the solid sdk service

* style: fixed newlines

* fix: don't become authenticated before redirect

packages/nde-erfgoed-client/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

packages/nde-erfgoed-client/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "../../.eslintrc"
+  ]
+}

packages/nde-erfgoed-client/.npmrc

@@ -0,0 +1,5 @@
+registry=https://registry.npmjs.org/
+
+@digita-ai:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
+always-auth=true

packages/nde-erfgoed-client/lib/index.ts

@@ -0,0 +1,2 @@
+export * as authn from '@inrupt/solid-client-authn-browser';
+export * as client from '@inrupt/solid-client';

packages/nde-erfgoed-client/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@digita-ai/nde-erfgoed-client",
+  "version": "0.0.1",
+  "description": "Re-bundled version of the Solid client.",
+  "author": "Wouter Janssens <wouter@digita.ai>",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rimraf ./dist && webpack",
+    "build:dev": "npm run build",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix ."
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.10.0",
+    "@typescript-eslint/parser": "^4.10.0",
+    "eslint": "^7.16.0",
+    "rimraf": "^3.0.2",
+    "ts-loader": "9.1.1",
+    "typescript": "^4.1.3",
+    "webpack": "^5.36.1",
+    "webpack-cli": "^4.6.0"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/digita-ai/nde-erfgoedinstellingen.git",
+    "directory": "packages/nde-erfgoed-core"
+  },
+  "bugs": {
+    "url": "https://github.com/digita-ai/nde-erfgoedinstellingen/issues"
+  },
+  "dependencies": {
+    "@inrupt/solid-client": "1.6.1",
+    "@inrupt/solid-client-authn-browser": "1.8.0",
+    "rxjs": "^6.6.7"
+  }
+}

packages/nde-erfgoed-client/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    // Recommended by Lit Element
+    "module": "es2015",
+    "target": "es2017",
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    // Others
+    "sourceMap": true,
+    "declaration": true,
+    "outDir": "dist",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "baseUrl": "./",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "downlevelIteration": true,
+    "suppressImplicitAnyIndexErrors": true,
+  },
+  "include": ["lib"],
+  "exclude": [
+    "**/*.spec.ts",
+    "node_modules",
+    "dist"
+  ]
+}

packages/nde-erfgoed-client/webpack.config.js

@@ -0,0 +1,31 @@
+const path = require('path');
+module.exports = {
+  mode: 'production',
+  entry: './lib/index.ts',
+  devtool: 'source-map',
+  output: {
+    publicPath: '',
+    libraryTarget: 'module',
+    path: path.resolve(__dirname, 'dist'), 
+    filename: 'index.js' 
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ]
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+    fallback: { 
+      stream: require.resolve('stream-browserify') ,
+      crypto: require.resolve('crypto-browserify')
+    }
+  },
+  experiments: {
+    outputModule: true
+  }
+};

packages/nde-erfgoed-components/lib/forms/form-element.component.ts

@@ -1,4 +1,4 @@
-import { css, html, internalProperty, property, PropertyValues, unsafeCSS } from 'lit-element';
+import { css, html, internalProperty, property, PropertyValues, query, unsafeCSS } from 'lit-element';
 import { ArgumentError, Translator } from '@digita-ai/nde-erfgoed-core';
 import { SpawnedActorRef, State } from 'xstate';
 import { RxLitElement } from 'rx-lit';
@@ -15,6 +15,12 @@ import { FormEvents, FormUpdatedEvent } from './form.events';
  */
 export class FormElementComponent<T> extends RxLitElement {
 
+  /**
+   * The slot element which contains the input field.
+   */
+  @query('slot[name="input"]')
+  inputSlot: HTMLSlotElement;
+
   /**
    * Decides whether a border should be shown around the content
    */
@@ -52,63 +58,56 @@ export class FormElementComponent<T> extends RxLitElement {
   public actor: SpawnedActorRef<Event<FormEvents>, State<FormContext<T>>>;
 
   /**
-   * Hook called on first update after connection to the DOM.
-   * It subscribes to the actor, logs state changes, and pipes state to the properties.
+   * Hook called on every update after connection to the DOM.
    */
-  firstUpdated(changed: PropertyValues) {
-    super.firstUpdated(changed);
+  updated(changed: PropertyValues) {
+    super.updated(changed);
 
-    if (!this.actor) {
-      throw new ArgumentError('Argument this.actor should be set.', this.actor);
-    }
+    if(changed.has('actor')) {
+      // Subscribes to the field's validation results.
+      this.subscribe('validationResults', from(this.actor).pipe(
+        map((state) => state.context?.validation?.filter((result) => result.field === this.field)),
+      ));
 
-    // Subscribes to the field's validation results.
-    this.subscribe('validationResults', from(this.actor).pipe(
-      map((state) => state.context?.validation?.filter((result) => result.field === this.field)),
-    ));
+      // Subscribes to data in the actor's context.
+      this.subscribe('data', from(this.actor).pipe(
+        map((state) => state.context?.data),
+      ));
 
-    // Subscribes to data in the actor's context.
-    this.subscribe('data', from(this.actor).pipe(
-      map((state) => state.context?.data),
-    ));
+      this.bindActorToInput(this.inputSlot, this.actor, this.field, this.data);
+    }
   }
 
   /**
-   * Sets default data and event listener for input form.
-   *
-   * @param slotchangeEvent Event fired when slot is changed.
+   * Binds default data and event listener for input form.
    */
-  handleInputSlotchange(slotchangeEvent: UIEvent) {
-    if (!slotchangeEvent || !slotchangeEvent.target) {
-      throw new ArgumentError('Argument slotchangeEvent should be set.', slotchangeEvent);
-    }
-
-    if (!this.field) {
-      throw new ArgumentError('Argument this.field should be set.', this.field);
+  bindActorToInput(slot: HTMLSlotElement, actor: SpawnedActorRef<Event<FormEvents>, State<FormContext<T>>>, field: keyof T, data: T) {
+    if (!slot) {
+      throw new ArgumentError('Argument slot should be set.', slot);
     }
 
-    if (!this.data) {
-      throw new ArgumentError('Argument this.data should be set.', this.data);
+    if (!actor) {
+      throw new ArgumentError('Argument actor should be set.', actor);
     }
 
-    if (!this.actor) {
-      throw new ArgumentError('Argument this.actor should be set.', this.actor);
+    if (!field) {
+      throw new ArgumentError('Argument field should be set.', field);
     }
 
-    if(!typeof slotchangeEvent.target || !(slotchangeEvent.target instanceof HTMLSlotElement)) {
-      throw new ArgumentError('Argument slotchangeEvent.target should be set with a HTMLSlotElement.', this.actor);
+    if (!data) {
+      throw new ArgumentError('Argument data should be set.', data);
     }
 
-    const childNodes: Node[] = slotchangeEvent.target.assignedNodes({flatten: true});
+    const childNodes: Node[] = slot.assignedNodes({flatten: true});
 
     childNodes.forEach((node) => {
       if(node && node instanceof HTMLInputElement) {
         // Set the input field's default value.
-        const fieldData = this.data[this.field];
+        const fieldData = data[this.field];
         node.value = typeof fieldData === 'string' ? fieldData : '';
 
         // Send event when input field's value changes.
-        node.addEventListener('input', () => this.actor.send({type: FormEvents.FORM_UPDATED, value: node.value, field: this.field} as FormUpdatedEvent));
+        node.addEventListener('input', () => actor.send({type: FormEvents.FORM_UPDATED, value: node.value, field} as FormUpdatedEvent));
       }
     });
   }
@@ -127,7 +126,7 @@ export class FormElementComponent<T> extends RxLitElement {
       <div class="content">
         <div class="field ${this.inverse ? 'no-border' : ''}">
           <div class="input">
-            <slot name="input" @slotchange=${this.handleInputSlotchange}></slot>
+            <slot name="input"></slot>
           </div>
           <div class="icon">
             <slot name="icon"></slot>

packages/nde-erfgoed-core/.npmrc

@@ -2,4 +2,4 @@ registry=https://registry.npmjs.org/
 
 @digita-ai:registry=https://npm.pkg.github.com
 //npm.pkg.github.com/:_authToken=${NPM_TOKEN}
-always-auth=true
+always-auth=true

packages/nde-erfgoed-core/lib/errors/not-implemented-error.ts

@@ -0,0 +1,21 @@
+import { BaseError } from './base-error';
+
+/**
+ * An error thrown when a function is called with invalid arguments.
+ */
+export class NotImplementedError extends BaseError {
+  public readonly name = NotImplementedError.name;
+
+  /**
+   * Instantiates the error.
+   *
+   * @param message A message which describes the error.
+   * @param value The value of the invalid argument.
+   * @param cause The underlying error.
+   */
+  constructor(cause?: Error) {
+    super('Not implemented', cause);
+
+    Object.setPrototypeOf(this, NotImplementedError.prototype);
+  }
+}

packages/nde-erfgoed-core/lib/index.ts

@@ -4,6 +4,7 @@
 export * from './collections/collection';
 export * from './errors/argument-error';
 export * from './errors/base-error';
+export * from './errors/not-implemented-error';
 export * from './i8n/memory-translator';
 export * from './i8n/translation';
 export * from './i8n/translator';
@@ -13,5 +14,6 @@ export * from './logging/logger';
 export * from './stores/memory-store';
 export * from './stores/resource';
 export * from './stores/store';
-export * from './solid/solid.service';
 export * from './solid/solid-mock.service';
+export * from './solid/solid-sdk.service';
+export * from './solid/solid.service';

packages/nde-erfgoed-core/lib/solid/solid-mock.service.ts

@@ -98,7 +98,7 @@ export class SolidMockService extends SolidService {
   /**
    * Redirects the user to their OIDC provider
    */
-  async login(webId: string): Promise<unknown> {
+  async login(webId: string): Promise<void> {
     this.logger.debug(SolidMockService.name, 'Logging in user');
 
     if (!webId) {
@@ -110,8 +110,6 @@ export class SolidMockService extends SolidService {
     if (!isWebIdValid) {
       throw new ArgumentError('nde.root.alerts.error', isWebIdValid);
     }
-
-    return true;
   }
 
   /**