Create authenticate feature

.github/workflows/ci.yml

@@ -164,4 +164,4 @@ jobs:
           location: 'west europe'
           ports: 80
           command-line: ./node_modules/.bin/community-solid-server -b https://pods.nde.digita.ai -p 80 --rootFilePath /tmp/css -c config/config-file.json -l debug
-          # ip-address: 'Private'
+          # ip-address: 'Private'

packages/nde-erfgoed-components/lib/alerts/alert.component.spec.ts

@@ -7,7 +7,6 @@ describe('AlertComponent', () => {
 
   beforeEach(() => {
     component = window.document.createElement('nde-alert') as AlertComponent;
-    (component as any).createRenderRoot = () => this;
   });
 
   afterEach(() => {

packages/nde-erfgoed-components/lib/demo/demo-form.component.ts

@@ -3,14 +3,14 @@ import { ArgumentError, Collection, MemoryTranslator, Translator } from '@digita
 import { interpret, Interpreter, StateValueMap } from 'xstate';
 import { RxLitElement } from 'rx-lit';
 import { from } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
 import { Login, Search } from '@digita-ai/nde-erfgoed-theme';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
 import { FormCleanlinessStates, FormContext, formMachine, FormRootStates, FormSubmissionStates, FormValidationStates } from '../forms/form.machine';
 import { Event } from '../state/event';
 import { FormValidatorResult } from '../forms/form-validator-result';
-import { Schema } from '../state/schema';
 import { FormEvents } from '../forms/form.events';
+import { FormValidator } from '../forms/form-validator';
 
 /**
  * Validates the form and returns its results.
@@ -19,7 +19,7 @@ import { FormEvents } from '../forms/form.events';
  * @param event The event which triggered the validation.
  * @returns Results of the validation.
  */
-export const validator = (context: FormContext<Collection>, event: Event<FormEvents>): FormValidatorResult[] => [
+export const validator: FormValidator<Collection> = (context: FormContext<Collection>, event: Event<FormEvents>): FormValidatorResult[] => [
   ...context.data && context.data.name ? [] : [ { field: 'name', message: 'demo-form.name.required' } ],
   ...context.data && context.data.uri ? [] : [ { field: 'uri', message: 'demo-form.uri.required' } ],
 ];
@@ -50,7 +50,7 @@ export class DemoFormComponent extends RxLitElement {
    * The actor controlling this component.
    */
   @property({type: Object})
-  public actor: Interpreter<FormContext<Collection>, Schema<FormContext<Collection>, FormEvents>, Event<FormEvents>>;
+  public actor: Interpreter<FormContext<Collection>>;
 
   /**
    * Enables or disables the submit button.
@@ -65,8 +65,8 @@ export class DemoFormComponent extends RxLitElement {
   constructor() {
     super();
 
-    this.actor = interpret<FormContext<Collection>, any, Event<FormEvents>>(
-      formMachine(validator).withContext({
+    this.actor = interpret(
+      formMachine<Collection>(validator).withContext({
         data: { uri: '', name: 'Test' },
         original: { uri: '', name: 'Test' },
       }),
@@ -87,10 +87,11 @@ export class DemoFormComponent extends RxLitElement {
     }
 
     this.subscribe('enableSubmit', from(this.actor).pipe(
-      map((state) => state.value as StateValueMap),
-      map((value) => value[FormRootStates.CLEANLINESS] === FormCleanlinessStates.DIRTY
-      && value[FormRootStates.VALIDATION] === FormValidationStates.VALID
-      && value[FormRootStates.SUBMISSION] === FormSubmissionStates.NOT_SUBMITTED),
+      map((state) => state.matches({
+        [FormRootStates.CLEANLINESS]: FormCleanlinessStates.DIRTY,
+        [FormRootStates.VALIDATION]: FormValidationStates.VALID,
+        [FormRootStates.SUBMISSION]: FormSubmissionStates.NOT_SUBMITTED,
+      })),
     ));
   }
 

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

@@ -1,19 +1,18 @@
 import { Collection } from '@digita-ai/nde-erfgoed-core';
 import { interpret, Interpreter } from 'xstate';
 import { Event } from '../state/event';
-import { Schema } from '../state/schema';
 import { FormElementComponent } from './form-element.component';
 import { FormValidatorResult } from './form-validator-result';
 import { FormEvents } from './form.events';
 import { FormContext, formMachine } from './form.machine';
 
 describe('FormElementComponent', () => {
-  let component: FormElementComponent;
-  let machine: Interpreter<FormContext<Collection>, Schema<FormContext<Collection>, FormEvents>, Event<FormEvents>>;
+  let component: FormElementComponent<Collection>;
+  let machine: Interpreter<FormContext<Collection>>;
 
   beforeEach(() => {
-    machine = interpret<FormContext<Collection>, any, Event<FormEvents>>(
-      formMachine(
+    machine = interpret(
+      formMachine<Collection>(
         (context: FormContext<Collection>, event: Event<FormEvents>): FormValidatorResult[] => [
           ...context.data && context.data.name ? [] : [ { field: 'name', message: 'demo-form.name.required' } ],
           ...context.data && context.data.uri ? [] : [ { field: 'uri', message: 'demo-form.uri.required' } ],
@@ -25,8 +24,7 @@ describe('FormElementComponent', () => {
           validation: [],
         }),
     );
-    component = window.document.createElement('nde-form-element') as FormElementComponent;
-    (component as any).createRenderRoot = () => this;
+    component = window.document.createElement('nde-form-element') as FormElementComponent<Collection>;
 
     component.actor = machine;
     component.field = 'name';

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

@@ -12,7 +12,7 @@ import { FormEvents, FormUpdatedEvent } from './form.events';
 /**
  * A component which shows the details of a single collection.
  */
-export class FormElementComponent extends RxLitElement {
+export class FormElementComponent<T> extends RxLitElement {
 
   /**
    * The component's translator.
@@ -24,7 +24,7 @@ export class FormElementComponent extends RxLitElement {
    * The name of the data attribute edited by the form element.
    */
   @property({type: String})
-  public field: string;
+  public field: keyof T;
 
   /**
    * The element's form validation results.
@@ -36,13 +36,13 @@ export class FormElementComponent extends RxLitElement {
    * The element's data.
    */
   @internalProperty()
-  public data: any;
+  public data: T;
 
   /**
    * The actor controlling this component.
    */
   @property({type: Object})
-  public actor: SpawnedActorRef<Event<FormEvents>, State<FormContext<any>>>;
+  public actor: SpawnedActorRef<Event<FormEvents>, State<FormContext<T>>>;
 
   /**
    * The styles associated with the component.
@@ -120,7 +120,7 @@ export class FormElementComponent extends RxLitElement {
    *
    * @param slotchangeEvent Event fired when slot is changed.
    */
-  handleInputSlotchange(slotchangeEvent: any) {
+  handleInputSlotchange(slotchangeEvent: UIEvent) {
     if (!slotchangeEvent || !slotchangeEvent.target) {
       throw new ArgumentError('Argument slotchangeEvent should be set.', slotchangeEvent);
     }
@@ -137,17 +137,20 @@ export class FormElementComponent extends RxLitElement {
       throw new ArgumentError('Argument this.actor should be set.', this.actor);
     }
 
-    const childNodes: NodeListOf<HTMLElement> = slotchangeEvent.target.assignedNodes({flatten: true});
+    if(!typeof slotchangeEvent.target || !(slotchangeEvent.target instanceof HTMLSlotElement)) {
+      throw new ArgumentError('Argument slotchangeEvent.target should be set with a HTMLSlotElement.', this.actor);
+    }
+
+    const childNodes: Node[] = slotchangeEvent.target.assignedNodes({flatten: true});
 
     childNodes.forEach((node) => {
       if(node && node instanceof HTMLInputElement) {
-        const input = node as HTMLInputElement;
-
         // Set the input field's default value.
-        input.value = this.data[this.field];
+        const fieldData = this.data[this.field];
+        node.value = typeof fieldData === 'string' ? fieldData : '';
 
         // Send event when input field's value changes.
-        input.addEventListener('input', () => this.actor.send({type: FormEvents.FORM_UPDATED, value: input.value, field: this.field} as FormUpdatedEvent));
+        node.addEventListener('input', () => this.actor.send({type: FormEvents.FORM_UPDATED, value: node.value, field: this.field} as FormUpdatedEvent));
       }
     });
   }

packages/nde-erfgoed-components/lib/forms/form-validator.ts

@@ -6,4 +6,4 @@ import { FormContext } from './form.machine';
 /**
  * Validates the form and returns validator results.
  */
-export type FormValidator = (context: FormContext<any>, event: Event<FormEvents>) => FormValidatorResult[];
+export type FormValidator<TData> = (context: FormContext<TData>, event: Event<FormEvents>) => FormValidatorResult[];

packages/nde-erfgoed-components/lib/forms/form.events.ts

@@ -32,13 +32,13 @@ export interface FormSubmittedEvent extends Event<FormEvents> { type: FormEvents
 /**
  * Updates the data in context.
  */
-export const update = assign<FormContext<any>, FormUpdatedEvent>({
-  data: (context: FormContext<any>, event: FormUpdatedEvent) => ({...context.data ? context.data : {}, [event.field]: event.value}),
+export const update = assign<FormContext<unknown>, FormUpdatedEvent>({
+  data: (context: FormContext<unknown>, event: FormUpdatedEvent) => (typeof context.data === 'object' ? {...context.data ? context.data : {}, [event.field]: event.value} : event.value),
 });
 
 /**
  * Validates the data in context.
  */
-export const validate = (validator: FormValidator) => assign<FormContext<any>, Event<FormEvents>>({
-  validation: (context: FormContext<any>, event: Event<FormEvents>) => [ ...validator(context, event) ],
+export const validate = (validator: FormValidator<unknown>) => assign<FormContext<unknown>, Event<FormEvents>>({
+  validation: (context: FormContext<unknown>, event: Event<FormEvents>) => [ ...validator(context, event) ],
 });

packages/nde-erfgoed-components/lib/forms/form.machine.spec.ts

@@ -1,16 +1,15 @@
 import { Collection } from '@digita-ai/nde-erfgoed-core';
 import { interpret, Interpreter, StateValueMap } from 'xstate';
 import { Event } from '../state/event';
-import { Schema } from '../state/schema';
 import { FormValidatorResult } from './form-validator-result';
 import { FormEvents } from './form.events';
 import { FormCleanlinessStates, FormContext, formMachine, FormRootStates, FormSubmissionStates, FormValidationStates } from './form.machine';
 
 describe('FormMachine', () => {
-  let machine: Interpreter<FormContext<Collection>, Schema<FormContext<Collection>, FormEvents>, Event<FormEvents>>;
+  let machine: Interpreter<FormContext<Collection>>;
 
   beforeEach(() => {
-    machine = interpret<FormContext<Collection>, any, Event<FormEvents>>(
+    machine = interpret<FormContext<Collection>>(
       formMachine(
         (context: FormContext<Collection>, event: Event<FormEvents>): FormValidatorResult[] => [
           ...context.data && context.data.name ? [] : [ { field: 'name', message: 'demo-form.name.required' } ],

packages/nde-erfgoed-components/lib/forms/form.machine.ts

@@ -59,7 +59,7 @@ export type FormStates = FormRootStates | FormSubmissionStates | FormCleanliness
 /**
  * The form component machine.
  */
-export const formMachine = (validator: FormValidator) => createMachine<FormContext<any>, Event<FormEvents>, State<FormStates, FormContext<any>>>({
+export const formMachine = <T>(validator: FormValidator<T>) => createMachine<FormContext<T>, Event<FormEvents>, State<FormStates, FormContext<T>>>({
   id: 'form',
   type: 'parallel',
   states: {
@@ -87,7 +87,7 @@ export const formMachine = (validator: FormValidator) => createMachine<FormConte
           always: [
             {
               target: FormCleanlinessStates.PRISTINE,
-              cond: (context, event) => JSON.stringify(context.data) === JSON.stringify(context.original),
+              cond: (context: FormContext<T>) => JSON.stringify(context.data) === JSON.stringify(context.original),
             },
             {
               target: FormCleanlinessStates.DIRTY,
@@ -132,7 +132,7 @@ export const formMachine = (validator: FormValidator) => createMachine<FormConte
           always: [
             {
               target: FormSubmissionStates.SUBMITTED,
-              cond: (context, event) => context.validation === null || context.validation.length === 0,
+              cond: (context: FormContext<T>) => context.validation === null || context.validation.length === 0,
             },
             {
               target: FormSubmissionStates.NOT_SUBMITTED,
@@ -180,7 +180,7 @@ export const formMachine = (validator: FormValidator) => createMachine<FormConte
           always: [
             {
               target: FormValidationStates.VALID,
-              cond: (context, event) => context.validation === null || context.validation.length === 0,
+              cond: (context: FormContext<T>) => context.validation === null || context.validation.length === 0,
             },
             {
               target: FormValidationStates.INVALID,

packages/nde-erfgoed-components/lib/state/state.ts

@@ -1,11 +1,13 @@
+import { StateValueMap, Typestate } from 'xstate';
+
 /**
  * Represents a state node with its corresponding context.
  */
-export interface State<TStates, TContext> {
+export interface State<TStates extends string, TContext> extends Typestate<TContext> {
   /**
    * The value of the state node.
    */
-  value: TStates;
+  value: TStates | StateValueMap;
 
   /**
    * The state's corresponding context.

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

@@ -13,3 +13,5 @@ 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';

packages/nde-erfgoed-core/lib/logging/console-logger.ts

@@ -30,7 +30,7 @@ export class ConsoleLogger extends Logger {
    * @param message Message that should be logged
    * @param data Any relevant data that should be logged
    */
-  log(level: LoggerLevel, typeName: string, message: string, data?: any) {
+  log(level: LoggerLevel, typeName: string, message: string, data?: unknown) {
     if (level === null || level === undefined) {
       throw new ArgumentError('level should be set', typeName);
     }

packages/nde-erfgoed-core/lib/logging/logger.ts

@@ -26,7 +26,7 @@ export abstract class Logger {
    * @param message Message that should be logged
    * @param data Any relevant data that should be logged
    */
-  info(typeName: string, message: string, data?: any) {
+  info(typeName: string, message: string, data?: unknown) {
     if (!typeName) {
       throw new ArgumentError('Typename should be set', typeName);
     }
@@ -45,7 +45,7 @@ export abstract class Logger {
    * @param message Message that should be logged
    * @param data Any relevant data that should be logged
    */
-  debug(typeName: string, message: string, data?: any) {
+  debug(typeName: string, message: string, data?: unknown) {
     if (!typeName) {
       throw new ArgumentError('Typename should be set', typeName);
     }
@@ -64,7 +64,7 @@ export abstract class Logger {
    * @param message Message that should be logged
    * @param data Any relevant data that should be logged
    */
-  warn(typeName: string, message: string, data?: any) {
+  warn(typeName: string, message: string, data?: unknown) {
     if (!typeName) {
       throw new ArgumentError('Typename should be set', typeName);
     }
@@ -84,7 +84,7 @@ export abstract class Logger {
    * @param error The error that was thrown
    * @param caught The error that was caught
    */
-  error(typeName: string, message: string, error?: Error | any, caught?: any) {
+  error(typeName: string, message: string, error?: Error | unknown, caught?: unknown) {
     if (!typeName) {
       throw new ArgumentError('Typename should be set', typeName);
     }
@@ -104,6 +104,6 @@ export abstract class Logger {
    * @param message Message that should be logged
    * @param data Any relevant data that should be logged
    */
-  abstract log(level: LoggerLevel, typeName: string, message: string, data?: any): void;
+  abstract log(level: LoggerLevel, typeName: string, message: string, data?: unknown): void;
 
 }

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

@@ -0,0 +1,65 @@
+import { Observable, of } from 'rxjs';
+import { Logger } from '../logging/logger';
+import { SolidService } from './solid.service';
+
+/**
+ * A mock implementation of the Solid service.
+ */
+export class SolidMockService extends SolidService {
+
+  /**
+   * Instantiates a solid mock service.
+   *
+   * @param logger The logger used in the service.
+   */
+  constructor(private logger: Logger) {
+    super();
+  }
+
+  /**
+   * Makes sure the profile document of a WebID contains
+   * the necessary triples for authentication, and whether they are correct
+   *
+   * @param webId The WebID to validate
+   */
+  validateWebId(webId: string): Observable<boolean> {
+    this.logger.debug(SolidMockService.name, 'Validating WebID', webId);
+    return of(true);
+  }
+
+  /**
+   * Retrieves the value of the oidcIssuer triple from a profile document
+   * for a given WebID
+   *
+   * @param webId The WebID for which to retrieve the OIDC issuer
+   */
+  getIssuer(webId: string): Observable<string> {
+    this.logger.debug(SolidMockService.name, 'Retrieving issuer', webId);
+    return of('issuer');
+  }
+
+  /**
+   * Handles the post-login logic, as well as the restoration
+   * of sessions on page refreshes
+   */
+  handleIncomingRedirect(): Observable<unknown> {
+    this.logger.debug(SolidMockService.name, 'Trying to retrieve session');
+    return of({ isLoggedIn: true });
+  }
+
+  /**
+   * Redirects the user to their OIDC provider
+   */
+  login(): Observable<unknown> {
+    this.logger.debug(SolidMockService.name, 'Loggin in user');
+    return of(true);
+  }
+
+  /**
+   * Deauthenticates the user from their OIDC issuer
+   */
+  logout(): Observable<unknown> {
+    this.logger.debug(SolidMockService.name, 'Logging out user');
+    return of(true);
+  }
+}