added form validators

src/common/core/BaseElement/BaseElement.ts

@@ -1,4 +1,4 @@
-import { html, render, TemplateResult } from 'lit-html';
+import { html, render, TemplateResult } from 'core/utils';
 import { AppLoaderElement, AppMainElement, AppModalElement, AppRootElement } from 'components/';
 import { AppService, RouterService } from 'core/services';
 import { AuthStore } from 'core/store';
@@ -71,7 +71,7 @@ class BaseElement extends HTMLElement {
 		});
 	};
 
-	render = (): TemplateResult | Temp => {
+	render = (): TemplateResult => {
 		return html``;
 	};
 

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 Validator } from './core/Validator/Validator';
+
 export * from './layouts';
 export * from './components';
 export * from './pages';

src/common/pages/BasePageElement/BasePageElement.ts

@@ -1,5 +1,5 @@
 import { attr } from '@github/catalyst';
-import { html, render } from 'lit-html';
+import { html, render } from 'core/utils';
 import { BaseElement } from 'common/';
 import { isTrue } from 'core/utils';
 

src/components/app-dropdown/AppDropdownElement.ts

@@ -1,10 +1,10 @@
 import { attr, controller, target } from '@github/catalyst';
-import { findMethod, firstUpper } from 'core/utils';
-import { html } from 'lit-html';
+import { closest, findMethod, firstUpper } from 'core/utils';
+import { html } from 'core/utils';
 import randomId from 'core/utils/random-id';
-import validator from 'validator';
 import { validatorErrors } from 'core/constants';
-import { BaseComponentElement } from 'common/';
+import { BaseComponentElement, Validator } 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;
+	@target dropdowncontainer: HTMLElement;
 	@attr displaykey: string = 'name';
 	@attr valuekey: string = 'id';
 	@attr fetch: string;
-	fetchFunc: any;
+	@closest appForm: AppFormElement;
 
-	error: boolean;
 	errorMessage: string;
 
 	searchPhrase: string;
@@ -32,10 +32,56 @@ 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;
 		try {
@@ -68,8 +114,6 @@ class AppDropdownElement extends BaseComponentElement {
 			return value == item[valuekey];
 		});
 
-		console.log(item, value, valuekey);
-
 		return item;
 	}
 
@@ -83,61 +127,16 @@ class AppDropdownElement extends BaseComponentElement {
 		return values;
 	}
 
-	public elementConnected = (): void => {
-		this.randId = `${name}${randomId()}`;
-		this.fetchFunc = findMethod(this.fetch, this.appMain);
-		this.update();
+	get fetchFunc() {
+		return findMethod(this.fetch, this.appMain);
+	}
 
-		const options = {
-			rpp: this.rpp,
-			page: this.page,
-		};
-		this.getItems(options);
+	setOpen = (isOpen) => {
+		this.isOpen = isOpen;
 	};
 
-	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) => {
@@ -146,24 +145,24 @@ 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');
-		this.value = value;
-		this.isOpen = false;
+		this.setOpen(false);
+		this.setValue(value);
+		this.appForm?.inputChange(e);
 	};
 
-	get _value() {
-		return this.value;
-	}
+	setValue = (value) => {
+		this.value = value;
+		this.update();
+	};
 
 	render = () => {
 		const { 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] == item[valuekey] ? '--selected' : ''}"
