added translation

src/app/components/add-task/add-task.component.scss

@@ -340,4 +340,10 @@ p {
       font-weight: 700;
     }
   }
+
+  input,
+  textarea,
+  select {
+    font-size: 16px;
+  }
 }

src/app/components/contacts/contact-detail/contact-detail.component.html

@@ -1,9 +1,11 @@
 <section>
   <div class="header">
     <div class="headerline">
-      <div class="title">Contacts</div>
+      <div class="title">{{ "contacts.headline" | translate }}</div>
       <div class="blue-bar"></div>
-      <div class="metrics-txt">Better with a team</div>
+      <div class="metrics-txt">
+        {{ "contacts.headlineDescription" | translate }}
+      </div>
     </div>
     <img
       [ngClass]="{ 'd-none': !currentUserId }"
@@ -46,11 +48,15 @@
         <div class="btns">
           <div class="btn btn-edit">
             <img src="./../../../../assets/img/contact/edit.svg" alt="" />
-            <p (click)="openEditDialog()">edit</p>
+            <p (click)="openEditDialog()">
+              {{ "contacts.btnEdit0" | translate }}
+            </p>
           </div>
           <div class="btn btn-delete">
             <img src="./../../../../assets/img/contact/delete.svg" alt="" />
-            <p (click)="deleteContact()">delete</p>
+            <p (click)="deleteContact()">
+              {{ "contacts.btnDelete0" | translate }}
+            </p>
           </div>
         </div>
         <div class="btn-mobile" (click)="toggleNav()">
@@ -59,22 +65,22 @@
       </div>
     </div>
     <div class="contact word-wrap">
-      <div class="headline">Contact Information</div>
+      <div class="headline">{{ "contacts.contactInfo" | translate }}</div>
       <div class="info">
-        <p>Email:</p>
+        <p>{{ "contacts.contactEmail" | translate }}</p>
         <a [href]="'mail:' + user.email">
           {{ user.email }}
         </a>
-        <p>Phone:</p>
+        <p>{{ "contacts.contactPhone" | translate }}</p>
         @if(user.phone === '') {
-        <span>no phone</span> } @else {
+        <span>{{ "contacts.contactPhoneTxT" | translate }}</span> } @else {
         <a [href]="'tel:' + user.phone">
           <span>{{ user.phone }}</span>
         </a>
         }
-        <p>Last seen online:</p>
+        <p>{{ "contacts.contactLastOnline" | translate }}</p>
         @if(user.status) {
-        <span>Currently online</span>
+        <span>{{ "contacts.contactLastOnlineTxt" | translate }}</span>
         } @else {
         <span>{{ convertTimestamp(user.lastLogin) }}</span>
         }

src/app/components/contacts/contact-detail/contact-detail.component.ts

@@ -7,6 +7,7 @@ import { SharedService } from '../../../services/shared.service';
 import { ContactNavComponent } from '../contact-nav/contact-nav.component';
 import { FirebaseService } from '../../../services/firebase.service';
 import { LanguageService } from '../../../services/language.service';
+import { TranslateModule } from '@ngx-translate/core';
 @Component({
   selector: 'app-contact-detail',
   standalone: true,
@@ -15,6 +16,7 @@ import { LanguageService } from '../../../services/language.service';
     ContactsComponent,
     ContactEditComponent,
     ContactNavComponent,
+    TranslateModule,
   ],
   templateUrl: './contact-detail.component.html',
   styleUrl: './contact-detail.component.scss',

src/app/components/contacts/contact-edit/contact-edit.component.html

@@ -2,7 +2,7 @@
   <div class="dialog">
     <div class="header">
       <img src="./../../../../assets/img/logo.svg" alt="" />
-      <p>Edit contact</p>
+      <p>{{ "contacts.editContact" | translate }}</p>
       <app-btn-close [isEditContactDialogOpen]="false"></app-btn-close>
     </div>
     <div class="content">

src/app/components/contacts/contact-edit/contact-edit.component.ts

@@ -3,11 +3,17 @@ import { ContactFormComponent } from '../contact-form/contact-form.component';
 import { CommonModule } from '@angular/common';
 import { BtnCloseComponent } from '../../../shared/components/buttons/btn-close/btn-close.component';
 import { FirebaseService } from '../../../services/firebase.service';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-contact-edit',
   standalone: true,
-  imports: [CommonModule, ContactFormComponent, BtnCloseComponent],
+  imports: [
+    CommonModule,
+    ContactFormComponent,
+    BtnCloseComponent,
+    TranslateModule,
+  ],
   templateUrl: './contact-edit.component.html',
   styleUrl: './contact-edit.component.scss',
 })

