Converted a few components

UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.html

@@ -1,21 +1,23 @@
-<form [formGroup]="resetPasswordForm">
+<ng-container *transloco="let t; read:'reset-password-modal'">
+  <form [formGroup]="resetPasswordForm">
     <div class="modal-header">
-        <h4 class="modal-title" id="modal-basic-title">Reset {{member.username | sentenceCase}}'s Password</h4>
-        <button type="button" class="btn-close" aria-label="Close" (click)="close()">
-        
-        </button>
+      <h4 class="modal-title" id="modal-basic-title">{{t('title', {username: member.username | sentenceCase})}}</h4>
+      <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()">
+
+      </button>
     </div>
     <div class="modal-body">
-        <div class="alert alert-info" *ngIf="errorMessage !== ''">
-            <strong>Error: </strong> {{errorMessage}}
-        </div>
-        <div class="mb-3">
-            <label for="password" class="form-label">New Password</label>
-            <input id="password" class="form-control" minlength="4" formControlName="password" type="password">
-        </div>
+      <div class="alert alert-info" *ngIf="errorMessage !== ''">
+        <strong>{{t('error-label')}}</strong> {{errorMessage}}
+      </div>
+      <div class="mb-3">
+        <label for="password" class="form-label">{{t('new-password-label')}}</label>
+        <input id="password" class="form-control" minlength="4" formControlName="password" type="password">
+      </div>
     </div>
     <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" (click)="close()">Cancel</button>
-        <button type="submit" class="btn btn-primary" [disabled]="resetPasswordForm.value.password.length === 0" (click)="save()">Save</button>
+      <button type="button" class="btn btn-secondary" (click)="close()">{{t('cancel')}}</button>
+      <button type="submit" class="btn btn-primary" [disabled]="resetPasswordForm.value.password.length === 0" (click)="save()">{{t('save')}}</button>
     </div>
-</form>
+  </form>
+</ng-container>

UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.ts

@@ -5,13 +5,14 @@ import { Member } from 'src/app/_models/auth/member';
 import { AccountService } from 'src/app/_services/account.service';
 import { SentenceCasePipe } from '../../../pipe/sentence-case.pipe';
 import { NgIf } from '@angular/common';