@@ -175,7 +174,7 @@ class AppDropdownElement extends BaseComponentElement {
 		};
 
 		const renderItems = (_items) => {
-			return _items.map((item) => renderItem(item));
+			return _items?.map((item) => renderItem(item));
 		};
 
 		return html`
@@ -183,12 +182,12 @@ class AppDropdownElement extends BaseComponentElement {
 				<label app-action="click:app-dropdown#openDropdown">
 					${label ? html`<div>${label}</div>` : html``}
 					<div class="dropdown-custom" app-action="click:app-dropdown#stopPropagation">
-						<div class="dropdown-custom-top" app-action="click:app-dropdown#toggleDropdown">
+						<div class="dropdown-custom-top${isOpen ? ' --open' : ''}" 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"

src/components/app-form/AppFormElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult, unsafeHTML } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
 import { InputFieldElement } from 'components/input-field/InputFieldElement';
@@ -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;
-		const submitFunc = findMethod(actionString, this.appMain);
-		submitFunc?.(this.values);
+		this.submitFunc?.(this.values);
 		return false;
 	};
 
 	public validate = () => {
-		this.isValid = true;
+		const validArr = [];
 		this.inputField?.forEach((input) => {
-			if (input?.error) {
-				this.isValid = false;
-			}
+			validArr.push(input?.validate());
 		});
+		this.appDropdown?.forEach((input) => {
+			validArr.push(input?.validate());
+		});
+		this.isValid = !validArr?.includes(false);
 	};
 
 	public setError = (error) => {
@@ -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) => {

src/components/app-link/AppLinkElement.ts

@@ -1,6 +1,6 @@
 import { attr, controller, target } from '@github/catalyst';
 import { isTrue } from 'core/utils';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { AppMainElement } from 'components/app-main/AppMainElement';
 import { RouterService } from 'core/services';
 import { BaseComponentElement } from 'common/';

src/components/app-loader/AppLoaderElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from '@github/catalyst';
-import { html } from 'lit-html';
+import { html } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 
 @controller

src/components/app-menu/AppMenuElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { AppMainElement } from 'components/app-main/AppMainElement';
 import { MenuItemElement } from 'components/menu-item/MenuItemElement';
@@ -78,7 +78,7 @@ class AppMenuElement extends BaseComponentElement {
 		}
 	};
 
-	modalTransaction = (): void => {
+	modalTransaction = (s): void => {
 		const _modal = this.appMain.appModal;
 		if (_modal) {
 			this.appMain.closeModal();

src/components/app-pagination/AppPaginationElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
 

src/components/circle-loader/CircleLoaderElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller } from '@github/catalyst';
-import { html } from 'lit-html';
+import { html } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 
 @controller

src/components/input-field/InputFieldElement.ts

@@ -1,12 +1,11 @@
 import { attr, controller, target } from '@github/catalyst';
 import { closest, firstUpper } from 'core/utils';
-import { html, TemplateResult } from 'lit-html';
-import { RouterService } from 'core/services';
+import { html, TemplateResult } from 'core/utils';
 import randomId from 'core/utils/random-id';
-import validator from 'validator';
 import { validatorErrors } from 'core/constants';
-import { BaseComponentElement } from 'common/';
+import { BaseComponentElement, Validator } from 'common/';
 import { AppFormElement } from 'components/app-form/AppFormElement';
+import { validator } from 'core/utils';
 
 @controller
 class InputFieldElement extends BaseComponentElement {
@@ -17,21 +16,33 @@ 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 {
-		return !!this.error;
+	setError = (error) => {
+		this.validator.error = error;
+	};
+
+	get error(): string {
+		return this.validator.error;
+	}
+
+	get isValid(): boolean {
+		return this.validator.valid;
 	}
 
 	get required(): boolean {
@@ -43,31 +54,7 @@ class InputFieldElement extends BaseComponentElement {
 	}
 
 	validate = (): boolean => {
-		let _return = true;
-		const rules = this.rules?.split('|').filter((a) => a);
-		const value = (this.inp as HTMLInputElement)?.value;
-		rules
-			.slice()
-			.reverse()
-			.forEach((rule) => {
-				let valid = true;
-				if (rule == 'required') {
-					if (value === '') valid = false;
-				} else {
-					if (validator.hasOwnProperty(rule)) {
-						valid = validator?.[rule]?.(value);
-					}
-				}
-				if (!valid) {
-					const error = validatorErrors[rule]?.replaceAll('{- name}', firstUpper(this.name?.toString()));
-					_return = false;
-					this.error = error;
-				}
-			});
-		if (_return) {
-			this.error = null;
-		}
-		return _return;
+		return this.validator.validate();
 	};
 
 	validateDisplay = () => {

src/components/menu-item/MenuItemElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { AppMainElement } from 'components/app-main/AppMainElement';
 import { BaseComponentElement } from 'common/';
 

src/components/wallet-header/WalletHeaderElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { BaseComponentElement } from 'common/';
 import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
 import { findMethod } from 'core/utils';
@@ -26,13 +26,14 @@ class WalletHeaderElement extends BaseComponentElement {
 		this.update();
 	}
 
-	executeFetch = async (options?): Promise<void> => {
-		const actionString = this.custom;
-		const submitFunc = findMethod(actionString, this.appMain);
+	get submitFunc() {
+		return findMethod(this.custom, 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?.();

src/core/store/AuthStore.ts

@@ -23,7 +23,6 @@ class AuthStore {
 	set token(token: string) {
 		const { _token } = this;
 		const _changed = token != _token;
-		console.log(token);
 		if (_changed) {
 			this._token = token;
 			localStorage.setItem('token', token);

src/core/utils/find-method.ts

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

src/core/utils/index.ts

@@ -1,3 +1,6 @@
+export * from './library';
+export * from './templating';
+
 export { default as toKebabCase } from './toKebabCase';
 export { default as update } from './update-deco';
 export { default as index } from './index-deco';
@@ -7,3 +10,4 @@ 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/library.ts

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

src/core/utils/templating.ts

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

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/layouts/initial-layout/InitialLayoutElement.ts

@@ -1,6 +1,6 @@
 import { controller, target } from '@github/catalyst';
 import { closest } from 'core/utils';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { BaseLayoutElement } from 'common/layouts';
 import { AppMainElement } from 'components/';
 

src/layouts/menu-layout/MenuLayoutElement.ts

@@ -1,6 +1,6 @@
 import { controller, target } from '@github/catalyst';
 import { closest } from 'core/utils';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { BaseLayoutElement } from 'common/layouts';
 import { AppMainElement } from 'components/';
 

src/pages/history-page/HistoryPageElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { TransactionsService } from 'services/';
 import { AppMainElement, AppPaginationElement } from 'components/';
 import { BasePageElement } from 'common/';

src/pages/home-page/HomePageElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from '@github/catalyst';
-import { html, TemplateResult, until } from 'lit-html';
+import { html, TemplateResult, until } from 'core/utils';
 import { WalletService } from 'services/';
 import { AppMainElement, WalletHeaderElement } from 'components/';
 import { BasePageElement } from 'common/';

src/pages/login-page/LoginPageElement.ts

@@ -1,6 +1,6 @@
 import { targets, controller, target } from '@github/catalyst';
-//import { html, TemplateResult } from "lit-html";
-import { html, render, TemplateResult } from 'lit-html';
+//import { html, TemplateResult } from "core/utils";
+import { html, render, TemplateResult } from 'core/utils';
 import { AuthService } from 'services/';
 import { AppFormElement, InputFieldElement } from 'components/';
 import { RouterService } from 'core/services';
@@ -58,10 +58,10 @@ class LoginPageElement extends BasePageElement {
 			}
 		} 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!');
@@ -86,7 +86,7 @@ class LoginPageElement extends BasePageElement {
 					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"

src/pages/not-found/NotFoundElement.ts

@@ -1,5 +1,5 @@
 import { controller } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { BasePageElement } from 'common/';
 
 @controller

src/pages/register-page/RegisterPageElement.ts

@@ -1,12 +1,13 @@
-import { targets, controller } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { targets, controller, target } from '@github/catalyst';
+import { html, TemplateResult } from 'core/utils';
 import { AuthService } from 'services/';
-import { InputFieldElement } from 'components/';
+import { AppFormElement, InputFieldElement } from 'components/';
 import { BasePageElement } from 'common/';
 
 @controller
 class RegisterPageElement extends BasePageElement {
 	@targets inputs: Array<InputFieldElement>;
+	@target appForm: AppFormElement;
 	authService: AuthService;
 	constructor() {
 		super({
@@ -37,7 +38,17 @@ class RegisterPageElement extends BasePageElement {
 			if (response?.id) {
 				this.appMain.routerService.goTo('/login');
 			}
-		} catch (err) {}
+		} 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!');
+			}
+		}
 	};
 
 	validate(): boolean {
@@ -51,7 +62,7 @@ class RegisterPageElement extends BasePageElement {
 
 	render = (): TemplateResult => {
 		return html`
