Feat/UI instruments

src/app/utils/create-date-field.ts

@@ -0,0 +1,49 @@
+import {
+  IInputFieldAttributes,
+  InputFieldComponent,
+} from '@components/input-field-component';
+import { IInputAttributes } from '@components/input-component';
+import { ILabelAttriubutes } from '@components/label-component';
+import { Datepicker } from 'materialize-css';
+import birthdayLimitation from './validators/age-validator';
+import { IFormInputField } from './create-input-field';
+
+export default function createDateField(
+  label: string,
+  placeholder: string,
+  id: string
+) {
+  const fieldAttrs: IFormInputField = {
+    label,
+    id,
+    type: 'text',
+    placeholder,
+    customValidators: [birthdayLimitation],
+  };
+  const attrs: IInputFieldAttributes = {
+    customValidators: fieldAttrs.customValidators,
+  };
+  const inputAttrs: IInputAttributes = {
+    type: fieldAttrs.type,
+    placeholder: fieldAttrs.placeholder,
+    classList: 'datepicker',
+  };
+  const labelAttrs: ILabelAttriubutes = {
+    for: fieldAttrs.id,
+    content: fieldAttrs.label,
+  };
+  const inputField = new InputFieldComponent(attrs, labelAttrs, inputAttrs);
+
+  Datepicker.init(inputField.input.node, {
+    minDate: new Date('1900-01-01T00:00:00'),
+    maxDate: new Date(),
+    defaultDate: new Date('1984-11-01'),
+    yearRange: 100,
+    onClose: () => {
+      inputField.isValid();
+    },
+    format: 'yyyy-mm-dd',
+  });
+
+  return inputField;
+}

src/app/utils/create-email-field.ts

@@ -0,0 +1,19 @@
+import { IFormInputField, createInputField } from '@utils/create-input-field';
+import emailValidator from '@utils/validators/email-validator';
+
+export default function createEmailField(attrs?: IFormInputField) {
+  let defaultAttrs;
+  if (!attrs) {
+    defaultAttrs = {
+      label: 'E-mail',
+      id: 'email',
+      placeholder: 'example@mail.com',
+      type: 'text',
+      customValidators: [emailValidator],
+      required: true,
+    };
+  } else {
+    defaultAttrs = attrs;
+  }
+  return createInputField(defaultAttrs);
+}

src/app/utils/create-email-input.ts

@@ -0,0 +1,19 @@
+import { IFormInputField, createInputField } from '@utils/create-input-field';
+import emailValidator from '@utils/validators/email-validator';
+
+export default function createEmailField(attrs?: IFormInputField) {
+  let defaultAttrs: IFormInputField;
+  if (!attrs) {
+    defaultAttrs = {
+      label: 'E-mail',
+      id: 'email',
+      placeholder: 'example@mail.com',
+      type: 'text',
+      customValidators: [emailValidator],
+      required: true,
+    };
+  } else {
+    defaultAttrs = attrs;
+  }
+  return createInputField(defaultAttrs);
+}

src/app/utils/create-input-field.ts

