fixed architecture to dispatch events when routes and token changes

src/pages/home-page/HomePageElement.ts

@@ -11,10 +11,16 @@ class HomePageElement extends HTMLElement {
     constructor() {
         super();
     }
-    @update
+
     connectedCallback() {
         this.pingService = new PingService(this.appMain?.appService);
         if (this.appMain.isAuth) this.getPong();
+        this.update();
+        window.addEventListener("tokenchange", this.update);
+    }
+
+    disconnectedCallback(): void {
+        window.removeEventListener("tokenchange", this.update);
     }
 
     getPong = async () => {
@@ -31,13 +37,21 @@ class HomePageElement extends HTMLElement {
 
     render() {
         return html`
-            <app-link data-to="/home" data-title="Home"></app-link> |
             <app-link data-to="/" data-title="Main"></app-link> |
-            <app-link data-to="/login" data-title="Login"></app-link>
+            ${this.appMain.isAuth
+                ? html`<app-link data-to="/home" data-title="Home"></app-link>
+                      |<app-link
+                          data-to="/logout"
+                          data-title="Logout"
+                      ></app-link>`
+                : html`<app-link
+                      data-to="/login"
+                      data-title="Login"
+                  ></app-link>`}
         `;
     }
 
-    update() {
+    update = () => {
         render(this.render(), this);
-    }
+    };
 }

src/pages/index.ts

@@ -1,3 +1,4 @@
+export * from "./logout-page/LogoutPageElement";
 export * from "./home-page/HomePageElement";
 export * from "./register-page/RegisterPageElement";
 export * from "./login-page/LoginPageElement";

src/pages/login-page/LoginPageElement.ts

@@ -3,18 +3,37 @@ import { closest, index, update, isTrue } from "core/utils";
 import { html, render, until } from "@github/jtml";
 import { AuthService, PingService } from "services/";
 import { AppMainElement, InputFieldElement } from "components/";
+import { RouterService } from "core/services";
 
 @controller
 class LoginPageElement extends HTMLElement {
     @targets inputs: Array<InputFieldElement>;
     @closest appMain: AppMainElement;
     authService: AuthService;
+    routerService: RouterService;
     constructor() {
         super();
     }
     @update
     connectedCallback() {
         this.authService = new AuthService(this.appMain.appService);
+        this.routerService = this.appMain.routerService;
+    }
+
+    get emailInput() {
+        for (const i in this.inputs) {
+            if (this.inputs[i]?.name == "email") {
+                return this.inputs[i];
+            }
+        }
+    }
+
+    get passwordInput() {
+        for (const i in this.inputs) {
+            if (this.inputs[i]?.name == "password") {
+                return this.inputs[i];
+            }
+        }
     }
 
     get values(): Object {
@@ -36,9 +55,18 @@ class LoginPageElement extends HTMLElement {
             );
 
             if (response?.token) {
-                this.appMain.routerService.goTo("/");
+                console.log(this.appMain);
+                this.routerService.goTo("/");
             }
-        } catch (err) {}
+        } catch (err) {
+            if (err?.errorCode == 400103) {
+                this.emailInput.error = err?.message;
+                this.emailInput.update();
+            } else if (err?.errorCode == 400104) {
+                this.passwordInput.error = err?.message;
+                this.passwordInput.update();
+            }
+        }
     };
 
     validate(): boolean {

src/pages/logout-page/LogoutPageElement.ts

@@ -0,0 +1,18 @@
+import { controller } from "@github/catalyst";
+import { closest, update } from "core/utils";
+import { AuthService } from "services/";
+import { AppMainElement } from "components/";
+
+@controller
+class LogoutPageElement extends HTMLElement {
+    @closest appMain: AppMainElement;
+    authService: AuthService;
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.authService = new AuthService(this.appMain.appService);
+        this.appMain?.authStore?.userLogout();
+        this.appMain?.routerService.goTo("/login");
+    }
+}