fix(web ui): login

ts_web/elements/ops-dashboard.ts

@@ -75,13 +75,6 @@ export class OpsDashboard extends DeesElement {
       <div class="maincontainer">
         <dees-simple-login 
           name="DCRouter OpsServer"
-          .loginAction=${async (username: string, password: string) => {
-            await appstate.loginStatePart.dispatchAction(appstate.loginAction, {
-              username,
-              password,
-            });
-            return this.loginState.isLoggedIn;
-          }}
         >
           <dees-simple-appdash 
             name="DCRouter OpsServer"
@@ -121,4 +114,52 @@ export class OpsDashboard extends DeesElement {
       </div>
     `;
   }
+
+  public async firstUpdated() {
+    const simpleLogin = this.shadowRoot.querySelector('dees-simple-login');
+    simpleLogin.addEventListener('login', (e: CustomEvent) => {
+      console.log(e.detail);
+      this.login(e.detail.data.username, e.detail.data.password);
+    });
+
+    // Handle initial state
+    const loginState = appstate.loginStatePart.getState();
+    console.log('Initial login state:', loginState);
+    if (loginState.identity) {
+      this.loginState = loginState;
+      await simpleLogin.switchToSlottedContent();
+      await appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
+      await appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
+    }
+  }
+
+  private async login(username: string, password: string) {
+    const domtools = await this.domtoolsPromise;
+    console.log(`Attempting to login...`);
+    const simpleLogin = this.shadowRoot.querySelector('dees-simple-login');
+    const form = simpleLogin.shadowRoot.querySelector('dees-form');
+    form.setStatus('pending', 'Logging in...');
+    
+    const state = await appstate.loginStatePart.dispatchAction(appstate.loginAction, {
+      username,
+      password,
+    });
+    
+    if (state.identity) {
+      console.log('Login successful');
+      this.loginState = state;
+      form.setStatus('success', 'Logged in!');
+      await simpleLogin.switchToSlottedContent();
+      await appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
+      await appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
+    } else {
+      form.setStatus('error', 'Login failed!');
+      await domtools.convenience.smartdelay.delayFor(2000);
+      form.reset();
+    }
+  }
+
+  private async logout() {
+    await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+  }
 }