src/app/components/contacts/contact-form/contact-form.component.html

@@ -12,7 +12,11 @@
         class="firstName"
         name="firstName"
         #firstName="ngModel"
-        placeholder="{{ contactData.firstName }}"
+        placeholder="{{
+          contactData.firstName !== ''
+            ? contactData.firstName
+            : ('contact-dialog-form.firstName' | translate)
+        }}"
         [(ngModel)]="contactData.firstName"
         autocomplete="off"
         required
@@ -30,7 +34,11 @@
         class="lastName"
         name="lastName"
         #lastName="ngModel"
-        placeholder="{{ contactData.lastName }}"
+        placeholder="{{
+          contactData.lastName !== ''
+            ? contactData.lastName
+            : ('contact-dialog-form.lastName' | translate)
+        }}"
         [(ngModel)]="contactData.lastName"
         autocomplete="off"
         required
@@ -59,7 +67,11 @@
       type="email"
       name="email"
       #email="ngModel"
-      placeholder="{{ contactData.email }}"
+      placeholder="{{
+        contactData.email !== ''
+          ? contactData.email
+          : ('contact-dialog-form.email' | translate)
+      }}"
       [(ngModel)]="contactData.email"
       autocomplete="off"
       required
@@ -74,7 +86,11 @@
       type="phone"
       name="phone"
       #phone="ngModel"
-      placeholder="{{ contactData.phone }}"
+      placeholder="{{
+        contactData.phone !== ''
+          ? contactData.phone
+          : ('contact-dialog-form.phone' | translate)
+      }}"
       [(ngModel)]="contactData.phone"
       autocomplete="off"
       required

src/app/components/contacts/contact-nav/contact-nav.component.html

@@ -1,8 +1,8 @@
 <nav class="navbar">
   <div class="link btn-edit">
-    <span (click)="openEditDialog()">Edit</span>
+    <span (click)="openEditDialog()">{{ "contacts.edit1" | translate }}</span>
   </div>
   <div class="link btn-delete">
-    <span (click)="deleteContact()">Delete</span>
+    <span (click)="deleteContact()">{{ "contacts.delete1" | translate }}</span>
   </div>
 </nav>

src/app/components/contacts/contact-nav/contact-nav.component.ts

@@ -1,10 +1,11 @@
 import { Component, Input } from '@angular/core';
 import { SharedService } from '../../../services/shared.service';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-contact-nav',
   standalone: true,
-  imports: [],
+  imports: [TranslateModule],
   templateUrl: './contact-nav.component.html',
   styleUrl: './contact-nav.component.scss',
 })

src/app/components/contacts/contacts.component.html

@@ -5,7 +5,7 @@
   >
     <button class="btn" type="submit">
       <div class="btn-inside">
-        <span>Add new contact</span>
+        <span>{{ "contacts.btnNew" | translate }}</span>
         <img src="./../../../assets/img/contact/add.svg" alt="check" />
       </div>
       <div class="btn-inside-mobile">
@@ -50,7 +50,7 @@
               {{ user.lastName }}
             </p>
             @if (user.id === firebaseService.getCurrentUserId()) {
-            <p>&nbsp;(du)</p>
+            <p>&nbsp;{{ "contacts.you" | translate }}</p>
             }
           </div>
           <div class="email">

src/app/components/contacts/contacts.component.ts

@@ -5,11 +5,12 @@ import { ActivatedRoute, RouterLink } from '@angular/router';
 import { ContactDetailComponent } from './contact-detail/contact-detail.component';
 import { SharedService } from '../../services/shared.service';
 import { FirebaseService } from '../../services/firebase.service';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-contacts',
   standalone: true,
-  imports: [CommonModule, RouterLink, ContactDetailComponent],
+  imports: [CommonModule, RouterLink, ContactDetailComponent, TranslateModule],
   templateUrl: './contacts.component.html',
   styleUrl: './contacts.component.scss',
 })

