Moved to Angular 6.0

----

Pending
* Table width for the points column in incentive
* Linting
* keyboard navigation where it was used earlier
* can remove the unused totals calculated serverside in productledger
* spinner and loading bars
* Activate Guard for Employee Function tabs
* Progress for Fingerprint uploads
* deleted reconcile and receipe features as they were not being used
* focus the right control on component load

overlord/src/app/auth/auth-guard.service.spec.ts

@@ -0,0 +1,15 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {AuthGuardService} from './auth-guard.service';
+
+describe('AuthGuardService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthGuardService]
+    });
+  });
+
+  it('should be created', inject([AuthGuardService], (service: AuthGuardService) => {
+    expect(service).toBeTruthy();
+  }));
+});

overlord/src/app/auth/auth-guard.service.ts

@@ -0,0 +1,41 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
+import {AuthService} from './auth.service';
+import {Observable} from 'rxjs/internal/Observable';
+import {map} from 'rxjs/operators';
+import {ToasterService} from '../core/toaster.service';
+import {User} from '../user/user';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+
+  constructor(private auth: AuthService, private router: Router, private toaster: ToasterService) {
+  }
+
+  static checkUser(permission: string, user: User, router: Router, state: RouterStateSnapshot, toaster: ToasterService): boolean {
+    if (!user.isAuthenticated) {
+      router.navigate(['login'], {queryParams: {returnUrl: state.url}});
+      toaster.show('Danger', 'User is not authenticated');
+      return false;
+    }
+    const hasPermission = permission === undefined || user.perms.indexOf(permission) !== -1;
+    if (!hasPermission) {
+      toaster.show('Danger', 'You do not have the permission to access this area.');
+    }
+    return hasPermission;
+  }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
+    if (this.auth.user === undefined) {
+      return this.auth.userObservable
+        .pipe(
+          map<User, boolean>((value: User) => AuthGuard.checkUser(
+            route.data['permission'], value, this.router, state, this.toaster
+          ))
+        );
+    }
+    return AuthGuard.checkUser(route.data['permission'], this.auth.user, this.router, state, this.toaster);
+  }
+}

overlord/src/app/auth/auth.service.spec.ts

@@ -0,0 +1,15 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {AuthService} from './auth.service';
+
+describe('AuthService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthService]
+    });
+  });
+
+  it('should be created', inject([AuthService], (service: AuthService) => {
+    expect(service).toBeTruthy();
+  }));
+});

overlord/src/app/auth/auth.service.ts

@@ -0,0 +1,72 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Observable} from 'rxjs/internal/Observable';
+import {catchError, tap} from 'rxjs/operators';
+import {Subject} from 'rxjs/internal/Subject';
+import {ErrorLoggerService} from '../core/error-logger.service';
+import {User} from '../user/user';
+
+
+const httpOptions = {
+  headers: new HttpHeaders({'Content-Type': 'application/json'})
+};
+
+const loginUrl = '/api/login';
+const logoutUrl = '/api/logout';
+const checkUrl = '/api/Auth';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  public userObservable = new Subject<User>();
+
+  constructor(private http: HttpClient, private log: ErrorLoggerService) {
+    this.check().subscribe();
+  }
+
+  private _user: User;
+
+  get user() {
+    return this._user;
+  }
+
+  set user(user: User) {
+    this._user = user;
+    this.userObservable.next(user);
+  }
+
+  login(name: string, password: string, otp?: string, clientName?: string): Observable<any> {
+    const data = {name: name, password: password};
+    if (otp) {
+      data['otp'] = otp;
+    }
+
+    if (clientName) {
+      data['clientName'] = clientName;
+    }
+
+    return this.http.post(loginUrl, data, httpOptions)
+      .pipe(
+        tap((user: User) => this.user = user),
+        catchError(this.log.handleError('AuthService', 'login'))
+      );
+  }
+
+  logout(): Observable<any> {
+    return this.http.post(logoutUrl, {}, httpOptions)
+      .pipe(
+        tap((user: User) => this.user = user),
+        catchError(this.log.handleError('AuthService', 'logout'))
+      );
+  }
+
+  check(): Observable<any> {
+    return this.http.get(checkUrl, httpOptions)
+      .pipe(
+        tap((user: User) => this.user = user),
+        catchError(this.log.handleError('AuthService', 'check'))
+      );
+  }
+
+}

overlord/src/app/auth/login/login.component.css

