Merge branch 'feature/WW-26-architecture'

.babelrc

@@ -1,7 +1,7 @@
 {
     "presets": [
-        "@babel/preset-env",
+        ["@babel/preset-env", {"modules": false}],
-        "@babel/preset-typescript"
+        ["@babel/preset-typescript", {"modules": false}]
     ],
     "plugins": [
         [

.eslintrc.json

@@ -1,20 +1,37 @@
 {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
     "extends": [
         "eslint:recommended",
-        "plugin:@typescript-eslint/recommended"
+        "prettier"
     ],
-    "parser": "@typescript-eslint/parser",
+    "env": {
-    "parserOptions": {
+        "browser": true,
-        "ecmaVersion": 12,
+        "node": true,
-        "sourceType": "module"
+        "es6": true
+    },
+    "parser": "babel-eslint",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "modules": true,
+            "experimentalObjectRestSpread": true
+        }
+    },
+    "globals": {
+        "__CONFIG__": true
     },
-    "plugins": [
-        "@typescript-eslint"
-    ],
     "rules": {
+        "no-multiple-empty-lines": [
+            2,
+            {
+                "max": 1
+            }
+        ],
+        "no-unused-vars": [
+            2,
+            {
+                "ignoreRestSiblings": true
+            }
+        ]
     }
 }

.prettierrc

@@ -0,0 +1,10 @@
+{
+    "printWidth": 120,
+    "tabWidth": 2,
+    "useTabs": true,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false
+}

package.json

@@ -7,36 +7,42 @@
   "scripts": {
     "start": "webpack serve --mode development --hot",
     "build": "webpack --mode production",
-    "format": "eslint"
+    "format": "prettier --write src/**/*.{js,ts,html}"
   },
   "dependencies": {
+    "@github/catalyst": "^1.1.3",
+    "core/utils": "^1.4.1",
+    "validator": "^13.6.0"
+  },
+  "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-decorators": "^7.14.2",
     "@babel/plugin-proposal-object-rest-spread": "^7.14.2",
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-typescript": "^7.13.0",
-    "@github/catalyst": "^1.1.3",
+    "@typescript-eslint/eslint-plugin": "^4.26.0",
-    "@github/jtml": "^0.4.0",
+    "@typescript-eslint/parser": "^4.26.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-polyfill": "^6.26.0",
+    "compression-webpack-plugin": "^8.0.0",
     "connect-history-api-fallback": "^1.6.0",
     "css-loader": "^5.2.6",
+    "eslint": "^7.28.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.23.4",
     "html-webpack-plugin": "^5.3.1",
     "node-sass": "^6.0.0",
+    "prettier": "^2.3.1",
     "sass-loader": "^11.1.1",
     "sass-to-string": "^1.5.1",
-    "validator": "^13.6.0",
-    "webpack": "^5.38.1",
-    "webpack-dev-server": "^3.11.2"
-  },
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.26.0",
-    "@typescript-eslint/parser": "^4.26.0",
-    "compression-webpack-plugin": "^8.0.0",
-    "eslint": "^7.27.0",
     "terser-webpack-plugin": "^5.1.3",
-    "webpack-cli": "^4.7.0"
+    "uglify-js": "^3.13.9",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2"
   }
 }

src/common/components/BaseComponentElement/BaseComponentElement.ts

@@ -1,4 +1,4 @@
-import { BaseElement } from "common/";
+import { BaseElement } from 'common/';
 
 class BaseComponentElement extends BaseElement {}
 

src/common/components/index.ts

@@ -1 +1 @@
-export { default as BaseComponentElement } from "./BaseComponentElement/BaseComponentElement";
+export { default as BaseComponentElement } from './BaseComponentElement/BaseComponentElement';

src/common/core/BaseElement/BaseElement.ts

