feat: Improve login event handling and form data validation in dees-simple-login component

ts_web/elements/dees-simple-login.demo.ts

@@ -19,7 +19,13 @@ export const demoFunc = () => html`
       name="My Application"
       @login=${(e: CustomEvent) => {
         console.log('Login event received:', e.detail);
-        alert(`Login attempted with:\nUsername: ${e.detail.formData.username}\nPassword: ${e.detail.formData.password}`);
+        const loginData = e.detail?.data || e.detail;
+        if (loginData?.username && loginData?.password) {
+          alert(`Login attempted with:\nUsername: ${loginData.username}\nPassword: ${loginData.password}`);
+          // Here you would typically validate credentials and show the slotted content
+        } else {
+          console.error('Invalid login data structure:', e.detail);
+        }
       }}
     >
       <div style="padding: 40px; text-align: center;">

ts_web/elements/dees-simple-login.ts

@@ -119,19 +119,48 @@ export class DeesSimpleLogin extends DeesElement {
     `;
   }
 
-  public async firstUpdated(_changedProperties): Promise<void> {
-    const domtools = await this.domtoolsPromise;
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.firstUpdated(_changedProperties);
-    const form = this.shadowRoot.querySelector('dees-form');
+    const domtools = await this.domtoolsPromise;
+    
+    // Wait a tick to ensure child elements are rendered
+    await this.updateComplete;
+    
+    const form = this.shadowRoot.querySelector('dees-form') as any;
+    
+    if (!form) {
+      console.error('dees-form element not found in dees-simple-login');
+      return;
+    }
+    
+    // Check if the form has the readyDeferred property and wait for it
+    if (form.readyDeferred?.promise) {
+      try {
         await form.readyDeferred.promise;
-    const username = this.shadowRoot.querySelector('dees-input-text[label="username"]');
-    const password = this.shadowRoot.querySelector('dees-input-text[label="password"]');
+      } catch (error) {
+        console.error('Error waiting for form ready:', error);
+      }
+    }
+    
+    const username = this.shadowRoot.querySelector('dees-input-text[key="username"]');
+    const password = this.shadowRoot.querySelector('dees-input-text[key="password"]');
     const submit = this.shadowRoot.querySelector('dees-form-submit');
+    
+    // Add form data listener
     form.addEventListener('formData', (event: CustomEvent) => {
-      this.dispatchEvent(new CustomEvent('login', { detail: event.detail, bubbles: true, composed: true }));
+      this.dispatchEvent(new CustomEvent('login', { 
+        detail: event.detail, 
+        bubbles: true, 
+        composed: true 
+      }));
     });
   }
 
+  /**
+   * Dispatches a 'login' event when the form is submitted.
+   * Event detail structure: { data: { username: string, password: string } }
+   */
+  
   /**
    * allows switching to slotted content
    */