feat(frontend): add Spotify URL validation to download input

src/frontend/src/app/app.component.html

@@ -13,16 +13,23 @@
   <div class="hero-body">
     <div class="box">
       <p class="subtitle">Download</p>
+      <div>
         <div class="is-flex">
-        <input class="input" type="text" [(ngModel)]="url" placeholder="Paste playlist/song/artist url"/>
+          <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"
+                  [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>
     <div class="box">

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