From 597017ebceeece579f3f8a972e39e5f36f33336e Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Thu, 14 Aug 2025 10:17:10 +0000
Subject: [PATCH] fix: improve export dialog for users without authentication

- No longer shows 'Use your login password' option when no auth is configured
- Defaults to passphrase-only mode for auth-less instances
- Shows 'Encryption Passphrase' instead of confusing login password references
- Always enforces 12-character minimum for auth-less users
- Clearer messaging throughout for different auth states
---
 .../src/components/Settings/Settings.tsx      | 109 ++++++++++--------
 1 file changed, 63 insertions(+), 46 deletions(-)

diff --git a/frontend-modern/src/components/Settings/Settings.tsx b/frontend-modern/src/components/Settings/Settings.tsx
index 2d17865eb..fedf13a6c 100644
--- a/frontend-modern/src/components/Settings/Settings.tsx
+++ b/frontend-modern/src/components/Settings/Settings.tsx
@@ -542,12 +542,17 @@ const Settings: Component = () => {
 
   const handleExport = async () => {
     if (!exportPassphrase()) {
-      showError(useCustomPassphrase() ? 'Please enter a passphrase' : 'Please enter your password');
+      const hasAuth = securityStatus()?.hasAuthentication;
+      showError(hasAuth 
+        ? (useCustomPassphrase() ? 'Please enter a passphrase' : 'Please enter your password')
+        : 'Please enter a passphrase');
       return;
     }
     
-    if (useCustomPassphrase() && exportPassphrase().length < 12) {
-      showError('Custom passphrase must be at least 12 characters long');
+    // Require 12 chars for custom passphrase or when no auth exists
+    const hasAuth = securityStatus()?.hasAuthentication;
+    if ((!hasAuth || useCustomPassphrase()) && exportPassphrase().length < 12) {
+      showError('Passphrase must be at least 12 characters long');
       return;
     }
     
@@ -1636,7 +1641,11 @@ const Settings: Component = () => {
                           Download an encrypted backup of all nodes and settings
                         </p>
                         <button
-                          onClick={() => setShowExportDialog(true)}
+                          onClick={() => {
+                            // Default to custom passphrase if no auth is configured
+                            setUseCustomPassphrase(!securityStatus()?.hasAuthentication);
+                            setShowExportDialog(true);
+                          }}
                           class="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors inline-flex items-center gap-2"
                         >
                           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -2031,61 +2040,69 @@ const Settings: Component = () => {
             <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Export Configuration</h3>
             
             <div class="space-y-4">
-              {/* Password Choice Section */}
-              <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
-                <div class="space-y-3">
-                  <label class="flex items-start gap-3 cursor-pointer">
-                    <input
-                      type="radio"
-                      checked={!useCustomPassphrase()}
-                      onChange={() => {
-                        setUseCustomPassphrase(false);
-                        setExportPassphrase('');
-                      }}
-                      class="mt-1 text-blue-600 focus:ring-blue-500"
-                    />
-                    <div class="flex-1">
-                      <div class="text-sm font-medium text-gray-700 dark:text-gray-300">
-                        Use your login password
+              {/* Password Choice Section - Only show if auth is enabled */}
+              <Show when={securityStatus()?.hasAuthentication}>
+                <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+                  <div class="space-y-3">
+                    <label class="flex items-start gap-3 cursor-pointer">
+                      <input
+                        type="radio"
+                        checked={!useCustomPassphrase()}
+                        onChange={() => {
+                          setUseCustomPassphrase(false);
+                          setExportPassphrase('');
+                        }}
+                        class="mt-1 text-blue-600 focus:ring-blue-500"
+                      />
+                      <div class="flex-1">
+                        <div class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                          Use your login password
+                        </div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                          Use the same password you use to log into Pulse (recommended)
+                        </div>
                       </div>
-                      <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                        Use the same password you use to log into Pulse (recommended)
+                    </label>
+                    
+                    <label class="flex items-start gap-3 cursor-pointer">
+                      <input
+                        type="radio"
+                        checked={useCustomPassphrase()}
+                        onChange={() => setUseCustomPassphrase(true)}
+                        class="mt-1 text-blue-600 focus:ring-blue-500"
+                      />
+                      <div class="flex-1">
+                        <div class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                          Use a custom passphrase
+                        </div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                          Create a different passphrase for this backup
+                        </div>
                       </div>
-                    </div>
-                  </label>
-                  
-                  <label class="flex items-start gap-3 cursor-pointer">
-                    <input
-                      type="radio"
-                      checked={useCustomPassphrase()}
-                      onChange={() => setUseCustomPassphrase(true)}
-                      class="mt-1 text-blue-600 focus:ring-blue-500"
-                    />
-                    <div class="flex-1">
-                      <div class="text-sm font-medium text-gray-700 dark:text-gray-300">
-                        Use a custom passphrase
-                      </div>
-                      <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                        Create a different passphrase for this backup
-                      </div>
-                    </div>
-                  </label>
+                    </label>
+                  </div>
                 </div>
-              </div>
+              </Show>
               
               {/* Show password input based on selection */}
               <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  {useCustomPassphrase() ? 'Custom Passphrase' : 'Enter Your Login Password'}
+                  {securityStatus()?.hasAuthentication 
+                    ? (useCustomPassphrase() ? 'Custom Passphrase' : 'Enter Your Login Password')
+                    : 'Encryption Passphrase'}
                 </label>
                 <input
                   type="password"
                   value={exportPassphrase()}
                   onInput={(e) => setExportPassphrase(e.currentTarget.value)}
-                  placeholder={useCustomPassphrase() ? "Enter a strong passphrase" : "Enter your Pulse login password"}
+                  placeholder={
+                    securityStatus()?.hasAuthentication 
+                      ? (useCustomPassphrase() ? "Enter a strong passphrase" : "Enter your Pulse login password")
+                      : "Enter a strong passphrase for encryption"
+                  }
                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                 />
-                <Show when={useCustomPassphrase()}>
+                <Show when={!securityStatus()?.hasAuthentication || useCustomPassphrase()}>
                   <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                     Passphrase must be at least 12 characters. You'll need this to restore the backup.
                   </p>
@@ -2095,7 +2112,7 @@ const Settings: Component = () => {
                     </p>
                   </Show>
                 </Show>
-                <Show when={!useCustomPassphrase()}>
+                <Show when={securityStatus()?.hasAuthentication && !useCustomPassphrase()}>
                   <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                     You'll use this same password when restoring the backup
                   </p>