Updateded all fonts to be woff2

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss

@@ -1,42 +1,42 @@
 @font-face {
     font-family: "Fira_Sans";
-    src: url(../../../../assets/fonts/Fira_Sans/FiraSans-Regular.ttf) format("truetype");
+    src: url(../../../../assets/fonts/Fira_Sans/FiraSans-Regular.woff2) format("woff2");
     font-display: swap;
 }
 
 @font-face {
     font-family: "Lato";
-    src: url(../../../../assets/fonts/Lato/Lato-Regular.ttf) format("truetype");
+    src: url(../../../../assets/fonts/Lato/Lato-Regular.woff2) format("woff2");
     font-display: swap;
 }
 
 @font-face {
     font-family: "Libre_Baskerville";
-    src: url(../../../../assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf) format("truetype");
+    src: url(../../../../assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.woff2) format("woff2");
     font-display: swap;
 }
 
 @font-face {
     font-family: "Merriweather";
-    src: url(../../../../assets/fonts/Merriweather/Merriweather-Regular.ttf) format("truetype");
+    src: url(../../../../assets/fonts/Merriweather/Merriweather-Regular.woff2) format("woff2");
     font-display: swap;
 }
 
 @font-face {
     font-family: "Nanum_Gothic";
-    src: url(../../../../assets/fonts/Nanum_Gothic/NanumGothic-Regular.ttf) format("truetype");
+    src: url(../../../../assets/fonts/Nanum_Gothic/NanumGothic-Regular.woff2) format("woff2");
     font-display: swap;
 }
 
 @font-face {
     font-family: "RocknRoll_One";
-    src: url(../../../../assets/fonts/RocknRoll_One/RocknRollOne-Regular.ttf) format("truetype");
+    src: url(../../../../assets/fonts/RocknRoll_One/RocknRollOne-Regular.woff2) format("woff2");
     font-display: swap;
 }
 
 @font-face {
     font-family: "OpenDyslexic2";
-    src: url(../../../../assets/fonts/OpenDyslexic2/OpenDyslexic-Regular.otf) format("opentype");
+    src: url(../../../../assets/fonts/OpenDyslexic2/OpenDyslexic-Regular.woff2) format("woff2");
     font-display: swap;
 }
 

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

@@ -1,28 +1,31 @@
-<app-splash-container>
+<ng-container *transloco="let t; read: 'confirm-reset-password'">
+  <app-splash-container>
     <ng-container title><h2>Password Reset</h2></ng-container>
     <ng-container body>
-        <p>Enter the new password</p>
-        <form [formGroup]="registerForm" (ngSubmit)="submit()">
-            <div class="mb-3">
-                <label for="password" class="form-label">Password</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i>
-                <ng-template #passwordTooltip>
-                    Password must be between 6 and 32 characters in length
-                </ng-template>
-                <span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
-                <input id="password" class="form-control" maxlength="32" minlength="6" formControlName="password" type="password" aria-describedby="password-help">
-                <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
-                    <div *ngIf="registerForm.get('password')?.errors?.required">
-                        This field is required
-                    </div>
-                    <div *ngIf="registerForm.get('password')?.errors?.minlength || registerForm.get('password')?.errors?.maxLength">
-                        Password must be between 6 and 32 characters in length
-                    </div>
-                </div>
+      <p>Enter the new password</p>
+      <form [formGroup]="registerForm" (ngSubmit)="submit()">
+        <div class="mb-3">
+          <label for="password" class="form-label">Password</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i>
+          <ng-template #passwordTooltip>
+            Password must be between 6 and 32 characters in length
+          </ng-template>
+          <span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
+          <input id="password" class="form-control" maxlength="32" minlength="6" formControlName="password" type="password" aria-describedby="password-help">
+          <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
+            <div *ngIf="registerForm.get('password')?.errors?.required">
+              This field is required
             </div>
-
-            <div class="float-end">
-                <button class="btn btn-secondary alt" type="submit">Submit</button>
+            <div *ngIf="registerForm.get('password')?.errors?.minlength || registerForm.get('password')?.errors?.maxLength">
+              Password must be between 6 and 32 characters in length
             </div>
-        </form>
+          </div>
+        </div>
+
+        <div class="float-end">
+          <button class="btn btn-secondary alt" type="submit">Submit</button>
+        </div>
+      </form>
     </ng-container>
-</app-splash-container>
+  </app-splash-container>
+
+</ng-container>

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

@@ -7,14 +7,15 @@ import { NavService } from 'src/app/_services/nav.service';
 import { NgTemplateOutlet, NgIf } from '@angular/common';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { SplashContainerComponent } from '../splash-container/splash-container.component';
+import {TranslocoModule} from "@ngneat/transloco";
 
 @Component({
     selector: 'app-confirm-reset-password',
     templateUrl: './confirm-reset-password.component.html',
     styleUrls: ['./confirm-reset-password.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [SplashContainerComponent, ReactiveFormsModule, NgbTooltip, NgTemplateOutlet, NgIf]
+    imports: [SplashContainerComponent, ReactiveFormsModule, NgbTooltip, NgTemplateOutlet, NgIf, TranslocoModule]
 })
 export class ConfirmResetPasswordComponent {
 
@@ -24,7 +25,7 @@ export class ConfirmResetPasswordComponent {
     password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
   });
 
-  constructor(private route: ActivatedRoute, private router: Router, 
+  constructor(private route: ActivatedRoute, private router: Router,
     private accountService: AccountService, private toastr: ToastrService,
     private readonly cdRef: ChangeDetectorRef, private navService: NavService) {
 

UI/Web/src/assets/fonts/convert-fonts.py

@@ -0,0 +1,25 @@
+import os
+from fontTools.ttLib import TTFont
+
+# Function to convert a font file to woff2
+def convert_to_woff2(font_path):
+    font = TTFont(font_path)
+    font.flavor = 'woff2'
+    new_path = os.path.splitext(font_path)[0] + '.woff2'
+    font.save(new_path)
+    return new_path
+
+def main():
+    # Get the current directory of the script
+    current_directory = os.path.dirname(os.path.abspath(__file__))
+
+    # Search for all OTF files recursively in the current directory
+    for root, _, files in os.walk(current_directory):
+        for file in files:
+            if file.lower().endswith(('.otf', '.ttf')) and not file.lower().endswith(('.woff', '.woff2')):
+                font_file = os.path.join(root, file)
+                new_path = convert_to_woff2(font_file)
+                print(f"Converted {font_file} to {new_path}")
+
+if __name__ == "__main__":
+    main()

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

@@ -642,6 +642,10 @@
         "success": "Success!"
     },
 
+    "confirm-reset-password": {
+
+    },
+
     "validation": {
         "required-field": "This field is required",
         "valid-email": "This must be a valid email"

UI/Web/src/styles.scss

@@ -50,13 +50,13 @@
 // Global Styles
 @font-face {
   font-family: "EBGarmond";
-  src: url("assets/fonts/EBGarmond/EBGaramond-VariableFont_wght.ttf") format("truetype");
+  src: url("assets/fonts/EBGarmond/EBGaramond-VariableFont_wght.woff2") format("woff2");
   font-display: swap;
 }
 
 @font-face {
   font-family: "Spartan";
-  src: url("assets/fonts/Spartan/Spartan-VariableFont_wght.ttf");
+  src: url("assets/fonts/Spartan/Spartan-VariableFont_wght.woff2") format("woff2");
   font-display: swap;
 }