Style du login

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