added custom forms to pages

src/components/app-form/AppFormElement.ts

@@ -2,7 +2,7 @@ import { attr, controller, target } from "@github/catalyst";
 import { html, TemplateResult, unsafeHTML } from "@github/jtml";
 import { BaseComponentElement } from "common/";
 import { InputFieldElement } from "components/input-field/InputFieldElement";
-import { querys } from "core/utils";
+import { isTrue, querys } from "core/utils";
 
 @controller
 class AppFormElement extends BaseComponentElement {
@@ -10,6 +10,7 @@ class AppFormElement extends BaseComponentElement {
     @target innerSlot: HTMLElement;
     @querys inputField: NodeListOf<InputFieldElement>;
     @attr custom: string;
+    @attr hasCancel: string;
     slotted: any;
     isValid: boolean = false;
     error: string;
@@ -63,7 +64,14 @@ class AppFormElement extends BaseComponentElement {
 
     public goBack = (e) => {
         e.preventDefault();
-        this.routerService?.goBack();
+
+        if (this.appMain?.appModal) {
+            this.appMain?.closeModal?.();
+        } else if (this.routerService?.canGoBack) {
+            this.routerService?.goBack();
+        } else {
+            this.routerService?.goTo("/");
+        }
     };
 
     get valid() {
@@ -99,13 +107,16 @@ class AppFormElement extends BaseComponentElement {
             }
             return html``;
         };
-        const renderCancel = () => {
-            return html`<button
-                type="button"
-                data-action="click:app-form#goBack"
-            >
-                Cancel
-            </button>`;
+        const renderCancel = (hasCancel: boolean) => {
+            if (hasCancel) {
+                return html`<button
+                    type="button"
+                    data-action="click:app-form#goBack"
+                >
+                    Cancel
+                </button>`;
+            }
+            return html``;
         };
 
         return html`<form
@@ -115,7 +126,7 @@ class AppFormElement extends BaseComponentElement {
             <slot data-target="app-form.innerSlot"></slot>
             ${renderError(this.error)}${renderSubmit(
                 this.isValid
-            )}${renderCancel()}
+            )}${renderCancel(isTrue(this.hasCancel))}
         </form>`;
     };
 }

src/pages/register-page/RegisterPageElement.ts

@@ -51,7 +51,10 @@ class RegisterPageElement extends BasePageElement {
 
     render = (): TemplateResult => {
         return html`
-            <form>
+            <app-form
+                data-custom="register-page#onSubmit"
+                data-has-cancel="true"
+            >
                 <input-field
                     data-type="text"
                     data-name="username"
@@ -74,13 +77,7 @@ class RegisterPageElement extends BasePageElement {
                     data-rules="required"
                 >
                 </input-field>
-                <button
-                    type="button"
-                    data-action="click:register-page#onSubmit"
-                >
-                    Register
-                </button>
-            </form>
+            </app-form>
         `;
     };
 }

src/pages/wallet-create/WalletCreateElement.ts

@@ -68,7 +68,10 @@ class WalletCreateElement extends BasePageElement {
     render = (): TemplateResult => {
         return html`
             <div>Create wallet</div>
-            <form>
+            <app-form
+                data-custom="wallet-create#onSubmit"
+                data-has-cancel="true"
+            >
                 <input-field
                     data-type="text"
                     data-name="name"
@@ -79,13 +82,7 @@ class WalletCreateElement extends BasePageElement {
                 ${this.errorMessage
                     ? html`<div>${this.errorMessage}</div>`
                     : html``}
-                <button
-                    type="button"
-                    data-action="click:wallet-create#onSubmit"
-                >
-                    Create
-                </button>
-            </form>
+            </app-form>
         `;
     };
 }