diff --git a/Front/skydivelogs-app/angular.json b/Front/skydivelogs-app/angular.json index bd61b17..ce07c6a 100644 --- a/Front/skydivelogs-app/angular.json +++ b/Front/skydivelogs-app/angular.json @@ -30,12 +30,10 @@ }, "configurations": { "production": { - "budgets": [ - { - "type": "anyComponentStyle", - "maximumWarning": "6kb" - } - ], + "budgets": [{ + "type": "anyComponentStyle", + "maximumWarning": "6kb" + }], "optimization": true, "outputHashing": "all", "sourceMap": false, diff --git a/Front/skydivelogs-app/src/app/app.component.html b/Front/skydivelogs-app/src/app/app.component.html index abe0d39..560c38d 100644 --- a/Front/skydivelogs-app/src/app/app.component.html +++ b/Front/skydivelogs-app/src/app/app.component.html @@ -1,5 +1,5 @@
-
+
diff --git a/Front/skydivelogs-app/src/app/app.component.ts b/Front/skydivelogs-app/src/app/app.component.ts index 194e3fa..5d7a4ed 100644 --- a/Front/skydivelogs-app/src/app/app.component.ts +++ b/Front/skydivelogs-app/src/app/app.component.ts @@ -1,16 +1,18 @@ -import { Component, OnInit } from '@angular/core'; -import { ServiceComm } from '../services/service-comm.service'; -import { Router } from '@angular/router'; -import { AuthenticationService } from '../services/authentication.service'; -import { User } from '../models/user'; +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; + +import { User } from "../models/user"; + +import { AuthenticationService } from "../services/authentication.service"; +import { ServiceComm } from "../services/service-comm.service"; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.css"] }) export class AppComponent implements OnInit { - title = 'app'; + title = "app"; showMenu = false; currentUser: User; @@ -19,7 +21,9 @@ export class AppComponent implements OnInit { private authenticationService: AuthenticationService, private serviceComm: ServiceComm ) { - this.authenticationService.currentUser.subscribe(x => this.currentUser = x); + this.authenticationService.currentUser.subscribe( + x => (this.currentUser = x) + ); } ngOnInit() { @@ -30,9 +34,13 @@ export class AppComponent implements OnInit { this.showMenu = !this.showMenu; } + show() { + return this.authenticationService.currentUserValue != undefined; + } + logout() { this.authenticationService.logout(); this.showMenu = !this.showMenu; - this.router.navigate(['/login']); + this.router.navigate(["/login"]); } } diff --git a/Front/skydivelogs-app/src/app/login/login.component.html b/Front/skydivelogs-app/src/app/login/login.component.html index bf55e88..6557907 100644 --- a/Front/skydivelogs-app/src/app/login/login.component.html +++ b/Front/skydivelogs-app/src/app/login/login.component.html @@ -1,26 +1,22 @@
-
- Username: test
- Password: test -
-

Angular 8 Basic Auth Login Example

+

Login to the Skydive log

-
+
-
-
Username is required
+ [ngClass]="{ 'is-invalid': submitted && loginCtrls.username.errors }" /> +
+
Username is required
-
-
Password is required
+ [ngClass]="{ 'is-invalid': submitted && loginCtrls.password.errors }" /> +
+
Password is required
{{error}}
+ +
+
+ + +
+
Username is required
+
+
+
+ + +
+
Password is required
+
+
+ +
{{error}}
+
diff --git a/Front/skydivelogs-app/src/app/login/login.component.ts b/Front/skydivelogs-app/src/app/login/login.component.ts index f92a831..5ac25b3 100644 --- a/Front/skydivelogs-app/src/app/login/login.component.ts +++ b/Front/skydivelogs-app/src/app/login/login.component.ts @@ -1,23 +1,23 @@ -import { Component, OnInit } from '@angular/core'; -import { Router, ActivatedRoute } from '@angular/router'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Component, OnInit } from "@angular/core"; +import { Router, ActivatedRoute } from "@angular/router"; +import { FormBuilder, FormGroup, Validators } from "@angular/forms"; -import { first } from 'rxjs/operators'; - -import { AuthenticationService } from '../../services/authentication.service'; +import { first } from "rxjs/operators"; +import { AuthenticationService } from "../../services/authentication.service"; @Component({ - selector: 'app-login', - templateUrl: './login.component.html', - styleUrls: ['./login.component.css'] + selector: "app-login", + templateUrl: "./login.component.html", + styleUrls: ["./login.component.css"] }) export class LoginComponent implements OnInit { loginForm: FormGroup; + createForm: FormGroup; loading = false; submitted = false; returnUrl: string; - error = ''; + error = ""; constructor( private formBuilder: FormBuilder, @@ -27,24 +27,33 @@ export class LoginComponent implements OnInit { ) { // redirect to home if already logged in if (this.authenticationService.currentUserValue) { - this.router.navigate(['/']); + this.router.navigate(["/"]); } } ngOnInit() { this.loginForm = this.formBuilder.group({ - username: ['', Validators.required], - password: ['', Validators.required] + username: ["", Validators.required], + password: ["", Validators.required] + }); + this.createForm = this.formBuilder.group({ + username: ["", Validators.required], + password: ["", Validators.required] }); // get return url from route parameters or default to '/' - this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/'; + this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/"; } - // convenience getter for easy access to form fields - get f() { return this.loginForm.controls; } + get loginCtrls() { + return this.loginForm.controls; + } - onSubmit() { + get createCtrls() { + return this.loginForm.controls; + } + + onLoginSubmit() { this.submitted = true; // stop here if form is invalid @@ -53,7 +62,8 @@ export class LoginComponent implements OnInit { } this.loading = true; - this.authenticationService.login(this.f.username.value, this.f.password.value) + this.authenticationService + .login(this.loginCtrls.username.value, this.loginCtrls.password.value) .pipe(first()) .subscribe( data => { @@ -62,6 +72,30 @@ export class LoginComponent implements OnInit { error => { this.error = error; this.loading = false; - }); + } + ); + } + + onCreateSubmit() { + this.submitted = true; + + // stop here if form is invalid + if (this.createForm.invalid) { + return; + } + + this.loading = true; + this.authenticationService + .login(this.createCtrls.username.value, this.createCtrls.password.value) + .pipe(first()) + .subscribe( + data => { + this.router.navigate([this.returnUrl]); + }, + error => { + this.error = error; + this.loading = false; + } + ); } } diff --git a/Front/skydivelogs-app/src/app/summary/summary.component.html b/Front/skydivelogs-app/src/app/summary/summary.component.html index 2565b6b..ee17df2 100644 --- a/Front/skydivelogs-app/src/app/summary/summary.component.html +++ b/Front/skydivelogs-app/src/app/summary/summary.component.html @@ -4,16 +4,16 @@
- + : {{ totalCutaways }}
- + : {{ lastJump }}
-
+