1.3.1

changelog.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 2024-10-07 - 1.3.1 - fix(account)
+Fix: updated cleanupViews method to correctly iterate over children.
+
+- Fixed the iteration over view container children by converting it to an array before removing children. This resolves potential errors due to incorrect for-loop execution on HTMLCollection.
+
+## 2024-10-06 - 1.3.0 - feat(account)
+Implement account and organization management features
+
+- Added account management UI with organization selection
+- Introduced organization creation and selection functionalities
+- Implemented subscription view with Paddle setup integration
+
+## 2024-10-04 - 1.2.2 - fix(core)
+Update dependencies and refactor registration process
+
+- Updated @design.estate/dees-catalog, @design.estate/dees-domtools, and @design.estate/dees-element dependencies to their latest versions.
+- Refactored registration process to improve validation flow.
+- Improved user interface for login and registration prompts.
+- Fixed issues with email and token validation during registration.
+
 ## 2024-10-04 - 1.2.1 - fix(core)
 Added logging for user email login process and fixed client URL parsing
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/idp.global",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "description": "An identity provider software managing user authentications, registrations, and sessions.",
   "main": "dist_ts/index.js",
   "typings": "dist_ts/index.d.ts",
@@ -21,9 +21,9 @@
     "@api.global/typedserver": "^3.0.51",
     "@api.global/typedsocket": "^3.0.1",
     "@consentsoftware_private/catalog": "^1.0.73",
-    "@design.estate/dees-catalog": "^1.1.8",
+    "@design.estate/dees-catalog": "^1.1.13",
-    "@design.estate/dees-domtools": "^2.0.60",
+    "@design.estate/dees-domtools": "^2.0.64",
-    "@design.estate/dees-element": "^2.0.38",
+    "@design.estate/dees-element": "^2.0.39",
     "@push.rocks/lik": "^6.0.15",
     "@push.rocks/qenv": "^6.0.5",
     "@push.rocks/smartdata": "^5.2.10",
@@ -44,7 +44,7 @@
     "@push.rocks/webjwt": "^1.0.9",
     "@push.rocks/websetup": "^3.0.15",
     "@push.rocks/webstore": "^2.0.20",
-    "@serve.zone/platformclient": "^1.0.11",
+    "@serve.zone/platformclient": "^1.1.2",
     "@tsclass/tsclass": "^4.1.2",
     "@uptime.link/webwidget": "^1.1.2"
   },

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/idp.global',
-  version: '1.2.1',
+  version: '1.3.1',
   description: 'An identity provider software managing user authentications, registrations, and sessions.'
 }

ts/index.ts

@@ -20,6 +20,7 @@ export const runCli = async () => {
       mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGO_DB_URL'),
     },
     websiteServer: websiteServer,
+    baseUrl: await serviceQenv.getEnvVarOnDemand('IDP_BASEURL'),
   });
   await reception.start();
 

ts/reception/classes.reception.ts

