fix(core): Update dependencies and refactor registration process

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,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();
+  }
 }