1.4.1

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2024-10-07 - 1.4.1 - fix(core)
+Bug fixes and UI enhancements
+
+- Updated packages to resolve compatibility issues.
+- Optimized the transition animations for the center container.
+- Improved the initialization logic for navigating between views.
+- Enhanced UI with better organization selection handling.
+
 ## 2024-10-07 - 1.4.0 - feat(core)
 Refactored plugin and request handling to use 'idpInterfaces'
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/idp.global",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "An identity provider software managing user authentications, registrations, and sessions.",
   "main": "dist_ts/index.js",
   "typings": "dist_ts/index.d.ts",
@@ -21,7 +21,7 @@
     "@api.global/typedserver": "^3.0.51",
     "@api.global/typedsocket": "^3.0.1",
     "@consentsoftware_private/catalog": "^1.0.73",
-    "@design.estate/dees-catalog": "^1.1.13",
+    "@design.estate/dees-catalog": "^1.2.0",
     "@design.estate/dees-domtools": "^2.0.64",
     "@design.estate/dees-element": "^2.0.39",
     "@push.rocks/lik": "^6.0.15",

pnpm-lock.yaml

@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.73
         version: 1.0.77(@types/node@22.7.4)
       '@design.estate/dees-catalog':
-        specifier: ^1.1.13
+        specifier: ^1.2.0
-        version: 1.1.13
+        version: 1.2.0
       '@design.estate/dees-domtools':
         specifier: ^2.0.64
         version: 2.0.64
@@ -420,8 +420,8 @@ packages:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
-  '@design.estate/dees-catalog@1.1.13':
+  '@design.estate/dees-catalog@1.2.0':
-    resolution: {integrity: sha512-bgxlsu6rfYCTqyC2tDo8dtwFQB2HaINEK4dOSlvEWd9DmDymphxNoHxi5f/4NFY7H8gSIgUoBmk3y/MFU3GoRg==}
+    resolution: {integrity: sha512-QVp36XMzX7PEGKJxVaZ09jPFPV2AVYDhNaP1KRWegoiI/PQ3+YilXC7P7WSTPxBojTi28AdPzt9brpaORFY/Qg==}
 
   '@design.estate/dees-comms@1.0.27':
     resolution: {integrity: sha512-GvzTUwkV442LD60T08iqSoqvhA02Mou5lFvvqBPc4yBUiU7cZISqBx+76xvMgMIEI9Dx9JfTl4/2nW8MoVAanw==}
@@ -2947,8 +2947,8 @@ packages:
       worker-loader:
         optional: true
 
-  pdfjs-dist@4.6.82:
+  pdfjs-dist@4.7.76:
-    resolution: {integrity: sha512-BUOryeRFwvbLe0lOU6NhkJNuVQUp06WxlJVVCsxdmJ4y5cU3O3s3/0DunVdK1PMm7v2MUw52qKYaidhDH1Z9+w==}
+    resolution: {integrity: sha512-8y6wUgC/Em35IumlGjaJOCm3wV4aY/6sqnIT3fVW/67mXsOZ9HWBn8GDKmJUK0GSzpbmX3gQqwfoFayp78Mtqw==}
     engines: {node: '>=18'}
 
   peek-readable@5.2.0:
@@ -4864,7 +4864,7 @@ snapshots:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
-  '@design.estate/dees-catalog@1.1.13':
+  '@design.estate/dees-catalog@1.2.0':
     dependencies:
       '@design.estate/dees-domtools': 2.0.64
       '@design.estate/dees-element': 2.0.39
@@ -4882,7 +4882,7 @@ snapshots:
       highlight.js: 11.10.0
       ibantools: 4.5.1
       monaco-editor: 0.52.0
-      pdfjs-dist: 4.6.82
+      pdfjs-dist: 4.7.76
       xterm: 5.3.0
       xterm-addon-fit: 0.8.0(xterm@5.3.0)
     transitivePeerDependencies:
@@ -6905,7 +6905,7 @@ snapshots:
 
   '@uptime.link/webwidget@1.1.2':
     dependencies:
