initial commit

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.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';
+
+@Component({
+  selector: 'app-form-control',
+  templateUrl: './form-control.component.html'
+})
+export class FormControlComponent {
+
+  @Input() errorMap;
+  @Input() class = '';
+  @ContentChild(FormControlName, {static: false}) fcn: FormControlName;
+  @ContentChild(FocusBlurDirective, {static: false}) focusBlur: FocusBlurDirective;
+
+  getError(): string {
+    const errors = this.fcn.control.errors;
+    let error = '';
+
+    Object
+      .keys(errors)
+      .some(errorKey => {
+        if (errors[errorKey]) {
+          error = this.errorMap
+            ? this.errorMap[errorKey]
+              ? this.errorMap[errorKey]
+              : CONFIG.errorMessages[errorKey]
+            : CONFIG.errorMessages[errorKey];
+
+          return true;
+        }
+      });
+
+    return error;
+  }
+
+  get control(): AbstractControl {
+    return this.fcn.control;
+  }
+
+  get isHighlighted(): boolean {
+    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

+export const CONFIG = {
+  errorMessages: {
+    required: 'This field is required',
+    email: 'Invalid email format',
+    website: 'Invalid website url',
+    minlength: 'Value is too short',
+    maxlength: 'Value is too long',
+    dateComparison: 'Invalid date'
+  }
+};
+
+
+export const SHOW_ERRORS = {
+  e400: false,
+  e401: false,
+  e500: false,
+  e404: false,
+  e422: false,
+  e403: false,
+};

directives/focus-blur.directive.ts

+import {Directive, HostListener} from '@angular/core';
+
+@Directive({
+  selector: '[appFocusBlur]'
+})
+export class FocusBlurDirective {
+
+  isFocused: boolean;
+
+  @HostListener('focus') onHostFocus(): void {
+    this.isFocused = true;
+  }
+
+  @HostListener('blur') onHostBlur(): void {
+    this.isFocused = false;
+  }
+
+}

pipes/truncate.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate'
+})
+export class TruncatePipe implements PipeTransform {
+
+  transform(value, length): string {
+    if (!value) {
+      return '';
+    }
+    if (value.length > length) {
+      value = value.substring(0, length - 3) + ' ...';
+    }
+    return value;
+  }
+
+}

services/http.service.ts

+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { map, share } from 'rxjs/operators';
+
+@Injectable()
+
+export class HttpService {
+
+  private accessTokken: string;
+  private headers;
+  private api;
+  private sendAuthMsg;
+  private logoutNotification = new Subject();
+
+  constructor(
+    private http: HttpClient,
+    private router: Router
+  ) {
+    this.sendAuthMsg = true;
+  }
+
+  setAPIURL(url) {
+    this.api = url;
+  }
+
+  setTokken(value) {
+    this.accessTokken = value;
+  }
+
+  getToken() {
+    return this.accessTokken;
+  }
+
+  getAPIURL() {
+    return this.api;
+  }
+
+  onLogout() {
+    return this.logoutNotification.asObservable();
+  }
+
+  createHeader(extraHeaders = {}) {
+    const headers = Object.assign({
+      'Content-Type': 'application/json',
+    }, extraHeaders);
+    if (extraHeaders['Content-Type'] === null) {
+      delete headers['Content-Type'];
+    }
+    if (this.accessTokken) {
+      headers[`Authorization`] = 'Bearer ' + this.accessTokken;
+    }
+    this.headers = new HttpHeaders(headers);
+  }
+
+  sendUnAuthorizedMessage(message) {
+    message = message || 'You need to login first.';
+    this.sendAuthMsg = false;
+    // this.toastr.error(message, null, {showCloseButton: true});
+    setTimeout(() => {
+      this.sendAuthMsg = true;
+    }, 5000);
+    this.logoutNotification.next('user_logout');
+  }
+
+  mapResponse(resp, returnHeaders = false) {
+    if (returnHeaders === false) {
+      return resp.body;
+    } else {
+      return {
+        body: resp.body,
+        headers: resp.headers
+      };
+    }
+  }
+
+  get(method, value = '', showErrors = {}, returnHeaders = false, absoluteUrl = false, extraHeaders = {}) {
+    this.createHeader(extraHeaders);
+    const url = (absoluteUrl ? '' : this.api) + method + value;
+
+    return this.http.get(url, {
+      headers: this.headers,
+      observe: 'response'
+    }).pipe(map(resp => this.mapResponse(resp, returnHeaders)));
+  }
+
+  post(method, value, showErrors = {}, returnHeaders = false, absoluteUrl = false, extraHeaders = {}) {
+    this.createHeader(extraHeaders);
+    const url = (absoluteUrl ? '' : this.api) + method;
+
+    return this.http.post(url, value, {
+      headers: this.headers,
+      observe: 'response'
+    }).pipe(map(resp => this.mapResponse(resp, returnHeaders)));
+  }
+
+  put(method, value, showErrors = {}, returnHeaders = false) {
+    this.createHeader();
+    const url = this.api + method;
+
+    return this.http.put(url, value, {
+      headers: this.headers,
+      observe: 'response'
+    }).pipe(map(resp => this.mapResponse(resp, returnHeaders)));
+  }
+
+  delete(method, value = '', showErrors = {}, returnHeaders = false) {
+    this.createHeader();
+    const url = this.api + method + value;
+
+    return this.http.delete(url, {
+      headers: this.headers,
+      observe: 'response'
+    }).pipe(map(resp => this.mapResponse(resp, returnHeaders)));
+  }
+}