@@ -13,6 +13,7 @@ export interface IFormInputField {
   type: string;
   customValidators: Array<IValidator>;
   disabled?: boolean;
+  required?: boolean;
 }
 
 export function createInputField(fieldAttrs: IFormInputField) {
@@ -23,6 +24,7 @@ export function createInputField(fieldAttrs: IFormInputField) {
     type: fieldAttrs.type,
     placeholder: fieldAttrs.placeholder,
     disabled: fieldAttrs.disabled,
+    required: fieldAttrs.required,
   };
   const labelAttrs: ILabelAttriubutes = {
     for: fieldAttrs.id,

src/app/utils/create-name-field.ts

@@ -0,0 +1,18 @@
+import { IFormInputField, createInputField } from './create-input-field';
+import atLeastOneCharacter from './validators/at-least-one-character-validator';
+import noSpecialCharacterOrNumber from './validators/no-special-characters-or-numbers-validator';
+
+export default function createNameField(
+  label: string,
+  id: string,
+  placeholder: string
+) {
+  const defaultAttrs: IFormInputField = {
+    label,
+    id,
+    type: 'text',
+    placeholder,
+    customValidators: [atLeastOneCharacter, noSpecialCharacterOrNumber],
+  };
+  return createInputField(defaultAttrs);
+}

src/app/utils/create-password-field.ts

@@ -0,0 +1,21 @@
+import { IFormInputField, createInputField } from './create-input-field';
+import {
+  passwordValidator,
+  specialCharValidator,
+} from './validators/password-validator';
+
+export default function createPasswordField(attrs?: IFormInputField) {
+  let defaultAttrs: IFormInputField;
+  if (attrs) {
+    defaultAttrs = attrs;
+  } else {
+    defaultAttrs = {
+      label: 'Password',
+      id: 'pass',
+      placeholder: 'Super secret password',
+      type: 'password',
+      customValidators: [passwordValidator, specialCharValidator],
+    };
+  }
+  return createInputField(defaultAttrs);
+}

src/app/views/login/login-page.ts

@@ -1,24 +1,15 @@
 import View from '@views/view';
 import { IAttributes } from '@components/base-component';
 import { FormComponent, IFormAttributes } from '@components/form-component';
-import {
-  IInputFieldAttributes,
-  InputFieldComponent,
-} from '@components/input-field-component';
-import { ILabelAttriubutes } from '@components/label-component';
-import { IInputAttributes } from '@components/input-component';
+import { InputFieldComponent } from '@components/input-field-component';
 import {
   ButtonComponent,
   IButtonAttributes,
 } from '@components/button-component';
 import login from '@services/login-authorization';
-import emailValidator from '@utils/validators/email-validator';
-import {
-  passwordValidator,
-  specialCharValidator,
-} from '@utils/validators/password-validator';
 import Router from '@utils/router';
 import { showErrorMessage, showSucessMessage } from '@utils/toast-messages';
+import createPasswordField from '@utils/create-password-field';
 
 export default class LoginView extends View {
   private form = new FormComponent({});
@@ -61,39 +52,12 @@ export default class LoginView extends View {
   }
 
   public addEmailField() {
-    const attrs: IInputFieldAttributes = {
-      customValidators: [emailValidator],
-    };
-    const labelAttrs: ILabelAttriubutes = {
-      content: 'Enter your email',
-      for: 'email',
-    };
-    const inputAttrs: IInputAttributes = {
-      placeholder: 'example@mail.com',
-      id: 'email',
-      type: 'email',
-      required: true,
-    };
-
-    this.emailField = new InputFieldComponent(attrs, labelAttrs, inputAttrs);
+    this.emailField = createEmailField();
     this.form.appendChild(this.emailField);
   }
 
   public addPasswordField() {
-    const attrs: IInputFieldAttributes = {
-      customValidators: [passwordValidator, specialCharValidator],
-    };
-    const labelAttrs: ILabelAttriubutes = {
-      content: 'Enter your password',
-      for: 'password',
-    };
-    const inputAttrs: IInputAttributes = {
-      placeholder: 'Super secret password',
-      id: 'password',
-      type: 'password',
-      required: true,
-    };
-    this.passwordField = new InputFieldComponent(attrs, labelAttrs, inputAttrs);
+    this.passwordField = createPasswordField();
     this.form.appendChild(this.passwordField);
 
     const toggleButtonAttrs: IButtonAttributes = {

src/app/views/registration/registration-page.ts

@@ -5,27 +5,16 @@ import {
   IButtonAttributes,
 } from '@components/button-component';
 import { FormComponent, IFormAttributes } from '@components/form-component';
-import { IInputAttributes } from '@components/input-component';
-import {
-  IInputFieldAttributes,
-  InputFieldComponent,
-} from '@components/input-field-component';
-import { ILabelAttriubutes } from '@components/label-component';
+import { InputFieldComponent } from '@components/input-field-component';
 import registration from '@services/customer-registration';
-import { IFormInputField, createInputField } from '@utils/create-input-field';
-import birthdayLimitation from '@utils/validators/age-validator';
-import atLeastOneCharacter from '@utils/validators/at-least-one-character-validator';
-import noSpecialCharacterOrNumber from '@utils/validators/no-special-characters-or-numbers-validator';
 import View from '@views/view';
-import { Datepicker } from 'materialize-css';
-import emailValidator from '@utils/validators/email-validator';
-import {
-  passwordValidator,
-  specialCharValidator,
-} from '@utils/validators/password-validator';
 import { CheckboxComponent } from '@components/checkbox-component';
 import Router from '@utils/router';
 import { showErrorMessage, showSucessMessage } from '@utils/toast-messages';
+import createEmailField from '@utils/create-email-field';
+import createPasswordField from '@utils/create-password-field';
+import createNameField from '@utils/create-name-field';
+import createDateField from '@utils/create-date-field';
 import FormSectionView from './form-section';
 import AddressSection from './address';
 import styles from './registration-page.module.scss';
@@ -87,18 +76,18 @@ export default class RegistrationView extends View {
 
   private addCredentials() {
     this.credentialsSection = new FormSectionView('Credentials');
-    this.addEmailInput();
-    this.addPasswordInput();
+    this.emailInput = createEmailField();
+    this.passwordInput = createPasswordField();
     this.credentialsSection.appendChild(this.emailInput);
     this.credentialsSection.appendChild(this.passwordInput);
     this.form.node.appendChild(this.credentialsSection.htmlElement);
   }
 
   private addPersonalInformation() {
     this.pesonalSection = new FormSectionView('Personal Information');
-    this.addFirstNameInput();
-    this.addSecondNameInput();
-    this.addBirthdateInput();
+    this.firstNameInput = createNameField('First name', 'first-name', 'John');
+    this.secondNameInput = createNameField('Second name', 'second-name', 'Doe');
+    this.birthdayInput = createDateField('Birthday', 'Birthday', 'birthday');
     this.pesonalSection.appendChild(this.firstNameInput);
     this.pesonalSection.appendChild(this.secondNameInput);
     this.pesonalSection.appendChild(this.birthdayInput);
@@ -129,84 +118,6 @@ export default class RegistrationView extends View {
     this.form.node.appendChild(this.billingAddressSection.htmlElement);
   }
 
-  private addEmailInput() {
-    const fieldAttrs: IFormInputField = {
-      label: 'E-mail',
-      id: 'email',
-      placeholder: 'Ivan@mail.com',
-      type: 'email',
-      customValidators: [emailValidator],
-    };
-    this.emailInput = createInputField(fieldAttrs);
-  }
-
-  private addPasswordInput() {
-    const fieldAttrs: IFormInputField = {
-      label: 'Password',
-      id: 'pass',
-      placeholder: 'Super secret password',
-      type: 'password',
-      customValidators: [passwordValidator, specialCharValidator],
-    };
-    this.passwordInput = createInputField(fieldAttrs);
-  }
-
-  private addFirstNameInput() {
-    const fieldAttrs: IFormInputField = {
-      label: 'First Name',
-      id: 'first-name',
-      type: 'text',
-      placeholder: 'John',
-      customValidators: [atLeastOneCharacter, noSpecialCharacterOrNumber],
-    };
-    this.firstNameInput = createInputField(fieldAttrs);
-  }
-
-  private addSecondNameInput() {
-    const fieldAttrs: IFormInputField = {
-      label: 'Second Name',
-      id: 'second-name',
-      type: 'text',
-      placeholder: 'Doe',
-      customValidators: [atLeastOneCharacter, noSpecialCharacterOrNumber],
-    };
-    this.secondNameInput = createInputField(fieldAttrs);
-  }
-
-  private addBirthdateInput() {
-    const fieldAttrs: IFormInputField = {
-      label: 'Birthdate',
-      id: 'birthdate',
-      type: 'text',
-      placeholder: 'Birthday',
-      customValidators: [birthdayLimitation],
-    };
-    const attrs: IInputFieldAttributes = {
-      customValidators: fieldAttrs.customValidators,
-    };
-    const inputAttrs: IInputAttributes = {
-      type: fieldAttrs.type,
-      placeholder: fieldAttrs.placeholder,
-      classList: 'datepicker',
-    };
-    const labelAttrs: ILabelAttriubutes = {
-      for: fieldAttrs.id,
-      content: fieldAttrs.label,
-    };
-
-    this.birthdayInput = new InputFieldComponent(attrs, labelAttrs, inputAttrs);
-    Datepicker.init(this.birthdayInput.input.node, {
-      minDate: new Date('1900-01-01T00:00:00'),
-      maxDate: new Date(),
-      defaultDate: new Date('1984-11-01'),
-      yearRange: 100,
-      onClose: () => {
-        this.birthdayInput.isValid();
-      },
-      format: 'yyyy-mm-dd',
-    });
-  }
-
   private addLoginRedirectButton() {
     const attrs: IButtonAttributes = {
       content: 'I already have an account',
@@ -263,6 +174,14 @@ export default class RegistrationView extends View {
       showErrorMessage('Form invalid');
       return;
     }
+    registration(
+      this.collectFormData(),
+      RegistrationView.sucessRegister,
+      showErrorMessage
+    );
+  }
+
+  private collectFormData() {
     const addresses = [];
     let defaultShipping;
     let defaultBilling;
@@ -297,11 +216,8 @@ export default class RegistrationView extends View {
       defaultShippingAddress: defaultShipping,
       defaultBillingAddress: defaultBilling,
     };
-    registration(
-      customerData,
-      RegistrationView.sucessRegister,
-      showErrorMessage
-    );
+
+    return customerData;
   }
 
   static toggleAddressSection(addressSection: AddressSection) {
@@ -315,8 +231,4 @@ export default class RegistrationView extends View {
     Router.navigateTo('#main');
     showSucessMessage(SUCSESS_MSG);
   }
-
-  public clearContent(): void {
-    document.body.removeChild(this.htmlElement);
-  }
 }