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

Front/skydivelogs-app/src/assets/i18n/en.json

@@ -0,0 +1,30 @@
+{
+    "Login_Title" : "Login to the Skydive log",
+    "Login_Tab_CreateUser" : "Create and login a user",
+    "Login_Tab_WithUser" : "Login with a user",
+
+    "LoginUser_BtnLogin" : "Login",
+    "LoginUser_PasswordPattern" : "The pattern of the password ([A-Za-z0-9_-] {{ '{' }}8,15{{ '}' }})",
+    "LoginUser_PasswordRequired" : "Password is required",
+    "LoginUser_Password" : "Password",
+    "LoginUser_Username" : "Username",
+    "LoginUser_UsernamePattern" : "Username must have min 3 characters",
+    "LoginUser_UsernameRequired" : "Username is required",
+
+    "LoginCreateUser_Firstname" : "Firstname",
+    "LoginCreateUser_FirstnameRequired" : "Firstname is required",
+    "LoginCreateUser_FirstnamePattern" : "Firstname must have min 3 characters",
+    "LoginCreateUser_Lastname" : "Lastname",
+    "LoginCreateUser_LastnameRequired" : "Lastname is required",
+    "LoginCreateUser_LastnamePattern" : "Lastname must have min 3 characters",
+    "LoginCreateUser_Email" : "E-mail",
+    "LoginCreateUser_EmailRequired" : "E-mail is required",
+    "LoginCreateUser_EmailPattern" : "It's not a e-mail",
+    "LoginCreateUser_Username" : "Username",
+    "LoginCreateUser_UsernameRequired" : "Username is required",
+    "LoginCreateUser_UsernamePattern" : "Username must have min 3 characters",
+    "LoginCreateUser_Password" : "Password",
+    "LoginCreateUser_PasswordRequired" : "Password is required",
+    "LoginCreateUser_PasswordPattern" : "The pattern of the password ([A-Za-z0-9_-|/]{{ '{' }}8,15{{ '}' }})",
+    "LoginCreateUser_BtnLogin" : "Create user and login"
+}

Front/skydivelogs-app/src/assets/i18n/fr.json

@@ -0,0 +1,30 @@
+{
+    "Login_Title" : "Connexion à Skydive log",
+    "Login_Tab_CreateUser" : "Créer et se connecter",
+    "Login_Tab_WithUser" : "Se connecter",
+
+    "LoginUser_BtnLogin" : "Connecter",
+    "LoginUser_PasswordPattern" : "Le mot de passe doit contenir lettres minuscule/majuscule et entre 8 et 15 caractères.",
+    "LoginUser_PasswordRequired" : "Le mot de passe est obligatoire",
+    "LoginUser_Password" : "Mot de passe",
+    "LoginUser_Username" : "Identifiant",
+    "LoginUser_UsernamePattern" : "L'identifiant doit être minimum de 3 caractères",
+    "LoginUser_UsernameRequired" : "L'identifiant est obligatoire",
+
+    "LoginCreateUser_Firstname" : "Prénom",
+    "LoginCreateUser_FirstnameRequired" : "Le prénom est obligatoire",
+    "LoginCreateUser_FirstnamePattern" : "Le prénom doit être minimum de 3 caractères",
+    "LoginCreateUser_Lastname" : "Nom",
+    "LoginCreateUser_LastnameRequired" : "Le nom est obligatoire",
+    "LoginCreateUser_LastnamePattern" : "Le nom doit être minimum de 3 caractères",
+    "LoginCreateUser_Email" : "E-mail",
+    "LoginCreateUser_EmailRequired" : "E-mail est obligatoire",
+    "LoginCreateUser_EmailPattern" : "Ceci n'est pas un adresse mail",
+    "LoginCreateUser_Username" : "Identifiant",
+    "LoginCreateUser_UsernameRequired" : "L'identifiant est obligatoire",
+    "LoginCreateUser_UsernamePattern" : "L'identifiant doit être minimum de 3 caractères",
+    "LoginCreateUser_Password" : "Mot de passe",
+    "LoginCreateUser_PasswordRequired" : "Le mot de passe est obligatoire",
+    "LoginCreateUser_PasswordPattern" : "Le mot de passe doit contenir lettres minuscule/majuscule et entre 8 et 15 caractères.",
+    "LoginCreateUser_BtnLogin" : "Créer et se connecter"
+}

Front/skydivelogs-app/src/assets/img/en.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><clipPath id="a"><path d="M0 0v30h60V0z"/></clipPath><clipPath id="b"><path d="M30 15h30v15zv15H0zH0V0zV0h30z"/></clipPath><g clip-path="url(#a)"><path d="M0 0v30h60V0z" fill="#012169"/><path d="M0 0l60 30m0-30L0 30" stroke="#fff" stroke-width="6"/><path d="M0 0l60 30m0-30L0 30" clip-path="url(#b)" stroke="#C8102E" stroke-width="4"/><path d="M30 0v30M0 15h60" stroke="#fff" stroke-width="10"/><path d="M30 0v30M0 15h60" stroke="#C8102E" stroke-width="6"/></g></svg>

Front/skydivelogs-app/src/assets/img/fr.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><path fill="#ED2939" d="M0 0h3v2H0z"/><path fill="#fff" d="M0 0h2v2H0z"/><path fill="#002395" d="M0 0h1v2H0z"/></svg>