Internationnalisation de la page de login

Front/skydivelogs-app/src/app/app.module.ts

@@ -1,8 +1,10 @@
 import { BrowserModule } from "@angular/platform-browser";
 import { APP_INITIALIZER, NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
-import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
+import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
 import { DatePipe } from '@angular/common';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { AppComponent } from "./app.component";
 import { environment } from "../environments/environment";
@@ -59,8 +61,6 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
-import { CachingInterceptor } from "../interceptor/caching.interceptor";
-//import { BasicAuthInterceptor } from '../interceptor/basic-auth.interceptor';
 import { JwtAuthInterceptor } from "../interceptor/jwt-auth.interceptor";
 import { ErrorInterceptor } from "../interceptor/error.interceptor";
 import { UserProfileComponent } from "./user-profile/user-profile.component";
@@ -112,6 +112,11 @@ const appRoutes: Routes = [
   { path: "login", component: LoginComponent },
 ];
 
+// AOT compilation support
+export function httpTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
+
 // Déclaration de la fonction d'initialisation de la configuration
 export function initConfig(configService: ConfigurationHelper) {
   return () => configService.load(environment.env);
@@ -144,6 +149,13 @@ export function initConfig(configService: ConfigurationHelper) {
       appRoutes,
       { enableTracing: !environment.production, relativeLinkResolution: 'legacy' } // <-- debugging purposes only
     ),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: httpTranslateLoader,
+        deps: [HttpClient]
+      }
+    }),
     ReactiveFormsModule,
     FormsModule,
     BrowserModule,
@@ -187,7 +199,6 @@ export function initConfig(configService: ConfigurationHelper) {
     { provide: APP_INITIALIZER, useFactory: initConfig, deps: [ConfigurationHelper], multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: JwtAuthInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
-    // { provide: HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true }
   ],
   bootstrap: [AppComponent],
 })

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

@@ -1,53 +1,72 @@
 <form [formGroup]="createForm" (ngSubmit)="onCreateSubmit()" autocomplete="off" style="padding: 10px;">
   <p>
     <mat-form-field>
