docs: add translations to shared files

danieljancar · Jun 5, 2024 · 5bd48b6 · 5bd48b6
1 parent 313671d
commit 5bd48b6
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 103 deletions.
diff --git a/apps/course/src/app/guards/auth/auth.guard.ts b/apps/course/src/app/guards/auth/auth.guard.ts
@@ -7,6 +7,7 @@ import { map, switchMap, take, tap } from 'rxjs/operators';
 import { ToastService } from '../../core/feedback/toast.service';
 import { ToastType } from '../../types/feedback/toast.types';
 import { User } from '../../../../projects/types/src/lib/user.types';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable({
   providedIn: 'root',
@@ -17,6 +18,7 @@ export class AuthGuard implements CanActivate {
     private afs: AngularFirestore,
     private router: Router,
     private toastService: ToastService,
+    private t: TranslateService,
   ) {}
 
   canActivate(): Observable<boolean> | Promise<boolean> | boolean {
@@ -39,7 +41,7 @@ export class AuthGuard implements CanActivate {
                   return true;
                 } else {
                   this.toastService.showToast(
-                    'You must be a verified user to access this page.',
+                    this.t.instant('authGuard.must-be-verified-user'),
                     ToastType.Info,
                   );
                   return false;
@@ -48,7 +50,7 @@ export class AuthGuard implements CanActivate {
             );
         } else {
           this.toastService.showToast(
-            'You must be logged in to access this page.',
+            this.t.instant('authGuard.must-be-logged-in'),
             ToastType.Info,
           );
           return of(false);

diff --git a/apps/course/src/app/guards/auth/login.guard.ts b/apps/course/src/app/guards/auth/login.guard.ts
@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
 import { map, take, tap } from 'rxjs/operators';
 import { ToastService } from '../../core/feedback/toast.service';
 import { ToastType } from '../../types/feedback/toast.types';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable({
   providedIn: 'root',
@@ -14,6 +15,7 @@ export class LoginGuard implements CanActivate {
     private afa: AngularFireAuth,
     private router: Router,
     private toastService: ToastService,
+    private t: TranslateService,
   ) {}
 
   canActivate(): Observable<boolean> | Promise<boolean> | boolean {
@@ -23,7 +25,10 @@ export class LoginGuard implements CanActivate {
       tap((notLoggedIn) => {
         if (!notLoggedIn) {
           this.router.navigate(['/']).then(() => {
-            this.toastService.showToast('Not yet verified.', ToastType.Info);
+            this.toastService.showToast(
+              this.t.instant('loginGuard.not-verified'),
+              ToastType.Info,
+            );
           });
         }
       }),

diff --git a/apps/course/src/app/shared/navigation/footer/footer.component.html b/apps/course/src/app/shared/navigation/footer/footer.component.html
@@ -2,16 +2,16 @@
   class="footer footer-center px-10 py-20 bg-base-200 text-base-content rounded mt-20"
 >
   <nav class="grid grid-flow-col gap-4">
-    <a class="link link-hover" routerLink="/">Home</a>
-    <a class="link link-hover" routerLink="/c">Courses</a>
-    <a class="link link-hover" routerLink="/a/account">Account</a>
-    <a class="link link-hover" routerLink="/l/">Legal</a>
+    <a class="link link-hover" routerLink="/">{{ 'footer.home' | translate }}</a>
+    <a class="link link-hover" routerLink="/c">{{ 'footer.courses' | translate }}</a>
+    <a class="link link-hover" routerLink="/a/account">{{ 'footer.account' | translate }}</a>
+    <a class="link link-hover" routerLink="/l/">{{ 'footer.legal' | translate }}</a>
   </nav>
   <aside>
-    <p>Copyright © {{ currentYear }} - All rights reserved</p>
+    <p>{{ 'footer.copyright' | translate: { currentYear } }}</p>
     <p>
-      Made with ❤️ by
-      <a [href]="chorizoGithub" class="link link-hover">Chorizo</a>
+      {{ 'footer.made-with-love' | translate }}
+      <a [href]="chorizoGithub" class="link link-hover">{{ 'footer.chorizo' | translate }}</a>
     </p>
   </aside>
 </footer>
diff --git a/apps/course/src/app/shared/navigation/footer/footer.component.ts b/apps/course/src/app/shared/navigation/footer/footer.component.ts
@@ -1,15 +1,16 @@
 import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { AppComponent } from '../../../app.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-footer',
   standalone: true,
-  imports: [RouterLink],
+  imports: [RouterLink, TranslateModule],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
 })
 export class FooterComponent {
-  currentYear = new Date().getFullYear();
-  chorizoGithub = AppComponent.chorizo.links.github;
+  public readonly currentYear = new Date().getFullYear();
+  public readonly chorizoGithub = AppComponent.chorizo.links.github;
 }
diff --git a/apps/course/src/app/shared/navigation/navbar-course/navbar-course.component.html b/apps/course/src/app/shared/navigation/navbar-course/navbar-course.component.html
@@ -28,26 +28,26 @@
           tabindex="0"
         >
           <li (click)="closeDropdown()">
-            <a routerLink="/c/{{ course.id }}">Introduction</a>
+            <a routerLink="/c/{{ course.id }}">{{ 'course.navbar.introduction' | translate }}</a>
           </li>
           @if (course.settings?.showSections?.agenda) {
             <li (click)="closeDropdown()">
-              <a routerLink="/c/{{ course.id }}/agenda">Agenda</a>
+              <a routerLink="/c/{{ course.id }}/agenda">{{ 'course.navbar.agenda' | translate }}</a>
             </li>
           }
           @if (course.settings?.showSections?.tasks) {
             <li (click)="closeDropdown()">
-              <a routerLink="/c/{{ course.id }}/tasks">Tasks</a>
+              <a routerLink="/c/{{ course.id }}/tasks">{{ 'course.navbar.tasks' | translate }}</a>
             </li>
           }
           @if (course.settings?.showSections?.documentation) {
             <li (click)="closeDropdown()">
-              <a routerLink="/c/{{ course.id }}/documentation">Documentation</a>
+              <a routerLink="/c/{{ course.id }}/documentation">{{ 'course.navbar.documentation' | translate }}</a>
             </li>
           }
           @if (course.settings?.showSections?.resources) {
             <li (click)="closeDropdown()">
-              <a routerLink="/c/{{ course.id }}/resources">Resources</a>
+              <a routerLink="/c/{{ course.id }}/resources">{{ 'course.navbar.resources' | translate }}</a>
             </li>
           }
         </ul>
@@ -61,26 +61,26 @@
     @if (course; as course) {
       <ul class="menu menu-horizontal px-1">
         <li (click)="closeDropdown()">
-          <a routerLink="/c/{{ course.id }}">Introduction</a>
+          <a routerLink="/c/{{ course.id }}">{{ 'course.navbar.introduction' | translate }}</a>
         </li>
         @if (course.settings?.showSections?.agenda) {
           <li (click)="closeDropdown()">
-            <a routerLink="/c/{{ course.id }}/agenda">Agenda</a>
+            <a routerLink="/c/{{ course.id }}/agenda">{{ 'course.navbar.agenda' | translate }}</a>
           </li>
         }
         @if (course.settings?.showSections?.tasks) {
           <li (click)="closeDropdown()">
-            <a routerLink="/c/{{ course.id }}/tasks">Tasks</a>
+            <a routerLink="/c/{{ course.id }}/tasks">{{ 'course.navbar.tasks' | translate }}</a>
           </li>
         }
         @if (course.settings?.showSections?.documentation) {
           <li (click)="closeDropdown()">
-            <a routerLink="/c/{{ course.id }}/documentation">Documentation</a>
+            <a routerLink="/c/{{ course.id }}/documentation">{{ 'course.navbar.documentation' | translate }}</a>
           </li>
         }
         @if (course.settings?.showSections?.resources) {
           <li (click)="closeDropdown()">
-            <a routerLink="/c/{{ course.id }}/resources">Resources</a>
+            <a routerLink="/c/{{ course.id }}/resources">{{ 'course.navbar.resources' | translate }}</a>
           </li>
         }
       </ul>

diff --git a/apps/course/src/app/shared/navigation/navbar-course/navbar-course.component.ts b/apps/course/src/app/shared/navigation/navbar-course/navbar-course.component.ts
@@ -5,11 +5,12 @@ import { Course } from '../../../../../projects/types/src/lib/course/course.type
 import { AsyncPipe } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import { CourseStateService } from '../../../core/data/course-state.service';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-navbar-course',
   standalone: true,
-  imports: [RouterLink, AsyncPipe, MatIcon],
+  imports: [RouterLink, AsyncPipe, MatIcon, TranslateModule],
   templateUrl: './navbar-course.component.html',
   styleUrls: ['./navbar-course.component.scss'],
 })

diff --git a/apps/course/src/app/shared/navigation/navbar/navbar.component.html b/apps/course/src/app/shared/navigation/navbar/navbar.component.html
@@ -27,10 +27,10 @@
         tabindex="0"
       >
         <li (click)="closeDropdown()" routerLink="/">
-          <a>{{ 'home' | translate }}</a>
+          <a>{{ 'navbar.home' | translate }}</a>
         </li>
         <li (click)="closeDropdown()" routerLink="/c">
-          <a>{{ 'courses' | translate }}</a>
+          <a>{{ 'navbar.courses' | translate }}</a>
         </li>
       </ul>
     </div>
@@ -39,10 +39,10 @@
   <div class="navbar-center hidden lg:flex">
     <ul class="menu menu-horizontal px-1">
       <li routerLink="/">
-        <a>{{ 'home' | translate }}</a>
+        <a>{{ 'navbar.home' | translate }}</a>
       </li>
       <li routerLink="/c">
-        <a>{{ 'courses' | translate }}</a>
+        <a>{{ 'navbar.courses' | translate }}</a>
       </li>
     </ul>
   </div>
@@ -67,8 +67,8 @@
           <li>
             <a (click)="changeLang(lang)">
               <span class="badge badge-outline">{{
-                lang | slice: 0 : 2 | uppercase
-              }}</span>
+                  lang | slice: 0 : 2 | uppercase
+                }}</span>
               {{ languageNames[lang] }}
             </a>
           </li>
@@ -93,10 +93,10 @@
           class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
         >
           <li (click)="closeDropdown()" routerLink="/a/account">
-            <a>{{ 'account' | translate }}</a>
+            <a>{{ 'navbar.account' | translate }}</a>
           </li>
           <li class="text-error" (click)="logout()">
-            <a>{{ 'logout' | translate }}</a>
+            <a>{{ 'navbar.logout' | translate }}</a>
           </li>
         </ul>
       </div>

diff --git a/apps/course/src/app/shared/navigation/navbar/navbar.component.ts b/apps/course/src/app/shared/navigation/navbar/navbar.component.ts
@@ -15,7 +15,7 @@ import { Observable } from 'rxjs';
 import { ToastService } from '../../../core/feedback/toast.service';
 import { environment } from '../../../../environments/environment';
 import { ToastType } from '../../../types/feedback/toast.types';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { languageNames, LanguageNames } from '../../../names/language.names';
 import { LanguageService } from '../../../core/util/language.service';
 
@@ -53,6 +53,7 @@ export class NavbarComponent implements OnInit {
     private router: Router,
     private toastService: ToastService,
     private languageService: LanguageService,
+    private t: TranslateService,
   ) {
     this.isLoggedIn$ = this.authService.isLoggedIn$;
     this.currentLang = this.languageService.currentLang;
@@ -66,7 +67,7 @@ export class NavbarComponent implements OnInit {
     this.authService.logout().then(() => {
       this.router.navigate(['/a/login']).then(() => {
         this.toastService.showToast(
-          'Logged out successfully.',
+          this.t.instant('navbar.logout-success'),
           ToastType.Success,
         );
       });

diff --git a/apps/course/src/app/translations/de.translations.ts b/apps/course/src/app/translations/de.translations.ts
@@ -1,38 +1,29 @@
 export const de = {
+  navbar: {
+    home: 'Startseite',
+    courses: 'Kurse',
+    account: 'Konto',
+    logout: 'Abmelden',
+    'logout-success': 'Erfolgreich abgemeldet.',
+    login: 'Anmelden',
+    'language-change': 'Sprache ändern',
+  },
+  footer: {
+    home: 'Startseite',
+    courses: 'Kurse',
+    account: 'Konto',
+    legal: 'Rechtliches',
+    copyright: 'Urheberrecht © {{ currentYear }} - Alle Rechte vorbehalten',
+    'made-with-love': 'Hergestellt mit ❤️ von',
+    chorizo: 'Chorizo',
+  },
   homepageLatestCourses: {
     'error-message': 'Keine Kurse verfügbar',
   },
   feedbackMessage: {
     'default-title': 'Oops!',
     'default-message': 'Etwas ist schief gelaufen.',
   },
-  authService: {
-    'login-success': 'Erfolgreich eingeloggt.',
-    'register-success': 'Erfolgreich registriert.',
-    'unexpected-error':
-      'Ein unerwarteter Fehler ist aufgetreten, bitte versuche es erneut.',
-    'email-already-in-use':
-      'Diese E-Mail wird bereits verwendet, bitte versuche es mit einer anderen.',
-    'weak-password':
-      'Das Passwort ist zu schwach, bitte versuche ein stärkeres Passwort.',
-    'user-disabled':
-      'Dieser Benutzer wurde deaktiviert. Bitte kontaktiere den Support für weitere Informationen.',
-    'incorrect-email-password':
-      'Falsche E-Mail oder Passwort, bitte versuche es erneut.',
-    'too-many-requests': 'Zu viele Anfragen. Bitte versuche es später erneut.',
-    'invalid-credential':
-      'Ungültige Anmeldeinformationen. Bitte versuche es erneut.',
-  },
-  courseStateService: {
-    'course-not-found': 'Kurs mit dieser ID wurde nicht gefunden.',
-  },
-  fileDownloadService: {
-    'error-download-file': 'Fehler beim Herunterladen der Datei',
-  },
-  languageService: {
-    'language-change-success': 'Sprache erfolgreich geändert',
-    'language-change-error': 'Fehler beim Ändern der Sprache',
-  },
   accountProfileBanner: {
     'change-avatar': 'Avatar ändern',
     'load-avatar-error': 'Fehler beim Laden des Avatars',
@@ -62,15 +53,6 @@ export const de = {
       'max-length': 'Die Maximallänge beträgt {{max}} Zeichen',
     },
   },
-  relativeTimePipe: {
-    'just-now': 'Gerade eben',
-    'minute-ago': 'Vor 1 Minute',
-    'minutes-ago': 'Vor {{ minutes }} Minuten',
-    'hour-ago': 'Vor 1 Stunde',
-    'hours-ago': 'Vor {{ hours }} Stunden',
-    'day-ago': 'Vor 1 Tag',
-    'days-ago': 'Vor {{ days }} Tagen',
-  },
   login: {
     title: 'Anmelden',
     'credentials-description':
@@ -116,4 +98,58 @@ export const de = {
       'password-mismatch': 'Passwörter stimmen nicht überein',
     },
   },
+  course: {
+    navbar: {
+      introduction: 'Einführung',
+      agenda: 'Agenda',
+      tasks: 'Aufgaben',
+      documentation: 'Dokumentation',
+      resources: 'Ressourcen',
+    },
+  },
+  authService: {
+    'login-success': 'Erfolgreich eingeloggt.',
+    'register-success': 'Erfolgreich registriert.',
+    'unexpected-error':
+      'Ein unerwarteter Fehler ist aufgetreten, bitte versuche es erneut.',
+    'email-already-in-use':
+      'Diese E-Mail wird bereits verwendet, bitte versuche es mit einer anderen.',
+    'weak-password':
+      'Das Passwort ist zu schwach, bitte versuche ein stärkeres Passwort.',
+    'user-disabled':
+      'Dieser Benutzer wurde deaktiviert. Bitte kontaktiere den Support für weitere Informationen.',
+    'incorrect-email-password':
+      'Falsche E-Mail oder Passwort, bitte versuche es erneut.',
+    'too-many-requests': 'Zu viele Anfragen. Bitte versuche es später erneut.',
+    'invalid-credential':
+      'Ungültige Anmeldeinformationen. Bitte versuche es erneut.',
+  },
+  courseStateService: {
+    'course-not-found': 'Kurs mit dieser ID wurde nicht gefunden.',
+  },
+  fileDownloadService: {
+    'error-download-file': 'Fehler beim Herunterladen der Datei',
+  },
+  languageService: {
+    'language-change-success': 'Sprache erfolgreich geändert',
+    'language-change-error': 'Fehler beim Ändern der Sprache',
+  },
+  authGuard: {
+    'must-be-verified-user':
+      'Sie müssen ein verifizierter Benutzer sein, um auf diese Seite zuzugreifen.',
+    'must-be-logged-in':
+      'Sie müssen eingeloggt sein, um auf diese Seite zuzugreifen.',
+  },
+  loginGuard: {
+    'not-verified': 'Noch nicht verifiziert.',
+  },
+  relativeTimePipe: {
+    'just-now': 'Gerade eben',
+    'minute-ago': 'Vor 1 Minute',
+    'minutes-ago': 'Vor {{ minutes }} Minuten',
+    'hour-ago': 'Vor 1 Stunde',
+    'hours-ago': 'Vor {{ hours }} Stunden',
+    'day-ago': 'Vor 1 Tag',
+    'days-ago': 'Vor {{ days }} Tagen',
+  },
 };