From 786eddef1c31be6908220124114e09ffb7461b13 Mon Sep 17 00:00:00 2001
From: Raiper34 <raipergm34@gmail.com>
Date: Sun, 3 May 2026 22:14:39 +0000
Subject: [PATCH] feat(frontend): add Spotify URL validation to download input

---
 src/frontend/src/app/app.component.html | 25 ++++++++++++++++---------
 src/frontend/src/app/app.component.ts   |  5 +++++
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/app/app.component.html b/src/frontend/src/app/app.component.html
index 0bf2ba7..97d2ea3 100644
--- a/src/frontend/src/app/app.component.html
+++ b/src/frontend/src/app/app.component.html
@@ -13,15 +13,22 @@
   <div class="hero-body">
     <div class="box">
       <p class="subtitle">Download</p>
-      <div class="is-flex">
-        <input class="input" type="text" [(ngModel)]="url" placeholder="Paste playlist/song/artist url"/>
-        <button class="button is-primary"
-                [class.is-loading]="(createLoading$ | async)?.isLoading"
-                (click)="download()"
-                [disabled]="!url"
-        >
-          <i class="fa-solid fa-download"></i> Download
-        </button>
+      <div>
+        <div class="is-flex">
+          <input class="input"
+                 [class.is-danger]="url && !isValidSpotifyUrl"
+                 type="text"
+                 [(ngModel)]="url"
+                 placeholder="Paste playlist/song/artist url"/>
+          <button class="button is-primary"
+                  [class.is-loading]="(createLoading$ | async)?.isLoading"
+                  (click)="download()"
+                  [disabled]="!url || !isValidSpotifyUrl"
+          >
+            <i class="fa-solid fa-download"></i> Download
+          </button>
+        </div>
+        <p *ngIf="url && !isValidSpotifyUrl" class="help is-danger">Please enter a valid Spotify URL (e.g. https://open.spotify.com/...)</p>
       </div>
     </div>
     <hr>
diff --git a/src/frontend/src/app/app.component.ts b/src/frontend/src/app/app.component.ts
index 2370615..cd72f00 100644
--- a/src/frontend/src/app/app.component.ts
+++ b/src/frontend/src/app/app.component.ts
@@ -16,6 +16,11 @@ import {map} from "rxjs";
 export class AppComponent {
 
   url = ''
+  private readonly spotifyUrlPattern = /^https:\/\/open\.spotify\.com\/(track|playlist|album|artist)\/[a-zA-Z0-9]+/;
+
+  get isValidSpotifyUrl(): boolean {
+    return this.spotifyUrlPattern.test(this.url);
+  }
   createLoading$ = this.playlistService.createLoading$;
   playlists$ = this.playlistService.all$.pipe(map(items => items.filter(item => !item.isTrack)));
   songs$ = this.playlistService.all$.pipe(map(items => items.filter(item => item.isTrack)));