added translations on login and detail page

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {Router} from "@angular/router";
-import {homeTranslations, listTranslations, managementTranslations} from "./interface/translations";
+import {homeTranslations, listTranslations, loginTranslations, managementTranslations} from "./interface/translations";
 import {TranslateService} from "./service/language/translate.service";
 import {ReadTranslateJsonService} from "./service/language/readTranslateJson.service";
 import {cookieService} from "./service/cookie.service";
@@ -16,6 +16,7 @@ export class AppComponent implements OnInit {
   homeTranslations: homeTranslations = {} as homeTranslations;
   listTranslations: listTranslations = {} as listTranslations;
   managementTranslation: managementTranslations = {} as managementTranslations;
+  loginTranslation: loginTranslations = {} as loginTranslations;
 
 
   constructor(
@@ -30,6 +31,7 @@ export class AppComponent implements OnInit {
     this.homeTranslations = this.readTranslationJsonService.getHomeTranslations();
     this.listTranslations = this.readTranslationJsonService.getListTransaltions();
     this.managementTranslation = this.readTranslationJsonService.getManagementTranslations();
+    this.loginTranslation = this.readTranslationJsonService.getLoginTranslations();
   }
 
   clearAllCookies() {
@@ -75,5 +77,13 @@ export class AppComponent implements OnInit {
     this.managementTranslation.addWaypointButton = await this.translateService.getData(this.managementTranslation.addWaypointButton, lang);
     this.managementTranslation.add = await this.translateService.getData(this.managementTranslation.add, lang);
     this.managementTranslation.close = await this.translateService.getData(this.managementTranslation.close, lang);
+
+    // Load Login Page Translations
+    this.loginTranslation.username = await this.translateService.getData(this.loginTranslation.username, lang);
+    this.loginTranslation.password = await this.translateService.getData(this.loginTranslation.password, lang);
+    this.loginTranslation.login = await this.translateService.getData(this.loginTranslation.login, lang);
+    this.loginTranslation.register = await this.translateService.getData(this.loginTranslation.register, lang);
+    this.loginTranslation.usernamePlaceholder = await this.translateService.getData(this.loginTranslation.usernamePlaceholder, lang);
+    this.loginTranslation.passwordPlaceholder = await this.translateService.getData(this.loginTranslation.passwordPlaceholder, lang);
   }
 }

src/app/component/detail/detail.component.html

@@ -40,7 +40,7 @@
 
   <div class="modal modal-bottom sm:modal-middle" *ngIf="img">
     <div class="modal-box">
-      <h3 class="font-bold text-lg">Congratulations you have discovred {{ test.name }}!</h3>
+      <h3 class="font-bold text-lg">{{ detailTranslations.congratulations }}: {{ waypointInfo.name }}!</h3>
       <img class="xl:max-w-md max-h-screen py-4 m-auto" [src]="img" *ngIf="img">
       <div class="modal-action">
         <label for="my-modal-6" class="btn bg-white hover:bg-blue-400" (click)="downloadImage()">

src/app/component/detail/detail.component.ts

@@ -2,8 +2,11 @@ import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
 import {positionService} from "../../service/position.service";
 import {WaypointService} from "../../service/http/waypoint.service"
+import {detailTranslations} from "../../interface/translations";
 //import {waypointVisitedService} from "../../service/http/waypointVisited.service"
 import * as qrcode from 'qrcode';
+import {ReadTranslateJsonService} from "../../service/language/readTranslateJson.service";
+
 @Component({
   selector: 'app-detail',
   templateUrl: './detail.component.html',
@@ -15,33 +18,30 @@ export class DetailComponent implements OnInit {
   private id: number | undefined;
 
   private URLParams: any;
-
-  test = {
-    name: 'SPAI',
-    cordinates: '46.2295425892837, 8.74425883677592',
-    lat: 46.2295425892837,
-    lng: 8.74425883677592,
-    description: "Lorem ipsum"
-  }
-
   waypointInfo: any;
-
   embed: any;
-
   cord: any;
 
-/*
+  detailTranslations: detailTranslations = {} as detailTranslations;
-  showNav = true;
+
-*/
+  /*
+    showNav = true;
+  */
   distance: number | undefined;
   displayedDistance = 0;
 
   img: any;
 
-  constructor(private route: ActivatedRoute, private positionService: positionService, private waypointService: WaypointService) {
+  constructor(
+    private route: ActivatedRoute,
+    private positionService: positionService,
+    private waypointService: WaypointService,
+    private readTranslationJsonService: ReadTranslateJsonService,
+  ) {
   }
 
   async ngOnInit() {
+    this.detailTranslations = this.readTranslationJsonService.getDetailTranslations();
     this.route.params.subscribe(params => {
       this.URLParams = params;
       console.log("params", params);

src/app/component/login/login.component.html

@@ -3,29 +3,29 @@
 
     <div class="bg-white px-6 py-8 rounded-lg shadow-md w-[400px]">
 
-      <h2 *ngIf="login" class="text-center text-2xl font-bold mb-8">Accedi</h2>
+      <h2 *ngIf="login" class="text-center text-2xl font-bold mb-8">{{ loginTranslation.login }}</h2>
-      <h2 *ngIf="!login" class="text-center text-2xl font-bold mb-8">Registrati</h2>
+      <h2 *ngIf="!login" class="text-center text-2xl font-bold mb-8">{{ loginTranslation.register }}</h2>
 
       <form (submit)="submit()">
 
         <div class="mb-4">
-          <label for="email" class="block text-gray-700 font-bold mb-2">Username</label>
+          <label for="email" class="block text-gray-700 font-bold mb-2">{{ loginTranslation.register }}:</label>
-          <input type="text" id="email" name="email" placeholder="Inserisci username"
+          <input type="text" id="email" name="email" placeholder="{{ loginTranslation.usernamePlaceholder }}"
                  class="w-full px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                  [(ngModel)]="newUser.username">
         </div>
 
         <div class="mb-4">
-          <label for="password" class="block text-gray-700 font-bold mb-2">Password:</label>
+          <label for="password" class="block text-gray-700 font-bold mb-2">{{ loginTranslation.login }}:</label>
-          <input type="password" id="password" name="password" placeholder="Inserisci la tua password"
+          <input type="password" id="password" name="password" placeholder="{{ loginTranslation.passwordPlaceholder }}"
                  class="w-full px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                  [(ngModel)]="newUser.password">
         </div>
 
         <div class="mb-4">
           <button type="submit" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary py-2 w-full">
-            <span *ngIf="login">Accedi</span>
+            <span *ngIf="login">{{ loginTranslation.login }}</span>
-            <span *ngIf="!login">Registrati</span>
+            <span *ngIf="!login">{{ loginTranslation.register }}</span>
           </button>
         </div>
 
@@ -33,8 +33,8 @@
 
 
       <a (click)="switch()">
-        <button class="btn-link" *ngIf="login">Register</button>
+        <button class="btn-link" *ngIf="login">{{ loginTranslation.register }}</button>
-        <button  class="btn-link" *ngIf="!login">Login</button>
+        <button  class="btn-link" *ngIf="!login">{{ loginTranslation.login }}</button>
       </a>
 
     </div>

src/app/component/login/login.component.ts

@@ -5,6 +5,7 @@ import {ReadTranslateJsonService} from "../../service/language/readTranslateJson
 import {cookieService} from "../../service/cookie.service";
 import {UserService} from "../../service/http/user.service";
 import {UserEntity} from "../../interface/UserEntity";
+import {loginTranslations} from "../../interface/translations";
 
 @Component({
   selector: 'app-login',
@@ -19,6 +20,7 @@ export class LoginComponent implements OnInit {
   login: boolean = true;
   errorCreateUser: boolean = false;
   errorLogin: boolean = false;
+  loginTranslation: loginTranslations = {} as loginTranslations;
 
   constructor(
     private router: Router,
@@ -30,7 +32,7 @@ export class LoginComponent implements OnInit {
   }
 
   ngOnInit(): void {
-
+    this.loginTranslation = this.readTranslationJsonService.getLoginTranslations();
   }
 
   createNewUser(createUser: UserEntity) {

src/app/interface/translations.ts

@@ -34,3 +34,16 @@ export interface managementTranslations {
   add: string;
   close: string;
 }
+
+export interface loginTranslations {
+  "login": string,
+  "register": string,
+  "username": string,
+  "password": string,
+  "usernamePlaceholder": string,
+  "passwordPlaceholder": string
+}
+
+export interface detailTranslations {
+  "congratulations": string
+}

src/app/service/language/readTranslateJson.service.ts

@@ -1,6 +1,11 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
-import {homeTranslations, managementTranslations} from "../../interface/translations";
+import {
+  detailTranslations,
+  homeTranslations,
+  loginTranslations,
+  managementTranslations
+} from "../../interface/translations";
 import {listTranslations} from "../../interface/translations";
 
 @Injectable({
@@ -10,6 +15,8 @@ export class ReadTranslateJsonService {
   private homeTranslations: homeTranslations = {} as homeTranslations;  // declares a private object to hold the home translations
   private listTranslation: listTranslations = {} as listTranslations;  // declares a private object to hold the list translations
   private managementTransaltion: managementTranslations = {} as managementTranslations;  // declares a private object to hold the management translations
+  private loginTranslation: loginTranslations = {} as loginTranslations // declares a private object to hold the login translations
+  private detailTranslation: detailTranslations = {} as detailTranslations // declares a private object to hold the detail translations
 
   constructor(private http: HttpClient) {
     // loads the home translations from the assets file for the English language
@@ -19,7 +26,6 @@ export class ReadTranslateJsonService {
       this.homeTranslations.searchButton = data.searchButton;
       this.homeTranslations.searchPlaceholder = data.searchPlaceholder;
       this.homeTranslations.menuPlaces = data.menuPlaces;
-      console.log("data loaded", this.homeTranslations)
     });
 
     // loads the list translations from the assets file for the English language
@@ -28,7 +34,6 @@ export class ReadTranslateJsonService {
       this.listTranslation.distance = data.distance;
       this.listTranslation.locationName = data.locationName;
       this.listTranslation.positionNotFoundErrorMessage = data.positionNotFoundErrorMessage;
-      console.log("data loaded", this.homeTranslations)
     });
 
     this.http.get<managementTranslations>('assets/i18n/management/en.json').subscribe(data => {
@@ -51,7 +56,19 @@ export class ReadTranslateJsonService {
       this.managementTransaltion.addWaypointButton = data.addWaypointButton;
       this.managementTransaltion.add = data.add;
       this.managementTransaltion.close = data.close;
-      console.log("data loaded", this.homeTranslations)
+    });
+
+    this.http.get<loginTranslations>('assets/i18n/login/en.json').subscribe(data => {
+      this.loginTranslation.login = data.login;
+      this.loginTranslation.register = data.register;
+      this.loginTranslation.username = data.username;
+      this.loginTranslation.password = data.password;
+      this.loginTranslation.usernamePlaceholder = data.usernamePlaceholder;
+      this.loginTranslation.passwordPlaceholder = data.passwordPlaceholder;
+    });
+
+    this.http.get<detailTranslations>('assets/i18n/detail/en.json').subscribe(data => {
+      this.detailTranslation.congratulations = data.congratulations;
     });
   }
 
@@ -68,4 +85,12 @@ export class ReadTranslateJsonService {
   getManagementTranslations(): managementTranslations {
     return this.managementTransaltion;
   }
+
+  getLoginTranslations(): loginTranslations{
+    return this.loginTranslation;
+  }
+
+  getDetailTranslations(): detailTranslations{
+    return this.detailTranslation;
+  }
 }

src/assets/i18n/detail/en.json

@@ -0,0 +1,3 @@
+{
+  "congratulations": "Congratulations you discovered"
+}

src/assets/i18n/login/en.json

@@ -0,0 +1,8 @@
+{
+  "login": "Log-in",
+  "register": "Register",
+  "username": "username",
+  "password": "password",
+  "usernamePlaceholder": "insert username",
+  "passwordPlaceholder": "insert password"
+}