feat(core): Refactored plugin and request handling to use idpInterfaces

ts_web/00_commitinfo_data.ts

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

ts_web/elements/account/navigation.ts

@@ -7,11 +7,14 @@ import {
   unsafeCSS,
   css,
   type TemplateResult,
-  subscribe
+  subscribe,
 } from '@design.estate/dees-element';
 
 import * as plugins from '../../plugins.js';
 import * as states from '../../states/accountstate.js';
+import { IdpState } from '../../states/idp.state.js';
+
+import { commitinfo } from '../../../dist_ts/00_commitinfo_data.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -22,22 +25,22 @@ declare global {
 @customElement('lele-accountnavigation')
 export class LeleAccountNavigation extends DeesElement {
   @property()
-  public options: {text: string; id: string}[] = [
+  public options: { text: string; id: string }[] = [
     {
       id: '1',
-      text: 'Properties'
+      text: 'Properties',
     },
     {
       id: '2',
-      text: 'Users'
+      text: 'Users',
     },
     {
       id: '3',
-      text: 'Activity'
+      text: 'Activity',
     },
     {
       id: '4',
-      text: 'Billing & Subscription'
+      text: 'Billing & Subscription',
     },
   ];
 
@@ -60,6 +63,19 @@ export class LeleAccountNavigation extends DeesElement {
         display: none;
       }
 
+      .commitinfo {
+        text-align: center;
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        width: 100%;
+        font-size: 12px;
+        padding: 8px;
+        background: ${cssManager.bdTheme('#eeeeeb', '#181818')};
+        border-top: ${cssManager.bdTheme('1px solid #ccc', '1px solid #333')};
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+      }
+
       .navigationGroupLabel {
         width: min-content;
         white-space: nowrap;
@@ -97,21 +113,46 @@ export class LeleAccountNavigation extends DeesElement {
   public render(): TemplateResult {
     return html`
       <style></style>
+      <div class="commitinfo">idp.global v${commitinfo.version}</div>
+      <div class="navigationGroupLabel">Account Settings</div>
+      <div
+        class="navigationOption"
+        @click=${async () => {
+          const idpState = await IdpState.getSingletonInstance();
+          idpState.domtools.router.pushUrl('/logout');
+        }}
+      >
+        logout
+      </div>
+      <div
+        class="navigationOption"
+        @click=${async () => {
+          
+        }}
+      >
+        manage roles
+      </div>
+      <div
+        class="navigationOption"
+        @click=${async () => {
+        }}
+      >
+        create an org
+      </div>
       <div class="navigationGroupLabel">Organization Settings</div>
-      <dees-input-dropdown .label=${'choose org:'}
+      <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));
+          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>
-        `;
+      ${this.options.map((option) => {
+        return html` <div class="navigationOption">${option.text}</div> `;
       })}
-      <div class="navigationGroupLabel">Account Settings</div>
     `;
   }
 
@@ -125,19 +166,23 @@ export class LeleAccountNavigation extends DeesElement {
         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;
-    })
+      };
+    };
+    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/idp-welcome.ts

@@ -9,6 +9,7 @@ import {
   cssManager,
   unsafeCSS,
   css,
+  resolveExec,
   type TemplateResult,
 } from '@design.estate/dees-element';
 import type { IdpViewcontainer } from '../views/viewcontainer.js';
@@ -41,7 +42,7 @@ export class IdpWelcome extends DeesElement {
         margin: 0px auto;
         padding: 24px 24px 0px 24px;
         width: 500px;
-        letter-spacing:0.0125em;
+        letter-spacing: 0.0125em;
       }
 
       .textbox {
@@ -56,24 +57,56 @@ export class IdpWelcome extends DeesElement {
       .textbox dees-button {
         margin-top: 16px;
       }
-     `,
+    `,
   ];
 
   public render(): TemplateResult {
     return html`
       <style></style>
       <h1>idp.global</h1>
-      
+
       <div class="textbox">
-        Do you want to sign in or register?
-        <dees-button @click=${async () => {
+        ${resolveExec(async () => {
           const idpState = await IdpState.getSingletonInstance();
-          idpState.domtools.router.pushUrl('/login');
-        }}>Sign In</dees-button>
-        <dees-button @click=${async () => {
-          const idpState = await IdpState.getSingletonInstance();
-          idpState.domtools.router.pushUrl('/register');
-        }}>Register</dees-button>
+          await idpState.idpClient.determineLoginStatus();
+          const data = await idpState.idpClient.whoIs().catch();
+          if (data?.user) {
+            return html`
+              Hello ${data.user.data.name}!
+              <dees-button
+                @click=${async () => {
+                  const idpState = await IdpState.getSingletonInstance();
+                  idpState.domtools.router.pushUrl('/account');
+                }}
+                >Manage your account</dees-button
+              >
+              <dees-button
+                @click=${async () => {
+                  const idpState = await IdpState.getSingletonInstance();
+                  idpState.domtools.router.pushUrl('/logout');
+                }}
+                >Logout</dees-button
+              >
+            `
+          }
+          return html`
+            Do you want to sign in or register?
+            <dees-button
+              @click=${async () => {
+                const idpState = await IdpState.getSingletonInstance();
+                idpState.domtools.router.pushUrl('/login');
+              }}
+              >Sign In</dees-button
+            >
+            <dees-button
+              @click=${async () => {
+                const idpState = await IdpState.getSingletonInstance();
+                idpState.domtools.router.pushUrl('/register');
+              }}
+              >Register</dees-button
+            >
+          `;
+        })}
       </div>
 
       <div class="textbox">
@@ -82,10 +115,14 @@ export class IdpWelcome extends DeesElement {
       </div>
 
       <div class="textbox">
-        idp.global is a Open Source identity provider for the world wide web. You can get the code if you want to improve it.
-        <dees-button @click=${() => {
-          window.open('https://code.foss.global/idp.global/idp.global', '_blank');
-        }}>Get the code</dees-button>
+        idp.global is a Open Source identity provider for the world wide web. You can get the code
+        if you want to improve it.
+        <dees-button
+          @click=${() => {
+            window.open('https://code.foss.global/idp.global/idp.global', '_blank');
+          }}
+          >Get the code</dees-button
+        >
       </div>
     `;
   }

ts_web/states/idp.state.ts

@@ -19,7 +19,7 @@ export class IdpState {
   public idpClient = new plugins.idpClient.IdpClient(this.receptionUrl);
   public domtools: domtools.DomTools;
   public mainStatePart: plugins.deesDomtools.plugins.smartstate.StatePart<'main', {
-    view: 'welcome' | 'login' | 'register' | 'finishregistration' | 'account';
+    view: 'welcome' | 'login' | 'register' | 'finishregistration' | 'account' | 'logout';
   }>
 
   public async init() {
@@ -44,6 +44,14 @@ export class IdpState {
       })
     });
 
+    this.domtools.router.on('/logout', async () => {
+      await this.idpClient.logout();
+      await this.mainStatePart.setState({
+        ...this.mainStatePart.getState(),
+        view: 'logout',
+      })
+    });
+
     this.domtools.router.on('/register', async () => {
       await this.mainStatePart.setState({
         ...this.mainStatePart.getState(),