feat: develop section component

packages/dgt-components/demo/demo-authenticate.component.ts

@@ -0,0 +1,49 @@
+import { css, html, unsafeCSS } from 'lit-element';
+import { RxLitElement } from 'rx-lit';
+import { Theme } from '@digita-ai/dgt-theme';
+import { SolidSDKService } from '../lib/services/solid-sdk.service'
+import { AuthenticateComponent } from '../lib/components/authentication/authenticate.component';
+
+export class DemoAuthenticateComponent extends RxLitElement {
+  private solidService = new SolidSDKService('UI Transfer');
+
+  onAuthenticated = (event: CustomEvent): void => {  };
+
+
+  constructor() {
+    super();
+    this.define('auth-flow', AuthenticateComponent);
+
+  }
+
+  define(tag: string, module: CustomElementConstructor): void {
+
+    if (!customElements.get(tag)) customElements.define(tag, module);
+
+  }
+  /**
+   * Renders the component as HTML.
+   *
+   * @returns The rendered HTML of the component.
+   */
+  render() {
+
+    return html`
+        <auth-flow .solidService="${this.solidService}" @authenticated="${this.onAuthenticated}"></auth-flow>
+  `;
+
+  }
+
+  /**
+   * The styles associated with the component.
+   */
+  static get styles() {
+
+    return [
+      unsafeCSS(Theme),
+      css``,
+    ];
+
+  }
+
+}

packages/dgt-components/demo/demo.ts

@@ -1,15 +1,17 @@
 import { Parser } from 'n3';
 import { ComponentEventType, ComponentReadEvent, ComponentResponseEvent, ComponentWriteEvent } from '@digita-ai/semcom-sdk';
-import {ProfileNameComponent} from '../lib/profile/profile-name.component';
-import {FormElementComponent} from '../lib/forms/form-element.component';
-import {ContentHeaderComponent} from '../lib/header/content-header.component';
-import {CardComponent} from '../lib/cards/card.component';
-import { ProfileContactComponent } from '../lib/profile/profile-contact.component';
-import { ProfilePayslipComponent } from '../lib/profile/profile-payslip.component';
-import { ListItemComponent } from '../lib/list-item/list-item.component';
+import {ProfileNameComponent} from '../lib/components/profile/profile-name.component';
+import {FormElementComponent} from '../lib/components/forms/form-element.component';
+import {CardComponent} from '../lib/components/cards/card.component';
+import { ProfileContactComponent } from '../lib/components/profile/profile-contact.component';
+import { ProfilePayslipComponent } from '../lib/components/profile/profile-payslip.component';
+import { DemoAuthenticateComponent } from './demo-authenticate.component';
+import { ListItemComponent } from '../lib/components/list-item/list-item.component';
 
+
+
+customElements.define('demo-auth', DemoAuthenticateComponent);
 customElements.define('nde-form-element', FormElementComponent);
-customElements.define('nde-content-header', ContentHeaderComponent);
 customElements.define('nde-card', CardComponent);
 customElements.define('profile-name-component', ProfileNameComponent);
 customElements.define('profile-contact-component', ProfileContactComponent);

packages/dgt-components/demo/index.html

@@ -13,6 +13,7 @@
   <!-- just a placeholder for serving in develop -->
   <script>window.global = window;</script>
   <script type="module" src="./demo.ts"></script>
+  <demo-auth></demo-auth>
 
   <list-item>
     <div slot="icon"><img style="height: 50px" src="./itsme.svg"></div>
@@ -22,6 +23,5 @@
   <profile-name-component entry="./data/profile.txt"></profile-name-component>
   <profile-contact-component entry="./data/profile.txt"></profile-contact-component>
   <profile-payslip-component entry="./data/profile.txt"></profile-payslip-component>
-
 </body>
 </html>

packages/dgt-components/demo/styles.module.css

