Commit 9fad39be authored by David's avatar David
Browse files

Angular frontend work

parent 07c87aa7
......@@ -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
This diff is collapsed.
......@@ -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",
......
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 {
}
This diff is collapsed.
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 {
}
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();
}));
});
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;
}
}
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();
});
});
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() {
}
}
<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>
.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;
}
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();
});
});
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
})
}
}
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();
});
});
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;
}
......@@ -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'
};
/*
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment