fix(core): Update dependencies and refactor registration process

2024-10-04 15:43:36 +02:00
parent 629bf19845
commit 4deaafc3a2
18 changed files with 676 additions and 597 deletions
@@ -16,13 +16,13 @@ import { IdpState } from '../idp.state.js';

 declare global {
  interface HTMLElementTagNameMap {
-    'idp-logincontainer': IdpLogincontainer;
+    'idp-centercontainer': IdpCenterContainer;
  }
 }

-@customElement('idp-logincontainer')
-export class IdpLogincontainer extends DeesElement {
-  public static demo = () => html`<idp-logincontainer></idp-logincontainer>`;
+@customElement('idp-centercontainer')
+export class IdpCenterContainer extends DeesElement {
+  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-delay: 0.2s;
-        transform: translate3d(0px, 20px, 0px);
+        transition: all 0.1s;
+        transition-delay: 0.05s;
+        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;
  }
 }
@@ -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')
-export class IdpLogin extends DeesElement {
-  public static demo = () => html`<idp-login></idp-login>`;
+@customElement('idp-loginprompt')
+export class IdpLoginPrompt extends DeesElement {
+  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">
-        <dees-form
-          id="loginForm"
-          @formData="${(eventArg) => {
-            this.login({
-              emailAddress: eventArg.detail.data.emailAddress,
-              passwordArg: eventArg.detail.data.password,
-            });
-          }}"
-        >
-          <dees-input-text
-            id="loginEmailInput"
-            .required=${true}
-            key="emailAddress"
-            label="Email-Address or Username"
-          ></dees-input-text>
-          <dees-input-text
-            .id=${'loginPasswordInput'}
-            .key=${'password'}
-            .label=${'Password'}
-            .isPasswordBool=${true}
-          ></dees-input-text>
-          <dees-form-submit id="loginSubmitButton"></dees-form-submit>
-        </dees-form>
-        <dees-button type="discreet" class="registerButton">Register instead</dees-button>
-      </div>
+      <idp-centercontainer>
+        <div class="boxcontent">
+          <dees-form
+            id="loginForm"
+            @formData="${(eventArg) => {
+              this.login({
+                emailAddress: eventArg.detail.data.emailAddress,
+                passwordArg: eventArg.detail.data.password,
+              });
+            }}"
+          >
+            <dees-input-text
+              id="loginEmailInput"
+              .required=${true}
+              key="emailAddress"
+              label="Email-Address or Username"
+            ></dees-input-text>
+            <dees-input-text
+              .id=${'loginPasswordInput'}
+              .key=${'password'}
+              .label=${'Password'}
+              .isPasswordBool=${true}
+            ></dees-input-text>
+            <dees-form-submit id="loginSubmitButton"></dees-form-submit>
+          </dees-form>
+          <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();
  }
 }
@@ -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,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">
-        <dees-form
-          id="registrationForm"
-          @formData="${(eventArg) => {
-            this.register({
-              emailAddress: eventArg.detail.data.emailAddress,
-            });
-          }}"
-        >
-          <dees-input-text
-            .required=${true}
-            key="emailAddress"
-            label="Email-Address"
-          ></dees-input-text>
-          <dees-input-checkbox
-            .label="${'Agree to the Terms and Conditions'}"
-          ></dees-input-checkbox>
-          <dees-form-submit>Send Verification Email</dees-form-submit>
-        </dees-form>
-      </div>
+      <idp-centercontainer>
+        <div class="boxcontent">
+          <dees-form
+            id="registrationForm"
+            @formData="${(eventArg) => {
+              this.register({
+                emailAddress: eventArg.detail.data.emailAddress,
+              });
+            }}"
+          >
+            <dees-input-text
+              .required=${true}
+              key="emailAddress"
+              label="Email-Address"
+            ></dees-input-text>
+            <dees-input-checkbox
+              .label="${'Agree to the Terms and Conditions'}"
+            ></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();
+  }
 }
