Angular frontend work

frontend/.node-version

+12.15.0

frontend/angular.json

@@ -28,6 +28,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -93,6 +94,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -124,6 +126,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "frontend"
 }
\ No newline at end of file

frontend/package.json

@@ -12,25 +12,29 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~8.2.14",
+    "@angular/cdk": "~8.2.3",
     "@angular/common": "~8.2.14",
     "@angular/compiler": "~8.2.14",
     "@angular/core": "~8.2.14",
     "@angular/forms": "~8.2.14",
+    "@angular/material": "^8.2.3",
     "@angular/platform-browser": "~8.2.14",
     "@angular/platform-browser-dynamic": "~8.2.14",
     "@angular/router": "~8.2.14",
+    "@ngx-pwa/local-storage": "^8.2.4",
+    "hammerjs": "^2.0.8",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.22",
+    "@angular-devkit/build-angular": "^0.803.23",
     "@angular/cli": "~8.3.22",
     "@angular/compiler-cli": "~8.2.14",
     "@angular/language-service": "~8.2.14",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

frontend/src/app/app-routing.module.ts

-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+import {LoginComponent} from "./login/login.component";
+import {DocumentManagerComponent} from "./document-manager/document-manager.component";
+import {AuthenticatedGuard} from "./authenticated.guard";
 
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: 'login',
+    component: LoginComponent
+  },
+  {
+    path: '',
+    component: DocumentManagerComponent,
+    canActivate: [AuthenticatedGuard],
+    children: []
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

frontend/src/app/app.module.ts

-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {LoginComponent} from './login/login.component';
+import {ReactiveFormsModule} from "@angular/forms";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatIconModule} from "@angular/material/icon";
+import {MatInputModule} from "@angular/material/input";
+import {MatButtonModule} from "@angular/material/button";
+import {HttpClientModule} from "@angular/common/http";
+import { StorageModule } from '@ngx-pwa/local-storage';
+import { DocumentManagerComponent } from './document-manager/document-manager.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    LoginComponent,
+    DocumentManagerComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatButtonModule,
+    HttpClientModule,
+    StorageModule.forRoot({ IDBNoWrap: true })
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

frontend/src/app/authenticated.guard.spec.ts

+import { TestBed, async, inject } from '@angular/core/testing';
+
+import { AuthenticatedGuard } from './authenticated.guard';
+
+describe('AuthenticatedGuard', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthenticatedGuard]
+    });
+  });
+
+  it('should ...', inject([AuthenticatedGuard], (guard: AuthenticatedGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+});

frontend/src/app/authenticated.guard.ts

+import { Injectable } from '@angular/core';
+import { CanActivate, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import {StorageMap} from "@ngx-pwa/local-storage";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthenticatedGuard implements CanActivate, CanActivateChild {
+
+  constructor(private readonly storageMap: StorageMap) {}
+
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    //Check to see if we have an auth token in storage, and if it's valid somehow?
+    return true;
+  }
+
+  canActivateChild(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return true;
+  }
+
+}

frontend/src/app/document-manager/document-manager.component.html

+<p>document-manager works!</p>

frontend/src/app/document-manager/document-manager.component.spec.ts

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

frontend/src/app/document-manager/document-manager.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-document-manager',
+  templateUrl: './document-manager.component.html',
+  styleUrls: ['./document-manager.component.scss']
+})
+export class DocumentManagerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

frontend/src/app/login/login.component.html

+<div class="logincontainer">
+  <div class="loginbox">
+    <form [formGroup]="loginForm" class="loginform"  (ngSubmit)="doLogin()">
+      <div>
+        <mat-form-field>
+          <input matInput placeholder="Username" formControlName="username">
+          <mat-error *ngIf="loginForm.controls.username.hasError('required')">
+            Username is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+      </div>
+      <div>
+        <mat-form-field>
+          <input matInput placeholder="Enter your password" [type]="hidePassword ? 'password' : 'text'" formControlName="password">
+
+          <mat-icon matSuffix (click)="hidePassword = !hidePassword">{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+        </mat-form-field>
+      </div>
+      <div class="buttonbox">
+        <button mat-raised-button color="primary" type="submit">Login</button>
+      </div>
+    </form>
+  </div>
+</div>

frontend/src/app/login/login.component.scss

+.logincontainer {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.loginbox {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.loginform {
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+
+  mat-form-field {
+    width: 100%;
+  }
+
+}
+
+.buttonbox {
+  display: flex;
+  justify-content: right;
+}

frontend/src/app/login/login.component.spec.ts

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

frontend/src/app/login/login.component.ts

+import {Component, OnInit} from '@angular/core';
+import {FormControl, FormGroup, Validators} from "@angular/forms";
+import {environment} from "../../environments/environment";
+import {LoginService} from "./login.service";
+import {map} from "rxjs/operators";
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+  hidePassword = true;
+
+  loginForm = new FormGroup({
+    username: new FormControl('', [Validators.required]),
+    password: new FormControl(''),
+  });
+
+  constructor(private readonly loginService: LoginService) {
+  }
+
+  ngOnInit() {
+  }
+
+  doLogin() {
+    console.log("would post to mayan to do the needful", environment.mayan);
+    this.loginService.getAuthToken(this.loginForm.controls.username.value, this.loginForm.controls.password.value)
+      .subscribe( meh => {
+        //when it's complete, we need to navigate to the other thing
+
+      })
+  }
+}

frontend/src/app/login/login.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { LoginService } from './login.service';
+
+describe('LoginService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: LoginService = TestBed.get(LoginService);
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/login/login.service.ts

+import {Injectable} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../environments/environment";
+import {EMPTY, Observable} from "rxjs";
+import {StorageMap} from "@ngx-pwa/local-storage";
+import {flatMap, map} from "rxjs/operators";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+
+  private AUTH_TOKEN = "authToken";
+
+  constructor(private readonly httpClient: HttpClient,
+              private readonly storageMap: StorageMap) {
+  }
+
+  getAuthToken(username: String, password: String): Observable<undefined> {
+    const request = {
+      username: username,
+      password: password
+    } as LoginRequest;
+    return this.httpClient.post<TokenResponse>(`${environment.mayan}/auth/token/obtain/`, request).pipe(
+      flatMap(response => {
+        return this.storageMap.set(this.AUTH_TOKEN, response.token);
+      })
+    );
+  }
+
+  validateToken(): Observable<Boolean> {
+    this.storageMap.get(this.AUTH_TOKEN).pipe(
+      flatMap(
+        //Make HTTP call to validate token
+      )
+    );
+    return EMPTY;
+  }
+
+}
+
+export interface LoginRequest {
+  username: String;
+  password: String;
+}
+
+export interface TokenResponse {
+  token: String;
+}

frontend/src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  mayan: 'http://10.10.220.119:8000/api'
 };
 
 /*