FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-02-06 06:08:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

remember me checkbox login form

Browse Source
This commit is contained in:
Fran Jurmanović
2021-07-12 22:26:32 +02:00
parent 836bbd47e2
commit ac13cdcc11
4 changed files with 44 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/input-field/InputFieldElement.ts
View File

@@ -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)} ${renderMessage(this.label)}${renderError(this.error)} ${renderInput(this.type)}
</div>`; </div>`;
}; };

2
src/components/menu-item/MenuItemElement.ts
View File

@@ -3,7 +3,7 @@ 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/';
import { deviceWidths } from 'core/constants'; import { deviceWidths } from 'core/constants';
import { MenuLayoutElement } from 'layouts'; import { MenuLayoutElement } from 'layouts/';
@controller @controller
class MenuItemElement extends BaseComponentElement { class MenuItemElement extends BaseComponentElement {

14
src/pages/login-page/LoginPageElement.ts
View File

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

40
src/styles/input-field/input-field.scss
View File

@@ -1,17 +1,29 @@
input-field { input-field {
label { .input-main {
cursor: pointer; label {
} cursor: pointer;
input { }
width: 100%; input {
box-sizing: border-box; width: 100%;
margin: 0; box-sizing: border-box;
padding: 5px 0 !important; margin: 0;
border: 1px solid $gray-03; padding: 5px 0 !important;
border-radius: 2px; border: 1px solid $gray-03;
} border-radius: 2px;
.input-error { }
color: $red-04; .input-error {
margin: 3px 0; color: $red-04;
margin: 3px 0;
}
&--checkbox {
label {
display: inline-block;
}
input {
margin-left: 12px !important;
display: inline-block !important;
width: auto !important;
}
}
} }
} }