diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts index efa0474..8c3b134 100644 --- a/src/components/app-link/AppLinkElement.ts +++ b/src/components/app-link/AppLinkElement.ts @@ -9,6 +9,7 @@ import { RouterService } from "core/services"; class AppLinkElement extends HTMLElement { @closest appMain: AppMainElement; @attr to: string; + @attr goBack: string; @attr title: string; @target main: Element; routerService: RouterService; @@ -17,27 +18,44 @@ class AppLinkElement extends HTMLElement { } public connectedCallback(): void { - this.update(); this.routerService = this.appMain?.routerService; - this.main.addEventListener("click", this.goTo); + this.update(); + if (isTrue(this.goBack)) { + window.addEventListener("routechanged", () => { + this.update(); + }); + } } - public disconnectedCallback(): void { - this.main.removeEventListener("click", this.goTo); - } + public disconnectedCallback(): void {} goTo = () => { - this.routerService.goTo(this.to); + if (!isTrue(this.goBack) && this.to) { + this.routerService.goTo(this.to); + } else { + this.routerService.goBack(); + } + this.update(); }; + get disabled() { + return isTrue(this.goBack) && this.routerService.emptyState; + } + + render() { + return html`${this.disabled + ? html`${this.title}` + : html`${this.title}`}`; + } + update() { - render( - html`${this.title}`, - this - ); + render(this.render(), this); } } diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts index 7c8468e..84f9d40 100644 --- a/src/components/app-main/AppMainElement.ts +++ b/src/components/app-main/AppMainElement.ts @@ -11,11 +11,13 @@ class AppMainElement extends HTMLElement { public authStore: AuthStore; private httpClient: HttpClient; public appService: AppService; + @closest appMain; constructor() { super(); } connectedCallback() { + if (this.appMain !== this) return; this.httpClient = new HttpClient(); this.appService = new AppService(this, this.httpClient); this.routerService = new RouterService(this); @@ -32,16 +34,22 @@ class AppMainElement extends HTMLElement { component: "home-page", }, { - path: "/rb", + path: "/register", component: "register-page", + layout: "menu-layout", + }, + { + path: "/login", + component: "login-page", + layout: "menu-layout", }, { path: "/unauthorized", - component: "register-page", + component: "login-page", }, { path: "token-expired", - component: "register-page", + component: "login-page", }, ]); this.routerService.init(); diff --git a/src/components/input-field/InputFieldElement.ts b/src/components/input-field/InputFieldElement.ts index 8486187..c2d8cbd 100644 --- a/src/components/input-field/InputFieldElement.ts +++ b/src/components/input-field/InputFieldElement.ts @@ -33,6 +33,10 @@ class InputFieldElement extends HTMLElement { return !!this.error; } + get required(): boolean { + return this.rules.includes("required"); + } + @update validate(): boolean { let _return = true; @@ -67,12 +71,14 @@ class InputFieldElement extends HTMLElement { update() { render( - html` + html`
${this.label && - html``} + html``} ${this.error && html`${this.error}`} - `, +
`, this ); } diff --git a/src/core/store/AuthStore.ts b/src/core/store/AuthStore.ts index 989b5d4..5a6ed18 100644 --- a/src/core/store/AuthStore.ts +++ b/src/core/store/AuthStore.ts @@ -46,7 +46,8 @@ class AuthStore { userRegister = async (formObject) => { try { - await this.authService.register(formObject); + const response = await this.authService.register(formObject); + return response; } catch (err) { throw err; } diff --git a/src/core/utils/isTrue.ts b/src/core/utils/isTrue.ts index 19e8513..23453d9 100644 --- a/src/core/utils/isTrue.ts +++ b/src/core/utils/isTrue.ts @@ -1,3 +1,3 @@ -export default function isTrue(bool: string) { - return bool === "true"; +export default function isTrue(text: string) { + return text === "true"; } diff --git a/src/layouts/menu-layout/MenuLayoutElement.ts b/src/layouts/menu-layout/MenuLayoutElement.ts index d226615..4fdccd4 100644 --- a/src/layouts/menu-layout/MenuLayoutElement.ts +++ b/src/layouts/menu-layout/MenuLayoutElement.ts @@ -6,6 +6,8 @@ import { BaseLayoutElement } from "common/layouts"; @controller class MenuLayoutElement extends BaseLayoutElement { + @closest appMain; + constructor() { super(); } @@ -13,13 +15,16 @@ class MenuLayoutElement extends BaseLayoutElement { @update connectedCallback() {} + render() { + return html` +
+ +
+
+ `; + } + update() { - render( - html` -
Menu
-
- `, - this - ); + render(this.render(), this); } } diff --git a/src/pages/home-page/HomePageElement.ts b/src/pages/home-page/HomePageElement.ts index 2802c34..c0e9543 100644 --- a/src/pages/home-page/HomePageElement.ts +++ b/src/pages/home-page/HomePageElement.ts @@ -29,12 +29,15 @@ class HomePageElement extends HTMLElement { return html`
${until(this.getPong())}
`; }; + render() { + return html` + | + | + + `; + } + update() { - render( - html` | - | - `, - this - ); + render(this.render(), this); } } diff --git a/src/pages/index.ts b/src/pages/index.ts index 7075d09..0496d6d 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1,2 +1,4 @@ export * from "./home-page/HomePageElement"; export * from "./register-page/RegisterPageElement"; +export * from "./login-page/LoginPageElement"; +export * from "./not-found/NotFoundElement"; diff --git a/src/pages/login-page/LoginPageElement.ts b/src/pages/login-page/LoginPageElement.ts new file mode 100644 index 0000000..f1c375f --- /dev/null +++ b/src/pages/login-page/LoginPageElement.ts @@ -0,0 +1,87 @@ +import { attr, targets, controller, target } from "@github/catalyst"; +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/"; + +@controller +class LoginPageElement extends HTMLElement { + @targets inputs: Array; + @closest appMain: AppMainElement; + authService: AuthService; + constructor() { + super(); + } + @update + connectedCallback() { + this.authService = new AuthService(this.appMain.appService); + } + + get values(): Object { + const formObject = {}; + this.inputs.forEach((input: InputFieldElement) => { + const inputType = input.inp; + formObject[input.name] = (inputType as HTMLInputElement).value; + }); + return formObject; + } + + onSubmit = async () => { + try { + if (!this.validate()) { + return; + } + const response = await this.appMain.authStore.userLogin( + this.values + ); + + if (response?.token) { + this.appMain.routerService.goTo("/"); + } + } catch (err) {} + }; + + validate(): boolean { + let _return = true; + this.inputs.forEach((input: InputFieldElement) => { + const valid: boolean = input.validate(); + if (!valid) _return = false; + }); + return _return; + } + + render() { + return html` +
+ + + + +
+
+ +
+ `; + } + + update() { + render(this.render(), this); + } +} diff --git a/src/pages/not-found/NotFoundElement.ts b/src/pages/not-found/NotFoundElement.ts new file mode 100644 index 0000000..b7adff1 --- /dev/null +++ b/src/pages/not-found/NotFoundElement.ts @@ -0,0 +1,25 @@ +import { controller } from "@github/catalyst"; +import { closest, update } from "core/utils"; +import { html, render } from "@github/jtml"; +import { AppMainElement } from "components/"; + +@controller +class NotFoundElement extends HTMLElement { + @closest appMain: AppMainElement; + constructor() { + super(); + } + @update + connectedCallback() {} + + render() { + return html` +
404 - Page not found
+
+ `; + } + + update() { + render(this.render(), this); + } +} diff --git a/src/pages/register-page/RegisterPageElement.ts b/src/pages/register-page/RegisterPageElement.ts index f164f15..e6075a1 100644 --- a/src/pages/register-page/RegisterPageElement.ts +++ b/src/pages/register-page/RegisterPageElement.ts @@ -31,12 +31,12 @@ class RegisterPageElement extends HTMLElement { if (!this.validate()) { return; } - const response = await this.appMain.authStore.userLogin( + const response = await this.appMain.authStore.userRegister( this.values ); - if (response?.token) { - this.appMain.routerService.goTo("/"); + if (response?.id) { + this.appMain.routerService.goTo("/login"); } } catch (err) {} }; @@ -50,33 +50,42 @@ class RegisterPageElement extends HTMLElement { return _return; } + render() { + return html` +
+ + + + + +
+ `; + } + update() { - render( - html` -
- - - - -
- `, - this - ); + render(this.render(), this); } }