Style de la page de login

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>

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>

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

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>

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