remember me checkbox login form

src/components/input-field/InputFieldElement.ts

@@ -131,7 +131,10 @@ class InputFieldElement extends BaseComponentElement {
 			/>`;
 		};
 
-		return html`<div class="input-main" data-target="input-field.main">
+		return html`<div
+			class="input-main${this.type === 'checkbox' ? ' input-main--checkbox' : ''}"
+			data-target="input-field.main"
+		>
 			${renderMessage(this.label)}${renderError(this.error)} ${renderInput(this.type)}
 		</div>`;
 	};

src/components/menu-item/MenuItemElement.ts

@@ -3,7 +3,7 @@ import { html, TemplateResult } from 'core/utils';
 import { AppMainElement } from 'components/app-main/AppMainElement';
 import { BaseComponentElement } from 'common/';
 import { deviceWidths } from 'core/constants';
-import { MenuLayoutElement } from 'layouts';
+import { MenuLayoutElement } from 'layouts/';
 
 @controller
 class MenuItemElement extends BaseComponentElement {

src/pages/login-page/LoginPageElement.ts

@@ -41,7 +41,11 @@ class LoginPageElement extends BasePageElement {
 		const formObject: any = {};
 		this.inputs.forEach((input: InputFieldElement) => {
 			const inputType = input.inp;
+			if (input.type === 'checkbox') {
+				formObject[input.name] = (inputType as HTMLInputElement).checked;
+			} else {
 				formObject[input.name] = (inputType as HTMLInputElement).value;
+			}
 		});
 		return formObject;
 	}
@@ -93,6 +97,14 @@ class LoginPageElement extends BasePageElement {
 				data-targets="login-page.inputs"
 				data-rules="required"
 			>
+			</input-field>
+			<input-field
+				data-type="checkbox"
+				data-name="rememberMe"
+				data-label="Remember me"
+				data-targets="login-page.inputs"
+				data-rules=""
+			>
 			</input-field>`;
 	};
 

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

@@ -1,4 +1,5 @@
 input-field {
+	.input-main {
 		label {
 			cursor: pointer;
 		}
@@ -14,4 +15,15 @@ input-field {
 			color: $red-04;
 			margin: 3px 0;
 		}
+		&--checkbox {
+			label {
+				display: inline-block;
+			}
+			input {
+				margin-left: 12px !important;
+				display: inline-block !important;
+				width: auto !important;
+			}
+		}
+	}
 }