Début de fix pour avoir la navigation au clavier dans le

formulaire de login

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

@@ -2,8 +2,8 @@
   <p>
     <mat-form-field>
       <mat-label>Username</mat-label>
-      <input matInput formControlName="username" [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }"
+      <input matInput #username="matInput" formControlName="username"
-        tabindex="0">
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }">
       <mat-error *ngIf="formCtrls.username.hasError('required')">
         Username is required
       </mat-error>
@@ -16,7 +16,7 @@
     <mat-form-field>
       <mat-label>Password</mat-label>
       <input type="password" matInput formControlName="password"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" tabindex="1">
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }">
       <mat-error *ngIf="formCtrls.password.hasError('required')">
         Password is required
       </mat-error>

Front/skydivelogs-app/src/app/login-user/login-user.component.ts

@@ -1,22 +1,24 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
-import { Router, ActivatedRoute } from "@angular/router";
+import { Router, ActivatedRoute } from '@angular/router';
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
 
-import { first } from "rxjs/operators";
+import { first } from 'rxjs/operators';
 
-import { AuthenticationService } from "../../services/authentication.service";
+import { AuthenticationService } from '../../services/authentication.service';
 
 @Component({
-  selector: "app-login-user",
+  selector: 'app-login-user',
-  templateUrl: "./login-user.component.html",
+  templateUrl: './login-user.component.html',
-  styleUrls: ["./login-user.component.css"]
+  styleUrls: ['./login-user.component.css']
 })
-export class LoginUserComponent implements OnInit {
+export class LoginUserComponent implements OnInit, AfterViewInit {
   loginForm: FormGroup;
   loading = false;
   submitted = false;
   returnUrl: string;
-  error = "";
+  error = '';
+  @ViewChild('username') userNameInput: MatInput;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -26,26 +28,31 @@ export class LoginUserComponent implements OnInit {
   ) {
     // redirect to home if already logged in
     if (this.authenticationService.currentUserValue) {
-      this.router.navigate(["/"]);
+      this.router.navigate(['/']);
     }
   }
 
+  ngAfterViewInit() {
+    this.userNameInput.focus();
+  }
+
   ngOnInit() {
     this.loginForm = this.formBuilder.group(
       {
-        username: ["", [Validators.required, Validators.minLength(3)]],
+        username: ['', [Validators.required, Validators.minLength(3)]],
         password: [
-          "",
+          '',
           [
             Validators.required /*, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")*/
           ]
         ]
       },
-      { updateOn: "blur" }
+      { updateOn: 'blur' }
     );
 
     // get return url from route parameters or default to '/'
-    this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+
   }
 
   get formCtrls() {

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

@@ -3,7 +3,7 @@
 html,
 body {
   min-height: 100vh;
-  width: 100vw;
+  /*width: 100vw;*/
   box-sizing: border-box;
   overflow: auto;
 }