-			<app-form data-custom="register-page#onSubmit" data-has-cancel="true">
+			<app-form data-custom="register-page#onSubmit" data-has-cancel="true" data-target="register-page.appForm">
 				<input-field
 					data-type="text"
 					data-name="username"
@@ -64,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"
@@ -74,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,5 +1,5 @@
 import { targets, controller } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { AuthService, TransactionsService, WalletService } from 'services/';
 import { InputFieldElement } from 'components/';
 import { RouterService } from 'core/services';

src/pages/wallet-create/WalletCreateElement.ts

@@ -1,5 +1,5 @@
 import { targets, controller } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { AuthService, WalletService } from 'services/';
 import { InputFieldElement } from 'components/';
 import { RouterService } from 'core/services';

src/pages/wallet-list/WalletListElement.ts

@@ -1,5 +1,5 @@
 import { targets, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { AuthService, WalletService } from 'services/';
 import { AppPaginationElement, InputFieldElement } from 'components/';
 import { BasePageElement } from 'common/';

src/pages/wallet-page/WalletPageElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'core/utils';
 import { TransactionsService, WalletService } from 'services/';
 import { AppMainElement, AppPaginationElement, WalletHeaderElement } from 'components/';
 import { BasePageElement } from 'common/';

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

@@ -1,107 +1,109 @@
 .dropdown-custom {
-    text-align: center;
-    text-transform: capitalize;
-    div.dropdown-custom-top {
-        position: relative;
-        background-color: #ffffff;
-        border: 1px solid transparent;
-        color: #09090a;
-        border-radius: 2px;
-        cursor: pointer;
-        padding: 5px 0;
-        font-weight: 500;
-        font-size: 16px;
-        border: 1px solid #767676;
-        border-radius: 3px;
-        &::after {
-            content: "";
-            position: absolute;
-            right: 0;
-            margin-top: 8px;
-            margin-right: 4px;
-            width: 0;
-            height: 0;
-            border-left: 8px solid transparent;
-            border-right: 8px solid transparent;
-            border-top: 8px solid #2e2e2e;
-        }
-        &.--open {
-            border-bottom-right-radius: 0;
-            border-bottom-left-radius: 0;
-            border-bottom: transparent;
-            margin-bottom: 0 !important;
-            &::after {
-                content: "";
-                position: absolute;
-                right: 0;
-                margin-top: 8px;
-                margin-right: 4px;
-                width: 0;
-                height: 0;
-                border-left: 8px solid transparent;
-                border-right: 8px solid transparent;
-                border-bottom: 8px solid #2e2e2e;
-                border-top: none;
-            }
-        }
-        span.dropdown-custom-fieldname {
-            -webkit-touch-callout: none;
-            -webkit-user-select: none;
-            -khtml-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-    }
-    div.dropdown-custom-open {
-        border: 1px solid transparent;
-        position: absolute;
-        width: 100%;
-        border-top: none;
-        margin-top: 0 !important;
-        background-color: #fbfafa;
-        border-bottom-right-radius: 0.2em;
-        border-bottom-left-radius: 0.2em;
-        font-size: 16px;
-        input.dropdown-custom-search {
-            position: relative;
-            width: calc(100% - 2 * 2px);
-            margin: 2px;
-            background-color: #fbfbfb;
-            border: 1px solid #9c9c9c;
-            border-radius: 0.3em;
-            &:hover {
-                border: 1px solid #b6b6b6;
-            }
-        }
-        ul.dropdown-custom-list {
-            padding: 1px 0;
-            max-height: 100px;
-            overflow-y: scroll;
-            &::-webkit-scrollbar {
-                display: none;
-            }
-            -ms-overflow-style: none;
-            scrollbar-width: none;
-            li.dropdown-custom-listitem {
-                margin: 2px;
-                padding: 1px 0;
-                list-style-type: none;
-                color: #0e0d0d;
-                -webkit-touch-callout: none;
-                -webkit-user-select: none;
-                -khtml-user-select: none;
-                -moz-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
-                cursor: pointer;
-                &:hover {
-                    background-color: #c6d8ff;
-                }
-                &.--selected {
-                    background-color: #d8e4ff;
-                }
-            }
-        }
-    }
+	text-align: center;
+	text-transform: capitalize;
+	position: relative;
+	div.dropdown-custom-top {
+		position: relative;
+		background-color: $white;
+		color: $black;
+		border-radius: 2px;
+		cursor: pointer;
+		padding: 5px 0;
+		font-weight: 500;
+		font-size: 16px;
+		border: 1px solid $white;
+		border-radius: 5px;
+		&::after {
+			content: '';
+			position: absolute;
+			right: 0;
+			margin-top: 8px;
+			margin-right: 4px;
+			width: 0;
+			height: 0;
+			border-left: 8px solid transparent;
+			border-right: 8px solid transparent;
+			border-top: 8px solid #2e2e2e;
+		}
+		&.--open {
+			border-bottom-right-radius: 0 !important;
+			border-bottom-left-radius: 0 !important;
+			border-bottom: transparent;
+			margin-bottom: 0 !important;
+			&::after {
+				content: '';
+				position: absolute;
+				right: 0;
+				margin-top: 8px;
+				margin-right: 4px;
+				width: 0;
+				height: 0;
+				border-left: 8px solid transparent;
+				border-right: 8px solid transparent;
+				border-bottom: 8px solid #2e2e2e;
+				border-top: none;
+			}
+		}
+		span.dropdown-custom-fieldname {
+			-webkit-touch-callout: none;
+			-webkit-user-select: none;
+			-khtml-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+		}
+	}
+	div.dropdown-custom-open {
+		border: 1px solid transparent;
+		position: absolute;
+		width: calc(100% - 2 * 1px);
+		border-top: none;
+		margin-top: 0 !important;
+		background-color: #fbfafa;
+		border-bottom-right-radius: 0.2em;
+		border-bottom-left-radius: 0.2em;
+		font-size: 16px;
+		input.dropdown-custom-search {
+			position: relative;
+			box-sizing: border-box;
+			padding: 0;
+			width: calc(100% - 2 * 2px);
+			margin: 2px;
+			background-color: $white;
+			border: 1px solid $white;
+			border-radius: 0.3em;
+			&:hover {
+				border: 1px solid $white;
+			}
+		}
+		ul.dropdown-custom-list {
+			padding: 1px 0;
+			max-height: 100px;
+			overflow-y: scroll;
+			&::-webkit-scrollbar {
+				display: none;
+			}
+			-ms-overflow-style: none;
+			scrollbar-width: none;
+			li.dropdown-custom-listitem {
+				margin: 2px;
+				padding: 1px 0;
+				list-style-type: none;
+				color: #0e0d0d;
+				-webkit-touch-callout: none;
+				-webkit-user-select: none;
+				-khtml-user-select: none;
+				-moz-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
+				cursor: pointer;
+				&:hover {
+					background-color: #c6d8ff;
+				}
+				&.--selected {
+					background-color: #d8e4ff;
+				}
+			}
+		}
+	}
 }

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 "./menu-item/index.scss";
-@import "./sidebar/index.scss";
-@import "./modal/index.scss";
-@import "./table/index.scss";
-@import "./app-loader/index.scss";
-@import "./circle-loader/index.scss";
-@import "./page/index.scss";
-@import "./app-form/index.scss";
-@import "./layout/index.scss";
-@import "./app-dropdown/index.scss";
+@import './core/index.scss';
+@import './menu-item/index.scss';
+@import './sidebar/index.scss';
+@import './modal/index.scss';
+@import './table/index.scss';
+@import './app-loader/index.scss';
+@import './circle-loader/index.scss';
+@import './page/index.scss';
+@import './app-form/index.scss';
+@import './layout/index.scss';
+@import './app-dropdown/index.scss';
+@import './input-field/index.scss';