feat: add translations

app/package.json

@@ -38,7 +38,10 @@
     "zone.js": "~0.13.0",
     "@capacitor/preferences": "^5.0.6",
     "@types/uuid": "^9.0.5",
-    "@capacitor/camera": "^5.0.7"
+    "@capacitor/camera": "^5.0.7",
+    "@capacitor/device": "^5.0.6",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.0.0",

app/src/app/app.component.ts

@@ -1,10 +1,19 @@
 import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { DeviceLanguageService } from './services/language/device-language.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss'],
 })
 export class AppComponent {
-  constructor() {}
+  constructor(
+    private translateService: TranslateService,
+    private deviceLanguageService: DeviceLanguageService,
+  ) {
+    this.deviceLanguageService.getLanguageCode().subscribe((languageCode) => {
+      this.translateService.use(languageCode);
+    });
+  }
 }

app/src/app/app.module.ts

@@ -6,8 +6,18 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import {
+  HTTP_INTERCEPTORS,
+  HttpClient,
+  HttpClientModule,
+} from '@angular/common/http';
 import { AuthInterceptor } from './interceptors/auth.interceptor';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
 
 @NgModule({
   declarations: [AppComponent],
@@ -16,6 +26,13 @@ import { AuthInterceptor } from './interceptors/auth.interceptor';
     IonicModule.forRoot(),
     AppRoutingModule,
     HttpClientModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: createTranslateLoader,
+        deps: [HttpClient],
+      },
+    }),
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

app/src/app/pages/forbidden/forbidden.module.ts

@@ -7,9 +7,16 @@ import { IonicModule } from '@ionic/angular';
 import { ForbiddenPageRoutingModule } from './forbidden-routing.module';
 
 import { ForbiddenPage } from './forbidden.page';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, IonicModule, ForbiddenPageRoutingModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ForbiddenPageRoutingModule,
+    TranslateModule,
+  ],
   declarations: [ForbiddenPage],
 })
 export class ForbiddenPageModule {}

app/src/app/pages/forbidden/forbidden.page.html

@@ -10,14 +10,11 @@
           alt="403 Forbidden"
           class="forbidden-img"
         ></ion-img>
-        <h1>Recurs no trobat</h1>
-        <p>
-          La pàgina que busques està prohibida per al teu rol. O bé ets un
-          trapella o és culpa nostra.
-        </p>
-        <ion-button expand="full" fill="solid" color="primary" routerLink="/"
-          >Ves a l'inici</ion-button
-        >
+        <h1>{{ 'FORBIDDEN_ERROR.HEADER' | translate }}</h1>
+        <p>{{ 'FORBIDDEN_ERROR.MESSAGE' | translate }}</p>
+        <ion-button expand="full" fill="solid" color="primary" routerLink="/">
+          {{ 'FORBIDDEN_ERROR.EXIT' | translate }}
+        </ion-button>
       </ion-col>
     </ion-row>
   </ion-grid>

app/src/app/pages/internal-error-page/internal-error-page.module.ts

@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
 import { InternalErrorPagePageRoutingModule } from './internal-error-page-routing.module';
 
 import { InternalErrorPagePage } from './internal-error-page.page';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
     InternalErrorPagePageRoutingModule,
+    TranslateModule,
   ],
   declarations: [InternalErrorPagePage],
 })

app/src/app/pages/internal-error-page/internal-error-page.page.html

@@ -10,17 +10,16 @@
           alt="500 - Internal Server Error"
           class="not-found-image"
         ></ion-img>
-        <h1>Error Intern</h1>
-        <p>
-          Disculpa, hi ha hagut un error intern. Torna a intentar-ho més tard.
-        </p>
+        <h1>{{ 'INTERNAL_ERROR.HEADER' | translate }}</h1>
+        <p>{{ 'INTERNAL_ERROR.MESSAGE' | translate }}</p>
         <ion-button
           expand="full"
           fill="solid"
           color="primary"
           routerLink="/refuges"
-          >Ves a la llista de refugis</ion-button
         >
+          {{ 'INTERNAL_ERROR.EXIT' | translate }}
+        </ion-button>
       </ion-col>
     </ion-row>
   </ion-grid>

app/src/app/pages/login/login.module.ts

@@ -7,9 +7,16 @@ import { IonicModule } from '@ionic/angular';
 import { LoginPageRoutingModule } from './login-routing.module';
 
 import { LoginPage } from './login.page';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, IonicModule, LoginPageRoutingModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    LoginPageRoutingModule,
+    TranslateModule,
+  ],
   declarations: [LoginPage],
 })
 export class LoginPageModule {}

app/src/app/pages/login/login.page.html

@@ -4,7 +4,7 @@
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
 
-    <ion-title>Login</ion-title>
+    <ion-title> {{'LOGIN.HEADER' | translate }} </ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -19,35 +19,35 @@
   <div class="login-form">
     <form #loginForm="ngForm" novalidate>
       <ion-input