@@ -14,7 +14,6 @@ import {

@customElement('idp-registration-stepper')
 export class IdpRegistrationStepper extends DeesElement {
-
  @state()
  private usedSubTemplate: TemplateResult;

@@ -67,230 +66,222 @@ export class IdpRegistrationStepper extends DeesElement {
  public async firstUpdated() {
    const idpState = await IdpState.getSingletonInstance();
    await this.domtoolsPromise;
-    this.domtools.router.on(`/finishregistration`, async (routeArg) => {
-      this.storedData.validationTokenUrlParam = routeArg.queryParams.validationtoken;
-      if (!this.storedData.validationTokenUrlParam) {
-        this.usedSubTemplate = html`
-          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... `;
-        await this.domtools.convenience.smartdelay.delayFor(2000);
-        window.location.href = 'https://support.workspace.global';
-        return;
-      }
-      // lets verify the info;
-      let tokenErrorMessage: string;
-      const resAfterRegEmailClicked =
-        await idpState.idpClient.requests.afterRegistrationEmailClicked
-          .fire({
-            token: this.storedData.validationTokenUrlParam,
-          })
-          .catch(
-            (
-              err: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
-            ) => {
-              tokenErrorMessage = err.errorText;
-              return;
-            }
-          );
+    const parsedUrl = plugins.smarturl.Smarturl.createFromUrl(window.location.href);
+    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.
+      `;
+      await this.domtools.convenience.smartdelay.delayFor(5000);
+      window.location.href = '/';
+      return;
+    }
+    // lets verify the info;
+    let tokenErrorMessage: string;
+    const resAfterRegEmailClicked = await idpState.idpClient.requests.afterRegistrationEmailClicked
+      .fire({
+        token: this.storedData.validationTokenUrlParam,
+      })
+      .catch(
+        (
+          err: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
+        ) => {
+          tokenErrorMessage = err.errorText;
+          return;
+        }
+      );

-      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... `;
-        await this.domtools.convenience.smartdelay.delayFor(1000);
-        window.location.href = 'https://support.workspace.global';
-        return;
-      } else {
-        this.storedData.email = resAfterRegEmailClicked.email;
-      }
+    console.log(resAfterRegEmailClicked);

-      // lets continue with UI
-      this.usedSubTemplate = html`<dees-stepper
-        .steps=${[
-          {
-            title: 'What is your name?',
-            content: html`
-              <dees-form>
-                <dees-input-text
-                  key="email"
-                  label="Your 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 (!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);
+      idpState.domtools.router.pushUrl('/');
+      return;
+    } else {
+      this.storedData.email = resAfterRegEmailClicked.email;
+    }

-                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({
+    // lets continue with UI
+    this.usedSubTemplate = html`<dees-stepper
+      .steps=${[
+        {
+          title: 'What is your name?',
+          content: html`
+            <dees-form>
+              <dees-input-text
+                key="email"
+                label="Your 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: {
-                    username: null,
-                    email: null,
-                    name: null,
+                    name: `${eventArg.detail.data.firstName} ${eventArg.detail.data.lastName}`,
                    connectedOrgs: null,
+                    email: null,
                    status: null,
-                    password: eventArg.detail.data.password,
+                    username: null,
                  },
-                });
-                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,
+                })
+                .catch(
+                  (
+                    errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
+                  ) => {
+                    deesForm.setStatus('error', errArg.errorText);
                  }
                );
-                this.storedData.refreshToken = loginResponse.refreshToken;
-
-                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');
-              });
-            },
+              deesForm.setStatus('success', 'ok!');
+              stepperArg.goNext();
+            });
          },
-        ] 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();
+          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) {
+                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('pending', 'Obtaining Transfer Token...');
+              await idpState.idpClient.setJwt(jwtResponse.jwt);
+              await idpState.idpClient.getTransferTokenAndSwitchToLocation(
+                'https://sso.workspace.global/afterregistration'
+              );
+            });
+          },
+        },
+      ] as plugins.deesCatalog.IStep[]}
+    ></dees-stepper>`;
+    await this.domtools.convenience.smartdelay.delayFor(100);
  }
 }
@@ -38,8 +38,8 @@ export class IdpWelcome extends DeesElement {
        font-family: 'Cal Sans';
        text-align: center;
        font-size: 24px;
-        margin: 24px auto;
-        padding: 0px 24px;
+        margin: 0px auto;
+        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">
@@ -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';