@@ -0,0 +1,8 @@
+.example-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.example-container > * {
+  width: 100%;
+}

overlord/src/app/auth/login/login.component.html

@@ -0,0 +1,40 @@
+<mat-card>
+  <mat-card-title-group>
+    <mat-card-title>Login</mat-card-title>
+  </mat-card-title-group>
+  <mat-card-content>
+    <form [formGroup]="form" fxLayout="column">
+      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
+        <mat-form-field fxFlex>
+          <mat-label>Username</mat-label>
+          <input matInput #nameElement placeholder="Username" formControlName="username">
+        </mat-form-field>
+      </div>
+      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
+        <mat-form-field fxFlex>
+          <mat-label>Password</mat-label>
+          <input matInput placeholder="Password" formControlName="password" [type]="hide ? 'password' : 'text'"
+                 (keyup.enter)="login()">
+          <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
+        </mat-form-field>
+      </div>
+      <mat-divider></mat-divider>
+      <h2 *ngIf="showOtp">Client ID: {{clientID}}</h2>
+      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px" *ngIf="showOtp">
+        <mat-form-field fxFlex>
+          <mat-label>Otp</mat-label>
+          <input matInput placeholder="Otp" formControlName="otp">
+        </mat-form-field>
+      </div>
+      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px" *ngIf="showOtp">
+        <mat-form-field fxFlex>
+          <mat-label>Client Name</mat-label>
+          <input matInput placeholder="Client Name" formControlName="clientName">
+        </mat-form-field>
+      </div>
+    </form>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-raised-button (click)="login()" color="primary">Login</button>
+  </mat-card-actions>
+</mat-card>

overlord/src/app/auth/login/login.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {LoginComponent} from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LoginComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

overlord/src/app/auth/login/login.component.ts

@@ -0,0 +1,69 @@
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {AuthService} from '../auth.service';
+import {ActivatedRoute, Router} from '@angular/router';
+import {ToasterService} from '../../core/toaster.service';
+import {FormBuilder, FormGroup} from '@angular/forms';
+import {CookieService} from '../../shared/cookie.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit, AfterViewInit {
+  @ViewChild('nameElement') nameElement: ElementRef;
+  form: FormGroup;
+  hide: boolean;
+  showOtp: boolean;
+  clientID: string;
+  private returnUrl: string;
+
+  constructor(private route: ActivatedRoute,
+              private auth: AuthService,
+              private router: Router,
+              private toaster: ToasterService,
+              private cs: CookieService,
+              private fb: FormBuilder
+  ) {
+    this.hide = true;
+    this.showOtp = false;
+    this.createForm();
+  }
+
+  createForm() {
+    this.form = this.fb.group({
+      username: '',
+      password: '',
+      otp: '',
+      clientName: ''
+    });
+  }
+
+  ngOnInit() {
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.nameElement.nativeElement.focus();
+    }, 0);
+  }
+
+  login(): void {
+    const formModel = this.form.value;
+    const username = formModel.username;
+    const password = formModel.password;
+    this.auth.login(username, password).subscribe(
+      (result) => {
+        this.router.navigateByUrl(this.returnUrl);
+      },
+      (error) => {
+            if (error.status === 403 && ['Unknown Client', 'OTP not supplied', 'OTP is wrong'].indexOf(error.error) !== -1) {
+                this.showOtp = true;
+                this.clientID = this.cs.getCookie('ClientID');
+            }
+        this.toaster.show('Danger', error.error);
+      }
+    );
+  }
+}

overlord/src/app/auth/logout/logout.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {LogoutComponent} from './logout.component';
+
+describe('LogoutComponent', () => {
+  let component: LogoutComponent;
+  let fixture: ComponentFixture<LogoutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LogoutComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

overlord/src/app/auth/logout/logout.component.ts

@@ -0,0 +1,25 @@
+import {Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {AuthService} from '../auth.service';
+import {ToasterService} from '../../core/toaster.service';
+
+@Component({
+  selector: 'app-logout',
+  template: ''
+})
+export class LogoutComponent implements OnInit {
+
+  constructor(private auth: AuthService, private router: Router, private toaster: ToasterService) {
+  }
+
+  ngOnInit() {
+    this.auth.logout().subscribe(
+      (result) => {
+        this.toaster.show('Success', 'Logged Out');
+        this.router.navigateByUrl('/');
+      },
+      (error) => this.toaster.show('Danger', error.error)
+    );
+  }
+
+}