From 9c436ec0018995c634db4d8abb3acdb8f0cfe4f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= <sebastien.andre@arolla.fr>
Date: Mon, 6 Apr 2020 09:33:22 +0200
Subject: [PATCH] Style de la page de login

---
 .../create-user/create-user.component.html    | 10 +++---
 .../app/login-user/login-user.component.html  |  5 +--
 .../src/app/login/login.component.css         | 10 ++++++
 .../src/app/login/login.component.html        | 33 ++++++++++---------
 .../src/assets/css/custom-theme.scss          | 26 +++++++--------
 5 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/create-user/create-user.component.html b/Front/skydivelogs-app/src/app/create-user/create-user.component.html
index c91aee9..b48bb48 100644
--- a/Front/skydivelogs-app/src/app/create-user/create-user.component.html
+++ b/Front/skydivelogs-app/src/app/create-user/create-user.component.html
@@ -3,7 +3,7 @@
     <mat-form-field>
       <mat-label>Firstname</mat-label>
       <input matInput type="text" formControlName="firstname"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" />
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" tabindex="0" />
       <mat-error *ngIf="formCtrls.firstname.hasError('required')">Firstname is required</mat-error>
       <mat-error *ngIf="formCtrls.firstname.hasError('minlength')">Firstname must have min 3 characters</mat-error>
     </mat-form-field>
@@ -12,7 +12,7 @@
     <mat-form-field>
       <mat-label>Lastname</mat-label>
       <input matInput type="text" formControlName="lastname"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" />
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" tabindex="1" />
       <mat-error *ngIf="formCtrls.lastname.hasError('required')">Lastname is required</mat-error>
       <mat-error *ngIf="formCtrls.lastname.hasError('minlength')">Lastname must have min 3 characters</mat-error>
     </mat-form-field>
@@ -21,7 +21,7 @@
     <mat-form-field>
       <mat-label>E-mail</mat-label>
       <input matInput type="email" formControlName="email"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" />
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" tabindex="3" />
       <mat-error *ngIf="formCtrls.email.hasError('required')">E-mail is required</mat-error>
       <mat-error *ngIf="formCtrls.email.hasError('email')">It's not a e-mail</mat-error>
     </mat-form-field>
@@ -30,7 +30,7 @@
     <mat-form-field>
       <mat-label>Username</mat-label>
       <input matInput type="text" formControlName="username"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" />
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" tabindex="4" />
       <mat-error *ngIf="formCtrls.username.hasError('required')">Username is required</mat-error>
       <mat-error *ngIf="formCtrls.username.hasError('minlength')">Username must have min 3 characters</mat-error>
     </mat-form-field>
@@ -39,7 +39,7 @@
     <mat-form-field>
       <mat-label>Password</mat-label>
       <input matInput type="password" formControlName="password"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" />
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" tabindex="5" />
       <mat-error *ngIf="formCtrls.password.hasError('required')">Password is required</mat-error>
       <mat-error *ngIf="formCtrls.password.hasError('pattern')">The pattern of the password ([A-Za-z0-9_-]
         {{ '{' }}8,15{{ '}' }})</mat-error>
diff --git a/Front/skydivelogs-app/src/app/login-user/login-user.component.html b/Front/skydivelogs-app/src/app/login-user/login-user.component.html
index 143f0c3..3add5bb 100644
--- a/Front/skydivelogs-app/src/app/login-user/login-user.component.html
+++ b/Front/skydivelogs-app/src/app/login-user/login-user.component.html
@@ -2,7 +2,8 @@
   <p>
     <mat-form-field>
       <mat-label>Username</mat-label>
-      <input matInput formControlName="username" [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }">
+      <input matInput formControlName="username" [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }"
+        tabindex="0">
       <mat-error *ngIf="formCtrls.username.hasError('required')">
         Username is required
       </mat-error>
@@ -15,7 +16,7 @@
     <mat-form-field>
       <mat-label>Password</mat-label>
       <input type="password" matInput formControlName="password"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }">
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" tabindex="1">
       <mat-error *ngIf="formCtrls.password.hasError('required')">
         Password is required
       </mat-error>
diff --git a/Front/skydivelogs-app/src/app/login/login.component.css b/Front/skydivelogs-app/src/app/login/login.component.css
index e69de29..0bae421 100644
--- a/Front/skydivelogs-app/src/app/login/login.component.css
+++ b/Front/skydivelogs-app/src/app/login/login.component.css
@@ -0,0 +1,10 @@
+.main-div {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mat-card-title {
+  margin: 0 !important;
+}
diff --git a/Front/skydivelogs-app/src/app/login/login.component.html b/Front/skydivelogs-app/src/app/login/login.component.html
index 396f1ad..42b386c 100644
--- a/Front/skydivelogs-app/src/app/login/login.component.html
+++ b/Front/skydivelogs-app/src/app/login/login.component.html
@@ -1,16 +1,17 @@
-<mat-card style="max-width: 500px;">
-  <mat-card-header>
-    <mat-card-title>Login to the Skydive log</mat-card-title>
-  </mat-card-header>
-
-  <mat-card-content>
-    <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
-      <mat-tab label="Login with a user">
-        <app-login-user></app-login-user>
-      </mat-tab>
-      <mat-tab label="Create and login a user">
-        <app-create-user></app-create-user>
-      </mat-tab>
-    </mat-tab-group>
-  </mat-card-content>
-</mat-card>
+<div class="main-div">
+  <mat-card style="max-width: 500px;" flex="50">
+    <mat-card-header style="padding:10px; background-color: rgba(0,0,0,.03);">
+      <mat-card-title>Login to the Skydive log</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
+        <mat-tab label="Login with a user">
+          <app-login-user></app-login-user>
+        </mat-tab>
+        <mat-tab label="Create and login a user">
+          <app-create-user></app-create-user>
+        </mat-tab>
+      </mat-tab-group>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/Front/skydivelogs-app/src/assets/css/custom-theme.scss b/Front/skydivelogs-app/src/assets/css/custom-theme.scss
index e70e863..26a6550 100644
--- a/Front/skydivelogs-app/src/assets/css/custom-theme.scss
+++ b/Front/skydivelogs-app/src/assets/css/custom-theme.scss
@@ -10,19 +10,19 @@
 // Fonts
 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
 
-$fontConfig: (display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
-  display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
-  display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
-  display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
-  headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
-  title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
-  subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
-  subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
-  body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
-  body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
-  button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
-  caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
-  input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px));
+$fontConfig: (display-4: mat-typography-level(112px, 112px, 300, 'Roboto,Helvetica Neue,sans-serif', -0.0134em),
+  display-3: mat-typography-level(56px, 56px, 400, 'Roboto,Helvetica Neue,sans-serif', -0.0089em),
+  display-2: mat-typography-level(45px, 48px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
+  display-1: mat-typography-level(34px, 40px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0074em),
+  headline: mat-typography-level(24px, 32px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
+  title: mat-typography-level(20px, 32px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0075em),
+  subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0094em),
+  subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0067em),
+  body-2: mat-typography-level(14px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
+  body-1: mat-typography-level(14px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
+  button: mat-typography-level(14px, 14px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0893em),
+  caption: mat-typography-level(12px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0333em),
+  input: mat-typography-level(inherit, 1.125, 400, 'Roboto,Helvetica Neue,sans-serif', 1.5px));
 
 // Foreground Elements