Icon service added, pug & config file

components/form-control/form-control.component.html

-<div
-  [class]="'form-control-wrapper ' + class"
-  *ngIf="fcn"
-  [ngClass]="{
-  '-highlighted': isHighlighted,
-  '-err-tooltip': isShowErrorTooltip
-  }"
->
-  <ng-content></ng-content>
-  <div
-    class="form-control-wrapper__error"
-    *ngIf="isShowErrorTooltip"
-  >
-    {{ getError() }}
-  </div>
-</div>

components/form-control/form-control.component.pug

+div([class]="'form-control-wrapper ' + class", *ngIf='fcn', [ngClass]="{ 'has-error': isHighlighted }")
+  ng-content
+  span.error-msg(*ngIf='isHighlighted') {{ getError() }}

components/form-control/form-control.component.ts

 import { Component, ContentChild, Input } from '@angular/core';
-import { FocusBlurDirective } from '../../directives/focus-blur.directive';
 import { AbstractControl, FormControlName } from '@angular/forms';
 import { CONFIG } from '../../config';
+import { FocusBlurDirective } from '../../directives/focus-blur.directive';
 
 @Component({
   selector: 'app-form-control',
-  templateUrl: './form-control.component.html'
+  templateUrl: './form-control.component.pug'
 })
 export class FormControlComponent {
 
@@ -43,12 +43,4 @@ export class FormControlComponent {
     return this.control.invalid && (this.control.dirty || this.control.touched);
   }
 
-  get isShowErrorTooltip(): boolean {
-    if (!this.focusBlur) {
-      return;
-    }
-
-    return this.control.invalid && this.focusBlur.isFocused;
-  }
-
 }

config.ts

@@ -9,12 +9,11 @@ export const CONFIG = {
   }
 };
 
-
 export const SHOW_ERRORS = {
   e400: false,
   e401: false,
   e500: false,
   e404: false,
   e422: false,
-  e403: false,
+  e403: false
 };

directives/focus-blur.directive.ts