+import {TranslocoModule} from "@ngneat/transloco";
 
 @Component({
     selector: 'app-reset-password-modal',
     templateUrl: './reset-password-modal.component.html',
     styleUrls: ['./reset-password-modal.component.scss'],
     standalone: true,
-    imports: [ReactiveFormsModule, NgIf, SentenceCasePipe]
+    imports: [ReactiveFormsModule, NgIf, SentenceCasePipe, TranslocoModule]
 })
 export class ResetPasswordModalComponent {
 

UI/Web/src/app/all-series/_components/all-series/all-series.component.html

@@ -1,22 +1,25 @@
-<app-side-nav-companion-bar [hasFilter]="true" [filterOpenByDefault]="filterSettings.openByDefault" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
+<ng-container *transloco="let t; read: 'all-series'">
+  <app-side-nav-companion-bar [hasFilter]="true" [filterOpenByDefault]="filterSettings.openByDefault" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
     <h2 title>
-        {{title}}
+      {{title}}
     </h2>
-    <h6 subtitle *ngIf="pagination">{{pagination.totalItems | number}} Series</h6>
-</app-side-nav-companion-bar>
-<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
-<app-card-detail-layout 
+    <h6 subtitle *ngIf="pagination">{{t('series-count', {num: pagination.totalItems | number})}}</h6>
+  </app-side-nav-companion-bar>
+  <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
+  <app-card-detail-layout
     [isLoading]="loadingSeries"
     [items]="series"
     [trackByIdentity]="trackByIdentity"
     [filterSettings]="filterSettings"
     [filterOpen]="filterOpen"
     [jumpBarKeys]="jumpbarKeys"
     (applyFilter)="updateFilter($event)"
-    >
+  >
     <ng-template #cardItem let-item let-position="idx">
-        <app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="loadPage()" 
-        (selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)" 
-        [selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"></app-series-card>
+      <app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="loadPage()"
+                       (selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)"
+                       [selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"></app-series-card>
     </ng-template>
-</app-card-detail-layout>
+  </app-card-detail-layout>
+
+</ng-container>

UI/Web/src/app/all-series/_components/all-series/all-series.component.ts

@@ -31,6 +31,7 @@ import { CardDetailLayoutComponent } from '../../../cards/card-detail-layout/car
 import { BulkOperationsComponent } from '../../../cards/bulk-operations/bulk-operations.component';
 import { NgIf, DecimalPipe } from '@angular/common';
 import { SideNavCompanionBarComponent } from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
+import {TranslocoModule} from "@ngneat/transloco";
 
 
 
@@ -40,7 +41,7 @@ import { SideNavCompanionBarComponent } from '../../../sidenav/_components/side-
     styleUrls: ['./all-series.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [SideNavCompanionBarComponent, NgIf, BulkOperationsComponent, CardDetailLayoutComponent, SeriesCardComponent, DecimalPipe]
+  imports: [SideNavCompanionBarComponent, NgIf, BulkOperationsComponent, CardDetailLayoutComponent, SeriesCardComponent, DecimalPipe, TranslocoModule]
 })
 export class AllSeriesComponent implements OnInit {
 

UI/Web/src/app/announcements/_components/announcements/announcements.component.html

@@ -1,7 +1,9 @@
-<app-side-nav-companion-bar>
+<ng-container *transloco="let t; read: 'announcements'">
+  <app-side-nav-companion-bar>
     <h2 title>
-        Announcements
+      {{t('title')}}
     </h2>
-</app-side-nav-companion-bar>
+  </app-side-nav-companion-bar>
 
-<app-changelog></app-changelog>
+  <app-changelog></app-changelog>
+</ng-container>

UI/Web/src/app/announcements/_components/announcements/announcements.component.ts

@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
 import { ChangelogComponent } from '../changelog/changelog.component';
 import { SideNavCompanionBarComponent } from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
+import {TranslocoModule} from "@ngneat/transloco";
 
 @Component({
     selector: 'app-announcements',
     templateUrl: './announcements.component.html',
     styleUrls: ['./announcements.component.scss'],
     standalone: true,
-    imports: [SideNavCompanionBarComponent, ChangelogComponent]
+  imports: [SideNavCompanionBarComponent, ChangelogComponent, TranslocoModule]
 })
 export class AnnouncementsComponent {
 

UI/Web/src/app/announcements/_components/changelog/changelog.component.html

@@ -1,24 +1,31 @@
-<div class="changelog">
-  <p class="pb-2">If you do not see an <span class="badge bg-secondary">Installed</span> tag, you are on a nightly release. Only major versions will show as available.</p>
-  <ng-container *ngFor="let update of updates; let indx = index;">
-    <div class="card w-100 mb-2" style="width: 18rem;">
+<ng-container *transloco="let t; read: 'changelog'">
+  <div class="changelog">
+    <p class="pb-2">
+      {{t('description', {installed: ''})}}
+      <span class="badge bg-secondary">{{t('installed')}}</span>
+      {{t('description-continued', {installed: ''})}}
+    </p>
+    <ng-container *ngFor="let update of updates; let indx = index;">
+      <div class="card w-100 mb-2" style="width: 18rem;">
         <div class="card-body">
           <h4 class="card-title">{{update.updateTitle}}&nbsp;
-              <span class="badge bg-secondary" *ngIf="update.updateVersion === update.currentVersion">Installed</span>
-              <span class="badge bg-secondary" *ngIf="update.updateVersion > update.currentVersion">Available</span>
+            <span class="badge bg-secondary" *ngIf="update.updateVersion === update.currentVersion">{{t('installed')}}</span>
+            <span class="badge bg-secondary" *ngIf="update.updateVersion > update.currentVersion">{{t('available')}}</span>
           </h4>
-          <h6 class="card-subtitle mb-1 mt-1 text-muted">Published: {{update.publishDate | date: 'short'}}</h6>
+          <h6 class="card-subtitle mb-1 mt-1 text-muted">{{t('published-label')}}{{update.publishDate | date: 'short'}}</h6>
 
 
           <pre class="card-text update-body">
             <app-read-more [text]="update.updateBody" [maxLength]="500"></app-read-more>
           </pre>
-          <a *ngIf="!update.isDocker && update.updateVersion === update.currentVersion" href="{{update.updateUrl}}" class="btn disabled btn-{{indx === 0 ? 'primary' : 'secondary'}} float-end" target="_blank" rel="noopener noreferrer">Installed</a>
-          <a *ngIf="!update.isDocker && update.updateVersion !== update.currentVersion" href="{{update.updateUrl}}" class="btn btn-{{indx === 0 ? 'primary' : 'secondary'}} float-end" target="_blank" rel="noopener noreferrer">Download</a>
+          <a *ngIf="!update.isDocker && update.updateVersion === update.currentVersion" href="{{update.updateUrl}}" class="btn disabled btn-{{indx === 0 ? 'primary' : 'secondary'}} float-end" target="_blank" rel="noopener noreferrer">{{t('installed')}}</a>
+          <a *ngIf="!update.isDocker && update.updateVersion !== update.currentVersion" href="{{update.updateUrl}}" class="btn btn-{{indx === 0 ? 'primary' : 'secondary'}} float-end" target="_blank" rel="noopener noreferrer">{{t('download')}}</a>
         </div>
       </div>
-  </ng-container>
-</div>
+    </ng-container>
+  </div>
 
 
-<app-loading [loading]="isLoading"></app-loading>
+  <app-loading [loading]="isLoading"></app-loading>
+
+</ng-container>

UI/Web/src/app/announcements/_components/changelog/changelog.component.ts

@@ -4,13 +4,14 @@ import { ServerService } from 'src/app/_services/server.service';
 import { LoadingComponent } from '../../../shared/loading/loading.component';
 import { ReadMoreComponent } from '../../../shared/read-more/read-more.component';
 import { NgFor, NgIf, DatePipe } from '@angular/common';
+import {TranslocoModule} from "@ngneat/transloco";
 
 @Component({
     selector: 'app-changelog',
     templateUrl: './changelog.component.html',
     styleUrls: ['./changelog.component.scss'],
     standalone: true,
-    imports: [NgFor, NgIf, ReadMoreComponent, LoadingComponent, DatePipe]
+  imports: [NgFor, NgIf, ReadMoreComponent, LoadingComponent, DatePipe, TranslocoModule]
 })
 export class ChangelogComponent implements OnInit {
 
@@ -25,8 +26,5 @@ export class ChangelogComponent implements OnInit {
       this.updates = updates;
       this.isLoading = false;
     });
-
-
-
   }
 }

UI/Web/src/app/registration/_components/reset-password/reset-password.component.html

@@ -1,24 +1,27 @@
-<app-splash-container>
-    <ng-container title><h2>Password Reset</h2></ng-container>
+<ng-container *transloco="let t; read:'reset-password'">
+  <app-splash-container>
+    <ng-container title><h2>{{t('title')}}</h2></ng-container>
     <ng-container body>
-        <p>Enter the email of your account. We will send you an email </p>
-        <form [formGroup]="registerForm" (ngSubmit)="submit()">
-            <div class="mb-3" style="width:100%">
-                <label for="email" class="form-label">Email</label>
-                <input class="form-control custom-input" type="email" inputmode="email" id="email" formControlName="email" [class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
-                <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
-                    <div *ngIf="registerForm.get('email')?.errors?.required">
-                        This field is required
-                    </div>
-                    <div *ngIf="registerForm.get('email')?.errors?.email">
-                        This must be a valid email address
-                    </div>
-                </div>
+      <p>{{t('description')}}</p>
+      <form [formGroup]="registerForm" (ngSubmit)="submit()">
+        <div class="mb-3" style="width:100%">
+          <label for="email" class="form-label">Email</label>
+          <input class="form-control custom-input" type="email" inputmode="email" id="email" formControlName="email" [class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
+          <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
+            <div *ngIf="registerForm.get('email')?.errors?.required">
+              {{t('required-field')}}
             </div>
-
-            <div>
-                <button class="btn btn-secondary alt" type="submit">Submit</button>
+            <div *ngIf="registerForm.get('email')?.errors?.email">
+              {{t('valid-email')}}
             </div>
-        </form>
+          </div>
+        </div>
+
+        <div>
+          <button class="btn btn-secondary alt" type="submit">{{t('submit')}}</button>
+        </div>
+      </form>
     </ng-container>
-</app-splash-container>
+  </app-splash-container>
+
+</ng-container>

UI/Web/src/app/registration/_components/reset-password/reset-password.component.ts

@@ -5,22 +5,23 @@ import { ToastrService } from 'ngx-toastr';
 import { AccountService } from 'src/app/_services/account.service';
 import { NgIf } from '@angular/common';
 import { SplashContainerComponent } from '../splash-container/splash-container.component';
+import {TranslocoModule} from "@ngneat/transloco";
 
 @Component({
     selector: 'app-reset-password',
     templateUrl: './reset-password.component.html',
     styleUrls: ['./reset-password.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [SplashContainerComponent, ReactiveFormsModule, NgIf]
+    imports: [SplashContainerComponent, ReactiveFormsModule, NgIf, TranslocoModule]
 })
 export class ResetPasswordComponent {
 
   registerForm: FormGroup = new FormGroup({
     email: new FormControl('', [Validators.required, Validators.email]),
   });
 
-  constructor(private router: Router, private accountService: AccountService, 
+  constructor(private router: Router, private accountService: AccountService,
     private toastr: ToastrService) {}
 
   submit() {

UI/Web/src/assets/langs/en.json

@@ -5,7 +5,7 @@
         "password": "Password",
         "password-validation": "Password must be between {{min}} and {{max}} characters in length",
         "forgot-password": "Forgot Password?",
-        "submit": "Submit"
+        "submit": "{{common.submit}}"
     },
 
     "dashboard": {
@@ -499,7 +499,40 @@
         "r18-plus": "R18+"
     },
 
+    "reset-password": {
+        "title": "Password Reset",
+        "description": "Enter the email of your account. Kavita will send you an email if a valid one on file, otherwise ask the admin for the link from logs.",
+        "email-label": "Email",
+        "required-field": "{{validation.required-field}}",
+        "valid-email": "{{validation.valid-email}}",
+        "submit": "{{common.submit}}"
+    },
+
+    "reset-password-modal": {
+        "title": "Reset {{username}}'s Password",
+        "new-password-label": "New Password",
+        "error-label": "Error: ",
+        "close": "{{common.close}}",
+        "cancel": "{{common.cancel}}",
+        "save": "{{common.save}}"
+    },
+
+    "all-series": {
+        "series-count": "{{common.series-count}}"
+    },
 
+    "announcements": {
+        "title": "Announcements"
+    },
+
+    "changelog": {
+        "installed": "Installed",
+        "download": "Download",
+        "published-label": "Published: ",
+        "available": "Available",
+        "description": "If you do not see an {{installed}}",
+        "description-continued": "tag, you are on a nightly release. Only major versions will show as available."
+    },
 
     "validation": {
         "required-field": "This field is required",
@@ -515,6 +548,7 @@
         "delete": "Delete",
         "edit": "Edit",
         "help": "Help",
+        "submit": "Submit",
         "loading": "Loading...",
         "series-count": "{{num}} Series"
     }