1.2.2

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 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.2.2",
   "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.10",
-    "@design.estate/dees-domtools": "^2.0.60",
+    "@design.estate/dees-domtools": "^2.0.61",
-    "@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.0",
     "@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.2.2',
   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_web/00_commitinfo_data.ts

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

ts_web/elements/idp-centercontainer.ts

@@ -16,13 +16,13 @@ import { IdpState } from '../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 '../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,6 +69,7 @@ export class IdpLogin extends DeesElement {
 
   public render(): TemplateResult {
     return html`
+      <idp-centercontainer>
         <div class="boxcontent">
           <dees-form
             id="loginForm"
@@ -92,8 +94,12 @@ export class IdpLogin extends DeesElement {
             ></dees-input-text>
             <dees-form-submit id="loginSubmitButton"></dees-form-submit>
           </dees-form>
-        <dees-button type="discreet" class="registerButton">Register instead</dees-button>
+          <dees-button type="discreet" class="registerButton" @click=${async () => {
+            const idpState = await IdpState.getSingletonInstance();
+            idpState.domtools.router.pushUrl('/register');
+          }}>Register instead</dees-button>
         </div>
+      </idp-centercontainer>
     `;
   }
 
@@ -206,6 +212,20 @@ export class IdpLogin extends DeesElement {
   }
 
   public async focus() {
-    (this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText).focus();
+    (
+      this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText
+    ).focus();
+  }
+
+  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-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 '../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,11 +72,16 @@ export class IdpRegistrationPrompt extends DeesElement {
         color: #fff;
         transform: scale(1.02);
       }
+
+      .loginButton {
+        margin-top: 16px;
+      }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
+      <idp-centercontainer>
         <div class="boxcontent">
           <dees-form
             id="registrationForm"
@@ -103,7 +101,12 @@ export class IdpRegistrationPrompt extends DeesElement {
             ></dees-input-checkbox>
             <dees-form-submit>Send Verification Email</dees-form-submit>
           </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

@@ -14,7 +14,6 @@ import {
 
 @customElement('idp-registration-stepper')
 export class IdpRegistrationStepper extends DeesElement {
-
   @state()
   private usedSubTemplate: TemplateResult;
 
@@ -67,43 +66,42 @@ 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'];
+    console.log(`validationToken is ${this.storedData.validationTokenUrlParam}`);
     if (!this.storedData.validationTokenUrlParam) {
       this.usedSubTemplate = html`
-          You need a validation token, but we couldn't find one. Please contact workspace.global support.
+        You need a validation token, but we couldn't find one. Please contact workspace.global
+        support.
       `;
       await this.domtools.convenience.smartdelay.delayFor(5000);
-        this.usedSubTemplate = html` Redirecting you to workspace.global support... `;
+      window.location.href = '/';
-        await this.domtools.convenience.smartdelay.delayFor(2000);
-        window.location.href = 'https://support.workspace.global';
       return;
     }
     // lets verify the info;
     let tokenErrorMessage: string;
-      const resAfterRegEmailClicked =
+    const resAfterRegEmailClicked = await idpState.idpClient.requests.afterRegistrationEmailClicked
-        await idpState.idpClient.requests.afterRegistrationEmailClicked
       .fire({
         token: this.storedData.validationTokenUrlParam,
       })
       .catch(
         (
-              err: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
+          err: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
         ) => {
           tokenErrorMessage = err.errorText;
           return;
         }
       );
 
+    console.log(resAfterRegEmailClicked);
+
     if (!resAfterRegEmailClicked || !resAfterRegEmailClicked.email) {
       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... `;
+      idpState.domtools.router.pushUrl('/');
-        await this.domtools.convenience.smartdelay.delayFor(1000);
-        window.location.href = 'https://support.workspace.global';
       return;
     } else {
       this.storedData.email = resAfterRegEmailClicked.email;
@@ -143,7 +141,7 @@ export class IdpRegistrationStepper extends DeesElement {
                 })
                 .catch(
                   (
-                      errArg: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
+                    errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
                   ) => {
                     deesForm.setStatus('error', errArg.errorText);
                   }
@@ -179,7 +177,7 @@ export class IdpRegistrationStepper extends DeesElement {
                 })
                 .catch(
                   (
-                      errArg: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
+                    errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
                   ) => {
                     deesForm.setStatus('error', errArg.errorText);
                   }
@@ -262,12 +260,11 @@ export class IdpRegistrationStepper extends DeesElement {
               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(
+              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...');
@@ -277,20 +274,14 @@ export class IdpRegistrationStepper extends DeesElement {
 
               deesForm.setStatus('pending', 'Obtaining Transfer Token...');
               await idpState.idpClient.setJwt(jwtResponse.jwt);
-                await idpState.idpClient.getTransferTokenAndSwitchToLocation('https://sso.workspace.global/afterregistration');
+              await idpState.idpClient.getTransferTokenAndSwitchToLocation(
+                'https://sso.workspace.global/afterregistration'
+              );
             });
           },
         },
       ] as plugins.deesCatalog.IStep[]}
     ></dees-stepper>`;
     await this.domtools.convenience.smartdelay.delayFor(100);
-    });
-    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);
-      this.usedSubTemplate = html`Redirecting you now...`;
-      window.location.href = `https://workspace.global`;
-    });
-    this.domtools.router._handleRouteState();
   }
 }

ts_web/elements/idp-welcome.ts

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

ts_web/idp.state.ts

@@ -15,11 +15,11 @@ 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';
   }>
 
   public async init() {
@@ -49,6 +49,13 @@ export class IdpState {
         view: 'register',
       })
     });
+
+    this.domtools.router.on('/finishregistration', async () => {
+      await this.mainStatePart.setState({
+        ...this.mainStatePart.getState(),
+        view: 'finishregistration',
+      })
+    });
     this.domtools.router._handleRouteState();
   }
 }

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/views/viewcontainer.ts

@@ -61,14 +61,23 @@ export class IdpViewcontainer extends DeesElement {
 
     // 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 +96,13 @@ 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);
         }
       });
   }