-import {Directive, HostListener} from '@angular/core';
+import { Directive, HostListener } from '@angular/core';
 
 @Directive({
   selector: '[appFocusBlur]'

directives/password.directive.ts

+import { Directive, ElementRef, OnInit } from '@angular/core';
+
+@Directive({
+  selector: '[appPassword]'
+})
+export class PasswordDirective implements OnInit {
+
+  private readonly element: HTMLInputElement;
+
+  constructor(
+    private elRef: ElementRef
+  ) {
+    this.element = elRef.nativeElement;
+  }
+
+  ngOnInit(): void {
+    const img = document.createElement('img');
+    img.classList.add('password-eye');
+    img.src = '/assets/svgs/eye.svg';
+    img.addEventListener('click', () => {
+      const type = this.element.getAttribute('type');
+      type === 'password' ?  this.element.setAttribute('type', 'text') : this.element.setAttribute('type', 'password');
+    });
+    setTimeout(() => {
+      this.element.parentElement.appendChild(img);
+      this.element.classList.add('password-field');
+    }, 0);
+  }
+
+}

pipes/truncate.pipe.ts

@@ -9,10 +9,12 @@ export class TruncatePipe implements PipeTransform {
     if (!value) {
       return '';
     }
+    let newValue = '';
     if (value.length > length) {
-      value = value.substring(0, length - 3) + ' ...';
+      newValue = `${value.substring(0, length - 3)} ...` ;
     }
-    return value;
+
+    return newValue;
   }
 
 }

services/http.service.ts

-import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
+/* tslint:disable */
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
 import { map, share } from 'rxjs/operators';
 
 @Injectable()
@@ -42,9 +43,8 @@ export class HttpService {
   }
 
   createHeader(extraHeaders = {}) {
-    const headers = Object.assign({
-      'Content-Type': 'application/json',
-    }, extraHeaders);
+    const headers = {
+      'Content-Type': 'application/json', ...extraHeaders};
     if (extraHeaders['Content-Type'] === null) {
       delete headers['Content-Type'];
     }

services/icons.service.ts

+import { Injectable } from '@angular/core';
+import { SvgIconRegistryService } from 'angular-svg-icon';
+import { forkJoin } from 'rxjs';
+import { retry } from 'rxjs/operators';
+import { ICONS } from '../../config/icon-list';
+
+@Injectable()
+export class IconsService {
+
+  icons  = ICONS;
+
+  constructor(
+    private iconReg: SvgIconRegistryService
+  ) {
+  }
+
+  async loadSvgIcons(): Promise<any> {
+    return new Promise<any>(resolve => {
+      forkJoin(this.icons.map(icon => this.iconReg.loadSvg(icon.url, icon.name).pipe(retry(3))))
+        .subscribe(() => {
+        resolve();
+      });
+    });
+  }
+}

services/utils.service.ts

+import { HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
-import { HttpErrorResponse } from '@angular/common/http';
 import { SHOW_ERRORS } from '../config';
 
 @Injectable()
 
 export class UtilsService {
 
-  constructor() { }
-
   validateAllFormFields(formGroup?: FormGroup): void {
     Object
       .keys(formGroup.controls)
@@ -33,29 +31,36 @@ export class UtilsService {
   handleHttpError(error: HttpErrorResponse): any {
     switch (error.status) {
       case 401:
-        if (SHOW_ERRORS.e401 !== false) {
+        if (SHOW_ERRORS.e401) {
+          console.log(`Error ${error.status}`);
         }
         break;
       case 400:
-        if (SHOW_ERRORS.e400 !== false) {
+        if (SHOW_ERRORS.e400) {
+          console.log(`Error ${error.status}`);
         }
         break;
       case 500:
-        if (SHOW_ERRORS.e500 !== false) {
+        if (SHOW_ERRORS.e500) {
+          console.log(`Error ${error.status}`);
         }
         break;
       case 404:
-        if (SHOW_ERRORS.e404 !== false) {
+        if (SHOW_ERRORS.e404) {
+          console.log(`Error ${error.status}`);
         }
         break;
       case 422:
-        if (SHOW_ERRORS.e422 !== false) {
+        if (SHOW_ERRORS.e422) {
+          console.log(`Error ${error.status}`);
         }
         break;
       case 403:
-        if (SHOW_ERRORS.e403 !== false) {
+        if (SHOW_ERRORS.e403) {
+          console.log(`Error ${error.status}`);
         }
         break;
+      default:
     }
   }
 }

validators/password.validator.ts

@@ -8,15 +8,16 @@ export class ConfirmPasswordValidator {
       if (!fieldValue || fieldValue !== comparisonValue) {
         return {notMatch: true};
       }
+
       return null;
     };
   }
 
-
   static ValidPassword(): ValidatorFn {
     return (c: FormControl): { [key: string]: boolean } | null => {
       const fieldValue = c.value;
       const isValid  = (fieldValue.length >= 8 && /[A-Z]/.test(fieldValue) && /[a-z]/.test(fieldValue) && /[0-9]/.test(fieldValue));
+
       return isValid ? null :  {invalidPassword: true};
     };
   }

vqode.module.ts

-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { AngularSvgIconModule } from 'angular-svg-icon';
 import { FormControlComponent } from './components/form-control/form-control.component';
-import {HttpService} from './services/http.service';
-import {UtilsService} from './services/utils.service';
-import {FocusBlurDirective} from './directives/focus-blur.directive';
+import { FocusBlurDirective } from './directives/focus-blur.directive';
+import { PasswordDirective } from './directives/password.directive';
 import { TruncatePipe } from './pipes/truncate.pipe';
+import { HttpService } from './services/http.service';
+import { IconsService } from './services/icons.service';
+import { UtilsService } from './services/utils.service';
 
 const PIPES = [
   TruncatePipe
@@ -15,21 +19,30 @@ const COMPONENTS = [
 ];
 
 const DIRECTIVES = [
-  FocusBlurDirective
+  FocusBlurDirective,
+  PasswordDirective
 ];
 
 const PROVIDERS = [
   HttpService,
-  UtilsService
+  UtilsService,
+  IconsService
+];
+
+const MODULES = [
+  AngularSvgIconModule,
+  HttpClientModule
 ];
 
 @NgModule({
   declarations: [...COMPONENTS, ...DIRECTIVES, ...PIPES],
   imports: [
-    CommonModule
+    CommonModule,
+    ...MODULES
   ],
   providers: PROVIDERS,
   exports: [
+    ...MODULES,
     ...COMPONENTS,
     ...PIPES,
     ...DIRECTIVES