From 01185bdb0a3be5b53a99ae3bf0f1ef731490fb33 Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Sat, 13 Jul 2024 12:54:02 -0500
Subject: [PATCH] Fixed up the wiring for uploading by url. Method needs to be
 implemented.

---
 API/Controllers/FontController.cs             |  4 +-
 UI/Web/src/app/_services/font.service.ts      |  2 +-
 .../font-manager/font-manager.component.html  | 55 ++++++++++++++-----
 .../font-manager/font-manager.component.ts    | 30 +++++-----
 openapi.json                                  |  2 +-
 5 files changed, 59 insertions(+), 34 deletions(-)

diff --git a/API/Controllers/FontController.cs b/API/Controllers/FontController.cs
index dbd100c52..364122ac6 100644
--- a/API/Controllers/FontController.cs
+++ b/API/Controllers/FontController.cs
@@ -111,8 +111,8 @@ public class FontController : BaseApiController
         return Ok(_mapper.Map<EpubFontDto>(font));
     }
 
-    [HttpPost("upload-url")]
-    public async Task<ActionResult> UploadFontByUrl(string url)
+    [HttpPost("upload-by-url")]
+    public async Task<ActionResult> UploadFontByUrl([FromQuery]string url)
     {
         // Validate url
         try
diff --git a/UI/Web/src/app/_services/font.service.ts b/UI/Web/src/app/_services/font.service.ts
index ee6f4952b..96e54bf78 100644
--- a/UI/Web/src/app/_services/font.service.ts
+++ b/UI/Web/src/app/_services/font.service.ts
@@ -56,7 +56,7 @@ export class FontService {
   }
 
   uploadFromUrl(url: string) {
-
+    return this.httpClient.post(this.baseUrl + "font/upload-by-url?url=" + encodeURIComponent(url), {});
   }
 
   deleteFont(id: number) {
diff --git a/UI/Web/src/app/user-settings/font-manager/font-manager/font-manager.component.html b/UI/Web/src/app/user-settings/font-manager/font-manager/font-manager.component.html
index a0b0c6405..459d3a5f4 100644
--- a/UI/Web/src/app/user-settings/font-manager/font-manager/font-manager.component.html
+++ b/UI/Web/src/app/user-settings/font-manager/font-manager/font-manager.component.html
@@ -37,27 +37,54 @@
 
             @if (files && files.length > 0) {
               <app-loading [loading]="isUploadingFont"></app-loading>
-            } @else if (hasAdmin$ | async) {
+            } @else {
               <ngx-file-drop (onFileDrop)="dropped($event)" [accept]="acceptableExtensions" [directory]="false"
                              dropZoneClassName="file-upload" contentClassName="file-upload-zone">
 
                 <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-                  <div class="row g-0 mt-3 pb-3">
-                    <div class="mx-auto">
-                      <div class="row g-0 mb-3">
-                        <i class="fa fa-file-upload mx-auto" style="font-size: 24px; width: 20px;" aria-hidden="true"></i>
-                      </div>
 
-                      <div class="d-flex justify-content-center">
-                        <div class="d-flex justify-content-evenly">
-                          <span class="pe-0" href="javascript:void(0)">{{t('drag-n-drop')}}</span>
-                          <span class="ps-1 pe-1">•</span>
-                          <a class="pe-0" href="javascript:void(0)" (click)="openFileSelector()">{{t('upload')}}<span class="phone-hidden"> {{t('upload-continued')}}</span></a>
+                  @switch (mode) {
+                    @case ('all') {
+                      <div class="row g-0 mt-3 pb-3">
+                        <div class="mx-auto">
+                          <div class="row g-0 mb-3">
+                            <i class="fa fa-file-upload mx-auto" style="font-size: 24px; width: 20px;" aria-hidden="true"></i>
+                          </div>
+
+                          <div class="d-flex justify-content-center">
+                            <div class="d-flex justify-content-evenly">
+                              <a class="pe-0" href="javascript:void(0)" (click)="changeMode('url')">
+                                <span class="phone-hidden">{{t('enter-an-url-pre-title', {url: ''})}}</span>{{t('url')}}
+                              </a>
+                              <span class="ps-1 pe-1">•</span>
+                              <span class="pe-0" href="javascript:void(0)">{{t('drag-n-drop')}}</span>
+                              <span class="ps-1 pe-1">•</span>
+                              <a class="pe-0" href="javascript:void(0)" (click)="openFileSelector()">{{t('upload')}}<span class="phone-hidden"> {{t('upload-continued')}}</span></a>
+                            </div>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </div>
-
+                    }
+                    @case ('url') {
+                      <form [formGroup]="form">
+                        <div class="row g-0 mt-3 pb-3 ms-md-2 me-md-2">
+                          <div class="input-group col-auto me-md-2" style="width: 83%">
+                            <label class="input-group-text" for="load-url">{{t('url-label')}}</label>
+                            <input type="text" autofocus autocomplete="off" class="form-control" formControlName="fontUrl"
+                                   placeholder="https://" id="load-url">
+                            <button class="btn btn-outline-secondary" type="button" (click)="uploadFromUrl(); changeMode('all');"
+                                    [disabled]="(form.get('fontUrl')?.value).length === 0">
+                              {{t('load')}}
+                            </button>
+                          </div>
+                          <button class="btn btn-secondary col-auto" href="javascript:void(0)" (click)="changeMode('all')">
+                            <i class="fas fa-share" aria-hidden="true" style="transform: rotateY(180deg)"></i>&nbsp;
+                            <span class="phone-hidden">{{t('back')}}</span>
+                          </button>
+                        </div>
+                      </form>
+                    }
+                  }
                 </ng-template>
 
               </ngx-file-drop>
diff --git a/UI/Web/src/app/user-settings/font-manager/font-manager/font-manager.component.ts b/UI/Web/src/app/user-settings/font-manager/font-manager/font-manager.component.ts
index 6686b966e..b5ee62fe6 100644
--- a/UI/Web/src/app/user-settings/font-manager/font-manager/font-manager.component.ts
+++ b/UI/Web/src/app/user-settings/font-manager/font-manager/font-manager.component.ts
@@ -15,7 +15,6 @@ import {LoadingComponent} from "../../../shared/loading/loading.component";
 import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {SentenceCasePipe} from "../../../_pipes/sentence-case.pipe";
 import {SiteThemeProviderPipe} from "../../../_pipes/site-theme-provider.pipe";
-import {ThemeProvider} from "../../../_models/preferences/site-theme";
 import {CarouselReelComponent} from "../../../carousel/_components/carousel-reel/carousel-reel.component";
 import {DefaultValuePipe} from "../../../_pipes/default-value.pipe";
 import {ImageComponent} from "../../../shared/image/image.component";
@@ -63,7 +62,10 @@ export class FontManagerComponent implements OnInit {
     map(c => c && this.accountService.hasAdminRole(c))
   );
 
-  form!: FormGroup;
+  form: FormGroup = new FormGroup({
+    fontUrl: new FormControl('', [])
+  });
+
   selectedFont: EpubFont | undefined = undefined;
 
   files: NgxFileDropEntry[] = [];
@@ -75,19 +77,12 @@ export class FontManagerComponent implements OnInit {
   constructor(@Inject(DOCUMENT) private document: Document) {}
 
   ngOnInit() {
-    this.form = this.fb.group({
-      coverImageUrl: new FormControl('', [])
-    });
-    this.cdRef.markForCheck();
+    this.loadFonts();
+  }
 
+  loadFonts() {
     this.fontService.getFonts().subscribe(fonts => {
       this.fonts = fonts;
-      // this.fonts.forEach(font => {
-      //   this.fontService.getFontFace(font).load().then(loadedFace => {
-      //     (this.document as any).fonts.add(loadedFace);
-      //   });
-      // })
-
       this.cdRef.markForCheck();
     });
   }
@@ -119,9 +114,13 @@ export class FontManagerComponent implements OnInit {
     this.cdRef.markForCheck();
   }
 
-  uploadFromUrl(url?: string) {
-    url = url || this.form.get('coverImageUrl')?.value.trim();
+  uploadFromUrl() {
+    const url = this.form.get('fontUrl')?.value.trim();
     if (!url || url === '') return;
+
+    this.fontService.uploadFromUrl(url).subscribe(() => {
+      this.loadFonts();
+    });
   }
 
   async deleteFont(id: number) {
@@ -137,8 +136,7 @@ export class FontManagerComponent implements OnInit {
 
   changeMode(mode: 'file' | 'url' | 'all') {
     this.mode = mode;
+    this.cdRef.markForCheck();
   }
 
-
-    protected readonly ThemeProvider = ThemeProvider;
 }
diff --git a/openapi.json b/openapi.json
index 629c6cc3f..f8fdd9fc9 100644
--- a/openapi.json
+++ b/openapi.json
@@ -2466,7 +2466,7 @@
         }
       }
     },
-    "/api/Font/upload-url": {
+    "/api/Font/upload-by-url": {
       "post": {
         "tags": [
           "Font"