Merge branch 'feature/WW-26-architecture'

src/common/pages/BasePageElement/BasePageElement.ts

@@ -1,5 +1,45 @@
+import { attr } from "@github/catalyst";
+import { html, render } from "@github/jtml";
 import { BaseElement } from "common/";
+import { isTrue } from "core/utils";
 
-class BasePageElement extends BaseElement {}
+class BasePageElement extends BaseElement {
+    public pageTitle: string = "";
+    @attr hidetitle: string;
+    @attr customtitle: string;
+    constructor(options: OptionType) {
+        super();
+        if (options?.title) {
+            this.pageTitle = options?.title;
+        }
+        this.connectedCallback = this.connectedCallback.bind(this);
+        this.disconnectedCallback = this.disconnectedCallback.bind(this);
+    }
+
+    public renderTitle = () => {
+        if (!isTrue(this.hidetitle)) {
+            return html`<div class="page --title">
+                ${this.customtitle ? this.customtitle : this.pageTitle}
+            </div>`;
+        }
+        return html``;
+    };
+
+    update = (): void => {
+        const _render = () => html` ${this.renderTitle()} ${this.render()} `;
+        render(_render(), this);
+        this.bindEvents();
+        this.updateCallback();
+    };
+
+    connectedCallback() {
+        this.appMain.setTitle(this.pageTitle);
+        super.connectedCallback();
+    }
+}
 
 export default BasePageElement;
+
+export type OptionType = {
+    title?: string;
+};

src/components/app-form/AppFormElement.ts

@@ -23,12 +23,6 @@ class AppFormElement extends BaseComponentElement {
         this.update();
     };
 
-    public keyUp = (e) => {
-        if (e.keyCode === 13) {
-            this.onSubmit(e);
-        }
-    };
-
     public onSubmit = (e) => {
         e.preventDefault();
         if (!this.valid) {

src/components/app-link/AppLinkElement.ts

@@ -44,7 +44,10 @@ class AppLinkElement extends BaseComponentElement {
     };
 
     get disabled(): boolean {
-        return isTrue(this.goBack) && this.routerService.emptyState;
+        if (isTrue(this.goBack)) {
+            return this.routerService.emptyState;
+        }
+        return false;
     }
 
     render = (): TemplateResult => {
@@ -56,7 +59,7 @@ class AppLinkElement extends BaseComponentElement {
                   >${this.title}</a
               >`
             : html`<a
-                  class="btn btn-link btn-disabled"
+                  class="btn btn-link"
                   data-target="app-link.main"
                   data-action="click:app-link#goTo"
                   href="${this.to}"

src/components/app-main/AppMainElement.ts

@@ -126,6 +126,11 @@ class AppMainElement extends HTMLElement {
         this.dispatchEvent(this.domEvents.walletupdate);
     };
 
+    public setTitle = (title: string): void => {
+        if (!title) title = __CONFIG__.appName;
+        window.document.title = title;
+    };
+
     private createAppModal = () => {
         const _appModal = document.createElement("app-modal");
         _appModal.setAttribute("data-target", "app-main.appModal");

src/components/app-pagination/AppPaginationElement.ts

@@ -120,7 +120,7 @@ class AppPaginationElement extends BaseComponentElement {
                 return html`
                     <div>
                         <button
-                            class="btn btn-blue btn-squared ${page <= 1
+                            class="btn btn-primary btn-squared ${page <= 1
                                 ? "disabled"
                                 : ""}"
                             data-action="click:app-pagination#pageBack"
@@ -128,7 +128,8 @@ class AppPaginationElement extends BaseComponentElement {
                             Prev
                         </button>
                         <button
-                            class="btn btn-blue btn-squared ${page >= pageRange
+                            class="btn btn-primary btn-squared ${page >=
+                            pageRange
                                 ? "disabled"
                                 : ""}"
                             data-action="click:app-pagination#pageNext"

src/components/input-field/InputFieldElement.ts

@@ -105,7 +105,6 @@ class InputFieldElement extends BaseComponentElement {
                 data-target="input-field.inp"
                 data-action="
                     input:input-field#inputChange
-                    keyup:app-form#keyUp
                     blur:input-field#validateDisplay
                 "
             />`;

src/pages/history-page/HistoryPageElement.ts

@@ -9,7 +9,9 @@ class HistoryPageElement extends BasePageElement {
     private transactionsService: TransactionsService;
     @target pagination: AppPaginationElement;
     constructor() {
-        super();
+        super({
+            title: "Transaction History",
+        });
     }
 
     elementConnected = (): void => {

src/pages/home-page/HomePageElement.ts

@@ -8,7 +8,9 @@ import { BasePageElement } from "common/";
 class HomePageElement extends BasePageElement {
     private pingService: PingService;
     constructor() {
-        super();
+        super({
+            title: "Home",
+        });
     }
 
     elementConnected = (): void => {

src/pages/login-page/LoginPageElement.ts

@@ -11,7 +11,9 @@ class LoginPageElement extends BasePageElement {
     @target appForm: AppFormElement;
     authService: AuthService;
     constructor() {
-        super();
+        super({
+            title: "Login",
+        });
     }
     elementConnected = (): void => {
         this.authService = new AuthService(this.appMain.appService);

src/pages/logout-page/LogoutPageElement.ts

@@ -6,7 +6,9 @@ import { BasePageElement } from "common/";
 class LogoutPageElement extends BasePageElement {
     authService: AuthService;
     constructor() {
-        super();
+        super({
+            title: "Logout",
+        });
     }
     elementConnected = (): void => {
         this.authService = new AuthService(this.appMain.appService);

src/pages/not-found/NotFoundElement.ts

@@ -5,7 +5,9 @@ import { BasePageElement } from "common/";
 @controller
 class NotFoundElement extends BasePageElement {
     constructor() {
-        super();
+        super({
+            title: "404 - Not Found",
+        });
     }
     elementConnected = (): void => {
         this.update();

src/pages/register-page/RegisterPageElement.ts

@@ -9,7 +9,9 @@ class RegisterPageElement extends BasePageElement {
     @targets inputs: Array<InputFieldElement>;
     authService: AuthService;
     constructor() {
-        super();
+        super({
+            title: "Register",
+        });
     }
     elementConnected = (): void => {
         this.authService = new AuthService(this.appMain.appService);

src/pages/wallet-create/WalletCreateElement.ts

@@ -12,7 +12,9 @@ class WalletCreateElement extends BasePageElement {
     authService: AuthService;
     errorMessage: string;
     constructor() {
-        super();
+        super({
+            title: "New Wallet",
+        });
     }
     elementConnected = (): void => {
         this.walletService = new WalletService(this.appMain?.appService);

src/pages/wallet-list/WalletListElement.ts

@@ -12,7 +12,9 @@ class WalletListElement extends BasePageElement {
     authService: AuthService;
     errorMessage: string;
     constructor() {
-        super();
+        super({
+            title: "Wallet List",
+        });
     }
     elementConnected = (): void => {
         this.walletService = new WalletService(this.appMain?.appService);