-        label="Username"
+        label="{{'LOGIN.USERNAME.LABEL' | translate }}"
         labelPlacement="stacked"
         [clearInput]="true"
         placeholder="John Doe"
         fill="outline"
         [(ngModel)]="credentials.username"
         name="username"
-        errorText="Username is required"
+        errorText="{{'LOGIN.USERNAME.ERROR' | translate }}"
         required="true"
       >
       </ion-input>
 
       <ion-input
-        label="Password"
+        label="{{'LOGIN.PASSWORD.LABEL' | translate }}"
         labelPlacement="stacked"
         fill="outline"
         [(ngModel)]="credentials.password"
         name="password"
         type="password"
-        errorText="Password is required"
-        required="Password is required"
+        errorText="{{'LOGIN.PASSWORD.ERROR' | translate }}"
+        required="true"
       >
       </ion-input>
       <ion-note color="danger" *ngIf="hasError"> {{errorMessage}} </ion-note>
 
       <ion-row>
         <!--        <ion-col>-->
         <ion-button (click)="onLogin(loginForm)" type="submit" expand="block"
-          >Login
+          >{{'LOGIN.SUBMIT' | translate }}
         </ion-button>
         <!--        </ion-col>-->
       </ion-row>

app/src/app/pages/login/login.page.ts

@@ -12,6 +12,7 @@ import {
   AuthenticationErrors,
   ServerErrors,
 } from '../../schemas/auth/errors';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-login',
@@ -31,6 +32,7 @@ export class LoginPage implements OnInit {
     private authService: AuthService,
     private alertController: AlertController,
     private loadingController: LoadingController,
+    private translateService: TranslateService,
   ) {}
 
   ngOnInit() {}
@@ -70,13 +72,12 @@ export class LoginPage implements OnInit {
 
   private async handleClientError() {
     const alert = await this.alertController.create({
-      header: 'Alerta',
-      subHeader: 'El teu dispositiu està fallant',
-      message:
-        'Funciona la connexió a Internet? Potser és culpa nostra i el nostre servidor està caigut.',
+      header: this.translateService.instant('HOME.CLIENT_ERROR.HEADER'),
+      subHeader: this.translateService.instant('HOME.CLIENT_ERROR.SUBHEADER'),
+      message: this.translateService.instant('HOME.CLIENT_ERROR.MESSAGE'),
       buttons: [
         {
-          text: 'Tornar-ho a provar',
+          text: this.translateService.instant('HOME.CLIENT_ERROR.TRY_AGAIN'),
           handler: () => {
             this.router.navigate(['/login']).then();
           },
@@ -98,11 +99,15 @@ export class LoginPage implements OnInit {
       })
       .with(AdminErrors.INCORRECT_PASSWORD, () => {
         this.showErrorAndFinishLoadingAnimation(
-          'Contrasenya incorrecta',
+          this.translateService.instant(
+            'LOGIN.PASSWORD.ERROR_INCORRECT_PASSWORD',
+          ),
         ).then();
       })
       .with(AdminErrors.USER_NOT_FOUND, () => {
-        this.showErrorAndFinishLoadingAnimation("L'usuari no existeix").then();
+        this.showErrorAndFinishLoadingAnimation(
+          this.translateService.instant('LOGIN.USERNAME.ERROR_NOT_FOUND'),
+        ).then();
       })
       .exhaustive();
   }
@@ -125,7 +130,7 @@ export class LoginPage implements OnInit {
 
   private async startLoadingAnimation() {
     const loading = await this.loadingController.create({
-      message: 'Iniciant sessió...',
+      message: this.translateService.instant('LOGIN.LOADING'),
       translucent: true,
     });
     return await loading.present();

app/src/app/pages/not-found/not-found.module.ts

@@ -7,9 +7,16 @@ import { IonicModule } from '@ionic/angular';
 import { NotFoundPageRoutingModule } from './not-found-routing.module';
 
 import { NotFoundPage } from './not-found.page';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, IonicModule, NotFoundPageRoutingModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    NotFoundPageRoutingModule,
+    TranslateModule,
+  ],
   declarations: [NotFoundPage],
 })
 export class NotFoundPageModule {}

app/src/app/pages/not-found/not-found.page.html

@@ -10,14 +10,11 @@
           alt="404 Not Found"
           class="not-found-image"
         ></ion-img>
-        <h1>Recurs no trobat</h1>
-        <p>
-          La pàgina que busques no existeix. O bé estàs fent malifetes o és
-          culpa nostra.
-        </p>
-        <ion-button expand="full" fill="solid" color="primary" routerLink="/"
-          >Ves a l'inici</ion-button
-        >
+        <h1>{{'NOT_FOUND_ERROR.HEADER' | translate}}</h1>
+        <p>{{'NOT_FOUND_ERROR.MESSAGE' | translate}}</p>
+        <ion-button expand="full" fill="solid" color="primary" routerLink="/">
+          {{'NOT_FOUND_ERROR.EXIT' | translate}}
+        </ion-button>
       </ion-col>
     </ion-row>
   </ion-grid>