@@ -5,6 +5,8 @@ html {
 }
 
 body {
+  margin: auto;
+  width: 550px;
   height: 100%;
   background-color: var(--colors-background-normal);
   display: flex;

packages/dgt-components/lib/components/authentication/authenticate.component.ts

@@ -0,0 +1,115 @@
+import { html, internalProperty, TemplateResult, property, PropertyValues, unsafeCSS, CSSResultArray, css } from 'lit-element';
+import { createMachine, DoneEvent, interpret, Interpreter, State, StateMachine } from 'xstate';
+import { RxLitElement } from 'rx-lit';
+import { from } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Theme } from '@digita-ai/dgt-theme';
+import { SolidSDKService } from '../../services/solid-sdk.service';
+import { Issuer } from '../../models/issuer.model';
+import { ProviderListComponent } from '../provider/provider-list.component';
+import { SeparatorComponent } from '../separator/separator.component';
+import { LoadingComponent } from '../loading/loading.component';
+import { WebIdComponent } from './webid.component';
+import { AuthenticateContext, AuthenticateEvent, authenticateMachine, AuthenticateState, AuthenticateStates, AuthenticateStateSchema, SelectedIssuerEvent, WebIdEnteredEvent } from './authenticate.machine';
+
+export class AuthenticateComponent extends RxLitElement {
+
+  private actor: Interpreter<AuthenticateContext, AuthenticateStateSchema, AuthenticateEvent, AuthenticateState>;
+  private machine: StateMachine<AuthenticateContext, AuthenticateStateSchema, AuthenticateEvent, AuthenticateState>;
+  private predifinedIssuers: Issuer[] = [
+    { description: 'Solid Community', icon: 'data:image/png;base64,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', uri: 'https://solidcommunity.net' },
+    { description: 'Inrupt', icon: 'https://inrupt.com/static/inrupt-social_0-372b94bf42bea86a81cc362e0c99d115.jpg', uri: 'https://inrupt.net/' },
+  ];
+
+  @internalProperty()
+  state?: State<AuthenticateContext>;
+
+  @internalProperty()
+  issuers?: Issuer[];
+
+  @property({ type: Object }) solidService: SolidSDKService;
+
+  @property({ type: Boolean }) hideWebId = false;
+
+  @property({ type: Boolean }) hideIssuers = false;
+
+  constructor() {
+
+    super();
+
+    this.define('provider-list', ProviderListComponent);
+    this.define('webid-form', WebIdComponent);
+    this.define('separator-component', SeparatorComponent);
+    this.define('loading-component', LoadingComponent);
+
+  }
+
+  updated(changed: PropertyValues): void {
+
+    super.updated(changed);
+
+    if (changed.has('solidService')) {
+
+      if (this.actor) this.actor.stop();
+
+      this.machine = createMachine(authenticateMachine(this.solidService));
+
+      // eslint-disable-next-line no-console
+      this.actor = interpret(this.machine, { devTools: true }).onTransition((state) => console.log(state.value));
+
+      this.subscribe('state', from(this.actor));
+      this.subscribe('issuers', from(this.actor).pipe(map((state) => state.context.issuers)));
+
+      this.actor.onDone((event: DoneEvent) => { this.dispatchEvent(new CustomEvent('authenticated', { detail: event.data.session })); });
+
+      this.actor.start();
+
+    }
+
+  }
+
+  onSubmit = (event: CustomEvent): void => {
+
+    event.preventDefault();
+    this.actor.send(new WebIdEnteredEvent(event.detail));
+
+  };
+
+  onButtonCreateWebIDClick = (): void => { this.dispatchEvent(new CustomEvent('create-webid')); };
+
+  render(): TemplateResult {
+
+    return html`
+      ${ this.state?.matches(AuthenticateStates.AWAITING_WEBID) ? html`
+       ${ !this.hideIssuers ? html`<provider-list @issuer-selected="${(event: CustomEvent) => this.actor.send(new SelectedIssuerEvent(event.detail))}" .providers="${this.predifinedIssuers}"></provider-list>` : html``}
+       ${ !this.hideWebId && !this.hideIssuers ? html`<separator-component>of</separator-component>` : html`` }
+       ${ !this.hideWebId ? html`<webid-form @submit-webid="${this.onSubmit}" @create-webid="${this.onButtonCreateWebIDClick}"></webid-form>` : html``}
+       ` : html` ${ this.state?.matches(AuthenticateStates.SELECTING_ISSUER) ? html`
+        <provider-list @issuer-selected="${(event: CustomEvent) => this.actor.send(new SelectedIssuerEvent(event.detail))}" .providers="${this.issuers}"></provider-list>`
+    : html`<loading-component></loading-component>` }
+    `}`;
+
+  }
+
+  define(tag: string, module: CustomElementConstructor): void {
+
+    if (!customElements.get(tag)) customElements.define(tag, module);
+
+  }
+  static get styles(): CSSResultArray {
+
+    return [
+      unsafeCSS(Theme),
+      css`
+
+      separator-component {
+        margin: var(--gap-large) 0;
+      }
+      `,
+    ];
+
+  }
+
+}
+
+export default AuthenticateComponent;