@@ -21,6 +21,7 @@ export interface IReceptionOptions {
   name: string;
   mongoDescriptor: plugins.smartdata.IMongoDescriptor;
   websiteServer: plugins.typedserver.utilityservers.UtilityWebsiteServer;
+  baseUrl: string;
 }
 
 export class Reception {
@@ -55,6 +56,7 @@ export class Reception {
    * starts the reception instance
    */
   public async start() {
+    await this.szPlatformClient.init(await this.serviceQenv.getEnvVarOnDemand('SERVEZONE_PLATFROM_AUTHORIZATION'));
     logger.log('info', 'starting reception');
     logger.log('info', 'adding typedrouter to website server');
     this.options.websiteServer.typedrouter.addTypedRouter(this.typedrouter);

ts/reception/classes.receptionmailer.ts

@@ -152,9 +152,9 @@ export class ReceptionMailer {
 </html>
 `;
 
-  public sendRegistrationEmail(signupSessionArg: RegistrationSession, validationTokenArg: string) {
+  public async sendRegistrationEmail(signupSessionArg: RegistrationSession, validationTokenArg: string) {
     this.receptionRef.szPlatformClient.emailConnector.sendEmail({
-      from: 'workspace.global <noreply@mail.workspace.global>',
+      from: `idp.global@${this.receptionRef.options.baseUrl} <noreply@mail.workspace.global>`,
       title: 'Verify your Email Address!',
       to: signupSessionArg.emailAddress,
       body: this.createBodyString(`
@@ -163,7 +163,7 @@ export class ReceptionMailer {
         }">${signupSessionArg.emailAddress}</a></h1>
         <p>It looks like you requested to register an account with us. We just want to make sure it really was you.</p>
         <p>In case it was you, <b>please continue with the registration process by clicking the button below</b>. Otherwise, please ignore this email.</p>
-        <a href="https://registration.workspace.global/finishregistration?validationtoken=${encodeURI(
+        <a href="${this.receptionRef.options.baseUrl}/finishregistration?validationtoken=${encodeURI(
           validationTokenArg
         )}"><div class="button">
           continue with registration

ts/reception/classes.registrationsessionmanager.ts

@@ -63,6 +63,7 @@ export class RegistrationSessionManager {
       new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_AfterRegistrationEmailClicked>(
         'afterRegistrationEmailClicked',
         async (requestData) => {
+          console.log(requestData);
           const signupSession = await this.registrationSessions.find(async (itemArg) =>
             itemArg.validateEmailToken(requestData.token)
           );

ts/reception/classes.usermanager.ts

@@ -21,6 +21,7 @@ export class UserManager {
     this.receptionRef.typedrouter.addTypedRouter(this.typedrouter);
     this.typedrouter.addTypedHandler<plugins.lointReception.request.IReq_GetRolesAndOrganizationsForUserId>(
       new plugins.typedrequest.TypedHandler('getRolesAndOrganizationsForUserId', async reqArg => {
+        console.log('user manager: getting roles and orgs');
         const user = await this.getUserByJwtValidation(reqArg.jwt);
         const organizations = await this.receptionRef.organizationmanager.getAllOrganizationsForUser(
           user

ts_idpclient/classes.idpclient.ts

@@ -81,23 +81,23 @@ export class IdpClient {
     new plugins.smartrx.rxjs.Subject<plugins.lointReception.data.TLoginStatus>();
 
   public ssoStore = new plugins.webstore.WebStore({
-    storeName: 'wgsso',
+    storeName: 'idpglobalStore',
-    dbName: 'wgsso',
+    dbName: 'main',
   });
 
   public async storeJwt(jwtString: string) {
-    await this.ssoStore.set('wgJwt', jwtString);
+    await this.ssoStore.set('idpJwt', jwtString);
   }
 
   public async getJwt(): Promise<string> {
-    return await this.ssoStore.get('wgJwt');
+    return await this.ssoStore.get('idpJwt');
   }
   public async getJwtData(): Promise<plugins.lointReception.data.IJwt> {
     return this.helpers.extractDataFromJwtString(await this.getJwt());
   }
 
   public async deleteJwt() {
-    await this.ssoStore.delete('wgJwt');
+    await this.ssoStore.delete('idpJwt');
     console.log('removed jwt');
   }
 
@@ -333,6 +333,7 @@ export class IdpClient {
    * gets the current OrganizationRoles
    */
   public async getRolesAndOrganizations() {
+    console.log('idpclient: getting roles and orgs...');
     await this.typedsocketDeferred.promise;
     const rolesAndOrganizationsForUserId =
       this.typedsocket.createTypedRequest<plugins.lointReception.request.IReq_GetRolesAndOrganizationsForUserId>(

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/idp.global',
-  version: '1.2.1',
+  version: '1.3.1',
   description: 'An identity provider software managing user authentications, registrations, and sessions.'
 }

ts_web/elements/account/content.ts

@@ -0,0 +1,125 @@
+import * as plugins from '../../plugins.js';
+
+import {
+  customElement,
+  DeesElement,
+  property,
+  html,
+  cssManager,
+  unsafeCSS,
+  css,
+  type TemplateResult
+} from '@design.estate/dees-element';
+
+import { LeleAccountNavigation } from './navigation.js';
+
+import * as views from './views/index.js';
+import * as accountstate from '../../states/accountstate.js';
+
+import { commitinfo } from '../../../dist_ts/00_commitinfo_data.js';
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-accountcontent': IdpAccountContent;
+  }
+}
+
+@customElement('idp-accountcontent')
+export class IdpAccountContent extends DeesElement {
+
+  public subrouter: plugins.deesDomtools.plugins.smartrouter.SmartRouter;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        color: #fff;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        height: 100%;
+        width: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#000000')}
+      }
+      :host([hidden]) {
+        display: none;
+      }
+      .main {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        bottom: 0px;
+      }
+
+      lele-accountnavigation {
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        height: 100vh;
+        width: 200px;
+      }
+      .viewcontainer {
+        will-change: transform;
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        width: calc(100vw - 200px);
+        height: 100vh;
+        overflow-y: scroll;
+        overscroll-behavior: contain;
+        transition: all 0.3s;
+        opacity: 1;
+      }
+
+      .viewcontainer.changing {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <div class="main">
+        <lele-accountnavigation></lele-accountnavigation>
+        <div class="viewcontainer">
+          <!--<lele-accountview-subscription></lele-accountview-subscription>-->
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
+    super.firstUpdated(_changedProperties);
+    await this.domtoolsPromise;
+    this.subrouter = this.domtools.router.createSubRouter('/account');
+    const viewcontainer: HTMLDivElement = this.shadowRoot.querySelector('.viewcontainer');
+
+    const cleanupViews = async () => {
+      for (const child of Array.from(viewcontainer.children)) {
+        viewcontainer.removeChild(child);
+      }
+    };
+
+    viewcontainer.append(new views.BaseView());
+    console.log(`loaded base view`);
+
+    this.subrouter.on('/org/:orgName/billing', async () => {
+      viewcontainer.classList.add('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+      console.log('We are viewing the billing page');
+      await cleanupViews();
+      viewcontainer.append(new views.SubscriptionView());
+      viewcontainer.classList.remove('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+    });
+
+    this.subrouter._handleRouteState();
+  }
+}

ts_web/elements/account/index.ts

@@ -0,0 +1,2 @@
+export * from './content.js';
+export * from './navigation.js';

ts_web/elements/account/navigation.ts

@@ -0,0 +1,143 @@
+import {
+  customElement,
+  DeesElement,
+  property,
+  html,
+  cssManager,
+  unsafeCSS,
+  css,
+  type TemplateResult,
+  subscribe
+} from '@design.estate/dees-element';
+
+import * as plugins from '../../plugins.js';
+import * as states from '../../states/accountstate.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lele-accountnavigation': LeleAccountNavigation;
+  }
+}
+
+@customElement('lele-accountnavigation')
+export class LeleAccountNavigation extends DeesElement {
+  @property()
+  public options: {text: string; id: string}[] = [
+    {
+      id: '1',
+      text: 'Properties'
+    },
+    {
+      id: '2',
+      text: 'Users'
+    },
+    {
+      id: '3',
+      text: 'Activity'
+    },
+    {
+      id: '4',
+      text: 'Billing & Subscription'
+    },
+  ];
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        padding: 10px;
+        padding-left: 0px;
+        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
+        border-right: ${cssManager.bdTheme('1px solid #ccc', '')};
+      }
+      :host([hidden]) {
+        display: none;
+      }
+
+      .navigationGroupLabel {
+        width: min-content;
+        white-space: nowrap;
+        text-transform: uppercase;
+        font-size: 12px;
+        font-weight: 300;
+        border-bottom: 1px dotted #666;
+        margin-bottom: 5px;
+        padding-top: 32px;
+        padding-left: 10px;
+        padding-bottom: 5px;
+      }
+
+      .navigationOption {
+        border-top-right-radius: 30px;
+        border-bottom-right-radius: 30px;
+        font-weight: 500;
+        padding: 8px;
+        padding-left: 10px;
+        margin-bottom: 5px;
+      }
+
+      .navigationOption:hover {
+        cursor: pointer;
+        background: ${cssManager.bdTheme('#bbb', '#333')};
+      }
+      dees-input-dropdown {
+        margin-top: 16px;
+        margin-bottom: 16px;
+        margin-left: 8px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <div class="navigationGroupLabel">Organization Settings</div>
+      <dees-input-dropdown .label=${'choose org:'}
+        @selectedOption=${(eventArg: CustomEvent) => {
+          const currentState = states.accountState.getState()
+          states.accountState.dispatchAction(states.setSelectedOrg, currentState.organizations.find(org => org.data.slug === eventArg.detail.payload));
+        }}
+      ></dees-input-dropdown>
+      ${this.options.map(option => {
+        return html`
+          <div class="navigationOption">
+            ${option.text}
+          </div>
+        `;
+      })}
+      <div class="navigationGroupLabel">Account Settings</div>
+    `;
+  }
+
+  public firstUpdated() {
+    const deesInputDropdown = this.shadowRoot.querySelector('dees-input-dropdown');
+    const orgToMenuEntry = (orgArg?: plugins.idpInterfaces.data.IOrganization) => {
+      if (!orgArg) {
+        return null;
+      }
+      return {
+        option: orgArg.data.name,
+        key: orgArg.data.slug,
+        payload: orgArg.data.slug,
+      }
+    }
+    states.accountState.select(stateArg => stateArg.organizations).pipe(
+      plugins.deesDomtools.plugins.smartrx.rxjs.ops.map(orgArrayArg => {
+        return orgArrayArg.map(orgToMenuEntry)
+      })
+    ).subscribe(menuEntries => {
+      deesInputDropdown.options = menuEntries;
+    });
+    states.accountState.select(stateArg => stateArg.selectedOrg).pipe(
+      plugins.deesDomtools.plugins.smartrx.rxjs.ops.map(orgToMenuEntry)
+    ).subscribe(selectedOrgArg => {
+      deesInputDropdown.selectedOption = selectedOrgArg;
+    })
+  }
+}

ts_web/elements/account/sharedstyles.ts

@@ -0,0 +1,28 @@
+import { css } from '@design.estate/dees-element';
+
+export default css`
+  h1 {
+    margin-top: 50px;
+    border-bottom: 1px solid #666;
+    padding-bottom: 10px;
+    font-weight: 500;
+  }
+
+  h2 {
+    border-top: 1px dotted #666;
+    padding-top: 16px;
+  }
+
+  p {
+    line-height: 1.5em;
+  }
+
+  dees-button {
+    margin-top: 16px;
+    width: 200px;
+  }
+
+  dees-input-text {
+    max-width: 400px;
+  }
+`;

ts_web/elements/account/views/baseview.ts

@@ -0,0 +1,179 @@
+import * as plugins from '../../../plugins.js';
+import {
+  customElement,
+  DeesElement,
+  property,
+  html,
+  cssManager,
+  unsafeCSS,
+  css,
+  render,
+  subscribe,
+} from '@design.estate/dees-element';
+
+import sharedStyles from '../sharedstyles.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lele-accountview-baseview': BaseView;
+  }
+}
+
+import * as state from '../../../states/accountstate.js';
+
+@customElement('lele-accountview-baseview')
+export class BaseView extends DeesElement {
+  @property({
+    type: Array,
+  })
+  subscriptions: any[] = [
+    {
+      organization: 'org1',
+      'subscription type': 'workspace.global SaaS',
+      price: '4€',
+      userFactor: 4,
+      total: '16.00€',
+    },
+    {
+      organization: 'org1',
+      'subscription type': 'workspace.global IaaS Base Access',
+      price: '0€',
+      userFactor: 4,
+      total: '0€',
+    },
+    {
+      organization: 'org1',
+      'subscription type': 'workspace.global SLA Senior',
+      price: '2000€',
+      userFactor: 'none',
+      total: '2000.00€',
+    },
+  ];
+
+  public static styles = [
+    cssManager.defaultStyles,
+    sharedStyles,
+    css`
+      :host {
+        display: block;
+        max-width: 900px;
+        margin: auto;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+      .slug {
+        color: orange;
+      }
+
+      .orgGrid {
+        display: grid;
+        grid-gap: 16px;
+        grid-template-columns: ${cssManager.cssGridColumns(4, 16)}
+      }
+
+      .org {
+        padding: 16px;
+        border: 1px dotted #666;
+        border-radius: 3px;
+      }
+
+      .org:hover {
+        cursor: pointer;
+        background: ${cssManager.bdTheme('#CCC', '#333')};
+      }
+    `,
+  ];
+
+  public render() {
+    return html` <div class="viewHost"></div> `;
+  }
+
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    await this.domtoolsPromise;
+    super.firstUpdated(_changedProperties);
+    const viewHost: HTMLDivElement = this.shadowRoot.querySelector('.viewHost');
+    await state.accountState.dispatchAction(state.getOrganizationsAction, null);
+    console.log('got orgs');
+    if (state.accountState.getState().organizations.length === 0) {
+      render(
+        html`
+          <h1>Setup Your Account</h1>
+          <p>
+            There are no organizations for your account. Please create one now. Alternatively you
+            can ask an admin of an existing organization to invite you.
+          </p>
+          <dees-form>
+            <dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
+          </dees-form>
+          <p>
+            The organization slug corresponds to the organization name:<br />
+            <span class="slug"
+              >${subscribe(
+                state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
+              )}</span
+            >
+          </p>
+          <span class="hint"></span>
+          <dees-button .disabled=${true}>Create the Organization</dees-button>
+        `,
+        viewHost
+      );
+      const subscriptions: plugins.deesDomtools.plugins.smartrx.rxjs.Subscription[] = [];
+      const form = this.shadowRoot.querySelector('dees-form');
+      const orgInput = this.shadowRoot.querySelector('dees-input-text');
+      const hint = this.shadowRoot.querySelector('.hint');
+      const button = this.shadowRoot.querySelector('dees-button');
+      const newOrgSubscription = state.accountState
+        .select((stateArg) => stateArg.newOrg)
+        .subscribe((data) => {
+          if (data.chosenSlug) {
+            hint.innerHTML = 'Waiting: Validating...';
+          } else {
+            hint.innerHTML = 'Hint: Enter a valid organization name.';
+          }
+          if (data.validated && data.validationOk) {
+            hint.innerHTML =
+              'Success: Name is available. Please click the button to create the organization.';
+            button.disabled = false;
+          } else if (!data.validated || !data.validationOk) {
+            hint.innerHTML = `Info: Name not available. Please choose another one.`;
+            button.disabled = true;
+          }
+        });
+      subscriptions.push(newOrgSubscription);
+
+      const formSubscription = form.changeSubject.subscribe(async (dataArg: any) => {
+        await state.accountState.dispatchAction(state.setNewOrgName, dataArg.orgName);
+      });
+      subscriptions.push(formSubscription);
+      button.addEventListener('clicked', async () => {
+        orgInput.disabled = true;
+        button.text = 'creating org...'
+        button.status = 'pending';
+        hint.innerHTML = 'Waiting for creation of the organization...'
+        await state.accountState.dispatchAction(state.manifestNewOrgName, null);
+        hint.innerHTML = `The Organization with name ${state.accountState.getState().organizations[0].data.name} has been created!`
+        button.text = 'created!';
+        button.status = 'success';
+        const parentElement = (this.getRootNode() as any).host;
+        parentElement.subrouter.pushUrl(`/org/${state.accountState.getState().organizations[0].data.slug}/billing`);
+      });
+    } else {
+      render(html`
+        <h1>Select An Organization</h1>
+        <div class="orgGrid">
+          ${state.accountState.getState().organizations.map(orgArg => {
+            return html`
+              <div class="org" @click=${() => {
+                state.accountState.dispatchAction(state.setSelectedOrg, orgArg)
+                const parentElement = (this.getRootNode() as any).host;
+                parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`)
+              }}>
+                ${orgArg.data.name}
+              </div>
+            `
+          })}
+        </div>
+      `, viewHost)
+    }
+  }
+}

ts_web/elements/account/views/index.ts

@@ -0,0 +1,4 @@
+export * from './baseview.js';
+export * from './orgsetup.js';
+export * from './paddlesetup.js';
+export * from './subscriptions.js';

ts_web/elements/account/views/paddlesetup.ts

@@ -0,0 +1,94 @@
+import {
+  customElement,
+  DeesElement,
+  property,
+  html,
+  cssManager,
+  unsafeCSS,
+  css,
+} from '@design.estate/dees-element';
+
+import * as plugins from '../../../plugins.js';
+import sharedStyles from '../sharedstyles.js';
+import * as state from '../../../states/accountstate.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lele-accountview-paddlesetup': PaddleSetupView;
+  }
+}
+
+@customElement('lele-accountview-paddlesetup')
+export class PaddleSetupView extends DeesElement {
+  public static styles = [
+    cssManager.defaultStyles,
+    sharedStyles,
+    css`
+      :host {
+        display: block;
+        max-width: 900px;
+        margin: auto;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <h1>-> Paddle Setup</h1>
+      <p>
+        In order to use workspace.global <b>with paid features</b>, you need to setup a Paddle
+        subscription. A Paddle connection is bound to an organization.
+      </p>
+      <p>
+        The base price of a Paddle Subscription is always 0€. Any charges that occur will be billed
+        as an extra charge on top of your free base subscription
+        <b>on a monthly date of your choosing</b>.
+      </p>
+      <p>
+        Since Paddle acts as merchant of record, your invoices will read Paddle as Creditor, and you
+        as Debitor.
+      </p>
+      <h2>Why are we using Paddle?</h2>
+      <p>
+        Paddle takes care of tax compliance for us. This allows us to sell our products world wide
+        while Paddle makes sure any sales are in compliance with local laws.
+      </p>
+      <dees-button>Let's do it!</dees-button>
+    `;
+  }
+
+  /**
+   *
+   */
+  public async firstUpdated() {
+    await this.domtoolsPromise;
+    const paddleButton = this.shadowRoot.querySelector('dees-button');
+    const openPaddle = async () => {
+      await this.domtools.setExternalScript('https://cdn.paddle.com/paddle/paddle.js');
+      globalThis.Paddle.Setup({
+        vendor: 30954,
+        eventCallback: async (dataArg) => {
+          // The data.event will specify the event type
+          if (dataArg.event === 'Checkout.Complete') {
+            const data: plugins.idpInterfaces.data.IPaddleCheckoutData = dataArg.eventData;
+            const paddleIframe = document.body.querySelector('iframe');
+            document.body.removeChild(paddleIframe);
+            paddleButton.status = 'pending';
+            paddleButton.text = 'Processing...';
+            await state.accountState.dispatchAction(state.updatePaddleCheckoutId, data.checkout.id);
+            paddleButton.status = 'success';
+            paddleButton.text = 'Paddle connected!'
+          }
+        },
+      });
+      globalThis.Paddle.Checkout.open({
+        product: 561076,
+        email: 'phil@kunz.io',
+      });
+    };
+    paddleButton.addEventListener('clicked', async () => {
+      openPaddle();
+    });
+  }
+}

ts_web/elements/account/views/subscriptions.ts

@@ -0,0 +1,93 @@
+import {
+  customElement,
+  DeesElement,
+  property,
+  html,
+  cssManager,
+  unsafeCSS,
+  css,
+} from '@design.estate/dees-element';
+
+import sharedStyles from '../sharedstyles.js';
+
+import * as state from '../../../states/accountstate.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lele-accountview-subscription': SubscriptionView;
+  }
+}
+
+@customElement('lele-accountview-subscription')
+export class SubscriptionView extends DeesElement {
+
+  @property({
+    type: Array,
+  })
+  subscriptions: any[] = [{
+    organization: 'org1',
+    'subscription type': 'workspace.global SaaS',
+    price: '4€',
+    userFactor: 4,
+    total: '16.00€'
+  }, {
+    organization: 'org1',
+    'subscription type': 'workspace.global IaaS Base Access',
+    price: '0€',
+    userFactor: 4,
+    total: '0€'
+  }, {
+    organization: 'org1',
+    'subscription type': 'workspace.global SLA Senior',
+    price: '2000€',
+    userFactor: 'none',
+    total: '2000.00€'
+  }];
+
+  public static styles = [
+    cssManager.defaultStyles,
+    sharedStyles,
+    css`
+      :host {
+        display: block;
+        max-width: 900px;
+        margin: auto;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+    `
+  ]
+
+  public render() {
+    return html`
+      <h1>-> Billing & Subscription</h1>
+      This page allows you to setup how you are billed for any workspace.global charges.
+      <h2>PaymentMethod</h2>
+      <p>Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
+      and we will bill any occurring charges as an extra on the monthly date of your choosing.
+      Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.</p>
+      <h3>Paddle</h3>
+      <dees-button @click=${async () => {
+        await this.domtoolsPromise;
+        this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
+      }}>set up paddle.com</dees-button>
+      <h3>Enterprise billing</h3>
+      Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here. Note: You are currently not eligible.
+      <h2>Subscriptions</h2>
+      <p>
+        The total price of a subscription already includes all taxes. If you are a VAT registered business,
+        the actual price might be cheaper in case you can claim VAT exemption from the purchase.
+      </p>
+      <p>
+        Note: Subscriptions are tied to prganizations. You are only seeing subcriptions regarding ${'org1'} right now.
+        To see other organization, select the respective organization at the top left of this page.
+      </p>
+      <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
+      <dees-button>Add subscription</dees-button>
+      <h2>Accrued IaaS Usage</h2>
+      <p>Note: The accrued IaaS Usage will be charged by adjusting the workspsace.gobal IaaS Postpaid Access price prior the renewal date.</p>
+      <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
+      <h2>Upcoming Billable Items</h2>
+      <h2>Past Invoices</h2>
+    `;
+  }
+}

ts_web/elements/idp-centercontainer.ts

@@ -12,17 +12,17 @@ import {
 } from '@design.estate/dees-element';
 
 import { commitinfo } from '../../dist_ts/00_commitinfo_data.js';
-import { IdpState } from '../idp.state.js';
+import { IdpState } from '../states/idp.state.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'idp-logincontainer': IdpLogincontainer;
+    'idp-centercontainer': IdpCenterContainer;
   }
 }
 
-@customElement('idp-logincontainer')
+@customElement('idp-centercontainer')
-export class IdpLogincontainer extends DeesElement {
+export class IdpCenterContainer extends DeesElement {
-  public static demo = () => html`<idp-logincontainer></idp-logincontainer>`;
+  public static demo = () => html`<idp-centercontainer></idp-centercontainer>`;
 
   constructor() {
     super();
@@ -47,9 +47,9 @@ export class IdpLogincontainer extends DeesElement {
         justify-content: center;
         align-items: center;
         opacity: 0;
-        transition: all 0.2s;
+        transition: all 0.1s;
-        transition-delay: 0.2s;
+        transition-delay: 0.05s;
-        transform: translate3d(0px, 20px, 0px);
+        transform: translate3d(0px, 8px, 0px);
         pointer-events: none;
       }
 
@@ -107,23 +107,40 @@ export class IdpLogincontainer extends DeesElement {
         <div class="loginblock">
           <h1>idp.global</h1>
           <div class="contentSpacer">
-            <idp-login></idp-login>
+            <slot></slot>
           </div>
           <div class="legalinfo">
             <a href="https://legal.task.vc/" target="_blank">Legal Info</a>
             | <a href="https://task.vc/" target="_blank">Company Website</a>
             | <a href="https://support.task.vc/" target="_blank">Support</a>
-            | SSO v${commitinfo.version}
+            | idp.global v${commitinfo.version}
           </div>
         </div>
       </div>
     `;
   }
 
-  public async firstUpdated() {
+  public async show() {
+    await this.updateComplete;
+    const domtoolsInstance = await this.domtoolsPromise;
+    const done = plugins.smartpromise.defer();
     requestAnimationFrame(async () => {
       this.shadowRoot.querySelector('.mainContainer').classList.add('show');
-      this.shadowRoot.querySelector('idp-login').focus();
+      await domtoolsInstance.convenience.smartdelay.delayFor(200);
+      done.resolve();
     });
+    return done.promise;
+  }
+
+  public async hide() {
+    await this.updateComplete;
+    const domtoolsInstance = await this.domtoolsPromise;
+    const done = plugins.smartpromise.defer();
+    requestAnimationFrame(async () => {
+      this.shadowRoot.querySelector('.mainContainer').classList.remove('show');
+      await domtoolsInstance.convenience.smartdelay.delayFor(200);
+      done.resolve();
+    });
+    return done.promise;
   }
 }

ts_web/elements/idp-loginprompt.ts

@@ -17,16 +17,17 @@ import '@uptime.link/webwidget';
 
 import '@design.estate/dees-catalog';
 import { DeesForm, DeesFormSubmit, DeesInputText } from '@design.estate/dees-catalog';
+import { IdpState } from '../states/idp.state.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'idp-login': IdpLogin;
+    'idp-loginprompt': IdpLoginPrompt;
   }
 }
 
-@customElement('idp-login')
+@customElement('idp-loginprompt')
-export class IdpLogin extends DeesElement {
+export class IdpLoginPrompt extends DeesElement {
-  public static demo = () => html`<idp-login></idp-login>`;
+  public static demo = () => html`<idp-loginprompt></idp-loginprompt>`;
 
   @property()
   public productOfInterest: string;
@@ -68,32 +69,37 @@ export class IdpLogin extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="boxcontent">
+      <idp-centercontainer>
-        <dees-form
+        <div class="boxcontent">
-          id="loginForm"
+          <dees-form
-          @formData="${(eventArg) => {
+            id="loginForm"
-            this.login({
+            @formData="${(eventArg) => {
-              emailAddress: eventArg.detail.data.emailAddress,
+              this.login({
-              passwordArg: eventArg.detail.data.password,
+                emailAddress: eventArg.detail.data.emailAddress,
-            });
+                passwordArg: eventArg.detail.data.password,
-          }}"
+              });
-        >
+            }}"
-          <dees-input-text
+          >
-            id="loginEmailInput"
+            <dees-input-text
-            .required=${true}
+              id="loginEmailInput"
-            key="emailAddress"
+              .required=${true}
-            label="Email-Address or Username"
+              key="emailAddress"
-          ></dees-input-text>
+              label="Email-Address or Username"
-          <dees-input-text
+            ></dees-input-text>
-            .id=${'loginPasswordInput'}
+            <dees-input-text
-            .key=${'password'}
+              .id=${'loginPasswordInput'}
-            .label=${'Password'}
+              .key=${'password'}
-            .isPasswordBool=${true}
+              .label=${'Password'}
-          ></dees-input-text>
+              .isPasswordBool=${true}
-          <dees-form-submit id="loginSubmitButton"></dees-form-submit>
+            ></dees-input-text>
-        </dees-form>
+            <dees-form-submit id="loginSubmitButton"></dees-form-submit>
-        <dees-button type="discreet" class="registerButton">Register instead</dees-button>
+          </dees-form>
-      </div>
+          <dees-button type="discreet" class="registerButton" @clicked=${async () => {
+            const idpState = await IdpState.getSingletonInstance();
+            idpState.domtools.router.pushUrl('/register');
+          }}>Register instead</dees-button>
+        </div>
+      </idp-centercontainer>
     `;
   }
 
@@ -118,7 +124,11 @@ export class IdpLogin extends DeesElement {
   }
 
   private login = async (valueArg: { emailAddress: string; passwordArg: string }) => {
+    // lets disable the register button
+    const registerButton: plugins.deesCatalog.DeesButton = this.shadowRoot.querySelector('.registerButton');
+    registerButton.disabled = true;
     // lets define the needed requests
+    const idpState = await IdpState.getSingletonInstance();
     const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
     const loginRequestWithUsernameAndPassword =
       new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
@@ -148,9 +158,10 @@ export class IdpLogin extends DeesElement {
       }
       if (response.refreshToken) {
         loginForm.setStatus('pending', 'obtained refreshToken...');
-        const jwt = await this.handleRefreshToken(response.refreshToken, 0);
+        const jwt = await idpState.idpClient.refreshJwt(response.refreshToken);
         if (jwt) {
           loginForm.setStatus('success', 'obtained jwt.');
+          idpState.domtools.router.pushUrl('/account');
         } else {
           loginForm.setStatus('error', 'something went wrong');
         }
@@ -184,28 +195,21 @@ export class IdpLogin extends DeesElement {
     }
   }
 
-  public async handleRefreshToken(refreshTokenArg: string, delayDispatchMillisArg = 0) {
+  public async focus() {
-    // a refreshToken binds dierctly to a session.
+    (
-    // the refresh token is used on a continuous basis to get fresh and short-lived jwts
+      this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText
-    const refreshJwt = new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
+    ).focus();
-      '/typedrequest',
-      'refreshJwt'
-    );
-    const responseJwt = await refreshJwt.fire({
-      refreshToken: refreshTokenArg,
-    });
-
-    if (responseJwt.jwt) {
-      this.domtools.convenience.smartdelay.delayFor(delayDispatchMillisArg).then(() => {
-        this.dispatchJwt(responseJwt.jwt);
-      });
-      return responseJwt.jwt;
-    } else {
-      return null;
-    }
   }
 
-  public async focus() {
+  public async show() {
-    (this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText).focus();
+    await this.updateComplete;
+    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
+    await centerContainer.show();
+  }
+
+  public async hide() {
+    await this.updateComplete;
+    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
+    await centerContainer.hide();
   }
 }

ts_web/elements/idp-registerprompt.ts

@@ -17,6 +17,7 @@ import '@uptime.link/webwidget';
 
 import '@design.estate/dees-catalog';
 import { DeesForm, DeesFormSubmit, DeesInputText } from '@design.estate/dees-catalog';
+import { IdpState } from '../states/idp.state.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -56,14 +57,6 @@ export class IdpRegistrationPrompt extends DeesElement {
         color: ${cssManager.bdTheme('#333333', '#ffffff')};
       }
 
-      .box {
-        opacity: 0;
-        cursor: pointer;
-        overflow: hidden;
-        transition: all 0.2s ease;
-        height: 0px;
-      }
-
       .boxcontent {
         margin: 0px 20px;
       }
@@ -79,31 +72,41 @@ export class IdpRegistrationPrompt extends DeesElement {
         color: #fff;
         transform: scale(1.02);
       }
+
+      .loginButton {
+        margin-top: 16px;
+      }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="boxcontent">
+      <idp-centercontainer>
-        <dees-form
+        <div class="boxcontent">
-          id="registrationForm"
+          <dees-form
-          @formData="${(eventArg) => {
+            id="registrationForm"
-            this.register({
+            @formData="${(eventArg) => {
-              emailAddress: eventArg.detail.data.emailAddress,
+              this.register({
-            });
+                emailAddress: eventArg.detail.data.emailAddress,
-          }}"
+              });
-        >
+            }}"
-          <dees-input-text
+          >
-            .required=${true}
+            <dees-input-text
-            key="emailAddress"
+              .required=${true}
-            label="Email-Address"
+              key="emailAddress"
-          ></dees-input-text>
+              label="Email-Address"
-          <dees-input-checkbox
+            ></dees-input-text>
-            .label="${'Agree to the Terms and Conditions'}"
+            <dees-input-checkbox
-          ></dees-input-checkbox>
+              .label="${'Agree to the Terms and Conditions'}"
-          <dees-form-submit>Send Verification Email</dees-form-submit>
+            ></dees-input-checkbox>
-        </dees-form>
+            <dees-form-submit>Send Verification Email</dees-form-submit>
-      </div>
+          </dees-form>
+          <dees-button type="discreet" class="loginButton" @click=${async () => {
+            const idpState = await IdpState.getSingletonInstance();
+            idpState.domtools.router.pushUrl('/login');
+          }}>Login instead</dees-button>
+        </div>
+      </idp-centercontainer>
     `;
   }
 
@@ -186,4 +189,16 @@ export class IdpRegistrationPrompt extends DeesElement {
       return null;
     }
   }
+
+  public async show() {
+    await this.updateComplete;
+    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
+    await centerContainer.show();
+  }
+
+  public async hide() {
+    await this.updateComplete;
+    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
+    await centerContainer.hide();
+  }
 }

ts_web/elements/idp-registration-stepper.ts

@@ -1,4 +1,4 @@
-import { IdpState } from '../idp.state.js';
+import { IdpState } from '../states/idp.state.js';
 import * as plugins from '../plugins.js';
 import {
   customElement,
@@ -14,7 +14,6 @@ import {
 
 @customElement('idp-registration-stepper')
 export class IdpRegistrationStepper extends DeesElement {
-
   @state()
   private usedSubTemplate: TemplateResult;
 
@@ -67,230 +66,220 @@ export class IdpRegistrationStepper extends DeesElement {
   public async firstUpdated() {
     const idpState = await IdpState.getSingletonInstance();
     await this.domtoolsPromise;
-    this.domtools.router.on(`/finishregistration`, async (routeArg) => {
+    const parsedUrl = plugins.smarturl.Smarturl.createFromUrl(window.location.href);
-      this.storedData.validationTokenUrlParam = routeArg.queryParams.validationtoken;
+    this.storedData.validationTokenUrlParam = parsedUrl.searchParams['validationtoken'];
-      if (!this.storedData.validationTokenUrlParam) {
+    console.log(`validationToken is ${this.storedData.validationTokenUrlParam}`);
-        this.usedSubTemplate = html`
+    if (!this.storedData.validationTokenUrlParam) {
-          You need a validation token, but we couldn't find one. Please contact workspace.global support.
+      this.usedSubTemplate = html`
-        `;
+        You need a validation token, but we couldn't find one. Please contact workspace.global
-        await this.domtools.convenience.smartdelay.delayFor(5000);
+        support.
-        this.usedSubTemplate = html` Redirecting you to workspace.global support... `;
+      `;
-        await this.domtools.convenience.smartdelay.delayFor(2000);
+      await this.domtools.convenience.smartdelay.delayFor(5000);
-        window.location.href = 'https://support.workspace.global';
+      window.location.href = '/';
-        return;
+      return;
-      }
+    }
-      // lets verify the info;
+    // lets verify the info;
-      let tokenErrorMessage: string;
+    let tokenErrorMessage: string;
-      const resAfterRegEmailClicked =
+    const resAfterRegEmailClicked = await idpState.idpClient.requests.afterRegistrationEmailClicked
-        await idpState.idpClient.requests.afterRegistrationEmailClicked
+      .fire({
-          .fire({
+        token: this.storedData.validationTokenUrlParam,
-            token: this.storedData.validationTokenUrlParam,
+      })
-          })
+      .catch(
-          .catch(
+        (
-            (
+          err: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
-              err: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
+        ) => {
-            ) => {
+          tokenErrorMessage = err.errorText;
-              tokenErrorMessage = err.errorText;
+          return;
-              return;
+        }
-            }
+      );
-          );
 
-      if (!resAfterRegEmailClicked || !resAfterRegEmailClicked.email) {
+    console.log(resAfterRegEmailClicked);
-        this.usedSubTemplate = html`
-          the supplied validation token does not match any registration sessions.<br />
-          ${tokenErrorMessage ? html`Reason: ${tokenErrorMessage}` : null}
-        `;
-        await this.domtools.convenience.smartdelay.delayFor(5000);
-        this.usedSubTemplate = html`redirecting you for further support... `;
-        await this.domtools.convenience.smartdelay.delayFor(1000);
-        window.location.href = 'https://support.workspace.global';
-        return;
-      } else {
-        this.storedData.email = resAfterRegEmailClicked.email;
-      }
 
-      // lets continue with UI
+    if (!resAfterRegEmailClicked || !resAfterRegEmailClicked.email) {
-      this.usedSubTemplate = html`<dees-stepper
+      this.usedSubTemplate = html`
-        .steps=${[
+        the supplied validation token does not match any registration sessions.<br />
-          {
+        ${tokenErrorMessage ? html`Reason: ${tokenErrorMessage}` : null}
-            title: 'What is your name?',
+      `;
-            content: html`
+      await this.domtools.convenience.smartdelay.delayFor(5000);
-              <dees-form>
+      idpState.domtools.router.pushUrl('/');
-                <dees-input-text
+      return;
-                  key="email"
+    } else {
-                  label="Your Email"
+      this.storedData.email = resAfterRegEmailClicked.email;
-                  value="${this.storedData.email}"
+    }
-                  disabled
-                ></dees-input-text>
-                <dees-input-text key="firstName" required label="First Name"></dees-input-text>
-                <dees-input-text key="lastName" required label="Last Name"></dees-input-text>
-                <dees-form-submit>Next</dees-form-submit>
-              </dees-form>
-            `,
-            validationFunc: async (stepperArg, elementArg) => {
-              const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
-              deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await idpState.idpClient.requests.setData
-                  .fire({
-                    token: this.storedData.validationTokenUrlParam,
-                    userData: {
-                      name: `${eventArg.detail.data.firstName} ${eventArg.detail.data.lastName}`,
-                      connectedOrgs: null,
-                      email: null,
-                      status: null,
-                      username: null,
-                    },
-                  })
-                  .catch(
-                    (
-                      errArg: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
-                    ) => {
-                      deesForm.setStatus('error', errArg.errorText);
-                    }
-                  );
-                deesForm.setStatus('success', 'ok!');
-                stepperArg.goNext();
-              });
-            },
-            onReturnToStepFunc: async (stepperArg, stepElementArg) => {
-              const deesForm = stepElementArg.querySelector('dees-form');
-              deesForm.setStatus('normal', 'Edit and Next');
-            },
-          },
-          {
-            title: 'What is your mobile number?',
-            content: html`
-              <dees-form>
-                <dees-input-text
-                  key="mobileNumber"
-                  required
-                  label="Your Mobile Number"
-                ></dees-input-text>
-                <dees-form-submit>Next</dees-form-submit>
-              </dees-form>
-            `,
-            validationFunc: async (stepperArg, elementArg) => {
-              const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
-              deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await idpState.idpClient.requests.mobileNumberVerification
-                  .fire({
-                    token: this.storedData.validationTokenUrlParam,
-                    mobileNumber: eventArg.detail.data.mobileNumber,
-                  })
-                  .catch(
-                    (
-                      errArg: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
-                    ) => {
-                      deesForm.setStatus('error', errArg.errorText);
-                    }
-                  );
-                deesForm.setStatus('success', 'ok!');
-                stepperArg.goNext();
-              });
-            },
-            onReturnToStepFunc: async (stepperArg, stepElementArg) => {
-              const deesForm = stepElementArg.querySelector('dees-form');
-              deesForm.setStatus('normal', 'Edit and Next');
-            },
-          },
-          {
-            title: 'What is the Verification Code?',
-            content: html`
-              <dees-form>
-                <dees-input-text
-                  key="verificationCode"
-                  required
-                  label="Verification Code"
-                ></dees-input-text>
-                <dees-form-submit>Next</dees-form-submit>
-              </dees-form>
-            `,
-            validationFunc: async (stepperArg, elementArg) => {
-              const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
-              deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await idpState.idpClient.requests.mobileNumberVerification.fire({
-                  token: this.storedData.validationTokenUrlParam,
-                  verificationCode: eventArg.detail.data.verificationCode,
-                });
 
-                if (response.verficationCodeOk) {
+    // lets continue with UI
-                  deesForm.setStatus('success', 'ok!');
+    this.usedSubTemplate = html`<dees-stepper
-                  stepperArg.goNext();
+      .steps=${[
-                } else {
+        {
-                  deesForm.setStatus('error', 'wrong code!');
+          title: 'What is your name?',
-                  await this.domtools.convenience.smartdelay.delayFor(3000);
+          content: html`
-                  deesForm.setStatus('normal', 'Retry And Next!');
+            <dees-form>
-                }
+              <dees-input-text
-              });
+                key="email"
-            },
+                label="Your Email"
-            onReturnToStepFunc: async (stepperArg, stepElementArg) => {
+                value="${this.storedData.email}"
-              stepperArg.goBack();
+                disabled
-              const deesForm = stepElementArg.querySelector('dees-form');
+              ></dees-input-text>
-              deesForm.setStatus('normal', 'Next');
+              <dees-input-text key="firstName" required label="First Name"></dees-input-text>
-            },
+              <dees-input-text key="lastName" required label="Last Name"></dees-input-text>
-          },
+              <dees-form-submit>Next</dees-form-submit>
-          {
+            </dees-form>
-            title: 'Create a secure password:',
+          `,
-            content: html`
+          validationFunc: async (stepperArg, elementArg) => {
-              <dees-form>
+            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
-                <dees-input-text
+            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                  key="password"
+              const response = await idpState.idpClient.requests.setData
-                  required
+                .fire({
-                  label="Your New Secure Password"
-                ></dees-input-text>
-                <dees-form-submit>Next</dees-form-submit>
-              </dees-form>
-            `,
-            validationFunc: async (stepperArg, elementArg) => {
-              const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
-              deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await idpState.idpClient.requests.setData.fire({
                   token: this.storedData.validationTokenUrlParam,
                   userData: {
-                    username: null,
+                    name: `${eventArg.detail.data.firstName} ${eventArg.detail.data.lastName}`,
-                    email: null,
-                    name: null,
                     connectedOrgs: null,
+                    email: null,
                     status: null,
-                    password: eventArg.detail.data.password,
+                    username: null,
                   },
-                });
+                })
-                const finishRegistrationResponse =
+                .catch(
-                  await idpState.idpClient.requests.finishRegistration.fire({
+                  (
-                    token: this.storedData.validationTokenUrlParam,
+                    errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
-                  });
+                  ) => {
-                deesForm.setStatus('pending', 'User created!');
+                    deesForm.setStatus('error', errArg.errorText);
-                await this.domtools.convenience.smartdelay.delayFor(500);
-                deesForm.setStatus('pending', 'Obtaining Refresh Token...');
-                const loginResponse = await idpState.idpClient.requests.loginWithUserNameAndPassword.fire(
-                  {
-                    username: this.storedData.email,
-                    password: eventArg.detail.data.password,
                   }
                 );
-                this.storedData.refreshToken = loginResponse.refreshToken;
+              deesForm.setStatus('success', 'ok!');
-
+              stepperArg.goNext();
-                deesForm.setStatus('pending', 'Obtaining JWT...');
+            });
-                const jwtResponse = await idpState.idpClient.requests.obtainJwt.fire({
-                  refreshToken: this.storedData.refreshToken,
-                });
-
-                deesForm.setStatus('pending', 'Obtaining Transfer Token...');
-                await idpState.idpClient.setJwt(jwtResponse.jwt);
-                await idpState.idpClient.getTransferTokenAndSwitchToLocation('https://sso.workspace.global/afterregistration');
-              });
-            },
           },
-        ] as plugins.deesCatalog.IStep[]}
+          onReturnToStepFunc: async (stepperArg, stepElementArg) => {
-      ></dees-stepper>`;
+            const deesForm = stepElementArg.querySelector('dees-form');
-      await this.domtools.convenience.smartdelay.delayFor(100);
+            deesForm.setStatus('normal', 'Edit and Next');
-    });
+          },
-    this.domtools.router.on('/', async () => {
+        },
-      this.usedSubTemplate = html`Hm, this is app is not meant for what you are trying to do :) `;
+        {
-      await this.domtools.convenience.smartdelay.delayFor(2000);
+          title: 'What is your mobile number?',
-      this.usedSubTemplate = html`Redirecting you now...`;
+          content: html`
-      window.location.href = `https://workspace.global`;
+            <dees-form>
-    });
+              <dees-input-text
-    this.domtools.router._handleRouteState();
+                key="mobileNumber"
+                required
+                label="Your Mobile Number"
+              ></dees-input-text>
+              <dees-form-submit>Next</dees-form-submit>
+            </dees-form>
+          `,
+          validationFunc: async (stepperArg, elementArg) => {
+            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
+            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
+              const response = await idpState.idpClient.requests.mobileNumberVerification
+                .fire({
+                  token: this.storedData.validationTokenUrlParam,
+                  mobileNumber: eventArg.detail.data.mobileNumber,
+                })
+                .catch(
+                  (
+                    errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
+                  ) => {
+                    deesForm.setStatus('error', errArg.errorText);
+                  }
+                );
+              deesForm.setStatus('success', 'ok!');
+              stepperArg.goNext();
+            });
+          },
+          onReturnToStepFunc: async (stepperArg, stepElementArg) => {
+            const deesForm = stepElementArg.querySelector('dees-form');
+            deesForm.setStatus('normal', 'Edit and Next');
+          },
+        },
+        {
+          title: 'What is the Verification Code?',
+          content: html`
+            <dees-form>
+              <dees-input-text
+                key="verificationCode"
+                required
+                label="Verification Code"
+              ></dees-input-text>
+              <dees-form-submit>Next</dees-form-submit>
+            </dees-form>
+          `,
+          validationFunc: async (stepperArg, elementArg) => {
+            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
+            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
+              const response = await idpState.idpClient.requests.mobileNumberVerification.fire({
+                token: this.storedData.validationTokenUrlParam,
+                verificationCode: eventArg.detail.data.verificationCode,
+              });
+
+              if (response.verficationCodeOk) {
+                deesForm.setStatus('success', 'ok!');
+                stepperArg.goNext();
+              } else {
+                deesForm.setStatus('error', 'wrong code!');
+                await this.domtools.convenience.smartdelay.delayFor(3000);
+                deesForm.setStatus('normal', 'Retry And Next!');
+              }
+            });
+          },
+          onReturnToStepFunc: async (stepperArg, stepElementArg) => {
+            stepperArg.goBack();
+            const deesForm = stepElementArg.querySelector('dees-form');
+            deesForm.setStatus('normal', 'Next');
+          },
+        },
+        {
+          title: 'Create a secure password:',
+          content: html`
+            <dees-form>
+              <dees-input-text
+                key="password"
+                required
+                label="Your New Secure Password"
+              ></dees-input-text>
+              <dees-form-submit>Next</dees-form-submit>
+            </dees-form>
+          `,
+          validationFunc: async (stepperArg, elementArg) => {
+            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
+            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
+              const response = await idpState.idpClient.requests.setData.fire({
+                token: this.storedData.validationTokenUrlParam,
+                userData: {
+                  username: null,
+                  email: null,
+                  name: null,
+                  connectedOrgs: null,
+                  status: null,
+                  password: eventArg.detail.data.password,
+                },
+              });
+              const finishRegistrationResponse =
+                await idpState.idpClient.requests.finishRegistration.fire({
+                  token: this.storedData.validationTokenUrlParam,
+                });
+              deesForm.setStatus('pending', 'User created!');
+              await this.domtools.convenience.smartdelay.delayFor(500);
+              deesForm.setStatus('pending', 'Obtaining Refresh Token...');
+              const loginResponse =
+                await idpState.idpClient.requests.loginWithUserNameAndPassword.fire({
+                  username: this.storedData.email,
+                  password: eventArg.detail.data.password,
+                });
+              this.storedData.refreshToken = loginResponse.refreshToken;
+
+              deesForm.setStatus('pending', 'Obtaining JWT...');
+              const jwtResponse = await idpState.idpClient.requests.obtainJwt.fire({
+                refreshToken: this.storedData.refreshToken,
+              });
+
+              deesForm.setStatus('success', 'Ok! Lets Go!');
+              await idpState.idpClient.setJwt(jwtResponse.jwt);
+              idpState.domtools.router.pushUrl('/account');
+            });
+          },
+        },
+      ] as plugins.deesCatalog.IStep[]}
+    ></dees-stepper>`;
+    await this.domtools.convenience.smartdelay.delayFor(100);
   }
 }

