i18n Internationalization

package.json

@@ -33,6 +33,8 @@
     "@capacitor/status-bar": "6.0.0",
     "@ionic/angular": "^8.0.0",
     "@ionic/storage-angular": "^4.0.0",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
     "ionicons": "^7.0.0",
     "js-md5": "^0.8.3",
     "ngx-scanner-qrcode": "^1.6.9",

src/app/app.component.ts

@@ -1,16 +1,18 @@
 import { Component } from '@angular/core';
 import { SwUpdate } from '@angular/service-worker';
 import { AlertController, Platform } from '@ionic/angular';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss'],
 })
 export class AppComponent {
-  constructor(platform: Platform, private alertController: AlertController, private updates: SwUpdate) {
+  constructor(platform: Platform, private alertController: AlertController, private updates: SwUpdate, private translate: TranslateService) {
     platform.ready().then(() => {
       this.subscribeToUpdates()
+      this.setupTranslate()
     }).finally(() => {
       this.hideSplashScreen()
     })
@@ -58,4 +60,15 @@ export class AppComponent {
       }
     }, 500);
   }
+
+  private async setupTranslate() {
+    this.translate.setDefaultLang('en')
+    const supportedLanguages = /en|pt/
+    // get the browser language
+    let browserLang = this.translate.getBrowserLang()
+    console.log("detected browser language: ", browserLang)
+    if (browserLang !== undefined && this.translate.getBrowserLang()?.match(supportedLanguages)) {
+      this.translate.use(browserLang)
+    }
+  }
 }

src/app/app.module.ts

@@ -13,8 +13,16 @@ import { environment } from 'src/environments/environment';
 import { NgxScannerQrcodeModule, LOAD_WASM } from 'ngx-scanner-qrcode';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { IonicStorageModule } from '@ionic/storage-angular';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient, provideHttpClient } from '@angular/common/http';
 
 LOAD_WASM().subscribe() // Preload NGXScanner WASM module
