From 323d0cb02cf89ee635ffe4ae526f10a862892b06 Mon Sep 17 00:00:00 2001
From: Yury Kossakovsky <kossakovsky93@gmail.com>
Date: Thu, 11 Dec 2025 17:46:01 -0700
Subject: [PATCH] fix: improve welcome page ux and add dynamic quick start

- fix password reveal button not working (add preventDefault)
- update n8n and flowise to show "create account on first login"
- change redis internal info to combined host:port format
- add dynamic quick_start array based on active profiles
- rename "make commands" section to "useful commands"
---
 scripts/generate_welcome_page.sh | 84 +++++++++++++++++++++++++++++---
 welcome/app.js                   | 13 ++++-
 welcome/index.html               |  2 +-
 3 files changed, 90 insertions(+), 9 deletions(-)

diff --git a/scripts/generate_welcome_page.sh b/scripts/generate_welcome_page.sh
index 3b13ac7..11b1387 100755
--- a/scripts/generate_welcome_page.sh
+++ b/scripts/generate_welcome_page.sh
@@ -64,7 +64,7 @@ if is_profile_active "n8n"; then
     SERVICES_ARRAY+=("    \"n8n\": {
       \"hostname\": \"$(json_escape "$N8N_HOSTNAME")\",
       \"credentials\": {
-        \"note\": \"Use the email you provided during installation\"
+        \"note\": \"Create your account on first login\"
       },
       \"extra\": {
         \"workers\": \"$N8N_WORKER_COUNT_VAL\"
@@ -77,8 +77,7 @@ if is_profile_active "flowise"; then
     SERVICES_ARRAY+=("    \"flowise\": {
       \"hostname\": \"$(json_escape "$FLOWISE_HOSTNAME")\",
       \"credentials\": {
-        \"username\": \"$(json_escape "$FLOWISE_USERNAME")\",
-        \"password\": \"$(json_escape "$FLOWISE_PASSWORD")\"
+        \"note\": \"Create your account on first login\"
       }
     }")
 fi
@@ -417,8 +416,7 @@ if is_profile_active "n8n" || is_profile_active "langfuse"; then
         \"password\": \"$(json_escape "$REDIS_AUTH")\"
       },
       \"extra\": {
-        \"internal_host\": \"${REDIS_HOST:-redis}\",
-        \"internal_port\": \"${REDIS_PORT:-6379}\"
+        \"internal_url\": \"${REDIS_HOST:-redis}:${REDIS_PORT:-6379}\"
       }
     }")
 fi
@@ -475,6 +473,77 @@ for i in "${!SERVICES_ARRAY[@]}"; do
     SERVICES_JSON+="${SERVICES_ARRAY[$i]}"
 done
 
+# Build quick_start array based on active profiles
+declare -a QUICK_START_ARRAY
+STEP_NUM=1
+
+# Step 1: Log into primary service (n8n or Flowise)
+if is_profile_active "n8n"; then
+    QUICK_START_ARRAY+=("    {
+      \"step\": $STEP_NUM,
+      \"title\": \"Log into n8n\",
+      \"description\": \"Create your account on first login\"
+    }")
+    ((STEP_NUM++))
+elif is_profile_active "flowise"; then
+    QUICK_START_ARRAY+=("    {
+      \"step\": $STEP_NUM,
+      \"title\": \"Log into Flowise\",
+      \"description\": \"Create your account on first login\"
+    }")
+    ((STEP_NUM++))
+fi
+
+# Step 2: Create first workflow (if n8n active)
+if is_profile_active "n8n"; then
+    QUICK_START_ARRAY+=("    {
+      \"step\": $STEP_NUM,
+      \"title\": \"Create your first workflow\",
+      \"description\": \"Start with Manual Trigger + HTTP Request nodes\"
+    }")
+    ((STEP_NUM++))
+fi
+
+# Step 3: Explore examples
+if is_profile_active "n8n"; then
+    QUICK_START_ARRAY+=("    {
+      \"step\": $STEP_NUM,
+      \"title\": \"Explore community workflows\",
+      \"description\": \"300+ examples available in imported workflows\"
+    }")
+    ((STEP_NUM++))
+fi
+
+# Step 4: Monitor system (if monitoring active)
+if is_profile_active "monitoring"; then
+    QUICK_START_ARRAY+=("    {
+      \"step\": $STEP_NUM,
+      \"title\": \"Monitor your system\",
+      \"description\": \"Use Grafana to track performance metrics\"
+    }")
+    ((STEP_NUM++))
+fi
+
+# Step 5: Configure database backups (if postgresus active)
+if is_profile_active "postgresus"; then
+    QUICK_START_ARRAY+=("    {
+      \"step\": $STEP_NUM,
+      \"title\": \"Configure database backups\",
+      \"description\": \"Set up Postgresus for automated PostgreSQL backups\"
+    }")
+    ((STEP_NUM++))
+fi
+
+# Join quick_start array
+QUICK_START_JSON=""
+for i in "${!QUICK_START_ARRAY[@]}"; do
+    if [ $i -gt 0 ]; then
+        QUICK_START_JSON+=",
+"
+    fi
+    QUICK_START_JSON+="${QUICK_START_ARRAY[$i]}"
+done
+
 # Write final JSON with proper formatting
 cat > "$OUTPUT_FILE" << EOF
 {
@@ -482,7 +551,10 @@ cat > "$OUTPUT_FILE" << EOF
   "generated_at": "$GENERATED_AT",
   "services": {
 $SERVICES_JSON
-  }
+  },
+  "quick_start": [
+$QUICK_START_JSON
+  ]
 }
 EOF
 
diff --git a/welcome/app.js b/welcome/app.js
index 6b84d93..e7a98da 100644
--- a/welcome/app.js
+++ b/welcome/app.js
@@ -301,10 +301,16 @@
             passwordSpan.dataset.hidden = 'true';
         };
 
-        toggleBtn.addEventListener('mousedown', showPassword);
+        toggleBtn.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            showPassword();
+        });
         toggleBtn.addEventListener('mouseup', hidePassword);
         toggleBtn.addEventListener('mouseleave', hidePassword);
-        toggleBtn.addEventListener('touchstart', showPassword);
+        toggleBtn.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            showPassword();
+        });
         toggleBtn.addEventListener('touchend', hidePassword);
 
         // Copy button
@@ -414,6 +420,9 @@
             if (extra.internal_api) {
                 extraItems.push(`<span class="text-xs text-gray-600 font-mono">Internal: ${escapeHtml(extra.internal_api)}</span>`);
             }
+            if (extra.internal_url) {
+                extraItems.push(`<span class="text-xs text-gray-600 font-mono">Internal: ${escapeHtml(extra.internal_url)}</span>`);
+            }
             if (extra.workers) {
                 extraItems.push(`<span class="text-xs text-gray-600">Workers: ${escapeHtml(extra.workers)}</span>`);
             }
diff --git a/welcome/index.html b/welcome/index.html
index 839a32c..eff6008 100644
--- a/welcome/index.html
+++ b/welcome/index.html
@@ -130,7 +130,7 @@
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                     </svg>
                 </div>
-                <h2 class="text-2xl font-semibold text-white">Make Commands</h2>
+                <h2 class="text-2xl font-semibold text-white">Useful Commands</h2>
             </div>
             <div id="commands-container" class="bg-surface-100 rounded-xl border border-surface-400 p-6">
                 <!-- Commands will be injected here by JavaScript -->