From 74ff9d3c08c639addad2ab95812cb343c642795a Mon Sep 17 00:00:00 2001
From: xpltd <dev@xpltd.co>
Date: Thu, 19 Mar 2026 05:42:53 -0500
Subject: [PATCH] Invalid URL display, password mismatch hint

- Invalid URL error shows in preview-styled box instead of alongside
  format picker. Options panel hidden when URL is invalid.
- Password mismatch warning ('Passwords don't match') shown live
  below confirm field when values differ.
---
 frontend/src/components/AdminPanel.vue | 11 +++++++++++
 frontend/src/components/UrlInput.vue   | 12 +++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/AdminPanel.vue b/frontend/src/components/AdminPanel.vue
index 2358726..8660ac7 100644
--- a/frontend/src/components/AdminPanel.vue
+++ b/frontend/src/components/AdminPanel.vue
@@ -339,6 +339,12 @@ function formatFilesize(bytes: number | null): string {
               class="settings-input"
               @keydown.enter="changePassword"
             />
+            <span
+              v-if="confirmPassword && newPassword && confirmPassword !== newPassword"
+              class="password-mismatch"
+            >
+              Passwords don't match
+            </span>
           </div>
           <div class="settings-actions" style="margin-top: var(--space-sm);">
             <button
@@ -618,6 +624,11 @@ h3 {
   font-weight: 500;
 }
 
+.password-mismatch {
+  color: var(--color-warning);
+  font-size: var(--font-size-sm);
+}
+
 /* Expandable session rows */
 .session-row.clickable {
   cursor: pointer;
diff --git a/frontend/src/components/UrlInput.vue b/frontend/src/components/UrlInput.vue
index e2336de..1ef6894 100644
--- a/frontend/src/components/UrlInput.vue
+++ b/frontend/src/components/UrlInput.vue
@@ -393,7 +393,8 @@ function formatTooltip(fmt: string): string {
       </div>
     </div>
 
-    <div v-if="analyzeError" class="extract-error">
+    <!-- Error feedback — shown in preview area style -->
+    <div v-if="analyzeError && !isAnalyzing" class="url-preview error-preview">
       {{ analyzeError }}
     </div>
 
@@ -405,9 +406,9 @@ function formatTooltip(fmt: string): string {
       {{ store.submitError }}
     </div>
 
-    <!-- Collapsible options panel -->
+    <!-- Collapsible options panel (hidden when URL is invalid) -->
     <Transition name="options-slide">
-      <div v-if="showOptions" class="options-panel">
+      <div v-if="showOptions && !analyzeError" class="options-panel">
         <!-- Output format selector -->
         <div class="format-selector">
           <label class="format-label">Output format</label>
@@ -658,6 +659,11 @@ button:disabled {
   color: var(--color-text-muted);
 }
 
+.url-preview.error-preview {
+  color: var(--color-error);
+  font-size: var(--font-size-sm);
+}
+
 .preview-header {
   display: flex;
   align-items: center;