+
+// exported function for the translation loader to work with AoT
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
 @NgModule({
   declarations: [
     AppComponent
@@ -32,10 +40,19 @@ LOAD_WASM().subscribe() // Preload NGXScanner WASM module
     }),
     IonicStorageModule.forRoot({
       name: '_authleu'
+    }),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      },
+      defaultLanguage: 'en'
     })
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    provideHttpClient(),
     provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
     provideAuth(() => getAuth()), 
     provideFirestore(() =>  {

src/app/components/account-detail/account-detail.component.html

@@ -28,6 +28,6 @@
 
   </ng-container>
   <ng-template #selectAccountContainer>
-    <p>Selecione uma conta para iniciar...</p>
+    <p><ion-text color="medium">{{ "ACCOUNT_DETAIL.SELECT_ACCOUNT_HINT" | translate }}</ion-text></p>
   </ng-template>
 </div>

src/app/components/countdown-timer/countdown-timer.component.html

@@ -1 +1 @@
-<h2>{{timerLabel}}s</h2>
+<h2>{{timerLabel}}{{ "ACCOUNT_DETAIL.SECONDS_SHORT" | translate }}</h2>

src/app/home/home.module.ts

@@ -10,6 +10,7 @@ import { NgxScannerQrcodeModule } from 'ngx-scanner-qrcode';
 import { AccountListComponent } from '../components/account-list/account-list.component';
 import { AccountDetailComponent } from '../components/account-detail/account-detail.component';
 import { CountdownTimerComponent } from '../components/countdown-timer/countdown-timer.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 
 @NgModule({
@@ -21,6 +22,7 @@ import { CountdownTimerComponent } from '../components/countdown-timer/countdown
     HomePageRoutingModule,
     AccountFilterPipe,
     NgxScannerQrcodeModule,
+    TranslateModule.forChild()
   ],
   declarations: [HomePage, AccountListComponent, AccountDetailComponent, CountdownTimerComponent]
 })

src/app/home/home.page.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-searchbar [debounce]="250" (ionInput)="handleSearch($event)"></ion-searchbar>
+    <ion-searchbar placeholder="{{ 'SEARCH' | translate }}" [debounce]="250" (ionInput)="handleSearch($event)"></ion-searchbar>
     <ion-buttons slot="end">
       <ion-button (click)="showPopover($event)">
         <ion-icon slot="icon-only" name="settings-outline"></ion-icon>
@@ -11,36 +11,36 @@
             <ion-list class="ion-no-padding">
               <ion-item button detail="false" (click)="addAccountAction()">
                 <ion-icon slot="start" name="add-outline"></ion-icon>
-                <ion-label>Adicionar Conta</ion-label>
+                <ion-label>{{ "CONFIG_MENU.ADD_ACCOUNT" | translate }}</ion-label>
               </ion-item>
               <ion-item button id="dark-mode-trigger">
                 <ion-icon slot="start" name="invert-mode-outline"></ion-icon>
-                <ion-label>Modo</ion-label>
-                <ion-note slot="end">{{darkModeLabel}}</ion-note>
+                <ion-label> {{ "CONFIG_MENU.COLOR_MODE" | translate }} </ion-label>
+                <ion-note slot="end">{{ darkModeLabel | translate }}</ion-note>
               </ion-item>
               <ion-popover trigger="dark-mode-trigger" [dismissOnSelect]="true" side="end">
                 <ng-template>
                   <ion-content>
                     <ion-list>
                       <ion-item button detail="false" (click)="darkPaletteChange('light')">
                         <ion-icon slot="start" name="sunny-outline"></ion-icon>
-                        <ion-label>Claro</ion-label>
+                        <ion-label>{{ "CONFIG_MENU.COLOR_MODE_LIGHT" | translate }}</ion-label>
                       </ion-item>
                       <ion-item button detail="false" (click)="darkPaletteChange('dark')">
                         <ion-icon slot="start" name="moon-outline"></ion-icon>
-                        <ion-label>Escuro</ion-label>
+                        <ion-label>{{ "CONFIG_MENU.COLOR_MODE_DARK" | translate }}</ion-label>
                       </ion-item>
                       <ion-item button detail="false" (click)="darkPaletteChange('system')">
                         <ion-icon slot="start" name="contrast-outline"></ion-icon>
-                        <ion-label>Sistema</ion-label>
+                        <ion-label>{{ "CONFIG_MENU.COLOR_MODE_SYSTEM" | translate }}</ion-label>
                       </ion-item>
                     </ion-list>
                   </ion-content>
                 </ng-template>
               </ion-popover>
               <ion-item button detail="false" (click)="logout()">
                 <ion-icon slot="start" name="log-out-outline"></ion-icon>
-                <ion-label>Logout</ion-label>
+                <ion-label>{{ "CONFIG_MENU.LOGOUT" | translate }}</ion-label>
               </ion-item>
 
             </ion-list>
@@ -65,7 +65,7 @@
     <ng-template>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Adicionar conta</ion-title>
+          <ion-title>{{ "ADD_ACCOUNT_MODAL.TITLE" | translate }}</ion-title>
           <ion-buttons slot="end">
             <ion-button (click)="closeAddAccountModal()"><ion-icon slot="icon-only"
                 name="close-outline"></ion-icon></ion-button>
@@ -91,7 +91,7 @@
               <ion-col size="12">
                 <ion-button size="large" expand="block" (click)="isScanActive=false;manualInput=true">
                   <ion-icon slot="start" name="create-outline"></ion-icon>
-                  Input Manual
+                  {{ "ADD_ACCOUNT_MODAL.MANUAL_INPUT" | translate }}
                 </ion-button>
               </ion-col>
             </ion-row>
@@ -100,35 +100,35 @@
         <ng-template #manualForm>
           <ion-button size="large" expand="block" (click)="scanCode()">
             <ion-icon slot="start" name="qr-code-outline"></ion-icon>
-            Escanear QR Code
+            {{ "ADD_ACCOUNT_MODAL.SCAN_QR_CODE" | translate }}
           </ion-button>
           <form [formGroup]="validations_form" (ngSubmit)="createAccount(validations_form.value)">
             <ion-item>
-              <ion-input label="Label" labelPlacement="stacked" formControlName="label"
-                placeholder="ex.: Google:teste@gmail.com"></ion-input>
+              <ion-input label="{{ 'ADD_ACCOUNT_MODAL.LABEL' | translate }}" labelPlacement="stacked" formControlName="label"
+                placeholder="{{ 'ADD_ACCOUNT_MODAL.EXAMPLI_GRATIA_SHORT' | translate }} Google:teste@gmail.com"></ion-input>
             </ion-item>
             <ion-item>
-              <ion-input label="Chave-segredo" labelPlacement="stacked" formControlName="secret"
-                placeholder="ex.: QAPERTPEO123"></ion-input>
+              <ion-input label="{{ 'ADD_ACCOUNT_MODAL.SECRET_KEY' | translate }}" labelPlacement="stacked" formControlName="secret"
+                placeholder="{{ 'ADD_ACCOUNT_MODAL.EXAMPLI_GRATIA_SHORT' | translate }} QAPERTPEO123"></ion-input>
             </ion-item>
             <ion-item>
-              <ion-input label="Tamanho do token" labelPlacement="stacked" formControlName="tokenLength"
-                placeholder="ex.: 6"></ion-input>
+              <ion-input label="{{ 'ADD_ACCOUNT_MODAL.TOKEN_SIZE' | translate }}" labelPlacement="stacked" formControlName="tokenLength"
+                placeholder="{{ 'ADD_ACCOUNT_MODAL.EXAMPLI_GRATIA_SHORT' | translate }} 6"></ion-input>
             </ion-item>
             <ion-item>
-              <ion-input label="Intervalo de token (s)" labelPlacement="stacked" formControlName="interval"
-                placeholder="ex.: 30"></ion-input>
+              <ion-input label="{{ 'ADD_ACCOUNT_MODAL.TOKEN_INTERVAL' | translate }}" labelPlacement="stacked" formControlName="interval"
+                placeholder="{{ 'ADD_ACCOUNT_MODAL.EXAMPLI_GRATIA_SHORT' | translate }} 30"></ion-input>
             </ion-item>
             <ion-item>
-              <ion-label position="stacked">Logo</ion-label>
-              <ion-searchbar class="ion-padding-top" [debounce]="250" [value]="draftLogoSearchTxt"
+              <ion-label position="stacked">{{ "ADD_ACCOUNT_MODAL.LOGO" | translate }}</ion-label>
+              <ion-searchbar placeholder="{{ 'SEARCH' | translate }}" class="ion-padding-top" [debounce]="250" [value]="draftLogoSearchTxt"
                 (ionInput)="handleSearchLogo($event)"></ion-searchbar>
               <ion-grid class="full-row">
                 <ion-row class="full-row">
                   <ion-col size-xs="6" size-sm="4" size="4">
                     <ion-card class="logo-card" (click)="selectLogo('')" [ngClass]="{ 'selected-logo': !draftLogoURL }">
                       <ion-img class="ion-padding logo-img" [src]="'../../assets/icon/favicon.png'"></ion-img>
-                      <p>No Logo</p>
+                      <p>{{ "ADD_ACCOUNT_MODAL.NO_LOGO" | translate }}</p>
                     </ion-card>
                   </ion-col>
                   <ion-col size-xs="6" size-sm="4" *ngFor="let logoResult of searchLogoResults">
@@ -142,7 +142,7 @@
               <p *ngIf="searchLogoResults.length > 0">Logos provided by <a href="https://brandfetch.com">Brandfetch</a>
               </p>
             </ion-item>
-            <ion-button expand="block" [disabled]="!validations_form.valid" type="submit">Salvar conta</ion-button>
+            <ion-button expand="block" [disabled]="!validations_form.valid" type="submit">{{ "ADD_ACCOUNT_MODAL.SAVE" | translate }}</ion-button>
           </form>
         </ng-template>
       </ion-content>