@@ -1,13 +1,8 @@
-import { html, render, TemplateResult } from "@github/jtml";
+import { html, render, TemplateResult } from 'core/utils';
-import {
+import { AppLoaderElement, AppMainElement, AppModalElement, AppRootElement } from 'components/';
-    AppLoaderElement,
+import { AppService, RouterService } from 'core/services';
-    AppMainElement,
+import { AuthStore } from 'core/store';
-    AppModalElement,
+import { closest } from 'core/utils';
-    AppRootElement,
-} from "components/";
-import { AppService, RouterService } from "core/services";
-import { AuthStore } from "core/store";
-import { closest } from "core/utils";
 
 class BaseElement extends HTMLElement {
 	@closest appMain: AppMainElement;
@@ -51,11 +46,9 @@ class BaseElement extends HTMLElement {
 	public bindEvents = (attrName): void => {
 		const _elems = this.querySelectorAll(`[${attrName}]`);
 		_elems?.forEach((el) => {
-            for (const action of (el.getAttribute(attrName) || "")
+			for (const action of (el.getAttribute(attrName) || '').trim().split(/\s+/)) {
-                .trim()
+				const eventSep = action.lastIndexOf(':');
-                .split(/\s+/)) {
+				const methodSep = action.lastIndexOf('#');
-                const eventSep = action.lastIndexOf(":");
-                const methodSep = action.lastIndexOf("#");
 				const tag = action.slice(eventSep + 1, methodSep);
 
 				const type = action.slice(0, eventSep);
@@ -63,15 +56,13 @@ class BaseElement extends HTMLElement {
 
 				if (tag.toUpperCase() === this.tagName) {
 					el.addEventListener(type, this?.[method]);
-                    const _callback = () =>
+					const _callback = () => el.removeEventListener(type, this?.[method]);
-                        el.removeEventListener(type, this?.[method]);
 					this.elementDisconnectCallbacks.push(_callback);
 				} else {
 					this.childNodes.forEach((child: HTMLElement) => {
 						if (child.tagName == tag.toUpperCase()) {
 							el.addEventListener(type, child?.[method]);
-                            const _callback = () =>
+							const _callback = () => el.removeEventListener(type, child?.[method]);
-                                el.removeEventListener(type, child?.[method]);
 							this.elementDisconnectCallbacks.push(_callback);
 						}
 					});
@@ -88,8 +79,8 @@ class BaseElement extends HTMLElement {
 
 	update = (): void => {
 		render(this.render(), this);
-        this.bindEvents("data-action");
+		this.bindEvents('data-action');
-        this.bindEvents("app-action");
+		this.bindEvents('app-action');
 		this.updateCallback();
 	};
 
@@ -103,7 +94,7 @@ class BaseElement extends HTMLElement {
 		this.elementDisconnected(_appMain);
 		if (Array.isArray(this.elementDisconnectCallbacks)) {
 			this.elementDisconnectCallbacks.forEach((callback: Function) => {
-                if (typeof callback == "function") {
+				if (typeof callback == 'function') {
 					callback(_appMain);
 				}
 			});

src/common/core/Validator/Validator.ts

@@ -0,0 +1,86 @@
+import { AppFormElement } from 'components/';
+import { validatorErrors } from 'core/constants';
+import { firstUpper, validator } from 'core/utils';
+
+class Validator {
+	public _error: string;
+	public _valid: boolean;
+	constructor(public input: any, public form: AppFormElement, public rules: string) {}
+
+	get value() {
+		return this.input?._value;
+	}
+
+	get name() {
+		return this.input?.name;
+	}
+
+	get error() {
+		return this._error;
+	}
+
+	set error(error) {
+		this._error = error;
+	}
+
+	get valid() {
+		return this._valid;
+	}
+
+	set valid(error) {
+		this._valid = error;
+	}
+
+	validate = () => {
+		const rules = this.rules?.split('|').filter((a) => a);
+		const value = this.value;
+		const validArr = rules
+			.slice()
+			.reverse()
+			.map((rule) => {
+				let args = [];
+				if (rule.includes('[') && rule.includes(']')) {
+					const begSep = rule.lastIndexOf('[');
+					const endSep = rule.lastIndexOf(']');
+
+					args = rule
+						.slice(begSep + 1, endSep)
+						.split(',')
+						.map((arg: string) => {
+							if (this.form && arg?.includes?.('field')) {
+								const begBr = arg.lastIndexOf('(');
+								const endBr = arg.lastIndexOf(')');
+								const field = arg.slice(begBr + 1, endBr);
+
+								return this.form?.values[field];
+							}
+						});
+					rule = rule.slice(0, begSep);
+				}
+				let validRule = validator?.[rule];
+				let ruleArray = validRule ? Array.isArray(validRule) : false;
+				let valid = true;
+
+				if (validRule) {
+					if (ruleArray) {
+						valid = validRule?.[0]?.(value, ...args);
+					} else {
+						valid = validRule?.(value, ...args);
+					}
+				}
+				if (!valid) {
+					const error = validatorErrors[rule]?.replaceAll('{- name}', firstUpper(this.name?.toString()));
+					this.error = ruleArray ? validRule?.[1]?.replaceAll('{- name}', firstUpper(this.name?.toString())) : error;
+				}
+				return valid;
+			});
+		const _return = validArr?.includes(false);
+		if (_return) {
+			this.error = null;
+		}
+		this.valid = !_return;
+		return !_return;
+	};
+}
+
+export default Validator;

src/common/index.ts

@@ -1,4 +1,6 @@
-export { default as BaseElement } from "./core/BaseElement/BaseElement";
+export { default as BaseElement } from './core/BaseElement/BaseElement';
-export * from "./layouts";
+export { default as Validator } from './core/Validator/Validator';
-export * from "./components";
+
-export * from "./pages";
+export * from './layouts';
+export * from './components';
+export * from './pages';

src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts

@@ -1,5 +1,5 @@
-import { target } from "@github/catalyst";
+import { target } from '@github/catalyst';
-import { BaseElement } from "common/";
+import { BaseElement } from 'common/';
 
 class BaseLayoutElement extends BaseElement {
 	@target appSlot: HTMLElement;
@@ -14,7 +14,7 @@ class BaseLayoutElement extends BaseElement {
 	}
 
 	compareTags = (tag: string | HTMLElement): boolean => {
-        if (typeof tag === "string") {
+		if (typeof tag === 'string') {
 			return this.slotTag === tag;
 		}
 		return tag?.tagName === this.slotTag;

src/common/layouts/index.ts

@@ -1 +1 @@
-export { default as BaseLayoutElement } from "./BaseLayoutElement/BaseLayoutElement";
+export { default as BaseLayoutElement } from './BaseLayoutElement/BaseLayoutElement';

src/common/pages/BasePageElement/BasePageElement.ts

@@ -1,10 +1,10 @@
-import { attr } from "@github/catalyst";
+import { attr } from '@github/catalyst';
-import { html, render } from "@github/jtml";
+import { html, render } from 'core/utils';
-import { BaseElement } from "common/";
+import { BaseElement } from 'common/';
-import { isTrue } from "core/utils";
+import { isTrue } from 'core/utils';
 
 class BasePageElement extends BaseElement {
-    public pageTitle: string = "";
+	public pageTitle: string = '';
 	@attr hidetitle: string;
 	@attr customtitle: string;
 	constructor(options: OptionType) {
@@ -18,9 +18,7 @@ class BasePageElement extends BaseElement {
 
 	public renderTitle = () => {
 		if (!isTrue(this.hidetitle)) {
-            return html`<div class="page --title">
+			return html`<div class="page --title">${this.customtitle ? this.customtitle : this.pageTitle}</div>`;
-                ${this.customtitle ? this.customtitle : this.pageTitle}
-            </div>`;
 		}
 		return html``;
 	};
@@ -28,7 +26,7 @@ class BasePageElement extends BaseElement {
 	update = (): void => {
 		const _render = () => html` ${this.renderTitle()} ${this.render()} `;
 		render(_render(), this);
-        this.bindEvents();
+		this.bindEvents('app-action');
 		this.updateCallback();
 	};
 

src/common/pages/index.ts

@@ -1 +1 @@
-export { default as BasePageElement } from "./BasePageElement/BasePageElement";
+export { default as BasePageElement } from './BasePageElement/BasePageElement';

src/components/app-dropdown/AppDropdownElement.ts

@@ -1,10 +1,10 @@
-import { attr, controller, target } from "@github/catalyst";
+import { attr, controller, target } from '@github/catalyst';
-import { findMethod, firstUpper } from "core/utils";
+import { closest, findMethod, firstUpper } from 'core/utils';
-import { html } from "@github/jtml";
+import { html } from 'core/utils';
-import randomId from "core/utils/random-id";
+import randomId from 'core/utils/random-id';
-import validator from "validator";
+import { validatorErrors } from 'core/constants';
-import { validatorErrors } from "core/constants";
+import { BaseComponentElement, Validator } from 'common/';
-import { BaseComponentElement } from "common/";
+import { AppFormElement } from 'components/app-form/AppFormElement';
 
 @controller
 class AppDropdownElement extends BaseComponentElement {
@@ -13,12 +13,12 @@ class AppDropdownElement extends BaseComponentElement {
 	@attr rules: string;
 	@target main: HTMLElement;
 	@target inp: HTMLElement;
-    @attr displaykey: string = "name";
+	@target dropdowncontainer: HTMLElement;
-    @attr valuekey: string = "id";
+	@attr displaykey: string = 'name';
+	@attr valuekey: string = 'id';
 	@attr fetch: string;
-    fetchFunc: any;
+	@closest appForm: AppFormElement;
 
-    error: boolean;
 	errorMessage: string;
 
 	searchPhrase: string;
@@ -32,12 +32,58 @@ class AppDropdownElement extends BaseComponentElement {
 	totalItems: number;
 	page: number = 1;
 	rpp: number = 30;
+	validator: Validator;
 
 	constructor() {
 		super();
 	}
+
+	updateCallback = () => {
+		this.dropdowncontainer?.scrollIntoView();
+	};
+
+	public elementConnected = (): void => {
+		this.validator = new Validator(this, this.appForm, this.rules);
+		this.randId = `${name}${randomId()}`;
+		this.update();
+
+		const options = {
+			rpp: this.rpp,
+			page: this.page,
+		};
+		this.getItems(options);
+	};
+
+	attributeChangedCallback(): void {
+		this.update();
+	}
+
+	setError = (error) => {
+		this.validator.error = error;
+	};
+
+	get error(): string {
+		return this.validator?.error;
+	}
+
+	get isValid(): boolean {
+		return this.validator?.valid;
+	}
+
+	get required(): boolean {
+		return this.rules.includes('required');
+	}
+
+	get _value() {
+		return this.value;
+	}
+
+	validate = (): boolean => {
+		return this.validator.validate();
+	};
+
 	getItems = async (options?: any): Promise<void> => {
-        if (typeof this.fetchFunc !== "function") return;
+		if (typeof this.fetchFunc !== 'function') return;
 		try {
 			const response = await this.fetchFunc(options);
 			this.setItems(response);
@@ -68,79 +114,29 @@ class AppDropdownElement extends BaseComponentElement {
 			return value == item[valuekey];
 		});
 
-        console.log(item, value, valuekey);
-
 		return item;
 	}
 
 	get optionValues() {
 		let values = [];
 		this.inp.childNodes.forEach((item: HTMLElement) => {
-            const value = item.getAttribute("value");
+			const value = item.getAttribute('value');
 			const name = item.innerText;
 			values.push({ name, value });
 		});
 		return values;
 	}
 
-    public elementConnected = (): void => {
+	get fetchFunc() {
-        this.randId = `${name}${randomId()}`;
+		return findMethod(this.fetch, this.appMain);
-        this.fetchFunc = findMethod(this.fetch, this.appMain);
+	}
-        this.update();
 
-        const options = {
+	setOpen = (isOpen) => {
-            rpp: this.rpp,
+		this.isOpen = isOpen;
-            page: this.page,
 	};
-        this.getItems(options);
-    };
-
-    attributeChangedCallback(): void {
-        this.update();
-    }
-
-    get valid(): boolean {
-        return !!this.error;
-    }
-
-    get required(): boolean {
-        return this.rules.includes("required");
-    }
-
-    validate(): boolean {
-        let _return = true;
-        const rules = this.rules?.split("|").filter((a) => a);
-        const value = (this.inp as HTMLSelectElement)?.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;
-        }
-        this.update();
-        return _return;
-    }
 
 	openDropdown = () => {
-        this.isOpen = true;
+		this.setOpen(true);
 	};
 
 	stopPropagation = (e) => {
@@ -149,40 +145,27 @@ class AppDropdownElement extends BaseComponentElement {
 
 	toggleDropdown = () => {
 		const isOpen = this.isOpen;
-        this.isOpen = !isOpen;
+		this.setOpen(!isOpen);
 	};
 
 	itemSelected = (e) => {
-        const value = (e.target as HTMLSpanElement).getAttribute("data-value");
+		const value = (e.target as HTMLSpanElement).getAttribute('data-value');
-        this.value = value;
+		this.setOpen(false);
-        this.isOpen = false;
+		this.setValue(value);
+		this.appForm?.inputChange(e);
 	};
 
-    get _value() {
+	setValue = (value) => {
-        return this.value;
+		this.value = value;
-    }
+		this.update();
+	};
 
 	render = () => {
-        const {
+		const { label, error, errorMessage, isOpen, searchPhrase, items, selectedItem, displaykey, valuekey } = this;
-            label,
-            error,
-            errorMessage,
-            isOpen,
-            searchPhrase,
-            items,
-            selectedItem,
-            displaykey,
-            valuekey,
-        } = this;
-
-        console.log(isOpen);
 
 		const renderItem = (item) => {
 			return html` <li
-                class="dropdown-custom-listitem ${selectedItem?.[valuekey] ==
+				class="dropdown-custom-listitem ${selectedItem?.[valuekey] == item[valuekey] ? '--selected' : ''}"
-                item[valuekey]
-                    ? "--selected"
-                    : ""}"
 				app-action="click:app-dropdown#itemSelected"
 				data-value="${item[valuekey]}"
 			>
@@ -191,30 +174,20 @@ class AppDropdownElement extends BaseComponentElement {
 		};
 
 		const renderItems = (_items) => {
-            return _items.map((item) => renderItem(item));
+			return _items?.map((item) => renderItem(item));
 		};
 
 		return html`
 			<div>
 				<label app-action="click:app-dropdown#openDropdown">
 					${label ? html`<div>${label}</div>` : html``}
-                    <div
+					<div class="dropdown-custom" app-action="click:app-dropdown#stopPropagation">
-                        class="dropdown-custom"
+						<div class="dropdown-custom-top${isOpen ? ' --open' : ''}" app-action="click:app-dropdown#toggleDropdown">
-                        app-action="click:app-dropdown#stopPropagation"
+							<span class="dropdown-custom-fieldname">${selectedItem ? selectedItem[displaykey] : 'Select'}</span>
-                    >
-                        <div
-                            class="dropdown-custom-top"
-                            app-action="click:app-dropdown#toggleDropdown"
-                        >
-                            <span class="dropdown-custom-fieldname"
-                                >${selectedItem
-                                    ? selectedItem[displaykey]
-                                    : "Select"}</span
-                            >
 						</div>
 						${isOpen
 							? html`
-                                  <div class="dropdown-custom-open">
+									<div class="dropdown-custom-open" data-target="app-dropdown.dropdowncontainer">
 										<input
 											class="dropdown-custom-search"
 											type="text"
@@ -229,9 +202,7 @@ class AppDropdownElement extends BaseComponentElement {
 							  `
 							: html``}
 					</div>
-                    ${error
+					${error ? html` <div class="h5 text-red">${errorMessage}</div>` : html``}
-                        ? html` <div class="h5 text-red">${errorMessage}</div>`
-                        : html``}
 				</label>
 			</div>
 		`;

src/components/app-form/AppFormElement.ts

@@ -1,9 +1,9 @@
-import { attr, controller, target } from "@github/catalyst";
+import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult, unsafeHTML } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { BaseComponentElement } from "common/";
+import { BaseComponentElement } from 'common/';
-import { AppDropdownElement } from "components/app-dropdown/AppDropdownElement";
+import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
-import { InputFieldElement } from "components/input-field/InputFieldElement";
+import { InputFieldElement } from 'components/input-field/InputFieldElement';
-import { findMethod, isTrue, querys } from "core/utils";
+import { findMethod, isTrue, querys } from 'core/utils';
 
 @controller
 class AppFormElement extends BaseComponentElement {
@@ -20,6 +20,10 @@ class AppFormElement extends BaseComponentElement {
 		super();
 	}
 
+	get submitFunc() {
+		return findMethod(this.custom, this.appMain);
+	}
+
 	public inputChange = (e) => {
 		this.validate();
 		this.update();
@@ -30,19 +34,19 @@ class AppFormElement extends BaseComponentElement {
 		if (!this.valid) {
 			return;
 		}
-        const actionString = this.custom;
+		this.submitFunc?.(this.values);
-        const submitFunc = findMethod(actionString, this.appMain);
-        submitFunc?.(this.values);
 		return false;
 	};
 
 	public validate = () => {
-        this.isValid = true;
+		const validArr = [];
 		this.inputField?.forEach((input) => {
-            if (input?.error) {
+			validArr.push(input?.validate());
-                this.isValid = false;
-            }
 		});
+		this.appDropdown?.forEach((input) => {
+			validArr.push(input?.validate());
+		});
+		this.isValid = !validArr?.includes(false);
 	};
 
 	public setError = (error) => {
@@ -58,7 +62,7 @@ class AppFormElement extends BaseComponentElement {
 		} else if (this.routerService?.canGoBack) {
 			this.routerService?.goBack();
 		} else {
-            this.routerService?.goTo("/");
+			this.routerService?.goTo('/');
 		}
 	};
 
@@ -75,6 +79,19 @@ class AppFormElement extends BaseComponentElement {
 		return formObject;
 	}
 
+	getInput = (name: string): InputFieldElement | AppDropdownElement => {
+		let formObject;
+		this.inputField.forEach((input: InputFieldElement) => {
+			const inputType = input;
+			if (inputType.name === name) formObject = inputType;
+		});
+		this.appDropdown.forEach((input: AppDropdownElement) => {
+			const inputType = input;
+			if (inputType.name === name) formObject = inputType;
+		});
+		return formObject;
+	};
+
 	get valid() {
 		let _valid = 0;
 		this.inputField?.forEach((input) => {
@@ -86,7 +103,7 @@ class AppFormElement extends BaseComponentElement {
 	}
 
 	elementConnected = (): void => {
-        const _template = document.createElement("template");
+		const _template = document.createElement('template');
 		const _slot = this.innerHTML;
 		_template.innerHTML = _slot;
 		this.innerHTML = null;
@@ -110,24 +127,14 @@ class AppFormElement extends BaseComponentElement {
 		};
 		const renderCancel = (hasCancel: boolean) => {
 			if (hasCancel) {
-                return html`<button
+				return html`<button type="button" app-action="click:app-form#goBack">Cancel</button>`;
-                    type="button"
-                    app-action="click:app-form#goBack"
-                >
-                    Cancel
-                </button>`;
 			}
 			return html``;
 		};
 
-        return html`<form
+		return html`<form app-action="submit:app-form#onSubmit" data-target="app-form.formElement">
-            app-action="submit:app-form#onSubmit"
-            data-target="app-form.formElement"
-        >
 			<slot data-target="app-form.innerSlot"></slot>
-            ${renderError(this.error)}${renderSubmit(
+			${renderError(this.error)}${renderSubmit(this.isValid)}${renderCancel(isTrue(this.hasCancel))}
-                this.isValid
-            )}${renderCancel(isTrue(this.hasCancel))}
 		</form>`;
 	};
 }

src/components/app-link/AppLinkElement.ts

@@ -1,9 +1,9 @@
-import { attr, controller, target } from "@github/catalyst";
+import { attr, controller, target } from '@github/catalyst';
-import { isTrue } from "core/utils";
+import { isTrue } from 'core/utils';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { AppMainElement } from "components/app-main/AppMainElement";
+import { AppMainElement } from 'components/app-main/AppMainElement';
-import { RouterService } from "core/services";
+import { RouterService } from 'core/services';
-import { BaseComponentElement } from "common/";
+import { BaseComponentElement } from 'common/';
 
 @controller
 class AppLinkElement extends BaseComponentElement {
@@ -23,13 +23,13 @@ class AppLinkElement extends BaseComponentElement {
 		}
 		this.update();
 		if (isTrue(this.goBack)) {
-            this.appMain.addEventListener("routechanged", this.update);
+			this.appMain.addEventListener('routechanged', this.update);
 		}
 	};
 
 	elementDisconnected = (appMain: AppMainElement): void => {
 		if (isTrue(this.goBack)) {
-            appMain?.removeEventListener("routechanged", this.update);
+			appMain?.removeEventListener('routechanged', this.update);
 		}
 	};
 
@@ -52,12 +52,7 @@ class AppLinkElement extends BaseComponentElement {
 
 	render = (): TemplateResult => {
 		return html`${this.disabled
-            ? html`<a
+			? html`<a class="btn btn-link btn-disabled" data-target="app-link.main" style="color:grey">${this.title}</a>`
-                  class="btn btn-link btn-disabled"
-                  data-target="app-link.main"
-                  style="color:grey"
-                  >${this.title}</a
-              >`
 			: html`<a
 					class="btn btn-link"
 					data-target="app-link.main"

src/components/app-loader/AppLoaderElement.ts

@@ -1,6 +1,6 @@
-import { controller, target } from "@github/catalyst";
+import { controller, target } from '@github/catalyst';
-import { html } from "@github/jtml";
+import { html } from 'core/utils';
-import { BaseComponentElement } from "common/";
+import { BaseComponentElement } from 'common/';
 
 @controller
 class AppLoaderElement extends BaseComponentElement {

src/components/app-main/AppMainElement.ts

@@ -1,9 +1,9 @@
-import { controller, target } from "@github/catalyst";
+import { controller, target } from '@github/catalyst';
-import { AppService, HttpClient, RouterService } from "core/services";
+import { AppService, HttpClient, RouterService } from 'core/services';
-import { AuthStore } from "core/store";
+import { AuthStore } from 'core/store';
-import { AppModalElement, AppRootElement } from "components/";
+import { AppModalElement, AppRootElement } from 'components/';
-import { closest } from "core/utils";
+import { closest } from 'core/utils';
-import { AppLoaderElement } from "components/app-loader/AppLoaderElement";
+import { AppLoaderElement } from 'components/app-loader/AppLoaderElement';
 
 @controller
 class AppMainElement extends HTMLElement {
@@ -16,9 +16,9 @@ class AppMainElement extends HTMLElement {
 	@target appLoader: AppLoaderElement;
 	@closest appMain: AppMainElement;
 	public domEvents: any = {
-        routechanged: new Event("routechanged"),
+		routechanged: new Event('routechanged'),
-        tokenchange: new Event("tokenchange"),
+		tokenchange: new Event('tokenchange'),
-        walletupdate: new Event("walletupdate"),
+		walletupdate: new Event('walletupdate'),
 	};
 
 	constructor() {
@@ -34,69 +34,69 @@ class AppMainElement extends HTMLElement {
 		this.authStore = new AuthStore(this, this.appService);
 		this.routerService.setRoutes([
 			{
-                path: "/",
+				path: '/',
-                component: "home-page",
+				component: 'home-page',
-                layout: "menu-layout",
+				layout: 'menu-layout',
 				middleware: this.isAuth,
 			},
 			{
-                path: "/home",
+				path: '/home',
-                component: "home-page",
+				component: 'home-page',
-                layout: "menu-layout",
+				layout: 'menu-layout',
 				middleware: this.isAuth,
 			},
 			{
-                path: "/history",
+				path: '/history',
-                component: "history-page",
+				component: 'history-page',
-                layout: "menu-layout",
+				layout: 'menu-layout',
 				middleware: this.isAuth,
 			},
 			{
-                path: "/wallet",
+				path: '/wallet',
-                component: "history-page",
+				component: 'history-page',
-                layout: "menu-layout",
+				layout: 'menu-layout',
 				middleware: this.isAuth,
 				children: [
 					{
-                        path: "/all",
+						path: '/all',
-                        component: "wallet-list",
+						component: 'wallet-list',
-                        layout: "menu-layout",
+						layout: 'menu-layout',
 					},
 					{
-                        path: "/:walletId",
+						path: '/:walletId',
-                        component: "wallet-page",
+						component: 'wallet-page',
-                        layout: "menu-layout",
+						layout: 'menu-layout',
 					},
 				],
 			},
 			{
-                path: "/register",
+				path: '/register',
-                component: "register-page",
+				component: 'register-page',
-                layout: "initial-layout",
+				layout: 'initial-layout',
 			},
 			{
-                path: "/login",
+				path: '/login',
-                component: "login-page",
+				component: 'login-page',
-                layout: "initial-layout",
+				layout: 'initial-layout',
 			},
 			{
-                path: "/unauthorized",
+				path: '/unauthorized',
-                component: "login-page",
+				component: 'login-page',
-                layout: "initial-layout",
+				layout: 'initial-layout',
 			},
 			{
-                path: "/token-expired",
+				path: '/token-expired',
-                component: "login-page",
+				component: 'login-page',
-                layout: "initial-layout",
+				layout: 'initial-layout',
 			},
 			{
-                path: "/not-found",
+				path: '/not-found',
-                component: "not-found",
+				component: 'not-found',
-                layout: "initial-layout",
+				layout: 'initial-layout',
 			},
 			{
-                path: "/logout",
+				path: '/logout',
-                component: "logout-page",
+				component: 'logout-page',
 			},
 		]);
 		this.routerService.init();
@@ -104,14 +104,14 @@ class AppMainElement extends HTMLElement {
 
 	middleAuth = () => {
 		if (!this.isAuth) {
-            this.routerService.goTo("/unauthorized");
+			this.routerService.goTo('/unauthorized');
 			return true;
 		}
 	};
 
 	createModal = (element: string) => {
 		this.closeModal();
-        this.appMain.addEventListener("routechanged", this.closeModal);
+		this.appMain.addEventListener('routechanged', this.closeModal);
 
 		const _appModal = this.createAppModal();
 		const _modalContent = this.createModalContent(element);
@@ -132,38 +132,38 @@ class AppMainElement extends HTMLElement {
 	};
 
 	private createAppModal = () => {
-        const _appModal = document.createElement("app-modal");
+		const _appModal = document.createElement('app-modal');
-        _appModal.setAttribute("data-target", "app-main.appModal");
+		_appModal.setAttribute('data-target', 'app-main.appModal');
 		return _appModal;
 	};
 
 	private createLoader = () => {
-        const _loader = document.createElement("app-loader");
+		const _loader = document.createElement('app-loader');
-        _loader.setAttribute("data-target", "app-main.appLoader");
+		_loader.setAttribute('data-target', 'app-main.appLoader');
 		this.appendChild(_loader);
 	};
 
 	private createModalContent = (element: string) => {
 		const _modalElement = document.createElement(element);
-        const _divEl = document.createElement("div");
+		const _divEl = document.createElement('div');
-        _modalElement.setAttribute("data-target", "app-modal.modalElement");
+		_modalElement.setAttribute('data-target', 'app-modal.modalElement');
-        _divEl.setAttribute("data-target", "app-modal.modalContent");
+		_divEl.setAttribute('data-target', 'app-modal.modalContent');
-        _divEl.setAttribute("data-action", "click:app-main#preventClosing");
+		_divEl.setAttribute('data-action', 'click:app-main#preventClosing');
 		_divEl.appendChild(_modalElement);
 		return _divEl;
 	};
 
 	private createModalOverlay = () => {
-        const _divOverlay = document.createElement("div");
+		const _divOverlay = document.createElement('div');
-        _divOverlay.setAttribute("data-target", "app-modal.modalOverlay");
+		_divOverlay.setAttribute('data-target', 'app-modal.modalOverlay');
-        _divOverlay.setAttribute("data-action", "click:app-main#closeModal");
+		_divOverlay.setAttribute('data-action', 'click:app-main#closeModal');
 		return _divOverlay;
 	};
 
 	private createMainRoot = () => {
 		if (this.mainRoot) this.removeChild(this.mainRoot);
-        const _mainRoot = document.createElement("app-root");
+		const _mainRoot = document.createElement('app-root');
-        _mainRoot.setAttribute("data-target", "app-main.mainRoot");
+		_mainRoot.setAttribute('data-target', 'app-main.mainRoot');
 		this.appendChild(_mainRoot);
 		return _mainRoot;
 	};
@@ -174,7 +174,7 @@ class AppMainElement extends HTMLElement {
 
 	closeModal = () => {
 		if (this.appModal) this.removeChild(this.appModal);
-        this.appMain.removeEventListener("routechanged", this.closeModal);
+		this.appMain.removeEventListener('routechanged', this.closeModal);
 	};
 
 	isAuth = (): boolean => {

src/components/app-menu/AppMenuElement.ts

@@ -1,9 +1,9 @@
-import { controller, target } from "@github/catalyst";
+import { controller, target } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { BaseComponentElement } from "common/";
+import { BaseComponentElement } from 'common/';
-import { AppMainElement } from "components/app-main/AppMainElement";
+import { AppMainElement } from 'components/app-main/AppMainElement';
-import { MenuItemElement } from "components/menu-item/MenuItemElement";
+import { MenuItemElement } from 'components/menu-item/MenuItemElement';
-import { WalletService } from "services/";
+import { WalletService } from 'services/';
 
 @controller
 class AppMenuElement extends BaseComponentElement {
@@ -21,13 +21,13 @@ class AppMenuElement extends BaseComponentElement {
 			this.getWallets();
 		}
 		this.update();
-        this.appMain.addEventListener("tokenchange", this.updateToken);
+		this.appMain.addEventListener('tokenchange', this.updateToken);
-        this.appMain.addEventListener("walletupdate", this.updateToken);
+		this.appMain.addEventListener('walletupdate', this.updateToken);
 	};
 
 	elementDisconnected = (appMain: AppMainElement): void => {
-        appMain?.removeEventListener("tokenchange", this.updateToken);
+		appMain?.removeEventListener('tokenchange', this.updateToken);
-        appMain?.removeEventListener("walletupdate", this.updateToken);
+		appMain?.removeEventListener('walletupdate', this.updateToken);
 	};
 
 	getWallets = async (): Promise<void> => {
@@ -63,9 +63,7 @@ class AppMenuElement extends BaseComponentElement {
 	renderWallets = (): Array<TemplateResult> => {
 		if (this.isAuth && this.totalWallets > 0) {
 			return this.walletData.map(
-                (wallet) => html`<menu-item data-path="/wallet/${wallet.id}"
+				(wallet) => html`<menu-item data-path="/wallet/${wallet.id}">${wallet.name}</menu-item>`
-                    >${wallet.name}</menu-item
-                >`
 			);
 		}
 		return null;
@@ -76,51 +74,35 @@ class AppMenuElement extends BaseComponentElement {
 		if (_modal) {
 			this.appMain.closeModal();
 		} else {
-            this.appMain.createModal("wallet-create");
+			this.appMain.createModal('wallet-create');
 		}
 	};
 
-    modalTransaction = (): void => {
+	modalTransaction = (s): void => {
 		const _modal = this.appMain.appModal;
 		if (_modal) {
 			this.appMain.closeModal();
 		} else {
-            this.appMain.createModal("transaction-create");
+			this.appMain.createModal('transaction-create');
 		}
 	};
 
 	render = (): TemplateResult => {
 		const { isAuth, totalWallets, walletData } = this;
 
-        const regularMenu = (
+		const regularMenu = (path: string, title: string, action?: string): TemplateResult => {
-            path: string,
-            title: string,
-            action?: string
-        ): TemplateResult => {
 			if (action) {
-                return html`
+				return html` <menu-item data-path="${path}" data-customaction="${action}">${title}</menu-item> `;
-                    <menu-item data-path="${path}" data-customaction="${action}"
-                        >${title}</menu-item
-                    >
-                `;
 			}
 			return html`<menu-item data-path="${path}">${title}</menu-item>`;
 		};
-        const authMenu = (
+		const authMenu = (path: string, title: string, action?: string): TemplateResult => {
-            path: string,
-            title: string,
-            action?: string
-        ): TemplateResult => {
 			if (isAuth) {
 				return regularMenu(path, title, action);
 			}
 			return html``;
 		};
-        const notAuthMenu = (
+		const notAuthMenu = (path: string, title: string, action?: string): TemplateResult => {
-            path: string,
-            title: string,
-            action?: string
-        ): TemplateResult => {
 			if (!isAuth) {
 				return regularMenu(path, title, action);
 			}
@@ -129,33 +111,19 @@ class AppMenuElement extends BaseComponentElement {
 		const renderWallets = (wallets: Array<any>) => {
 			if (isAuth && totalWallets > 0) {
 				return html`<div class="menu-item divider"></div>
-                    ${wallets.map((wallet) =>
+					${wallets.map((wallet) => regularMenu(`/wallet/${wallet.id}`, wallet.name))}`;
-                        regularMenu(`/wallet/${wallet.id}`, wallet.name)
-                    )}`;
 			}
 			return html``;
 		};
-        const menuHeader = (title) =>
+		const menuHeader = (title) => html`<div class="menu-item menu-header">${title}</div>`;
-            html`<div class="menu-item menu-header">${title}</div>`;
 
 		return html`
 			<div data-target="app-menu.sidebar">
-                ${menuHeader(__CONFIG__.appName)} ${regularMenu("/", "Home")}
+				${menuHeader(__CONFIG__.appName)} ${regularMenu('/', 'Home')}
-                ${authMenu(
+				${authMenu('/history', 'Transaction History', 'click:app-menu#modalTransaction')}
-                    "/history",
+				${authMenu('/wallet/all', 'My Wallets', 'click:app-menu#modalWallet')} ${renderWallets(walletData)}
-                    "Transaction History",
-                    "click:app-menu#modalTransaction"
-                )}
-                ${authMenu(
-                    "/wallet/all",
-                    "My Wallets",
-                    "click:app-menu#modalWallet"
-                )}
-                ${renderWallets(walletData)}
 				<span class="menu-item divider"></span>
-                ${authMenu("/logout", "Logout")}
+				${authMenu('/logout', 'Logout')} ${notAuthMenu('/login', 'Login')} ${notAuthMenu('/register', 'Register')}
-                ${notAuthMenu("/login", "Login")}
-                ${notAuthMenu("/register", "Register")}
 			</div>
 		`;
 	};

src/components/app-modal/AppModalElement.ts

@@ -1,5 +1,5 @@
-import { controller, target } from "@github/catalyst";
+import { controller, target } from '@github/catalyst';
-import { BaseComponentElement } from "common/";
+import { BaseComponentElement } from 'common/';
 
 @controller
 class AppModalElement extends BaseComponentElement {

src/components/app-pagination/AppPaginationElement.ts

@@ -1,7 +1,7 @@
-import { attr, controller, target } from "@github/catalyst";
+import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { BaseComponentElement } from "common/";
+import { BaseComponentElement } from 'common/';
-import { CircleLoaderElement } from "components/circle-loader/CircleLoaderElement";
+import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
 
 @controller
 class AppPaginationElement extends BaseComponentElement {
@@ -106,9 +106,9 @@ class AppPaginationElement extends BaseComponentElement {
 						return html`<circle-loader></circle-loader>`;
 					} else {
 						if (items?.length > 0) {
-                          return html`<div class="table">
+							return html`<table>
 								${items?.map((item) => renderItem(item))}
-                          </div>`;
+							</table>`;
 						}
 						return html``;
 					}
@@ -120,18 +120,13 @@ class AppPaginationElement extends BaseComponentElement {
 				return html`
 					<div>
 						<button
-                            class="btn btn-primary btn-squared ${page <= 1
+							class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
-                                ? "disabled"
-                                : ""}"
 							app-action="click:app-pagination#pageBack"
 						>
 							Prev
 						</button>
 						<button
-                            class="btn btn-primary btn-squared ${page >=
+							class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}"
-                            pageRange
-                                ? "disabled"
-                                : ""}"
 							app-action="click:app-pagination#pageNext"
 						>
 							Next

src/components/app-root/AppRootElement.ts

@@ -1,5 +1,5 @@
-import { controller, target } from "@github/catalyst";
+import { controller, target } from '@github/catalyst';
-import { BaseComponentElement } from "common/";
+import { BaseComponentElement } from 'common/';
 
 @controller
 class AppRootElement extends BaseComponentElement {

src/components/app-shadow/AppShadowElement.ts

@@ -1,5 +1,5 @@
-import { controller } from "@github/catalyst";
+import { controller } from '@github/catalyst';
-import style from "styles/main.scss";
+import style from 'styles/main.scss';
 
 (function () {
 	const _shadow = new WeakMap();
@@ -8,13 +8,13 @@ import style from "styles/main.scss";
 	class AppShadowElement extends HTMLElement {
 		constructor() {
 			super();
-            _shadow.set(this, this.attachShadow({ mode: "closed" }));
+			_shadow.set(this, this.attachShadow({ mode: 'closed' }));
 		}
 
 		connectedCallback() {
 			const _root = _shadow.get(this);
-            const _appMain = document.createElement("app-main");
+			const _appMain = document.createElement('app-main');
-            const _style = document.createElement("style");
+			const _style = document.createElement('style');
 			_style.innerHTML = style;
 
 			_root.appendChild(_style);

src/components/app-slot/AppSlotElement.ts

@@ -1,5 +1,5 @@
-import { controller, target } from "@github/catalyst";
+import { controller, target } from '@github/catalyst';
-import { BaseComponentElement } from "common/";
+import { BaseComponentElement } from 'common/';
 
 @controller
 class AppSlotElement extends BaseComponentElement {

src/components/circle-loader/CircleLoaderElement.ts

@@ -1,6 +1,6 @@
-import { attr, controller } from "@github/catalyst";
+import { attr, controller } from '@github/catalyst';
-import { html } from "@github/jtml";
+import { html } from 'core/utils';
-import { BaseComponentElement } from "common/";
+import { BaseComponentElement } from 'common/';
 
 @controller
 class CircleLoaderElement extends BaseComponentElement {
@@ -14,9 +14,7 @@ class CircleLoaderElement extends BaseComponentElement {
 	};
 
 	render = () => {
-        return html`<div
+		return html`<div class="circle-loader ${this.size ? `-${this.size}` : ''}"></div>`;
-            class="circle-loader ${this.size ? `-${this.size}` : ""}"
-        ></div>`;
 	};
 }
 

src/components/index.ts

@@ -1,17 +1,17 @@
-export * from "./app-link/AppLinkElement";
+export * from './app-link/AppLinkElement';
-export * from "./menu-item/MenuItemElement";
+export * from './menu-item/MenuItemElement';
-export * from "./app-pagination/AppPaginationElement";
+export * from './app-pagination/AppPaginationElement';
-export * from "./app-modal/AppModalElement";
+export * from './app-modal/AppModalElement';
-export * from "./app-root/AppRootElement";
+export * from './app-root/AppRootElement';
-export * from "./app-slot/AppSlotElement";
+export * from './app-slot/AppSlotElement';
-export * from "./app-menu/AppMenuElement";
+export * from './app-menu/AppMenuElement';
-export * from "./input-field/InputFieldElement";
+export * from './input-field/InputFieldElement';
-export * from "./app-dropdown/AppDropdownElement";
+export * from './app-dropdown/AppDropdownElement';
-export * from "./app-loader/AppLoaderElement";
+export * from './app-loader/AppLoaderElement';
-export * from "./circle-loader/CircleLoaderElement";
+export * from './circle-loader/CircleLoaderElement';
-export * from "./app-form/AppFormElement";
+export * from './app-form/AppFormElement';
-export * from "./wallet-header/WalletHeaderElement";
+export * from './wallet-header/WalletHeaderElement';
 
 // LAST
-export * from "./app-main/AppMainElement";
+export * from './app-main/AppMainElement';
-export * from "./app-shadow/AppShadowElement";
+export * from './app-shadow/AppShadowElement';

src/components/input-field/InputFieldElement.ts

@@ -1,12 +1,11 @@
-import { attr, controller, target } from "@github/catalyst";
+import { attr, controller, target } from '@github/catalyst';
-import { closest, firstUpper } from "core/utils";
+import { closest, firstUpper } from 'core/utils';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { RouterService } from "core/services";
+import randomId from 'core/utils/random-id';
-import randomId from "core/utils/random-id";
+import { validatorErrors } from 'core/constants';
-import validator from "validator";
+import { BaseComponentElement, Validator } from 'common/';
-import { validatorErrors } from "core/constants";
+import { AppFormElement } from 'components/app-form/AppFormElement';
-import { BaseComponentElement } from "common/";
+import { validator } from 'core/utils';
-import { AppFormElement } from "components/app-form/AppFormElement";
 
 @controller
 class InputFieldElement extends BaseComponentElement {
@@ -17,25 +16,37 @@ class InputFieldElement extends BaseComponentElement {
 	@target main: HTMLElement;
 	@target inp: HTMLElement;
 	@closest appForm: AppFormElement;
-    error: string;
+	valid: boolean;
 	displayError: boolean;
 	randId: string;
+
+	validator: Validator;
+
 	constructor() {
 		super();
 	}
 
 	public elementConnected = (): void => {
+		this.validator = new Validator(this, this.appForm, this.rules);
 		this.randId = `${name}${randomId()}`;
 		this.update();
 		this.validate();
 	};
 
-    get valid(): boolean {
+	setError = (error) => {
-        return !!this.error;
+		this.validator.error = error;
+	};
+
+	get error(): string {
+		return this.validator.error;
+	}
+
+	get isValid(): boolean {
+		return this.validator.valid;
 	}
 
 	get required(): boolean {
-        return this.rules.includes("required");
+		return this.rules.includes('required');
 	}
 
 	get _value() {
@@ -43,34 +54,7 @@ class InputFieldElement extends BaseComponentElement {
 	}
 
 	validate = (): boolean => {
-        let _return = true;
+		return this.validator.validate();
-        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;
 	};
 
 	validateDisplay = () => {
@@ -90,9 +74,7 @@ class InputFieldElement extends BaseComponentElement {
 	render = (): TemplateResult => {
 		const renderMessage = (label: string) => {
 			if (this.label) {
-                return html`<label for="${this.randId}"
+				return html`<label for="${this.randId}">${this.label}${this.required ? ' (*)' : ''}</label>`;
-                    >${this.label}${this.required ? " (*)" : ""}</label
-                >`;
 			}
 			return html``;
 		};
@@ -116,8 +98,7 @@ class InputFieldElement extends BaseComponentElement {
 		};
 
 		return html`<div class="input-main" data-target="input-field.main">
-            ${renderMessage(this.label)} ${renderInput(this.type)}
+			${renderMessage(this.label)} ${renderInput(this.type)} ${renderError(this.displayError, this.error)}
-            ${renderError(this.displayError, this.error)}
 		</div>`;
 	};
 }

src/components/menu-item/MenuItemElement.ts

@@ -1,7 +1,7 @@
-import { attr, controller, target } from "@github/catalyst";
+import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { AppMainElement } from "components/app-main/AppMainElement";
+import { AppMainElement } from 'components/app-main/AppMainElement';
-import { BaseComponentElement } from "common/";
+import { BaseComponentElement } from 'common/';
 
 @controller
 class MenuItemElement extends BaseComponentElement {
@@ -21,11 +21,11 @@ class MenuItemElement extends BaseComponentElement {
 			this.title = _slottedText;
 		}
 		this.update();
-        this.appMain.addEventListener("routechanged", this.update);
+		this.appMain.addEventListener('routechanged', this.update);
 	};
 
 	public elementDisconnected = (appMain: AppMainElement): void => {
-        appMain?.removeEventListener("routechanged", this.update);
+		appMain?.removeEventListener('routechanged', this.update);
 	};
 
 	get current(): boolean {
@@ -34,18 +34,10 @@ class MenuItemElement extends BaseComponentElement {
 
 	render = (): TemplateResult => {
 		return html`
-            <div
+			<div class="${this.current ? 'selected ' : ''}menu-item" data-target="menu-item.itemEl">
-                class="${this.current ? "selected " : ""}menu-item"
-                data-target="menu-item.itemEl"
-            >
 				<app-link data-to="${this.path}">${this.title}</app-link>
 				${this.customaction
-                    ? html`<div
+					? html`<div data-target="menu-item.customButton" app-action="${this.customaction}">+</div>`
-                          data-target="menu-item.customButton"
-                          app-action="${this.customaction}"
-                      >
-                          +
-                      </div>`
 					: html``}
 			</div>
 		`;

src/components/wallet-header/WalletHeaderElement.ts

@@ -1,8 +1,8 @@
-import { attr, controller, target } from "@github/catalyst";
+import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { BaseComponentElement } from "common/";
+import { BaseComponentElement } from 'common/';
-import { CircleLoaderElement } from "components/circle-loader/CircleLoaderElement";
+import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
-import { findMethod } from "core/utils";
+import { findMethod } from 'core/utils';
 
 @controller
 class WalletHeaderElement extends BaseComponentElement {
@@ -26,13 +26,14 @@ class WalletHeaderElement extends BaseComponentElement {
 		this.update();
 	}
 
-    executeFetch = async (options?): Promise<void> => {
+	get submitFunc() {
-        const actionString = this.custom;
+		return findMethod(this.custom, this.appMain);
-        const submitFunc = findMethod(actionString, this.appMain);
+	}
 
+	executeFetch = async (options?): Promise<void> => {
 		try {
 			this.loader?.start?.();
-            await submitFunc(options);
+			await this.submitFunc(options);
 			this.loader?.stop?.();
 		} catch (err) {
 			this.loader?.stop?.();
@@ -52,15 +53,11 @@ class WalletHeaderElement extends BaseComponentElement {
 			if (this.loader && this.loader.loading) {
 				return html`<circle-loader></circle-loader>`;
 			}
-            return html`${renderItem(
+			return html`${renderItem('Last Month', lastMonth, currency)}${renderItem(
-                "Last Month",
+				'Current Balance',
-                lastMonth,
-                currency
-            )}${renderItem(
-                "Current Balance",
 				currentBalance,
 				currency
-            )}${renderItem("Next Month", nextMonth, currency)}`;
+			)}${renderItem('Next Month', nextMonth, currency)}`;
 		};
 
 		return html`<div>${renderHeader()}</div>`;

src/core/constants/index.ts

@@ -1 +1 @@
-export * from "./validatorErrors";
+export * from './validatorErrors';

src/core/constants/validatorErrors.ts

@@ -1,4 +1,4 @@
 export const validatorErrors = {
-    required: "{- name} is required.",
+	required: '{- name} is required.',
-    isEmail: "{- name} needs to be email format.",
+	isEmail: '{- name} needs to be email format.',
 };

src/core/services/app-service/AppService.ts

@@ -1,37 +1,22 @@
-import { AppMainElement } from "components/";
+import { AppMainElement } from 'components/';
-import { HttpClient } from "..";
+import { HttpClient } from '..';
 
 class AppService {
-    constructor(
+	constructor(public appMain: AppMainElement, public httpClient: HttpClient) {}
-        public appMain: AppMainElement,
-        public httpClient: HttpClient
-    ) {}
 
-    post = async (
+	post = async (url: string, data: Object, headersParam: HeadersInit): Promise<any> => {
-        url: string,
-        data: Object,
-        headersParam: HeadersInit
-    ): Promise<any> => {
 		headersParam = {
 			...headersParam,
 			Authorization: `BEARER ${this.appMain?.authStore?.token}`,
 		};
 		try {
 			this?.appMain?.appLoader?.start?.();
-            const response = await this.httpClient.post(
+			const response = await this.httpClient.post(url, data, headersParam);
-                url,
-                data,
-                headersParam
-            );
 			this?.appMain?.appLoader?.stop?.();
-            if (
+			if (response?.statusCode == 400 || response?.statusCode == 500 || response?.statusCode == 401) {
-                response?.statusCode == 400 ||
-                response?.statusCode == 500 ||
-                response?.statusCode == 401
-            ) {
 				if (response?.statusCode == 401) {
 					this.appMain.authStore.token = null;
-                    this.appMain.routerService.goTo("/token-expired");
+					this.appMain.routerService.goTo('/token-expired');
 				}
 				throw response;
 			}
@@ -42,11 +27,7 @@ class AppService {
 		}
 	};
 
-    put = async (
+	put = async (url: string, data: Object, headersParam: HeadersInit): Promise<any> => {
-        url: string,
-        data: Object,
-        headersParam: HeadersInit
-    ): Promise<any> => {
 		headersParam = {
 			...headersParam,
 			Authorization: `BEARER ${this.appMain?.authStore?.token}`,
@@ -55,14 +36,10 @@ class AppService {
 			this?.appMain?.appLoader?.start?.();
 			const response = await this.httpClient.put(url, data, headersParam);
 			this?.appMain?.appLoader?.stop?.();
-            if (
+			if (response?.statusCode == 400 || response?.statusCode == 500 || response?.statusCode == 401) {
-                response?.statusCode == 400 ||
-                response?.statusCode == 500 ||
-                response?.statusCode == 401
-            ) {
 				if (response?.statusCode == 401) {
 					this.appMain.authStore.token = null;
-                    this.appMain.routerService.goTo("/token-expired");
+					this.appMain.routerService.goTo('/token-expired');
 				}
 				throw response;
 			}
@@ -73,31 +50,19 @@ class AppService {
 		}
 	};
 
-    delete = async (
+	delete = async (url: string, data: Object, headersParam: HeadersInit): Promise<any> => {
-        url: string,
-        data: Object,
-        headersParam: HeadersInit
-    ): Promise<any> => {
 		headersParam = {
 			...headersParam,
 			Authorization: `BEARER ${this.appMain?.authStore?.token}`,
 		};
 		try {
 			this?.appMain?.appLoader?.start?.();
-            const response = await this.httpClient.delete(
+			const response = await this.httpClient.delete(url, data, headersParam);
-                url,
-                data,
-                headersParam
-            );
 			this?.appMain?.appLoader?.stop?.();
-            if (
+			if (response?.statusCode == 400 || response?.statusCode == 500 || response?.statusCode == 401) {
-                response?.statusCode == 400 ||
-                response?.statusCode == 500 ||
-                response?.statusCode == 401
-            ) {
 				if (response?.statusCode == 401) {
 					this.appMain.authStore.token = null;
-                    this.appMain.routerService.goTo("/token-expired");
+					this.appMain.routerService.goTo('/token-expired');
 				}
 				throw response;
 			}
@@ -108,30 +73,18 @@ class AppService {
 		}
 	};
 
-    get = async (
+	get = async (url: string, params: Object, headersParam: HeadersInit): Promise<any> => {
-        url: string,
-        params: Object,
-        headersParam: HeadersInit
-    ): Promise<any> => {
 		headersParam = {
 			...headersParam,
 			Authorization: `BEARER ${this.appMain?.authStore?.token}`,
 		};
 		try {
 			this?.appMain?.appLoader?.start?.();
-            const response = await this.httpClient.get(
+			const response = await this.httpClient.get(url, params, headersParam);
-                url,
-                params,
-                headersParam
-            );
 			this?.appMain?.appLoader?.stop?.();
-            if (
+			if (response?.statusCode == 400 || response?.statusCode == 500 || response?.statusCode == 401) {
-                response?.statusCode == 400 ||
-                response?.statusCode == 500 ||
-                response?.statusCode == 401
-            ) {
 				if (response?.statusCode == 401) {
-                    this.appMain.routerService.goTo("/token-expired");
+					this.appMain.routerService.goTo('/token-expired');
 					this.appMain.authStore.token = null;
 				}
 				throw response;

src/core/services/base-service/BaseService.ts

@@ -1,4 +1,4 @@
-import { AppService } from "core/services";
+import { AppService } from 'core/services';
 
 class BaseService {
 	constructor(public endpoint: string, public appService: AppService) {}

src/core/services/http-service/HttpClient.ts

@@ -1,9 +1,7 @@
 class HttpClient {
 	private url: string;
 	constructor() {
-        this.url = `${__CONFIG__.ssl ? "https" : "http"}://${
+		this.url = `${__CONFIG__.ssl ? 'https' : 'http'}://${__CONFIG__.apiUrl}/${__CONFIG__.apiVersion}`;
-            __CONFIG__.apiUrl
-        }/${__CONFIG__.apiVersion}`;
 	}
 
 	post(url: string, data: Object, headersParam: HeadersInit): Promise<any> {
@@ -13,10 +11,10 @@ class HttpClient {
 			body = data;
 		} else {
 			body = JSON.stringify(data);
-            headers.append("Content-Type", "application/json");
+			headers.append('Content-Type', 'application/json');
 		}
 		let options: OptionsType = {
-            method: "POST",
+			method: 'POST',
 			headers: headers,
 			body: body,
 		};
@@ -27,9 +25,9 @@ class HttpClient {
 
 	put(url: string, data: Object, headersParam: HeadersInit): Promise<any> {
 		let headers: Headers = new Headers(headersParam);
-        headers.append("Content-Type", "application/json");
+		headers.append('Content-Type', 'application/json');
 		let options: OptionsType = {
-            method: "PUT",
+			method: 'PUT',
 			headers: headers,
 			body: JSON.stringify(data),
 		};
@@ -40,9 +38,9 @@ class HttpClient {
 
 	delete(url: string, data: Object, headersParam: HeadersInit): Promise<any> {
 		let headers: Headers = new Headers(headersParam);
-        headers.append("Content-Type", "application/json");
+		headers.append('Content-Type', 'application/json');
 		let options: OptionsType = {
-            method: "DELETE",
+			method: 'DELETE',
 			headers: headers,
 			body: JSON.stringify(data),
 		};
@@ -54,18 +52,15 @@ class HttpClient {
 	get(url: string, params: Object, headersParam: HeadersInit): Promise<any> {
 		let headers: Headers = new Headers(headersParam);
 		let options: OptionsType = {
-            method: "GET",
+			method: 'GET',
 			headers: headers,
 		};
-        let paramsPath: string = "";
+		let paramsPath: string = '';
 		if (params) {
 			let urlParams = new URLSearchParams(Object.entries(params));
-            paramsPath = "?" + urlParams;
+			paramsPath = '?' + urlParams;
 		}
-        const req: Request = new Request(
+		const req: Request = new Request(resolveUrl(this.url, url + paramsPath), options);
-            resolveUrl(this.url, url + paramsPath),
-            options
-        );
 
 		return createRequest(req);
 	}
@@ -84,7 +79,7 @@ async function createRequest(request: Request): Promise<Response> {
 	) {
 		throw new Error(`HTTP error! status: ${response.status}`);
 	} else {
-        if (response.headers.get("Content-Type") !== null) {
+		if (response.headers.get('Content-Type') !== null) {
 			let newResponse: Response = await createResponse(response);
 			return newResponse;
 		}
@@ -93,9 +88,9 @@ async function createRequest(request: Request): Promise<Response> {
 }
 
 async function createResponse(response: Response): Promise<any> {
-    const type: string = response.headers.get("Content-Type");
+	const type: string = response.headers.get('Content-Type');
 	const body = (): Promise<any> => {
-        if (type.indexOf("application/json") !== -1) {
+		if (type.indexOf('application/json') !== -1) {
 			return response.json();
 		}
 		return response.text();
@@ -105,14 +100,14 @@ async function createResponse(response: Response): Promise<any> {
 }
 
 function resolveUrl(url: string, path: string): string {
-    if (path.includes("http") || path.includes("://")) {
+	if (path.includes('http') || path.includes('://')) {
 		return path;
 	}
 	const fixedPath = path
-        .split("/")
+		.split('/')
 		.filter((i) => i)
-        .join("/");
+		.join('/');
-    const urlWithPath = `${url.endsWith("/") ? url : `${url}/`}${fixedPath}`;
+	const urlWithPath = `${url.endsWith('/') ? url : `${url}/`}${fixedPath}`;
 	return urlWithPath;
 }
 

src/core/services/index.ts

@@ -1,4 +1,4 @@
-export { default as HttpClient } from "./http-service/HttpClient";
+export { default as HttpClient } from './http-service/HttpClient';
-export { default as BaseService } from "./base-service/BaseService";
+export { default as BaseService } from './base-service/BaseService';
-export { default as RouterService } from "./router-service/RouterService";
+export { default as RouterService } from './router-service/RouterService';
-export { default as AppService } from "./app-service/AppService";
+export { default as AppService } from './app-service/AppService';

src/core/services/router-service/RouterService.ts

@@ -1,13 +1,10 @@
-import { BaseLayoutElement } from "common/layouts";
+import { BaseLayoutElement } from 'common/layouts';
-import { AppMainElement } from "components/";
+import { AppMainElement } from 'components/';
 
 class RouterService {
 	private historyStack: Array<RouteState> = [];
 	private _routes: Array<RouteState> = [];
-    constructor(
+	constructor(private appMain: AppMainElement, private mainRoot: ShadowRoot | HTMLElement) {}
-        private appMain: AppMainElement,
-        private mainRoot: ShadowRoot | HTMLElement
-    ) {}
 
 	get routerState(): RouteState {
 		const historyLen = this.historyStack?.length;
@@ -29,24 +26,14 @@ class RouterService {
 	public setRoutes = (routes: Array<any>): void => {
 		if (!Array.isArray(this._routes)) this._routes = [];
 		routes.forEach((route) => {
-            const { path, component, data, layout, middleware, children } =
+			const { path, component, data, layout, middleware, children } = route;
-                route;
+			const _pathArr = path?.split?.('/').filter((a) => a);
-            const _pathArr = path?.split?.("/").filter((a) => a);
+			let newPath = ['', ..._pathArr].join('/');
-            let newPath = ["", ..._pathArr].join("/");
+			if (newPath == '') newPath = '/';
-            if (newPath == "") newPath = "/";
+			const _routeState: RouteState = new RouteState(newPath, component, data, layout, middleware);
-            const _routeState: RouteState = new RouteState(
-                newPath,
-                component,
-                data,
-                layout,
-                middleware
-            );
 			if (Array.isArray(children) && children?.length > 0) {
 				children.forEach((child) => {
-                    const _childState: RouteState = this.createChildState(
+					const _childState: RouteState = this.createChildState(child, route);
-                        child,
-                        route
-                    );
 					this._routes?.push(_childState);
 				});
 			}
@@ -61,18 +48,13 @@ class RouterService {
 		const _mainRoot = this.mainRoot;
 		let route: RouteState = this.routerState;
 		if (route?.middleware) {
-            if (
+			if (!(typeof route?.middleware == 'function' && route.middleware()) || route.middleware === false) {
-                !(
+				return this.goTo('/unauthorized');
-                    typeof route?.middleware == "function" && route.middleware()
-                ) ||
-                route.middleware === false
-            ) {
-                return this.goTo("/unauthorized");
 			}
 		}
 		if (
 			path == route?.path ||
-            route?.path == "/not-found" ||
+			route?.path == '/not-found' ||
 			(hasDynamic && this?._routes?.[_dynamicIndex]?.path == route?.path)
 		) {
 			let changed: boolean = false;
@@ -85,33 +67,15 @@ class RouterService {
 					) {
 						changed = true;
 						child.setElement(route.component);
-                    } else if (
+					} else if (route.layout && route.layout.toUpperCase() !== child.tagName) {
-                        route.layout &&
-                        route.layout.toUpperCase() !== child.tagName
-                    ) {
 						changed = true;
-                        const _newElement = document.createElement(
+						const _newElement = document.createElement(route.layout);
-                            route.layout
+						_newElement.setAttribute('data-target', 'app-root.rootElement');
-                        );
-                        _newElement.setAttribute(
-                            "data-target",
-                            "app-root.rootElement"
-                        );
 						_mainRoot.replaceChild(_newElement, child);
-                        (_newElement as BaseLayoutElement).setElement(
+						(_newElement as BaseLayoutElement).setElement(route.component);
-                            route.component
+					} else if (!route.layout && child.tagName !== route.component) {
-                        );
+						const _newElement = document.createElement(route.component);
-                    } else if (
+						_newElement.setAttribute('data-target', 'app-root.rootElement');
-                        !route.layout &&
-                        child.tagName !== route.component
-                    ) {
-                        const _newElement = document.createElement(
-                            route.component
-                        );
-                        _newElement.setAttribute(
-                            "data-target",
-                            "app-root.rootElement"
-                        );
 						changed = true;
 						_mainRoot.replaceChild(_newElement, child);
 					}
@@ -120,27 +84,18 @@ class RouterService {
 				if (route.layout) {
 					changed = true;
 					const _newElement = document.createElement(route.layout);
-                    _newElement.setAttribute(
+					_newElement.setAttribute('data-target', 'app-root.rootElement');
-                        "data-target",
-                        "app-root.rootElement"
-                    );
 					_mainRoot.appendChild(_newElement);
-                    (_newElement as BaseLayoutElement).setElement(
+					(_newElement as BaseLayoutElement).setElement(route.component);
-                        route.component
-                    );
 				} else {
 					const _newElement = document.createElement(route.component);
-                    _newElement.setAttribute(
+					_newElement.setAttribute('data-target', 'app-root.rootElement');
-                        "data-target",
-                        "app-root.rootElement"
-                    );
 					changed = true;
 					_mainRoot.appendChild(_newElement);
 				}
 			}
 		} else {
-            const [isDynamic, _dynamicIndex, dynamicProps] =
+			const [isDynamic, _dynamicIndex, dynamicProps] = this.hasDynamicPath(path);
-                this.hasDynamicPath(path);
 			let newRoute: RouteState;
 			if (isDynamic && _dynamicIndex !== -1) {
 				newRoute = this._routes[_dynamicIndex];
@@ -158,18 +113,14 @@ class RouterService {
 		if (!Array.isArray(this.historyStack)) this.historyStack = [];
 		const currentPath = window.location.pathname;
 		if (path == currentPath) return;
-        if (path.includes(":") && data) {
+		if (path.includes(':') && data) {
 			path = resolvePath(path, data);
 		}
 		const _index = this._routes.findIndex((route) => route.path === path);
-        const _indexOfEmpty = this._routes.findIndex(
+		const _indexOfEmpty = this._routes.findIndex((route) => route.path === '/not-found');
-            (route) => route.path === "/not-found"
+		const [isDynamic, _dynamicIndex, dynamicProps] = this.hasDynamicPath(path);
-        );
-        const [isDynamic, _dynamicIndex, dynamicProps] =
-            this.hasDynamicPath(path);
 		if (isDynamic) {
-            const [isCurrentDynamic, currIndex] =
+			const [isCurrentDynamic, currIndex] = this.hasDynamicPath(currentPath);
-                this.hasDynamicPath(currentPath);
 			if (path == currentPath) return;
 		}
 		let newRoute: RouteState;
@@ -179,7 +130,7 @@ class RouterService {
 		} else if (_index === -1 && _indexOfEmpty !== -1) {
 			newRoute = this._routes[_indexOfEmpty];
 		} else if (_index === -1 && _indexOfEmpty === -1) {
-            newRoute = new RouteState("/not-found", "not-found");
+			newRoute = new RouteState('/not-found', 'not-found');
 		} else {
 			newRoute = this._routes[_index];
 		}
@@ -187,7 +138,7 @@ class RouterService {
 		this.historyStack.push(newRoute);
 		const url = new URL(window.location.toString());
 		url.pathname = path;
-        window.history.pushState({}, "", url.toString());
+		window.history.pushState({}, '', url.toString());
 		this.update();
 	};
 
@@ -198,7 +149,7 @@ class RouterService {
 			const nextRoute = this.historyStack[lenHistory - 2];
 			const url = new URL(window.location.toString());
 			url.pathname = nextRoute.path;
-            window.history.pushState({}, "", url.toString());
+			window.history.pushState({}, '', url.toString());
 			this.historyStack.pop();
 		}
 		this.update();
@@ -213,7 +164,7 @@ class RouterService {
 	}
 
 	public init = (): void => {
-        window.addEventListener("popstate", () => {
+		window.addEventListener('popstate', () => {
 			this.historyStack.pop();
 			this.update();
 		});
@@ -223,13 +174,11 @@ class RouterService {
 	public findByPath = (): RouteState => {
 		const path = window.location.pathname;
 		const _index = this._routes.findIndex((route) => route.path === path);
-        const _indexOfEmpty = this._routes.findIndex(
+		const _indexOfEmpty = this._routes.findIndex((route) => route.path === '/not-found');
-            (route) => route.path === "/not-found"
-        );
 		if (_index === -1 && _indexOfEmpty !== -1) {
 			return this._routes[_indexOfEmpty];
 		} else if (_index === -1 && _indexOfEmpty === -1) {
-            return new RouteState("/not-found", "not-found");
+			return new RouteState('/not-found', 'not-found');
 		}
 		return this._routes[_index];
 	};
@@ -243,23 +192,14 @@ class RouterService {
 
 	private createChildState = (child: any, parent: any): RouteState => {
 		const { path, middleware, layout, component, data, children } = child;
-        const _pathArr = path?.split?.("/").filter((a) => a);
+		const _pathArr = path?.split?.('/').filter((a) => a);
-        const _parentArr = parent?.path?.split?.("/").filter((a) => a);
+		const _parentArr = parent?.path?.split?.('/').filter((a) => a);
-        const newPath = ["", ..._parentArr, ..._pathArr].join("/");
+		const newPath = ['', ..._parentArr, ..._pathArr].join('/');
-        const _child = new RouteState(
+		const _child = new RouteState(newPath, component, data, layout, middleware ? middleware : parent?.middleware);
-            newPath,
-            component,
-            data,
-            layout,
-            middleware ? middleware : parent?.middleware
-        );
 
 		if (Array.isArray(children) && children?.length > 0) {
 			children.forEach((child2) => {
-                const _childState: RouteState = this.createChildState(
+				const _childState: RouteState = this.createChildState(child2, _child);
-                    child2,
-                    _child
-                );
 				this._routes?.push(_childState);
 			});
 		}
@@ -267,7 +207,7 @@ class RouterService {
 	};
 
 	private hasDynamicPath = (path: string): [boolean, number, any] => {
-        const _pathArr = path.split("/").filter((a) => a);
+		const _pathArr = path.split('/').filter((a) => a);
 		let matchedIndex: number = 0;
 		let matched: boolean = false;
 		let dynamicProps: any = {};
@@ -277,18 +217,18 @@ class RouterService {
 				return;
 			}
 			if (path == route.path) {
-                matched = path?.includes(":") ? true : false;
+				matched = path?.includes(':') ? true : false;
 				matchedIndex = _routeId;
 				shouldSkip = true;
 			}
-            const _routeArr = route.path.split("/").filter((a) => a);
+			const _routeArr = route.path.split('/').filter((a) => a);
 			if (_pathArr.length === _routeArr.length) {
 				let pathMatches: number = 0;
 				let hasDynamic: boolean = false;
 				_pathArr.forEach((pathr, i) => {
 					if (pathr == _routeArr[i]) {
 						pathMatches++;
-                    } else if (_routeArr[i].startsWith?.(":")) {
+					} else if (_routeArr[i].startsWith?.(':')) {
 						pathMatches++;
 						hasDynamic = true;
 						dynamicProps[_routeArr[i].substr(1)] = pathr;
@@ -326,17 +266,17 @@ type DynamicProp = {
 
 function resolvePath(path: string, data: any): string {
 	const _pathArr = path
-        .split("/")
+		.split('/')
 		.filter((a) => a)
 		.map((pathPart) => {
-            if (pathPart.startsWith(":")) {
+			if (pathPart.startsWith(':')) {
 				pathPart = data?.[pathPart.substr(1)];
 			}
 			return pathPart;
 		});
-    let _return = ["", ..._pathArr].join("/");
+	let _return = ['', ..._pathArr].join('/');
-    if (_return == "") {
+	if (_return == '') {
-        _return = "/";
+		_return = '/';
 	}
 	return _return;
 }

src/core/store/AuthStore.ts

@@ -1,35 +1,31 @@
-import { AppMainElement } from "components/";
+import { AppMainElement } from 'components/';
-import { AppService } from "core/services";
+import { AppService } from 'core/services';
-import { isTrue } from "core/utils";
+import { isTrue } from 'core/utils';
-import { AuthService } from "services/";
+import { AuthService } from 'services/';
 
 class AuthStore {
 	private _token: string;
 	private _userDetails: UserDetails;
 	private authService: AuthService;
-    constructor(
+	constructor(private appMain: AppMainElement, private appService: AppService) {
-        private appMain: AppMainElement,
+		const _token = localStorage.getItem('token');
-        private appService: AppService
-    ) {
-        const _token = localStorage.getItem("token");
 		if (_token) this.token = _token;
 		this.authService = new AuthService(this.appService);
 		this.checkToken(_token);
 	}
 
 	get token(): string {
-        if (this._token == "null") return null;
+		if (this._token == 'null') return null;
-        if (this._token == "undefined") return undefined;
+		if (this._token == 'undefined') return undefined;
 		return this._token;
 	}
 
 	set token(token: string) {
 		const { _token } = this;
 		const _changed = token != _token;
-        console.log(token);
 		if (_changed) {
 			this._token = token;
-            localStorage.setItem("token", token);
+			localStorage.setItem('token', token);
 			this.appMain.dispatchEvent(this.appMain?.domEvents.tokenchange);
 		}
 	}
@@ -44,16 +40,16 @@ class AuthStore {
 
 	checkToken = async (token: string) => {
 		try {
-            if (token && token !== "null") {
+			if (token && token !== 'null') {
 				const response = await this.authService.checkToken({ token });
 				if (!(response && response.valid)) {
 					this.token = null;
-                    this.appMain.routerService.goTo("/token-expired");
+					this.appMain.routerService.goTo('/token-expired');
 				}
 			}
 		} catch (err) {
 			this.token = null;
-            this.appMain.routerService.goTo("/token-expired");
+			this.appMain.routerService.goTo('/token-expired');
 		}
 	};
 
@@ -64,7 +60,7 @@ class AuthStore {
 				this.token = response.token;
 			} else {
 				this.token = null;
-                localStorage.removeItem("token");
+				localStorage.removeItem('token');
 			}
 			return response;
 		} catch (err) {
@@ -83,7 +79,7 @@ class AuthStore {
 
 	userLogout = (): void => {
 		this.token = null;
-        localStorage.removeItem("token");
+		localStorage.removeItem('token');
 	};
 }
 

src/core/store/index.ts

@@ -1 +1 @@
-export { default as AuthStore } from "./AuthStore";
+export { default as AuthStore } from './AuthStore';

src/core/utils/closest-deco.ts

@@ -1,4 +1,4 @@
-import { toKebabCase } from "core/utils";
+import { toKebabCase } from 'core/utils';
 
 export default function closest(proto: Object, key: string): any {
 	const kebab: string = toKebabCase(key);

src/core/utils/find-method.ts

@@ -1,11 +1,8 @@
-import { AppMainElement } from "components/";
+import { AppMainElement } from 'components/';
 
-export default function findMethod(
+export default function findMethod(actionString: string, appMain: AppMainElement): Function {
-    actionString: string,
+	if (actionString && appMain) {
-    appMain: AppMainElement
+		const methodSep = actionString.lastIndexOf('#');
-): Function {
-    if (actionString) {
-        const methodSep = actionString.lastIndexOf("#");
 		const tag = actionString.slice(0, methodSep);
 		const method = actionString.slice(methodSep + 1);
 

src/core/utils/first-upper.ts

@@ -1,4 +1,4 @@
 export default function firstUpper(s: string): string {
-    if (typeof s !== "string") return "";
+	if (typeof s !== 'string') return '';
 	return s.charAt(0).toUpperCase() + s.slice(1);
 }

src/core/utils/index.ts

@@ -1,9 +1,13 @@
-export { default as toKebabCase } from "./toKebabCase";
+export * from './library';
-export { default as update } from "./update-deco";
+export * from './templating';
-export { default as index } from "./index-deco";
+
-export { default as closest } from "./closest-deco";
+export { default as toKebabCase } from './toKebabCase';
-export { default as isTrue } from "./isTrue";
+export { default as update } from './update-deco';
-export { default as firstUpper } from "./first-upper";
+export { default as index } from './index-deco';
-export { default as query } from "./query-deco";
+export { default as closest } from './closest-deco';
-export { default as querys } from "./querys-deco";
+export { default as isTrue } from './isTrue';
-export { default as findMethod } from "./find-method";
+export { default as firstUpper } from './first-upper';
+export { default as query } from './query-deco';
+export { default as querys } from './querys-deco';
+export { default as findMethod } from './find-method';
+export { default as validator } from './validator';

src/core/utils/isTrue.ts

@@ -1,3 +1,3 @@
 export default function isTrue(text: string): boolean {
-    return text === "true";
+	return text === 'true';
 }

src/core/utils/library.ts

@@ -0,0 +1,3 @@
+import { attr, controller, target, targets} from '@github/catalyst';
+
+export { attr, controller, target, targets } 

src/core/utils/query-deco.ts

@@ -1,4 +1,4 @@
-import { toKebabCase } from "core/utils";
+import { toKebabCase } from 'core/utils';
 
 export default function query(proto: Object, key: string): any {
 	const kebab: string = toKebabCase(key);

src/core/utils/querys-deco.ts

@@ -1,4 +1,4 @@
-import { toKebabCase } from "core/utils";
+import { toKebabCase } from 'core/utils';
 
 export default function querys(proto: Object, key: string): any {
 	const kebab: string = toKebabCase(key);
@@ -10,9 +10,6 @@ export default function querys(proto: Object, key: string): any {
 	});
 }
 
-function findQuerys(
+function findQuerys(element: HTMLElement, key: string): NodeListOf<HTMLElement> {
-    element: HTMLElement,
-    key: string
-): NodeListOf<HTMLElement> {
 	return element.querySelectorAll(key);
 }

src/core/utils/random-id.ts

@@ -1,3 +1,3 @@
 export default function randomId(): string {
-    return "_" + Math.random().toString(36).substr(2, 5);
+	return '_' + Math.random().toString(36).substr(2, 5);
 }

src/core/utils/templating.ts

@@ -0,0 +1,3 @@
+import { render, html, TemplateResult } from 'lit-html';
+
+export { render, html, TemplateResult };

src/core/utils/toKebabCase.ts

@@ -1,6 +1,6 @@
 export default function toKebabCase(text: string): string {
 	return text
-        .replace(/([a-z])([A-Z])/g, "$1-$2")
+		.replace(/([a-z])([A-Z])/g, '$1-$2')
-        .replace(/\s+/g, "-")
+		.replace(/\s+/g, '-')
 		.toLowerCase();
 }

src/core/utils/validator.ts

@@ -0,0 +1,25 @@
+import isEmail from 'validator/lib/isEmail';
+import isDate from 'validator/lib/isDate';
+import isNumeric from 'validator/lib/isNumeric';
+import matches from 'validator/lib/matches';
+
+const validator = {
+	is_email: [isEmail, '{- name} needs to be email format.'],
+	is_date: isDate,
+	is_numeric: isNumeric,
+	matches: matches,
+	is_same: [isSame, '{- name} needs to be same to {- field}.'],
+	required: [required, '{- name} is required.'],
+};
+
+function required(str: string): boolean {
+	if (!str || str == '') return false;
+	return true;
+}
+
+function isSame(str: string, field: string): boolean {
+	if (str === field) return true;
+	return false;
+}
+
+export default validator;

src/index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-    <meta charset="UTF-8">
+		<meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Wallet Web</title>
 	</head>
 	<body>

src/index.ts

@@ -1,3 +1,3 @@
-import "layouts";
+import 'layouts';
-import "components";
+import 'components';
-import "pages";
+import 'pages';

src/layouts/index.ts

@@ -1,2 +1,2 @@
-export * from "./menu-layout/MenuLayoutElement";
+export * from './menu-layout/MenuLayoutElement';
-export * from "./initial-layout/InitialLayoutElement";
+export * from './initial-layout/InitialLayoutElement';

src/layouts/initial-layout/InitialLayoutElement.ts

@@ -1,8 +1,8 @@
-import { controller, target } from "@github/catalyst";
+import { controller, target } from '@github/catalyst';
-import { closest } from "core/utils";
+import { closest } from 'core/utils';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { BaseLayoutElement } from "common/layouts";
+import { BaseLayoutElement } from 'common/layouts';
-import { AppMainElement } from "components/";
+import { AppMainElement } from 'components/';
 
 @controller
 class InitialLayoutElement extends BaseLayoutElement {

src/layouts/menu-layout/MenuLayoutElement.ts

@@ -1,8 +1,8 @@
-import { controller, target } from "@github/catalyst";
+import { controller, target } from '@github/catalyst';
-import { closest } from "core/utils";
+import { closest } from 'core/utils';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { BaseLayoutElement } from "common/layouts";
+import { BaseLayoutElement } from 'common/layouts';
-import { AppMainElement } from "components/";
+import { AppMainElement } from 'components/';
 
 @controller
 class MenuLayoutElement extends BaseLayoutElement {
@@ -15,18 +15,18 @@ class MenuLayoutElement extends BaseLayoutElement {
 
 	elementConnected = (): void => {
 		this.update();
-        this.appMain.addEventListener("tokenchange", this.updateAuth);
+		this.appMain.addEventListener('tokenchange', this.updateAuth);
-        this.appMain.addEventListener("routechanged", this.updateAuth);
+		this.appMain.addEventListener('routechanged', this.updateAuth);
 	};
 
 	elementDisconnected = (appMain: AppMainElement): void => {
-        appMain?.removeEventListener("tokenchange", this.updateAuth);
+		appMain?.removeEventListener('tokenchange', this.updateAuth);
-        appMain?.removeEventListener("routechanged", this.updateAuth);
+		appMain?.removeEventListener('routechanged', this.updateAuth);
 	};
 
 	get isAuth(): boolean {
 		const _is = this.appMain?.routerService?.routerState?.middleware;
-        if (typeof _is == "function") {
+		if (typeof _is == 'function') {
 			return _is();
 		}
 		return !!_is;

src/pages/history-page/HistoryPageElement.ts

@@ -1,8 +1,8 @@
-import { controller, target } from "@github/catalyst";
+import { controller, target } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { TransactionsService } from "services/";
+import { TransactionsService } from 'services/';
-import { AppMainElement, AppPaginationElement } from "components/";
+import { AppMainElement, AppPaginationElement } from 'components/';
-import { BasePageElement } from "common/";
+import { BasePageElement } from 'common/';
 
 @controller
 class HistoryPageElement extends BasePageElement {
@@ -10,21 +10,19 @@ class HistoryPageElement extends BasePageElement {
 	@target pagination: AppPaginationElement;
 	constructor() {
 		super({
-            title: "Transaction History",
+			title: 'Transaction History',
 		});
 	}
 
 	elementConnected = (): void => {
-        this.transactionsService = new TransactionsService(
+		this.transactionsService = new TransactionsService(this.appMain?.appService);
-            this.appMain?.appService
-        );
 		this.update();
 		this.pagination?.setFetchFunc?.(this.getTransactions, true)!;
-        this.appMain.addEventListener("tokenchange", this.update);
+		this.appMain.addEventListener('tokenchange', this.update);
 	};
 
 	elementDisconnected = (appMain: AppMainElement): void => {
-        appMain?.removeEventListener("tokenchange", this.update);
+		appMain?.removeEventListener('tokenchange', this.update);
 	};
 
 	getTransactions = async (options): Promise<any> => {
@@ -32,7 +30,7 @@ class HistoryPageElement extends BasePageElement {
 			if (this?.routerService?.routerState?.data) {
 				const { walletId } = this?.routerService?.routerState?.data;
 				if (walletId) {
-                    options["walletId"] = walletId;
+					options['walletId'] = walletId;
 				}
 			}
 			const response = await this.transactionsService.getAll(options);
@@ -45,17 +43,13 @@ class HistoryPageElement extends BasePageElement {
 	render = (): TemplateResult => {
 		const renderWallet = () => {
 			if (this.routerService?.routerState?.data?.walletId) {
-                return html`<span
+				return html`<span>${this.routerService?.routerState?.data?.walletId}</span>`;
-                    >${this.routerService?.routerState?.data?.walletId}</span
-                >`;
 			}
 			return html``;
 		};
 		return html`<div>
 			${renderWallet()}
-            <app-pagination
+			<app-pagination data-target="history-page.pagination"></app-pagination>
-                data-target="history-page.pagination"
-            ></app-pagination>
 		</div>`;
 	};
 }

src/pages/home-page/HomePageElement.ts

@@ -1,8 +1,8 @@
-import { controller, target } from "@github/catalyst";
+import { controller, target } from '@github/catalyst';
-import { html, TemplateResult, until } from "@github/jtml";
+import { html, TemplateResult, until } from 'core/utils';
-import { WalletService } from "services/";
+import { WalletService } from 'services/';
-import { AppMainElement, WalletHeaderElement } from "components/";
+import { AppMainElement, WalletHeaderElement } from 'components/';
-import { BasePageElement } from "common/";
+import { BasePageElement } from 'common/';
 
 @controller
 class HomePageElement extends BasePageElement {
@@ -10,19 +10,19 @@ class HomePageElement extends BasePageElement {
 	private walletService: WalletService;
 	constructor() {
 		super({
-            title: "Home",
+			title: 'Home',
 		});
 	}
 
 	elementConnected = (): void => {
 		this.walletService = new WalletService(this.appMain?.appService);
 		this.update();
-        this.appMain.addEventListener("tokenchange", this.update);
+		this.appMain.addEventListener('tokenchange', this.update);
 		this.getBalance();
 	};
 
 	elementDisconnected = (appMain: AppMainElement): void => {
-        appMain?.removeEventListener("tokenchange", this.update);
+		appMain?.removeEventListener('tokenchange', this.update);
 	};
 
 	getBalance = async (): Promise<void> => {
@@ -37,9 +37,9 @@ class HomePageElement extends BasePageElement {
 	setBalance = (header) => {
 		if (!this.walletHeader) return;
 		this.walletHeader.currency = header.currency;
-        this.walletHeader.currentBalance = header.currentBalance || "0";
+		this.walletHeader.currentBalance = header.currentBalance || '0';
-        this.walletHeader.lastMonth = header.lastMonth || "0";
+		this.walletHeader.lastMonth = header.lastMonth || '0';
-        this.walletHeader.nextMonth = header.nextMonth || "0";
+		this.walletHeader.nextMonth = header.nextMonth || '0';
 	};
 
 	openModal = (): void => {
@@ -47,7 +47,7 @@ class HomePageElement extends BasePageElement {
 		if (_modal) {
 			this.appMain.closeModal();
 		} else {
-            this.appMain.createModal("wallet-create");
+			this.appMain.createModal('wallet-create');
 		}
 	};
 

src/pages/index.ts

@@ -1,10 +1,10 @@
-export * from "./logout-page/LogoutPageElement";
+export * from './logout-page/LogoutPageElement';
-export * from "./home-page/HomePageElement";
+export * from './home-page/HomePageElement';
-export * from "./register-page/RegisterPageElement";
+export * from './register-page/RegisterPageElement';
-export * from "./login-page/LoginPageElement";
+export * from './login-page/LoginPageElement';
-export * from "./not-found/NotFoundElement";
+export * from './not-found/NotFoundElement';
-export * from "./history-page/HistoryPageElement";
+export * from './history-page/HistoryPageElement';
-export * from "./wallet-list/WalletListElement";
+export * from './wallet-list/WalletListElement';
-export * from "./wallet-create/WalletCreateElement";
+export * from './wallet-create/WalletCreateElement';
-export * from "./transaction-create/TransactionCreateElement";
+export * from './transaction-create/TransactionCreateElement';
-export * from "./wallet-page/WalletPageElement";
+export * from './wallet-page/WalletPageElement';

src/pages/login-page/LoginPageElement.ts

@@ -1,9 +1,10 @@
-import { targets, controller, target } from "@github/catalyst";
+import { targets, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+//import { html, TemplateResult } from "core/utils";
-import { AuthService } from "services/";
+import { html, render, TemplateResult } from 'core/utils';
-import { AppFormElement, InputFieldElement } from "components/";
+import { AuthService } from 'services/';
-import { RouterService } from "core/services";
+import { AppFormElement, InputFieldElement } from 'components/';
-import { BasePageElement } from "common/";
+import { RouterService } from 'core/services';
+import { BasePageElement } from 'common/';
 
 @controller
 class LoginPageElement extends BasePageElement {
@@ -12,7 +13,7 @@ class LoginPageElement extends BasePageElement {
 	authService: AuthService;
 	constructor() {
 		super({
-            title: "Login",
+			title: 'Login',
 		});
 	}
 	elementConnected = (): void => {
@@ -22,7 +23,7 @@ class LoginPageElement extends BasePageElement {
 
 	get emailInput(): InputFieldElement {
 		for (const i in this.inputs) {
-            if (this.inputs[i]?.name == "email") {
+			if (this.inputs[i]?.name == 'email') {
 				return this.inputs[i];
 			}
 		}
@@ -30,7 +31,7 @@ class LoginPageElement extends BasePageElement {
 
 	get passwordInput(): InputFieldElement {
 		for (const i in this.inputs) {
-            if (this.inputs[i]?.name == "password") {
+			if (this.inputs[i]?.name == 'password') {
 				return this.inputs[i];
 			}
 		}
@@ -50,22 +51,20 @@ class LoginPageElement extends BasePageElement {
 			if (!this.validate()) {
 				return;
 			}
-            const response = await this.appMain.authStore.userLogin(
+			const response = await this.appMain.authStore.userLogin(this.values);
-                this.values
-            );
 
 			if (response?.token) {
-                this.routerService.goTo("/");
+				this.routerService.goTo('/');
 			}
 		} catch (err) {
 			if (err?.errorCode == 400103) {
-                this.emailInput.error = err?.message;
+				this.emailInput.setError(err?.message);
 				this.emailInput.update();
 			} else if (err?.errorCode == 400104) {
-                this.passwordInput.error = err?.message;
+				this.passwordInput.setError(err?.message);
 				this.passwordInput.update();
 			} else {
-                this.appForm?.setError("Unable to log in!");
+				this.appForm?.setError('Unable to log in!');
 			}
 		}
 	};
@@ -81,16 +80,13 @@ class LoginPageElement extends BasePageElement {
 
 	render = (): TemplateResult => {
 		return html`
-            <app-form
+			<app-form data-custom="login-page#onSubmit" data-target="login-page.appForm">
-                data-custom="login-page#onSubmit"
-                data-target="login-page.appForm"
-            >
 				<input-field
 					data-type="email"
 					data-name="email"
 					data-label="E-mail"
 					data-targets="login-page.inputs"
-                    data-rules="required|isEmail"
+					data-rules="required|is_email"
 				></input-field>
 				<input-field
 					data-type="password"
@@ -102,10 +98,7 @@ class LoginPageElement extends BasePageElement {
 				</input-field>
 			</app-form>
 			<div>
-                <app-link
+				<app-link data-to="/register" data-title="Create new account"></app-link>
-                    data-to="/register"
-                    data-title="Create new account"
-                ></app-link>
 			</div>
 		`;
 	};

src/pages/logout-page/LogoutPageElement.ts

@@ -1,19 +1,19 @@
-import { controller } from "@github/catalyst";
+import { controller } from '@github/catalyst';
-import { AuthService } from "services/";
+import { AuthService } from 'services/';
-import { BasePageElement } from "common/";
+import { BasePageElement } from 'common/';
 
 @controller
 class LogoutPageElement extends BasePageElement {
 	authService: AuthService;
 	constructor() {
 		super({
-            title: "Logout",
+			title: 'Logout',
 		});
 	}
 	elementConnected = (): void => {
 		this.authService = new AuthService(this.appMain.appService);
 		this.appMain?.authStore?.userLogout();
-        this.appMain?.routerService.goTo("/login");
+		this.appMain?.routerService.goTo('/login');
 	};
 }
 

src/pages/not-found/NotFoundElement.ts

@@ -1,12 +1,12 @@
-import { controller } from "@github/catalyst";
+import { controller } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { BasePageElement } from "common/";
+import { BasePageElement } from 'common/';
 
 @controller
 class NotFoundElement extends BasePageElement {
 	constructor() {
 		super({
-            title: "404 - Not Found",
+			title: '404 - Not Found',
 		});
 	}
 	elementConnected = (): void => {

src/pages/register-page/RegisterPageElement.ts

@@ -1,16 +1,17 @@
-import { targets, controller } from "@github/catalyst";
+import { targets, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { AuthService } from "services/";
+import { AuthService } from 'services/';
-import { InputFieldElement } from "components/";
+import { AppFormElement, InputFieldElement } from 'components/';
-import { BasePageElement } from "common/";
+import { BasePageElement } from 'common/';
 
 @controller
 class RegisterPageElement extends BasePageElement {
 	@targets inputs: Array<InputFieldElement>;
+	@target appForm: AppFormElement;
 	authService: AuthService;
 	constructor() {
 		super({
-            title: "Register",
+			title: 'Register',
 		});
 	}
 	elementConnected = (): void => {
@@ -32,14 +33,22 @@ class RegisterPageElement extends BasePageElement {
 			if (!this.validate()) {
 				return;
 			}
-            const response = await this.appMain.authStore.userRegister(
+			const response = await this.appMain.authStore.userRegister(this.values);
-                this.values
-            );
 
 			if (response?.id) {
-                this.appMain.routerService.goTo("/login");
+				this.appMain.routerService.goTo('/login');
+			}
+		} catch (err) {
+			if (err?.errorCode == 400103) {
+				this.appForm?.getInput('email')?.setError(err?.message);
+				this.appForm?.getInput('email')?.update();
+			} else if (err?.errorCode == 400104) {
+				this.appForm?.getInput('password')?.setError(err?.message);
+				this.appForm?.getInput('password')?.update();
+			} else {
+				this.appForm?.setError('Unable to log in!');
+			}
 		}
-        } catch (err) {}
 	};
 
 	validate(): boolean {
@@ -53,10 +62,7 @@ class RegisterPageElement extends BasePageElement {
 
 	render = (): TemplateResult => {
 		return html`
-            <app-form
+			<app-form data-custom="register-page#onSubmit" data-has-cancel="true" data-target="register-page.appForm">
-                data-custom="register-page#onSubmit"
-                data-has-cancel="true"
-            >
 				<input-field
 					data-type="text"
 					data-name="username"
@@ -69,7 +75,7 @@ class RegisterPageElement extends BasePageElement {
 					data-name="email"
 					data-label="E-mail"
 					data-targets="register-page.inputs"
-                    data-rules="required|isEmail"
+					data-rules="required|is_email"
 				></input-field>
 				<input-field
 					data-type="password"
@@ -79,6 +85,13 @@ class RegisterPageElement extends BasePageElement {
 					data-rules="required"
 				>
 				</input-field>
+				<input-field
+					data-type="password"
+					data-name="confirmpassword"
+					data-label="Confirm Password"
+					data-targets="register-page.inputs"
+					data-rules="required|is_same[field(password)]"
+				>
 			</app-form>
 		`;
 	};

src/pages/transaction-create/TransactionCreateElement.ts

@@ -1,10 +1,10 @@
-import { targets, controller } from "@github/catalyst";
+import { targets, controller } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { AuthService, TransactionsService, WalletService } from "services/";
+import { AuthService, TransactionsService, WalletService } from 'services/';
-import { InputFieldElement } from "components/";
+import { InputFieldElement } from 'components/';
-import { RouterService } from "core/services";
+import { RouterService } from 'core/services';
-import { BasePageElement } from "common/";
+import { BasePageElement } from 'common/';
-import { AppDropdownElement } from "components/app-dropdown/AppDropdownElement";
+import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
 
 @controller
 class TransactionCreateElement extends BasePageElement {
@@ -15,21 +15,19 @@ class TransactionCreateElement extends BasePageElement {
 	errorMessage: string;
 	constructor() {
 		super({
-            title: "New Transaction",
+			title: 'New Transaction',
 		});
 	}
 	elementConnected = (): void => {
 		this.walletService = new WalletService(this.appMain?.appService);
-        this.transactionService = new TransactionsService(
+		this.transactionService = new TransactionsService(this.appMain?.appService);
-            this.appMain?.appService
-        );
 		this.authService = new AuthService(this.appMain.appService);
 		this.update();
 	};
 
 	get nameInput(): InputFieldElement | AppDropdownElement {
 		for (const i in this.inputs) {
-            if (this.inputs[i]?.name == "name") {
+			if (this.inputs[i]?.name == 'name') {
 				return this.inputs[i];
 			}
 		}
@@ -57,11 +55,7 @@ class TransactionCreateElement extends BasePageElement {
 				return;
 			}
 
-            const {
+			const { description: description, wallet: walletId, amount } = values;
-                description: description,
-                wallet: walletId,
-                amount,
-            } = values;
 
 			const response = await this.transactionService.post({
 				description,
@@ -71,12 +65,12 @@ class TransactionCreateElement extends BasePageElement {
 
 			if (response?.id) {
 				this.appMain.triggerWalletUpdate();
-                this.routerService.goTo("/history", {
+				this.routerService.goTo('/history', {
 					walletId: response.id,
 				});
 			}
 		} catch (err) {
-            this.errorMessage = "Unable to create transaction!";
+			this.errorMessage = 'Unable to create transaction!';
 			this.update();
 		}
 	};
@@ -93,10 +87,7 @@ class TransactionCreateElement extends BasePageElement {
 	render = (): TemplateResult => {
 		return html`
 			<div>Create wallet</div>
-            <app-form
+			<app-form data-custom="transaction-create#onSubmit" data-has-cancel="true">
-                data-custom="transaction-create#onSubmit"
-                data-has-cancel="true"
-            >
 				<input-field
 					data-type="number"
 					data-name="amount"
@@ -119,9 +110,7 @@ class TransactionCreateElement extends BasePageElement {
 					data-fetch="transaction-create#getWallets"
 				>
 				</app-dropdown>
-                ${this.errorMessage
+				${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
-                    ? html`<div>${this.errorMessage}</div>`
-                    : html``}
 			</app-form>
 		`;
 	};

src/pages/wallet-create/WalletCreateElement.ts

@@ -1,9 +1,9 @@
-import { targets, controller } from "@github/catalyst";
+import { targets, controller } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { AuthService, WalletService } from "services/";
+import { AuthService, WalletService } from 'services/';
-import { InputFieldElement } from "components/";
+import { InputFieldElement } from 'components/';
-import { RouterService } from "core/services";
+import { RouterService } from 'core/services';
-import { BasePageElement } from "common/";
+import { BasePageElement } from 'common/';
 
 @controller
 class WalletCreateElement extends BasePageElement {
@@ -13,7 +13,7 @@ class WalletCreateElement extends BasePageElement {
 	errorMessage: string;
 	constructor() {
 		super({
-            title: "New Wallet",
+			title: 'New Wallet',
 		});
 	}
 	elementConnected = (): void => {
@@ -24,7 +24,7 @@ class WalletCreateElement extends BasePageElement {
 
 	get nameInput(): InputFieldElement {
 		for (const i in this.inputs) {
-            if (this.inputs[i]?.name == "name") {
+			if (this.inputs[i]?.name == 'name') {
 				return this.inputs[i];
 			}
 		}
@@ -48,12 +48,12 @@ class WalletCreateElement extends BasePageElement {
 
 			if (response?.id) {
 				this.appMain.triggerWalletUpdate();
-                this.routerService.goTo("/wallet/:walletId", {
+				this.routerService.goTo('/wallet/:walletId', {
 					walletId: response.id,
 				});
 			}
 		} catch (err) {
-            this.errorMessage = "Unable to create wallet!";
+			this.errorMessage = 'Unable to create wallet!';
 			this.update();
 		}
 	};
@@ -70,10 +70,7 @@ class WalletCreateElement extends BasePageElement {
 	render = (): TemplateResult => {
 		return html`
 			<div>Create wallet</div>
-            <app-form
+			<app-form data-custom="wallet-create#onSubmit" data-has-cancel="true">
-                data-custom="wallet-create#onSubmit"
-                data-has-cancel="true"
-            >
 				<input-field
 					data-type="text"
 					data-name="name"
@@ -81,9 +78,7 @@ class WalletCreateElement extends BasePageElement {
 					data-targets="wallet-create.inputs"
 					data-rules="required"
 				></input-field>
-                ${this.errorMessage
+				${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
-                    ? html`<div>${this.errorMessage}</div>`
-                    : html``}
 			</app-form>
 		`;
 	};

src/pages/wallet-list/WalletListElement.ts

@@ -1,8 +1,8 @@
-import { targets, controller, target } from "@github/catalyst";
+import { targets, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { AuthService, WalletService } from "services/";
+import { AuthService, WalletService } from 'services/';
-import { AppPaginationElement, InputFieldElement } from "components/";
+import { AppPaginationElement, InputFieldElement } from 'components/';
-import { BasePageElement } from "common/";
+import { BasePageElement } from 'common/';
 
 @controller
 class WalletListElement extends BasePageElement {
@@ -13,7 +13,7 @@ class WalletListElement extends BasePageElement {
 	errorMessage: string;
 	constructor() {
 		super({
-            title: "Wallet List",
+			title: 'Wallet List',
 		});
 	}
 	elementConnected = (): void => {
@@ -40,9 +40,7 @@ class WalletListElement extends BasePageElement {
 	render = (): TemplateResult => {
 		return html`
 			<div>Wallets</div>
-            <app-pagination
+			<app-pagination data-target="wallet-list.pagination"></app-pagination>
-                data-target="wallet-list.pagination"
-            ></app-pagination>
 		`;
 	};
 }

src/pages/wallet-page/WalletPageElement.ts

@@ -1,12 +1,8 @@
-import { controller, target } from "@github/catalyst";
+import { controller, target } from '@github/catalyst';
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from 'core/utils';
-import { TransactionsService, WalletService } from "services/";
+import { TransactionsService, WalletService } from 'services/';
-import {
+import { AppMainElement, AppPaginationElement, WalletHeaderElement } from 'components/';
-    AppMainElement,
+import { BasePageElement } from 'common/';
-    AppPaginationElement,
-    WalletHeaderElement,
-} from "components/";
-import { BasePageElement } from "common/";
 
 @controller
 class WalletPageElement extends BasePageElement {
@@ -17,15 +13,13 @@ class WalletPageElement extends BasePageElement {
 	walletId: string;
 	constructor() {
 		super({
-            title: "Wallet",
+			title: 'Wallet',
 		});
 	}
 
 	elementConnected = (): void => {
 		this.walletService = new WalletService(this.appMain?.appService);
-        this.transactionsService = new TransactionsService(
+		this.transactionsService = new TransactionsService(this.appMain?.appService);
-            this.appMain?.appService
-        );
 		if (this?.routerService?.routerState?.data) {
 			const { walletId } = this?.routerService?.routerState?.data;
 			if (walletId) {
@@ -34,11 +28,11 @@ class WalletPageElement extends BasePageElement {
 		}
 		this.update();
 		this.pagination?.setFetchFunc?.(this.getTransactions, true)!;
-        this.appMain.addEventListener("tokenchange", this.update);
+		this.appMain.addEventListener('tokenchange', this.update);
 	};
 
 	elementDisconnected = (appMain: AppMainElement): void => {
-        appMain?.removeEventListener("tokenchange", this.update);
+		appMain?.removeEventListener('tokenchange', this.update);
 	};
 
 	getTransactions = async (options): Promise<any> => {
@@ -46,7 +40,7 @@ class WalletPageElement extends BasePageElement {
 			if (this?.routerService?.routerState?.data) {
 				const { walletId } = this?.routerService?.routerState?.data;
 				if (walletId) {
-                    options["walletId"] = walletId;
+					options['walletId'] = walletId;
 				}
 			}
 			const response = await this.transactionsService.getAll(options);
@@ -70,9 +64,9 @@ class WalletPageElement extends BasePageElement {
 	setBalance = (header) => {
 		if (!this.walletHeader) return;
 		this.walletHeader.currency = header.currency;
-        this.walletHeader.currentBalance = header.currentBalance || "0";
+		this.walletHeader.currentBalance = header.currentBalance || '0';
-        this.walletHeader.lastMonth = header.lastMonth || "0";
+		this.walletHeader.lastMonth = header.lastMonth || '0';
-        this.walletHeader.nextMonth = header.nextMonth || "0";
+		this.walletHeader.nextMonth = header.nextMonth || '0';
 	};
 
 	render = (): TemplateResult => {
@@ -87,17 +81,13 @@ class WalletPageElement extends BasePageElement {
 
 		const renderWallet = () => {
 			if (this.routerService?.routerState?.data?.walletId) {
-                return html`<span
+				return html`<span>${this.routerService?.routerState?.data?.walletId}</span>`;
-                    >${this.routerService?.routerState?.data?.walletId}</span
-                >`;
 			}
 			return html``;
 		};
 		return html`<div>
 			${renderHeader()} ${renderWallet()}
-            <app-pagination
+			<app-pagination data-target="wallet-page.pagination"></app-pagination>
-                data-target="wallet-page.pagination"
-            ></app-pagination>
 		</div>`;
 	};
 }

src/services/AuthService.ts

@@ -1,21 +1,17 @@
-import { AppService, BaseService } from "core/services";
+import { AppService, BaseService } from 'core/services';
 
 class PingService extends BaseService {
 	constructor(appService: AppService) {
-        super("/auth", appService);
+		super('/auth', appService);
 	}
 	login = (data?: Object, headers?: HeadersInit) => {
-        return this.appService.post(this.endpoint + "/login", data, headers);
+		return this.appService.post(this.endpoint + '/login', data, headers);
 	};
 	register = (data?: Object, headers?: HeadersInit) => {
-        return this.appService.post(this.endpoint + "/register", data, headers);
+		return this.appService.post(this.endpoint + '/register', data, headers);
 	};
 	checkToken = (params?: Object, headers?: HeadersInit) => {
-        return this.appService.get(
+		return this.appService.get(this.endpoint + '/check-token', params, headers);
-            this.endpoint + "/check-token",
-            params,
-            headers
-        );
 	};
 }
 

src/services/PingService.ts

@@ -1,8 +1,8 @@
-import { AppService, BaseService } from "core/services";
+import { AppService, BaseService } from 'core/services';
 
 class PingService extends BaseService {
 	constructor(appService: AppService) {
-        super("/wallet", appService);
+		super('/wallet', appService);
 	}
 }
 

src/services/TransactionsService.ts

@@ -1,8 +1,8 @@
-import { AppService, BaseService } from "core/services";
+import { AppService, BaseService } from 'core/services';
 
 class TransactionsService extends BaseService {
 	constructor(appService: AppService) {
-        super("/transaction", appService);
+		super('/transaction', appService);
 	}
 }
 

src/services/WalletService.ts

@@ -1,16 +1,12 @@
-import { AppService, BaseService } from "core/services";
+import { AppService, BaseService } from 'core/services';
 
 class WalletService extends BaseService {
 	constructor(appService: AppService) {
-        super("/wallet", appService);
+		super('/wallet', appService);
 	}
 
 	getBalance = (params?: Object, headers?: HeadersInit) => {
-        return this.appService.get(
+		return this.appService.get(this.endpoint + '/wallet-header', params, headers);
-            this.endpoint + "/wallet-header",
-            params,
-            headers
-        );
 	};
 }
 

src/services/index.ts

@@ -1,4 +1,4 @@
-export { default as PingService } from "./PingService";
+export { default as PingService } from './PingService';
-export { default as AuthService } from "./AuthService";
+export { default as AuthService } from './AuthService';
-export { default as WalletService } from "./WalletService";
+export { default as WalletService } from './WalletService';
-export { default as TransactionsService } from "./TransactionsService";
+export { default as TransactionsService } from './TransactionsService';

src/styles/app-dropdown/app-dropdown.scss

@@ -1,20 +1,20 @@
 .dropdown-custom {
 	text-align: center;
 	text-transform: capitalize;
+	position: relative;
 	div.dropdown-custom-top {
 		position: relative;
-        background-color: #ffffff;
+		background-color: $white;
-        border: 1px solid transparent;
+		color: $black;
-        color: #09090a;
 		border-radius: 2px;
 		cursor: pointer;
 		padding: 5px 0;
 		font-weight: 500;
 		font-size: 16px;
-        border: 1px solid #767676;
+		border: 1px solid $white;
-        border-radius: 3px;
+		border-radius: 5px;
 		&::after {
-            content: "";
+			content: '';
 			position: absolute;
 			right: 0;
 			margin-top: 8px;
@@ -26,12 +26,12 @@
 			border-top: 8px solid #2e2e2e;
 		}
 		&.--open {
-            border-bottom-right-radius: 0;
+			border-bottom-right-radius: 0 !important;
-            border-bottom-left-radius: 0;
+			border-bottom-left-radius: 0 !important;
 			border-bottom: transparent;
 			margin-bottom: 0 !important;
 			&::after {
-                content: "";
+				content: '';
 				position: absolute;
 				right: 0;
 				margin-top: 8px;
@@ -56,7 +56,7 @@
 	div.dropdown-custom-open {
 		border: 1px solid transparent;
 		position: absolute;
-        width: 100%;
+		width: calc(100% - 2 * 1px);
 		border-top: none;
 		margin-top: 0 !important;
 		background-color: #fbfafa;
@@ -65,13 +65,15 @@
 		font-size: 16px;
 		input.dropdown-custom-search {
 			position: relative;
+			box-sizing: border-box;
+			padding: 0;
 			width: calc(100% - 2 * 2px);
 			margin: 2px;
-            background-color: #fbfbfb;
+			background-color: $white;
-            border: 1px solid #9c9c9c;
+			border: 1px solid $white;
 			border-radius: 0.3em;
 			&:hover {
-                border: 1px solid #b6b6b6;
+				border: 1px solid $white;
 			}
 		}
 		ul.dropdown-custom-list {

src/styles/input-field/index.scss

@@ -0,0 +1 @@
+@import './input-field.scss';

src/styles/input-field/input-field.scss

@@ -0,0 +1,8 @@
+input-field {
+	input {
+		width: 100%;
+		box-sizing: border-box;
+		margin: 0;
+		padding: 0;
+	}
+}

src/styles/main.scss

@@ -1,11 +1,12 @@
-@import "./core/index.scss";
+@import './core/index.scss';
-@import "./menu-item/index.scss";
+@import './menu-item/index.scss';
-@import "./sidebar/index.scss";
+@import './sidebar/index.scss';
-@import "./modal/index.scss";
+@import './modal/index.scss';
-@import "./table/index.scss";
+@import './table/index.scss';
-@import "./app-loader/index.scss";
+@import './app-loader/index.scss';
-@import "./circle-loader/index.scss";
+@import './circle-loader/index.scss';
-@import "./page/index.scss";
+@import './page/index.scss';
-@import "./app-form/index.scss";
+@import './app-form/index.scss';
-@import "./layout/index.scss";
+@import './layout/index.scss';
-@import "./app-dropdown/index.scss";
+@import './app-dropdown/index.scss';
+@import './input-field/index.scss';

tsconfig.json

@@ -8,6 +8,8 @@
             "es2016"
         ],
         "moduleResolution": "node",
+        "jsx": "preserve",
+        "jsxFactory": "h",
         "resolveJsonModule": true,
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,

webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TerserPlugin = require("terser-webpack-plugin");
 const { DefinePlugin } = require('webpack');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 const alias = {
 	common: path.resolve(__dirname, '/common'),
@@ -52,7 +53,7 @@ module.exports = (env, args) => {
                 }
             },
             minimize: true,
-            minimizer: [new TerserPlugin()],
+            minimizer: [new TerserPlugin(), new UglifyJsPlugin()],
         },
         output: {
             path: path.join(__dirname, 'public'),
@@ -62,7 +63,7 @@ module.exports = (env, args) => {
         module: {
             rules: [
                 {
-                    test: /\.(js|ts)?$/,
+                    test: /\.(js|ts)x?$/,
                     exclude: /node_modules/,
                     use: {
                         loader: 'babel-loader'
@@ -106,7 +107,7 @@ module.exports = (env, args) => {
             }),
         ],
         resolve: {
-            extensions: ['.js', '.ts'],
+            extensions: ['.js', '.ts', '.jsx', '.tsx'],
             alias: alias
         },
         devServer: {