-      '@design.estate/dees-catalog': 1.1.13
+      '@design.estate/dees-catalog': 1.2.0
       '@design.estate/dees-domtools': 2.0.64
       '@design.estate/dees-element': 2.0.39
       '@design.estate/dees-wcctools': 1.0.90
@@ -8563,7 +8563,7 @@ snapshots:
       dommatrix: 1.0.3
       web-streams-polyfill: 3.3.3
 
-  pdfjs-dist@4.6.82:
+  pdfjs-dist@4.7.76:
     optionalDependencies:
       canvas: 2.11.2
       path2d: 0.2.1

ts/00_commitinfo_data.ts

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

ts_web/00_commitinfo_data.ts

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

ts_web/elements/account/content.ts

@@ -110,6 +110,16 @@ export class IdpAccountContent extends DeesElement {
     viewcontainer.append(new views.BaseView());
     console.log(`loaded base view`);
 
+    this.subrouter.on('', async () => {
+      viewcontainer.classList.add('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+      console.log('We are viewing the account overview');
+      await cleanupViews();
+      viewcontainer.append(new views.BaseView());
+      viewcontainer.classList.remove('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+    });
+
     this.subrouter.on('/org/:orgName/billing', async () => {
       viewcontainer.classList.add('changing');
       await this.domtools.convenience.smartdelay.delayFor(300);
@@ -121,5 +131,11 @@ export class IdpAccountContent extends DeesElement {
     });
 
     this.subrouter._handleRouteState();
+
+    this.registerGarbageFunction(async () => {
+      this.subrouter.destroy();
+    })
   }
+
+  
 }

ts_web/elements/account/navigation.ts

@@ -28,7 +28,7 @@ export class LeleAccountNavigation extends DeesElement {
   public options: { text: string; id: string }[] = [
     {
       id: '1',
-      text: 'Properties',
+      text: 'Apps',
     },
     {
       id: '2',
@@ -56,13 +56,30 @@ export class LeleAccountNavigation extends DeesElement {
         color: ${cssManager.bdTheme('#333', '#fff')};
         padding: 10px;
         padding-left: 0px;
-        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
+        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
-        border-right: ${cssManager.bdTheme('1px solid #ccc', '')};
+        border-right: ${cssManager.bdTheme('1px solid #ccc', '1px solid #111')};
       }
       :host([hidden]) {
         display: none;
       }
 
+      .logo {
+        font-family: 'Cal Sans';
+        letter-spacing: 0.0125em;
+        font-size: 16px;
+        text-align: center;
+        padding: 16px 0px 16px 0px;
+        margin: -8px -8px -16px 0px;
+        border-bottom: 1px solid #111111;
+        cursor: default;
+        position: relative;
+        z-index: 10;
+      }
+
+      .logo:hover {
+        background: ${unsafeCSS(plugins.deesCatalog.colors.dark.blue)};
+      }
+
       .commitinfo {
         text-align: center;
         position: absolute;
@@ -71,7 +88,6 @@ export class LeleAccountNavigation extends DeesElement {
         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')};
       }
@@ -82,7 +98,9 @@ export class LeleAccountNavigation extends DeesElement {
         text-transform: uppercase;
         font-size: 12px;
         font-weight: 300;
-        border-bottom: 1px dotted #666;
+        border-bottom: 1px solid;
+        border-image: linear-gradient(to right, orange, #44444400) 1;
+        color: ${cssManager.bdTheme('#666', '#ccc')};
         margin-bottom: 5px;
         padding-top: 32px;
         padding-left: 10px;
@@ -99,8 +117,8 @@ export class LeleAccountNavigation extends DeesElement {
       }
 
       .navigationOption:hover {
-        cursor: pointer;
+        cursor: default;
-        background: ${cssManager.bdTheme('#bbb', '#333')};
+        background: ${cssManager.bdTheme('#bbb', plugins.deesCatalog.colors.dark.blue)};
       }
       dees-input-dropdown {
         margin-top: 16px;
@@ -110,11 +128,26 @@ export class LeleAccountNavigation extends DeesElement {
     `,
   ];
 
+  public async getAccountRouter() {
+    const host = (this.getRootNode() as any).host;
+    return (host as any).subrouter;
+  }
+
   public render(): TemplateResult {
     return html`
       <style></style>
       <div class="commitinfo">idp.global v${commitinfo.version}</div>
+      <div class="logo">idp.global</div>
       <div class="navigationGroupLabel">Account Settings</div>
+      <div
+        class="navigationOption"
+        @click=${async () => {
+          const subrouter = await this.getAccountRouter();
+          subrouter.pushUrl('');
+        }}
+      >
+        overview
+      </div>
       <div
         class="navigationOption"
         @click=${async () => {

ts_web/elements/account/sharedstyles.ts

@@ -3,7 +3,8 @@ import { css } from '@design.estate/dees-element';
 export default css`
   h1 {
     margin-top: 50px;
-    border-bottom: 1px solid #666;
+    border-bottom: 1px solid;
+    border-image: radial-gradient(rgba(136, 136, 136, 0.44), rgba(136, 136, 136, 0)) 1 / 1 / 0 stretch;
     padding-bottom: 10px;
     font-weight: 500;
   }

ts_web/elements/account/views/baseview.ts

@@ -67,24 +67,28 @@ export class BaseView extends DeesElement {
       .orgGrid {
         display: grid;
         grid-gap: 16px;
-        grid-template-columns: ${cssManager.cssGridColumns(4, 16)}
+        grid-template-columns: ${cssManager.cssGridColumns(2, 16)};
       }
 
       .org {
         padding: 16px;
-        border: 1px dotted #666;
+        border-top: 1px solid #444;
-        border-radius: 3px;
+        background: ${cssManager.bdTheme('#ccc', '#222')};
+        border-radius: 16px;
       }
 
       .org:hover {
-        cursor: pointer;
+        cursor: default;
         background: ${cssManager.bdTheme('#CCC', '#333')};
       }
     `,
   ];
 
   public render() {
-    return html` <div class="viewHost"></div> `;
+    return html`
+    <div class="viewHost">
+
+    </div> `;
   }
 
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
@@ -147,33 +151,43 @@ export class BaseView extends DeesElement {
       subscriptions.push(formSubscription);
       button.addEventListener('clicked', async () => {
         orgInput.disabled = true;
-        button.text = 'creating org...'
+        button.text = 'creating org...';
         button.status = 'pending';
-        hint.innerHTML = 'Waiting for creation of the organization...'
+        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!`
+        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`);
+        parentElement.subrouter.pushUrl(
+          `/org/${state.accountState.getState().organizations[0].data.slug}/billing`
+        );
       });
     } else {
-      render(html`
+      render(
+        html`
           <h1>Select An Organization</h1>
           <div class="orgGrid">
-          ${state.accountState.getState().organizations.map(orgArg => {
+            ${state.accountState.getState().organizations.map((orgArg) => {
               return html`
-              <div class="org" @click=${() => {
+                <div
-                state.accountState.dispatchAction(state.setSelectedOrg, orgArg)
+                  class="org"
+                  @click=${() => {
+                    state.accountState.dispatchAction(state.setSelectedOrg, orgArg);
                     const parentElement = (this.getRootNode() as any).host;
-                parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`)
+                    parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`);
-              }}>
+                  }}
-                ${orgArg.data.name}
+                >
+                  <dees-icon .iconFA=${"wallet"} style="display: inline-block; transform: translateY(3px); padding-right: 4px;"></dees-icon> ${orgArg.data.name}
                 </div>
-            `
+              `;
             })}
           </div>
-      `, viewHost)
+        `,
+        viewHost
+      );
     }
   }
 }

ts_web/elements/idp-centercontainer.ts

@@ -47,7 +47,7 @@ export class IdpCenterContainer extends DeesElement {
         justify-content: center;
         align-items: center;
         opacity: 0;
-        transition: all 0.1s;
+        transition: all 0.2s;
         transition-delay: 0.05s;
         transform: translate3d(0px, 8px, 0px);
         pointer-events: none;
@@ -126,7 +126,7 @@ export class IdpCenterContainer extends DeesElement {
     const done = plugins.smartpromise.defer();
     requestAnimationFrame(async () => {
       this.shadowRoot.querySelector('.mainContainer').classList.add('show');
-      await domtoolsInstance.convenience.smartdelay.delayFor(200);
+      await domtoolsInstance.convenience.smartdelay.delayFor(250);
       done.resolve();
     });
     return done.promise;
@@ -138,7 +138,7 @@ export class IdpCenterContainer extends DeesElement {
     const done = plugins.smartpromise.defer();
     requestAnimationFrame(async () => {
       this.shadowRoot.querySelector('.mainContainer').classList.remove('show');
-      await domtoolsInstance.convenience.smartdelay.delayFor(200);
+      await domtoolsInstance.convenience.smartdelay.delayFor(250);
       done.resolve();
     });
     return done.promise;

ts_web/elements/idp-registerprompt.ts

@@ -111,7 +111,12 @@ export class IdpRegistrationPrompt extends DeesElement {
   }
 
   public async firstUpdated() {
-    const domtoolsInstance = await this.domtoolsPromise;
+    await this.domtoolsPromise;
+    const idpState = await IdpState.getSingletonInstance();
+    const loggedIn = await idpState.idpClient.determineLoginStatus();
+    if (loggedIn) {
+      idpState.domtools.router.pushUrl('/');
+    }
     const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
     const loginPasswordInput: DeesInputText = loginForm.querySelector('#loginPasswordInput');
     const loginSubmitButton: DeesFormSubmit = loginForm.querySelector('#loginSubmitButton');

ts_web/elements/idp-welcome.ts

@@ -35,27 +35,20 @@ export class IdpWelcome extends DeesElement {
         display: none;
       }
 
-      h1 {
+      .maincontainer {
-        font-family: 'Cal Sans';
+        padding: 0px 16px;
+      }
+
+      .greeting {
         text-align: center;
-        font-size: 24px;
+        font-size: 16px;
-        margin: 0px auto;
+        font-weight: 600;
-        padding: 24px 24px 0px 24px;
-        width: 500px;
-        letter-spacing: 0.0125em;
-      }
-
-      .textbox {
         margin: 24px auto;
-        width: 500px;
-        background: #111111;
-        border-radius: 16px;
-        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#222222')};
-        padding: 24px;
       }
 
-      .textbox dees-button {
+      dees-button {
         margin-top: 16px;
+        margin-bottom: 16px;
       }
     `,
   ];
@@ -63,16 +56,15 @@ export class IdpWelcome extends DeesElement {
   public render(): TemplateResult {
     return html`
       <style></style>
-      <h1>idp.global</h1>
+      <idp-centercontainer>
-
+        <div class="maincontainer">
-      <div class="textbox">
         ${resolveExec(async () => {
           const idpState = await IdpState.getSingletonInstance();
           await idpState.idpClient.determineLoginStatus();
           const data = await idpState.idpClient.whoIs().catch();
           if (data?.user) {
             return html`
-              Hello ${data.user.data.name}!
+              <div class="greeting">Hello ${data.user.data.name}!</div>
               <dees-button
                 @click=${async () => {
                   const idpState = await IdpState.getSingletonInstance();
@@ -87,7 +79,7 @@ export class IdpWelcome extends DeesElement {
                 }}
                 >Logout</dees-button
               >
-            `
+            `;
           }
           return html`
             Do you want to sign in or register?
@@ -107,23 +99,27 @@ export class IdpWelcome extends DeesElement {
             >
           `;
         })}
-      </div>
-
-      <div class="textbox">
-        Do you want to use idp.global for your app?
         <dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
-      </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
+          >Get the Source Code</dees-button
         >
         </div>
+      </idp-centercontainer>
     `;
   }
+
+  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/views/viewcontainer.ts

@@ -59,6 +59,10 @@ export class IdpViewcontainer extends DeesElement {
       throw new Error('View container not found in the rendered DOM.');
     }
 
+    if (!this.currentElement) {
+      this.currentElement = viewContainer.children[0] as any;
+    }
+
     // check if current element already is instance of viewElement
     if (this.currentElement instanceof viewElement) {
       return;