ts_web/elements/idp-welcome.ts

@@ -12,7 +12,7 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 import type { IdpViewcontainer } from '../views/viewcontainer.js';
-import { IdpState } from '../idp.state.js';
+import { IdpState } from '../states/idp.state.js';
 
 @customElement('idp-welcome')
 export class IdpWelcome extends DeesElement {
@@ -38,8 +38,8 @@ export class IdpWelcome extends DeesElement {
         font-family: 'Cal Sans';
         text-align: center;
         font-size: 24px;
-        margin: 24px auto;
+        margin: 0px auto;
-        padding: 0px 24px;
+        padding: 24px 24px 0px 24px;
         width: 500px;
         letter-spacing:0.0125em;
       }
@@ -70,7 +70,10 @@ export class IdpWelcome extends DeesElement {
           const idpState = await IdpState.getSingletonInstance();
           idpState.domtools.router.pushUrl('/login');
         }}>Sign In</dees-button>
-        <dees-button @click=${() => {}}>Register</dees-button>
+        <dees-button @click=${async () => {
+          const idpState = await IdpState.getSingletonInstance();
+          idpState.domtools.router.pushUrl('/register');
+        }}>Register</dees-button>
       </div>
 
       <div class="textbox">

ts_web/elements/index.ts

@@ -1,6 +1,10 @@
 export * from './idp-registration-stepper.js';