-      <mat-label>Firstname</mat-label>
+      <mat-label>{{ 'LoginCreateUser_Firstname' | translate }}</mat-label>
       <input matInput type="text" formControlName="firstname"
         [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-error *ngIf="formCtrls.firstname.hasError('required')">
+        {{ 'LoginCreateUser_FirstnameRequired' | translate }}
+      </mat-error>
+      <mat-error *ngIf="formCtrls.firstname.hasError('minlength')">
+        {{ 'LoginCreateUser_FirstnamePattern' | translate }}
+      </mat-error>
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <mat-label>Lastname</mat-label>
+      <mat-label>{{ 'LoginCreateUser_Lastname' | translate }}</mat-label>
       <input matInput type="text" formControlName="lastname"
         [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-error *ngIf="formCtrls.lastname.hasError('required')">
+        {{ 'LoginCreateUser_LastnameRequired' | translate }}
+      </mat-error>
+      <mat-error *ngIf="formCtrls.lastname.hasError('minlength')">
+        {{ 'LoginCreateUser_LastnamePattern' | translate }}
+      </mat-error>
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <mat-label>E-mail</mat-label>
+      <mat-label>{{ 'LoginCreateUser_Email' | translate }}</mat-label>
       <input matInput type="email" formControlName="email"
         [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-error *ngIf="formCtrls.email.hasError('required')">
+        {{ 'LoginCreateUser_EmailRequired' | translate }}
+      </mat-error>
+      <mat-error *ngIf="formCtrls.email.hasError('email')">
+        {{ 'LoginCreateUser_EmailPattern' | translate }}
+      </mat-error>
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <mat-label>Username</mat-label>
+      <mat-label>{{ 'LoginCreateUser_Username' | translate }}</mat-label>
       <input matInput type="text" formControlName="username"
         [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-error *ngIf="formCtrls.username.hasError('required')">
+        {{ 'LoginCreateUser_UsernameRequired' | translate }}
+      </mat-error>
+      <mat-error *ngIf="formCtrls.username.hasError('minlength')">
+        {{ 'LoginCreateUser_UsernamePattern' | translate }}
+      </mat-error>
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <mat-label>Password</mat-label>
+      <mat-label>{{ 'LoginCreateUser_Password' | translate }}</mat-label>
       <input matInput type="password" formControlName="password"
         [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>
+      <mat-error *ngIf="formCtrls.password.hasError('required')">
+        {{ 'LoginCreateUser_PasswordRequired' | translate }}
+      </mat-error>
+      <mat-error *ngIf="formCtrls.password.hasError('pattern')">        
+        {{ 'LoginCreateUser_PasswordPattern' | translate }}
+      </mat-error>
     </mat-form-field>
   </p>
 
   <button [disabled]="!createForm.valid" mat-raised-button color="accent">
-    Create user and login
+    {{ 'LoginCreateUser_BtnLogin' | translate }}
   </button>
   <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
 </form>

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

@@ -1,34 +1,34 @@
 <form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()" autocomplete="off" style="padding: 10px;">
   <p>
     <mat-form-field>
-      <mat-label>Username</mat-label>
+      <mat-label>{{ 'LoginUser_Username' | translate }}</mat-label>
       <input type="text" matInput #username="matInput" formControlName="username"
         [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }">
       <mat-error *ngIf="formCtrls.username.hasError('required')">
-        Username is required
+        {{ 'LoginUser_UsernameRequired' | translate }}
       </mat-error>
       <mat-error *ngIf="formCtrls.username.hasError('minlength')">
-        Username must have min 3 characters
+        {{ 'LoginUser_UsernamePattern | translate }}
       </mat-error>
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <mat-label>Password</mat-label>
+      <mat-label>{{ 'LoginUser_Password' | translate }}</mat-label>
       <input type="password" matInput formControlName="password"
         [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }">
       <mat-error *ngIf="formCtrls.password.hasError('required')">
-        Password is required
+        {{ 'LoginUser_PasswordRequired' | translate }}
       </mat-error>
       <mat-error *ngIf="formCtrls.password.hasError('pattern')">
-        The pattern of the password ([A-Za-z0-9_-] {{ '{' }}8,15{{ '}' }})
+        {{ 'LoginUser_PasswordPattern' | translate }}
       </mat-error>
     </mat-form-field>
   </p>
 
   <button [disabled]="loading" mat-raised-button color="accent">
     <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
-    Login
+    {{ 'LoginUser_BtnLogin' | translate }}
   </button>
 
   <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>

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

@@ -1,14 +1,28 @@
 <div class="content">
   <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-title>{{ 'Login_Title' | translate }}</mat-card-title>
+
+      <mat-select (selectionChange)="switchLang($event)" [(value)]="selectedLanguageFlag"
+                  style="width: 40px;" >
+        <mat-select-trigger>
+          <img src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}" style="width: 15px;">
+        </mat-select-trigger>
+        <mat-option value="fr" style="width: 50px;">
+          <img src="assets/img/fr.svg" style="width: 15px;">
+        </mat-option>
+        <mat-option value="en" style="width: 50px;">
+          <img src="assets/img/en.svg" style="width: 15px;">
+        </mat-option>
+      </mat-select>
     </mat-card-header>
+
     <mat-card-content>
       <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
-        <mat-tab label="Login with a user" tabIndex="-1">
+        <mat-tab label="{{ 'Login_Tab_WithUser' | translate }}" tabIndex="-1">
           <app-login-user></app-login-user>
         </mat-tab>
-        <mat-tab label="Create and login a user" tabIndex="-1">
+        <mat-tab label="{{ 'Login_Tab_CreateUser' | translate }}" tabIndex="-1">
           <app-create-user></app-create-user>
         </mat-tab>
       </mat-tab-group>

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from "@angular/core";
+import { TranslateService } from "@ngx-translate/core";
 
 @Component({
   selector: "app-login",
@@ -6,7 +7,19 @@ import { Component, OnInit } from "@angular/core";
   styleUrls: ["./login.component.css"]
 })
 export class LoginComponent implements OnInit {
-  constructor() {}
+  public selectedLanguageFlag: string;
+  private flag: Map<string, string>;
+
+  constructor(private translate: TranslateService) {
+    translate.addLangs(['en', 'fr']);
+    translate.setDefaultLang('en');
+    this.selectedLanguageFlag = "en";
+  }
 
   ngOnInit() {}
+
+  public switchLang(event: any) {
+    this.translate.use(event.value);
+    this.selectedLanguageFlag = event.value;
+  }
 }