services/utils.service.ts

+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)
+      .forEach(field => {
+        const control = formGroup.get(field);
+        if (control instanceof FormControl) {
+          control.markAsDirty({ onlySelf: true });
+        } else if (control instanceof FormGroup) {
+          this.validateAllFormFields(control);
+        } else if (control instanceof FormArray) {
+          control.controls.forEach(ctrl => {
+            if (ctrl instanceof FormControl) {
+              ctrl.markAsDirty({ onlySelf: true });
+            } else if (ctrl instanceof FormGroup) {
+              this.validateAllFormFields(ctrl);
+            }
+          });
+        }
+      });
+  }
+
+  handleHttpError(error: HttpErrorResponse): any {
+    switch (error.status) {
+      case 401:
+        if (SHOW_ERRORS.e401 !== false) {
+        }
+        break;
+      case 400:
+        if (SHOW_ERRORS.e400 !== false) {
+        }
+        break;
+      case 500:
+        if (SHOW_ERRORS.e500 !== false) {
+        }
+        break;
+      case 404:
+        if (SHOW_ERRORS.e404 !== false) {
+        }
+        break;
+      case 422:
+        if (SHOW_ERRORS.e422 !== false) {
+        }
+        break;
+      case 403:
+        if (SHOW_ERRORS.e403 !== false) {
+        }
+        break;
+    }
+  }
+}

validators/password.validator.ts

+import { FormControl, ValidatorFn } from '@angular/forms';
+
+export class ConfirmPasswordValidator {
+
+  static MatchPassword(comparisonValue = ''): ValidatorFn {
+    return (c: FormControl): { [key: string]: boolean } | null => {
+      const fieldValue = c.value;
+      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 { 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 { TruncatePipe } from './pipes/truncate.pipe';
+
+const PIPES = [
+  TruncatePipe
+];
+
+const COMPONENTS = [
+  FormControlComponent
+];
+
+const DIRECTIVES = [
+  FocusBlurDirective
+];
+
+const PROVIDERS = [
+  HttpService,
+  UtilsService
+];
+
+@NgModule({
+  declarations: [...COMPONENTS, ...DIRECTIVES, ...PIPES],
+  imports: [
+    CommonModule
+  ],
+  providers: PROVIDERS,
+  exports: [
+    ...COMPONENTS,
+    ...PIPES,
+    ...DIRECTIVES
+  ]
+})
+export class VqodeModule { }