-export * from './idp-logincontainer.js';
+export * from './idp-centercontainer.js';
 export * from './idp-loginprompt.js';
 export * from './idp-registerprompt.js';
 export * from './idp-transfermanager.js';
 export * from './idp-welcome.js';
+
+import { IdpAccountContent } from './account/index.js';
+
+export { IdpAccountContent };

ts_web/index.ts

@@ -44,7 +44,7 @@ const run = async () => {
     },
   });
 
-  const serviceWorker = await serviceworker.getServiceworkerClient();
+  // const serviceWorker = await serviceworker.getServiceworkerClient();
 
   const mainTemplate = html`
     <style>

ts_web/plugins.ts

@@ -23,3 +23,8 @@ import * as smartpromise from '@push.rocks/smartpromise';
 import * as smarturl from '@push.rocks/smarturl';
 
 export { smartpromise, smarturl };
+
+// @tsclass scope
+import * as tsclass from '@tsclass/tsclass';
+
+export { tsclass };

ts_web/states/accountstate.ts

@@ -0,0 +1,101 @@
+import * as plugins from '../plugins.js';
+import { IdpState } from './idp.state.js';
+
+export type TStateTypes = 'IAccountState';
+export interface IAccountState {
+  user: plugins.idpInterfaces.data.IUser;
+  /**
+   * the available orgs
+   */
+  organizations: Array<plugins.idpInterfaces.data.IOrganization>;
+  roles: Array<plugins.idpInterfaces.data.IRole>
+
+  selectedOrg: plugins.idpInterfaces.data.IOrganization;
+  selectedOrgBillingPlan: plugins.tsclass.typeFest.PartialDeep<plugins.idpInterfaces.data.IBillingPlan>;
+
+  /**
+   * used for keeping the state when creating a new org
+   */
+  newOrg: {
+    chosenName: string;
+    chosenSlug: string;
+    validated: boolean;
+    validationOk: boolean;
+  };
+}
+
+const smartStateInstance = new plugins.deesDomtools.plugins.smartstate.Smartstate<TStateTypes>();
+export const accountState = await smartStateInstance.getStatePart<IAccountState>('IAccountState', {
+  user: null,
+  organizations: [],
+  roles: [],
+  selectedOrg: null,
+  selectedOrgBillingPlan: null,
+  newOrg: {
+    chosenName: null,
+    chosenSlug: null,
+    validated: null,
+    validationOk: null,
+  },
+});
+
+export const getOrganizationsAction = accountState.createAction<void>(
+  async (statePartArg, payloadArg) => {
+    const idpState = await IdpState.getSingletonInstance();
+    const currentState = statePartArg.getState();
+    const response = await idpState.idpClient.getRolesAndOrganizations();
+    currentState.organizations = response.organizations;
+    currentState.roles = response.roles;
+    return currentState;
+  }
+);
+
+export const setNewOrgName = accountState.createAction<string>(async (statePartArg, payloadArg) => {
+  const idpState = await IdpState.getSingletonInstance();
+  const currentState = statePartArg.getState();
+  currentState.newOrg.chosenName = payloadArg;
+  currentState.newOrg.chosenSlug = payloadArg
+    .replace(/[^a-zA-Z0-9]/g, '-')
+    .replace(/\s/g, '-')
+    .toLowerCase();
+  const result = await idpState.idpClient.createOrganization(
+    currentState.newOrg.chosenName,
+    currentState.newOrg.chosenSlug,
+    'checkAvailability'
+  );
+  console.log(result);
+  currentState.newOrg.validated = true;
+  currentState.newOrg.validationOk = result.nameAvailable;
+  if (payloadArg === '') {
+    currentState.newOrg.validated = false;
+    currentState.newOrg.validationOk = false;
+  }
+  return currentState;
+});
+
+export const manifestNewOrgName = accountState.createAction(async (statePartArg, payloadArg) => {
+  const idpState = await IdpState.getSingletonInstance();
+  const currentState: IAccountState = statePartArg.getState();
+  const result = await idpState.idpClient.createOrganization(
+    currentState.newOrg.chosenName,
+    currentState.newOrg.chosenSlug,
+    'manifest'
+  );
+  currentState.organizations.push(result.resultingOrganization);
+  currentState.selectedOrg = result.resultingOrganization;
+  return currentState;
+});
+
+export const setSelectedOrg = accountState.createAction<plugins.idpInterfaces.data.IOrganization>(async (statePartArg, payloadArg) => {
+  const currentState = statePartArg.getState();
+  currentState.selectedOrg = payloadArg;
+  return currentState;
+})
+
+export const updatePaddleCheckoutId = accountState.createAction<string>(async (statePartArg, checkoutIdArg) => {
+  const idpState = await IdpState.getSingletonInstance();
+  const currentState: IAccountState = statePartArg.getState();
+  const response = await idpState.idpClient.updatePaddleCheckoutId(currentState.selectedOrg.id, checkoutIdArg);
+  currentState.selectedOrgBillingPlan = response.billingPlan;
+  return currentState;
+});

ts_web/states/idp.state.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { domtools } from '@design.estate/dees-element'
 
 export class IdpState {
@@ -15,14 +15,15 @@ export class IdpState {
   }
 
   // INSTANCE
-  public receptionUrl = 'https://reception.lossless.one/typedrequest';
+  public receptionUrl = window.location.origin;
   public idpClient = new plugins.idpClient.IdpClient(this.receptionUrl);
   public domtools: domtools.DomTools;
   public mainStatePart: plugins.deesDomtools.plugins.smartstate.StatePart<'main', {
-    view: 'welcome' | 'login' | 'register';
+    view: 'welcome' | 'login' | 'register' | 'finishregistration' | 'account';
   }>
 
   public async init() {
+    this.idpClient.enableTypedSocket();
     const domtoolsInstance = await domtools.DomTools.setupDomTools();
     this.domtools = domtoolsInstance;
     const state = new plugins.deesDomtools.plugins.smartstate.Smartstate<'main'>();
@@ -49,6 +50,21 @@ export class IdpState {
         view: 'register',
       })
     });
+
+    this.domtools.router.on('/finishregistration', async () => {
+      await this.mainStatePart.setState({
+        ...this.mainStatePart.getState(),
+        view: 'finishregistration',
+      })
+    });
+
+    this.domtools.router.on('/account{/*path}', async () => {
+      await this.mainStatePart.setState({
+        ...this.mainStatePart.getState(),
+        view: 'account',
+      })
+    });
+
     this.domtools.router._handleRouteState();
   }
 }

ts_web/views/viewcontainer.ts

@@ -1,4 +1,4 @@
-import { IdpState } from '../idp.state.js';
+import { IdpState } from '../states/idp.state.js';
 import * as plugins from '../plugins.js';
 import * as elements from '../elements/index.js';
 
@@ -59,16 +59,30 @@ export class IdpViewcontainer extends DeesElement {
       throw new Error('View container not found in the rendered DOM.');
     }
 
+    // check if current element already is instance of viewElement
+    if (this.currentElement instanceof viewElement) {
+      return;
+    }
+
     // Remove the current element if it exists
     if (this.currentElement) {
+      const currentElement = this.currentElement as any;
+      if (currentElement.hide) {
+        await currentElement.hide();
+      }
       viewContainer.removeChild(this.currentElement);
     }
 
     // Create a new instance of the viewElement
-    const newElement = new viewElement();
+    const newElement = new viewElement() as any;
     (newElement as any).viewContainer = this;
     viewContainer.appendChild(newElement);
 
+    if (newElement.show) {
+      await newElement.show();
+    }
+    
+
     // Wait until the new element is fully rendered
     await newElement.updateComplete;
 
@@ -87,11 +101,18 @@ export class IdpViewcontainer extends DeesElement {
             break;
           case 'login':
             console.log('now on /login');
-            await this.loadElement(elements.IdpLogincontainer);
+            await this.loadElement(elements.IdpLoginPrompt);
             break;
           case 'register':
             await this.loadElement(elements.IdpRegistrationPrompt);
             break;
+          case 'finishregistration':
+            await this.loadElement(elements.IdpRegistrationStepper);
+            break;
+          case 'account':
+            console.log('now on /account');
+            await this.loadElement(elements.IdpAccountContent);
+            break;
         }
       });
   }