added authorization stores and fixed http client

src/components/app-main/AppMainElement.ts

@@ -2,16 +2,24 @@ import { attr, targets, controller, target } from "@github/catalyst";
 import { closest, index, update, isTrue } from "core/utils";
 import { html, render, until } from "@github/jtml";
 import { PingService } from "services/";
-import { RouterService } from "core/services";
+import { AppService, HttpClient, RouterService } from "core/services";
+import { AuthStore } from "core/store";
 
 @controller
 class AppMainElement extends HTMLElement {
     public routerService: RouterService;
+    public authStore: AuthStore;
+    private httpClient: HttpClient;
+    public appService: AppService;
+
     constructor() {
         super();
     }
     connectedCallback() {
+        this.httpClient = new HttpClient();
+        this.appService = new AppService(this, this.httpClient);
         this.routerService = new RouterService(this);
+        this.authStore = new AuthStore(this.appService);
         this.routerService.setRoutes([
             {
                 path: "/",
@@ -21,10 +29,30 @@ class AppMainElement extends HTMLElement {
             {
                 path: "/home",
                 component: "home-page",
+                middleware: this.isAuth,
+            },
+            {
+                path: "/rb",
+                component: "register-page",
+            },
+            {
+                path: "/unauthorized",
+                component: "register-page",
+            },
+            {
+                path: "token-expired",
+                component: "register-page",
             },
         ]);
         this.routerService.init();
     }
+
+    isAuth = () => {
+        if (this.authStore?.token == null) {
+            this.routerService.goTo("/unauthorized");
+            return true;
+        }
+    };
 }
 
 export type { AppMainElement };

src/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./app-main/AppMainElement";
 export * from "./app-link/AppLinkElement";
+export * from "./input-field/InputFieldElement";

src/components/input-field/InputFieldElement.ts

@@ -0,0 +1,81 @@
+import { attr, targets, controller, target } from "@github/catalyst";
+import { closest, index, update, isTrue, firstUpper } from "core/utils";
+import { html, render, until } from "@github/jtml";
+import { PingService } from "services/";
+import { AppMainElement } from "components/app-main/AppMainElement";
+import { RouterService } from "core/services";
+import randomId from "core/utils/random-id";
+import validator from "validator";
+import { validatorErrors } from "core/constants";
+
+@controller
+class InputFieldElement extends HTMLElement {
+    @closest appMain: AppMainElement;
+    @attr name: string;
+    @attr type: string;
+    @attr label: string;
+    @attr rules: string;
+    @target main: HTMLElement;
+    @target inp: HTMLElement;
+    error: string;
+    randId: string;
+    routerService: RouterService;
+    constructor() {
+        super();
+    }
+
+    @update
+    public connectedCallback(): void {
+        this.randId = `${name}${randomId()}`;
+    }
+
+    get valid(): boolean {
+        return !!this.error;
+    }
+
+    @update
+    validate(): boolean {
+        let _return = true;
+        const rules = this.rules?.split("|").filter((a) => a);
+        const value = (this.inp as HTMLInputElement)?.value;
+        rules
+            .slice()
+            .reverse()
+            .forEach((rule) => {
+                let valid = true;
+                if (rule == "required") {
+                    if (value === "") valid = false;
+                } else {
+                    if (validator.hasOwnProperty(rule)) {
+                        valid = validator?.[rule]?.(value);
+                    }
+                }
+                if (!valid) {
+                    const error = validatorErrors[rule]?.replaceAll(
+                        "{- name}",
+                        firstUpper(this.name?.toString())
+                    );
+                    _return = false;
+                    this.error = error;
+                }
+            });
+        if (_return) {
+            this.error = null;
+        }
+        return _return;
+    }
+
+    update() {
+        render(
+            html`<span data-target="input-field.main">
+                ${this.label &&
+                html`<label for="${this.randId}">${this.label}</label>`}
+                <input type="${this.type}" data-target="input-field.inp" />
+                ${this.error && html`<span>${this.error}</span>`}
+            </span>`,
+            this
+        );
+    }
+}
+
+export type { InputFieldElement };