Style du login

Front/skydivelogs-app/src/app/app.component.html

@@ -1,5 +1,5 @@
 <div>
-  <header>
+  <header *ngIf="this.show()">
     <svg (click)="toggleMenu()" class="hamburger__icon" viewBox="31.5 30 49.9 32">
       <rect id="Rectangle_9" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
         transform="translate(31.5 58)"></rect>

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"]);
   }
 }

Front/skydivelogs-app/src/app/login/login.component.html

@@ -1,26 +1,22 @@
 <div class="col-md-6 offset-md-3 mt-5">
-  <div class="alert alert-info">
-    Username: test<br />
-    Password: test
-  </div>
   <div class="card">
-    <h4 class="card-header">Angular 8 Basic Auth Login Example</h4>
+    <h4 class="card-header">Login to the Skydive log</h4>
     <div class="card-body">
-      <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+      <form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()">
         <div class="form-group">
           <label for="username">Username</label>
           <input type="text" formControlName="username" class="form-control"
-            [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
-          <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
-            <div *ngIf="f.username.errors.required">Username is required</div>
+            [ngClass]="{ 'is-invalid': submitted && loginCtrls.username.errors }" />
+          <div *ngIf="submitted && loginCtrls.username.errors" class="invalid-feedback">
+            <div *ngIf="loginCtrls.username.errors.required">Username is required</div>
           </div>
         </div>
         <div class="form-group">
           <label for="password">Password</label>
           <input type="password" formControlName="password" class="form-control"
-            [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
-          <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
-            <div *ngIf="f.password.errors.required">Password is required</div>
+            [ngClass]="{ 'is-invalid': submitted && loginCtrls.password.errors }" />
+          <div *ngIf="submitted && loginCtrls.password.errors" class="invalid-feedback">
+            <div *ngIf="loginCtrls.password.errors.required">Password is required</div>
           </div>
         </div>
         <button [disabled]="loading" class="btn btn-primary">
@@ -29,6 +25,30 @@
         </button>
         <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
       </form>
+
+      <form [formGroup]="createForm" (ngSubmit)="onCreateSubmit()">
+        <div class="form-group">
+          <label for="username">Username</label>
+          <input type="text" formControlName="username" class="form-control"
+            [ngClass]="{ 'is-invalid': submitted && createCtrls.username.errors }" />
+          <div *ngIf="submitted && createCtrls.username.errors" class="invalid-feedback">
+            <div *ngIf="createCtrls.username.errors.required">Username is required</div>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input type="password" formControlName="password" class="form-control"
+            [ngClass]="{ 'is-invalid': submitted && createCtrls.password.errors }" />
+          <div *ngIf="submitted && createCtrls.password.errors" class="invalid-feedback">
+            <div *ngIf="createCtrls.password.errors.required">Password is required</div>
+          </div>
+        </div>
+        <button [disabled]="loading" class="btn btn-primary">
+          <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
+          Create user and login
+        </button>
+        <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
+      </form>
     </div>
   </div>
 </div>

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

Front/skydivelogs-app/src/app/summary/summary.component.html

@@ -4,16 +4,16 @@
 </div>
 
 <div>
-  <label style="float: left; width: 130px;">Total cutaways</label>
+  <label style="clear: both; float: left; width: 130px;">Total cutaways</label>
   <span>: {{ totalCutaways }}</span>
 </div>
 
 <div>
-  <label style="float: left; width: 130px;">Last jump</label>
+  <label style="clear: both; float: left; width: 130px;">Last jump</label>
   <span>: {{ lastJump }}</span>
 </div>
 
-<div style="display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 15px;">
+<div style="clear: both; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 15px;">
   <label (click)="showStats(1)" [ngClass]="statsToShow(1) ? 'labelTab selected': 'labelTab'">Jumps in the last
     month</label>
   <label (click)="showStats(2)" [ngClass]="statsToShow(2) ? 'labelTab selected': 'labelTab'">Jumps in the last

Front/skydivelogs-app/src/assets/css/styles.css

@@ -1,3 +1,5 @@
+@import 'bootstrap-4.3.1.min.css';
+
 html,
 body {
   height: 100%;