Initial commit for the Angular part. We are nowhere yet.

bookie/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);
+  }
+}

bookie/src/app/auth/auth.service.ts

@@ -0,0 +1,73 @@
+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 = '/v1/login';
+const logoutUrl = '/logout';
+const checkUrl = '/v1/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.log.handleError('AuthService','Set 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'))
+      );
+  }
+
+}

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

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

bookie/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>

bookie/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', { static: true }) 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);
+      }
+    );
+  }
+}

bookie/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)
+    );
+  }
+
+}