feat(app): wire dashboard administration flows

ts_web/elements/idp-registerprompt.ts

@@ -15,8 +15,6 @@ import {
 // third party catalogs
 import '@uptime.link/webwidget';
 
-import '@design.estate/dees-catalog';
-import { DeesForm, DeesFormSubmit, DeesInputText } from '@design.estate/dees-catalog';
 import { IdpState } from '../states/idp.state.js';
 
 declare global {
@@ -27,7 +25,7 @@ declare global {
 
 @customElement('idp-registrationprompt')
 export class IdpRegistrationPrompt extends DeesElement {
-  public static demo = () => html`<idp-login></idp-login>`;
+  public static demo = () => html`<idp-registrationprompt></idp-registrationprompt>`;
 
   @property()
   accessor productOfInterest: string;
@@ -79,7 +77,7 @@ export class IdpRegistrationPrompt extends DeesElement {
         margin: 0;
       }
 
-      dees-form {
+      idp-form {
         display: flex;
         flex-direction: column;
         gap: 16px;
@@ -113,25 +111,28 @@ export class IdpRegistrationPrompt extends DeesElement {
           <h2>Create your account</h2>
           <p>Get started with your permanent identity</p>
         </div>
-        <dees-form
+        <idp-form
           id="registrationForm"
-          @formData="${(eventArg) => {
+          @idp-submit=${(eventArg: CustomEvent<plugins.idpCatalog.IIdpFormSubmitEventDetail>) => {
             this.register({
-              emailAddress: eventArg.detail.data.emailAddress,
+              emailAddress: String(eventArg.detail.data.emailAddress || ''),
             });
-          }}"
+          }}
         >
-          <dees-input-text
-            .required=${true}
-            key="emailAddress"
+          <idp-input
+            required
+            name="emailAddress"
             label="Email Address"
-          ></dees-input-text>
-          <dees-input-checkbox
-            .label="${'I agree to the Terms and Conditions'}"
-            .required=${true}
-          ></dees-input-checkbox>
-          <dees-form-submit>Send Verification Email</dees-form-submit>
-        </dees-form>
+            type="email"
+            autocomplete="email"
+          ></idp-input>
+          <idp-checkbox
+            name="termsAccepted"
+            label="I agree to the Terms and Conditions"
+            required
+          ></idp-checkbox>
+          <idp-form-submit>Send Verification Email</idp-form-submit>
+        </idp-form>
         <div class="form-footer">
           Already have an account? <a @click=${async () => {
             const idpState = await IdpState.getSingletonInstance();
@@ -147,28 +148,12 @@ export class IdpRegistrationPrompt extends DeesElement {
     const idpState = await IdpState.getSingletonInstance();
     const loggedIn = await idpState.idpClient.determineLoginStatus();
     if (loggedIn) {
-      idpState.domtools.router.pushUrl('/');
+      idpState.domtools.router.pushUrl('/dash/overview');
     }
-    const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
-    const loginPasswordInput: DeesInputText = loginForm.querySelector('#loginPasswordInput');
-    const loginSubmitButton: DeesFormSubmit = loginForm.querySelector('#loginSubmitButton');
-    const setButtonText = async () => {
-      if (loginPasswordInput.value) {
-        console.log('updating text of registrationprompt.');
-        loginSubmitButton.text = 'Login';
-      } else {
-        loginSubmitButton.text = 'Send magic link (or enter password)';
-      }
-    };
-    loginForm.changeSubject.subscribe(() => {
-      console.log(`checking button text ${loginPasswordInput.value}`);
-      setButtonText();
-    });
-    setButtonText();
   }
 
   private register = async (valueArg: { emailAddress: string }) => {
-    const registrationForm: DeesForm = this.shadowRoot.querySelector('#registrationForm');
+    const registrationForm = this.shadowRoot.querySelector('#registrationForm') as plugins.idpCatalog.IdpForm;
     registrationForm.setStatus('pending', 'registering...');
     const idpState = await IdpState.getSingletonInstance();
     const firstSignupRequest =
@@ -181,11 +166,14 @@ export class IdpRegistrationPrompt extends DeesElement {
         productSlugOfInterest: this.productOfInterest,
       })
       .catch((err) => {
-        registrationForm.setStatus('error', err.message);
+        const message = err?.errorText || err?.message || 'Registration request failed. Please try again.';
+        registrationForm.setStatus('error', message);
         return null;
       });
-    if (response.status === 'ok') {
+    if (response?.status === 'ok') {
       registrationForm.setStatus('success', 'Please check your email!');
+    } else if (response) {
+      registrationForm.setStatus('error', 'Registration request failed. Please try again.');
     }
     console.log(response);
   };