Fixed up the wiring for uploading by url. Method needs to be implemented.

API/Controllers/FontController.cs

@@ -111,8 +111,8 @@ public class FontController : BaseApiController
         return Ok(_mapper.Map<EpubFontDto>(font));
     }
 
-    [HttpPost("upload-url")]
+    [HttpPost("upload-by-url")]
-    public async Task<ActionResult> UploadFontByUrl(string url)
+    public async Task<ActionResult> UploadFontByUrl([FromQuery]string url)
     {
         // Validate url
         try

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) {

UI/Web/src/app/user-settings/font-manager/font-manager/font-manager.component.html

@@ -37,11 +37,14 @@
 
             @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">
+
+                  @switch (mode) {
+                    @case ('all') {
                       <div class="row g-0 mt-3 pb-3">
                         <div class="mx-auto">
                           <div class="row g-0 mb-3">
@@ -50,6 +53,10 @@
 
                           <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>
@@ -57,7 +64,27 @@
                           </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>

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({
+    this.loadFonts();
-      coverImageUrl: new FormControl('', [])
+  }
-    });
-    this.cdRef.markForCheck();
 
+  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) {
+  uploadFromUrl() {
-    url = url || this.form.get('coverImageUrl')?.value.trim();
+    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;
 }

openapi.json

@@ -2466,7 +2466,7 @@
         }
       }
     },
-    "/api/Font/upload-url": {
+    "/api/Font/upload-by-url": {
       "post": {
         "tags": [
           "Font"