src/assets/i18n/de.json

@@ -1,7 +1,7 @@
 {
   "login": {
     "login": "Einloggen",
-    "email": "Email",
+    "email": "E-Mail",
     "password": "Passwort",
     "google": "Einloggen mit Google",
     "guest": "Gastzugang",
@@ -13,7 +13,7 @@
   "register": {
     "signup": "Registrieren",
     "name": "Name",
-    "email": "Email",
+    "email": "E-Mail",
     "password": "Passwort",
     "passwordConfirm": "Passwort bestätigen",
     "privacyPolicy0": "Ich akzeptiere die",
@@ -62,7 +62,11 @@
     "invalid-lastName": "Ein Nachname ist erforderlich!",
     "invalid-name": "Ein Vorname & Nachname ist erforderlich!",
     "invalid-email": "Eine E-Mail Adresse ist erforderlich!",
-    "invalid-phone": "Eine Telefonnummer ist erforderlich!"
+    "invalid-phone": "Eine Telefonnummer ist erforderlich!",
+    "firstName": "Vorname",
+    "lastName": "Nachname",
+    "email": "E-Mail",
+    "phone": "Telefon"
   },
   "contact-delete-dialog": {
     "btn-cancle": "Abbrechen",
@@ -122,6 +126,27 @@
     "dateError1": "Das Datum muss in der Zukunft liegen!",
     "categoryError": "Sie müssen eine Kategorie auswählen!"
   },
+  "contacts": {
+    "headline": "Kontakte",
+    "headlineDescription": "Besser mit einem Team",
+    "btnNew": "Neuer Kontakt",
+    "btnEdit0": "bearbeiten",
+    "btnEdit1": "Bearbeiten",
+    "btnDelete0": "löschen",
+    "btnDelete1": "Löschen",
+    "contactInfo": "Kontaktinformationen",
+    "contactEmail": "E-Mail",
+    "contactPhone": "Telefon",
+    "contactPhoneTxT": "Keine Telefonnummer",
+    "contactLastOnline": "Zuletzt online gesehen",
+    "contactLastOnlineTxt": "Derzeit online",
+    "editContact": "Kontakt bearbeiten",
+    "firstName": "Vorname",
+    "lastName": "Nachname",
+    "email": "E-Mail",
+    "phone": "Telefon",
+    "you": "du"
+  },
   "help": {
     "header": "Hilfe",
     "welcome": "Willkommen auf der Hilfeseite für Join, Ihrem Leitfaden für die Verwendung unseres Kanban-Projektmanagement-Tools. Hier erhalten Sie einen Überblick darüber, was Join ist, wie Sie davon profitieren können und wie Sie es verwenden.",

src/assets/i18n/en.json

@@ -62,7 +62,11 @@
     "invalid-lastName": "A last name is required!",
     "invalid-name": "A first name & last name is required!",
     "invalid-email": "A email is required!",
-    "invalid-phone": "A phone number is required!"
+    "invalid-phone": "A phone number is required!",
+    "firstName": "First name",
+    "lastName": "Last name",
+    "email": "Email",
+    "phone": "Phone"
   },
   "contact-delete-dialog": {
     "btn-cancle": "Cancle",
@@ -122,6 +126,27 @@
     "dateError1": "The date must be in the future!",
     "categoryError": "You must select a category!"
   },
+  "contacts": {
+    "headline": "Contacts",
+    "headlineDescription": "Better with a team",
+    "btnNew": "Add new contact",
+    "btnEdit0": "edit",
+    "btnEdit1": "Edit",
+    "btnDelete0": "delete",
+    "btnDelete1": "Delete",
+    "contactInfo": "Contact Information",
+    "contactEmail": "Email",
+    "contactPhone": "Phone",
+    "contactPhoneTxT": "No phone number",
+    "contactLastOnline": "Last seen online",
+    "contactLastOnlineTxt": "Currently online",
+    "editContact": "Edit contact",
+    "firstName": "First name",
+    "lastName": "Last name",
+    "email": "Email",
+    "phone": "Phone",
+    "you": "you"
+  },
   "help": {
     "header": "Help",
     "welcome": "Welcome to the help page for Join, your guide to using our kanban project management tool. Here, we'll provide an overview of what Join is, how it can benefit you, and how to use it.",