Add cookie file upload for authenticated downloads

ui/src/app/app.html

@@ -211,6 +211,24 @@
                       ngbTooltip="Add a prefix to downloaded filenames">
                   </div>
                 </div>
+                <div class="col-md-6">
+                  <div class="d-flex align-items-center mt-2">
+                    <label class="btn btn-sm btn-outline-secondary me-2 mb-0" for="cookie-upload"
+                      ngbTooltip="Upload a cookies.txt file for authenticated downloads">
+                      <fa-icon [icon]="faUpload" class="me-1" />Cookies
+                    </label>
+                    <input type="file" id="cookie-upload" class="d-none" accept=".txt"
+                      (change)="onCookieFileSelect($event)"
+                      [disabled]="cookieUploadInProgress || addInProgress">
+                    @if (hasCookies) {
+                      <span class="badge bg-success me-2">Active</span>
+                      <button type="button" class="btn btn-sm btn-outline-danger"
+                        (click)="deleteCookies()" ngbTooltip="Remove uploaded cookies">
+                        <fa-icon [icon]="faTrashAlt" />
+                      </button>
+                    }
+                  </div>
+                </div>
                 <div class="col-md-6">
                   <div class="input-group">
                     <span class="input-group-text">Items Limit</span>

ui/src/app/app.ts

@@ -6,7 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgSelectModule } from '@ng-select/ng-select';  
-import { faTrashAlt, faCheckCircle, faTimesCircle, faRedoAlt, faSun, faMoon, faCheck, faCircleHalfStroke, faDownload, faExternalLinkAlt, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt, faSortAmountDown, faSortAmountUp, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { faTrashAlt, faCheckCircle, faTimesCircle, faRedoAlt, faSun, faMoon, faCheck, faCircleHalfStroke, faDownload, faExternalLinkAlt, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt, faSortAmountDown, faSortAmountUp, faChevronRight, faUpload } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { CookieService } from 'ngx-cookie-service';
 import { DownloadsService } from './services/downloads.service';
@@ -54,6 +54,8 @@ export class App implements AfterViewInit, OnInit {
   subtitleMode: string;
   addInProgress = false;
   cancelRequested = false;
+  hasCookies = false;
+  cookieUploadInProgress = false;
   themes: Theme[] = Themes;
   activeTheme: Theme | undefined;
   customDirs$!: Observable<string[]>;
@@ -108,6 +110,7 @@ export class App implements AfterViewInit, OnInit {
   faSortAmountDown = faSortAmountDown;
   faSortAmountUp = faSortAmountUp;
   faChevronRight = faChevronRight;
+  faUpload = faUpload;
   subtitleFormats = [
     { id: 'srt', text: 'SRT' },
     { id: 'txt', text: 'TXT (Text only)' },
@@ -205,6 +208,9 @@ export class App implements AfterViewInit, OnInit {
   }
 
   ngOnInit() {
+    this.downloads.getCookieStatus().subscribe(data => {
+      this.hasCookies = data?.has_cookies || false;
+    });
     this.getConfiguration();
     this.getYtdlOptionsUpdateTime();
     this.customDirs$ = this.getMatchingCustomDir();
@@ -782,6 +788,30 @@ export class App implements AfterViewInit, OnInit {
     return this.expandedErrors.has(id);
   }
 
+  onCookieFileSelect(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (!input.files?.length) return;
+    this.cookieUploadInProgress = true;
+    this.downloads.uploadCookies(input.files[0]).subscribe({
+      next: () => {
+        this.hasCookies = true;
+        this.cookieUploadInProgress = false;
+        input.value = '';
+      },
+      error: () => {
+        this.cookieUploadInProgress = false;
+        input.value = '';
+      }
+    });
+  }
+
+  deleteCookies() {
+    this.downloads.deleteCookies().subscribe({
+      next: () => { this.hasCookies = false; },
+      error: () => {}
+    });
+  }
+
   private updateMetrics() {
     this.activeDownloads = Array.from(this.downloads.queue.values()).filter(d => d.status === 'downloading' || d.status === 'preparing').length;
     this.queuedDownloads = Array.from(this.downloads.queue.values()).filter(d => d.status === 'pending').length;

ui/src/app/services/downloads.service.ts

@@ -213,4 +213,24 @@ export class DownloadsService {
       catchError(this.handleHTTPError)
     );
   }
+
+  uploadCookies(file: File) {
+    const formData = new FormData();
+    formData.append('cookies', file);
+    return this.http.post<any>('upload-cookies', formData).pipe(
+      catchError(this.handleHTTPError)
+    );
+  }
+
+  deleteCookies() {
+    return this.http.post<any>('delete-cookies', {}).pipe(
+      catchError(this.handleHTTPError)
+    );
+  }
+
+  getCookieStatus() {
+    return this.http.get<any>('cookie-status').pipe(
+      catchError(this.handleHTTPError)
+    );
+  }
 }