small js path function for dialog html

Author: ChrispyBacon-dev

dockflare/app/static/js/main.js

@@ -308,6 +308,8 @@ document.addEventListener('DOMContentLoaded', function() {
     themeManager.initialize();
     const manualServiceTypeSelect = document.getElementById('manual_service_type');
     const noTlsVerifyDiv = document.getElementById('manual_no_tls_verify_div'); 
+    const manualPathDisplay = document.getElementById('manual_path_display'); 
+    const manualPathHidden = document.getElementById('manual_path');         
 
     if (manualServiceTypeSelect && noTlsVerifyDiv) {
         function toggleNoTlsVerifyVisibility() {
@@ -321,6 +323,17 @@ document.addEventListener('DOMContentLoaded', function() {
         manualServiceTypeSelect.addEventListener('change', toggleNoTlsVerifyVisibility);
         toggleNoTlsVerifyVisibility(); 
     }
+    if (manualPathDisplay && manualPathHidden) {
+        manualPathDisplay.addEventListener('input', function () {
+            let displayValue = this.value.trim();
+            if (displayValue) {
+                let pathSegment = displayValue.replace(/^\/+/, '');
+                manualPathHidden.value = '/' + pathSegment;
+            } else {
+                manualPathHidden.value = ''; 
+            }
+        });
+    }
     document.querySelectorAll('form.protocol-aware-form').forEach(form => {
         if (form.getAttribute('action')) {
             let actionUrl = form.getAttribute('action');

dockflare/app/templates/status_page.html

@@ -453,12 +453,13 @@ <h4 class="text-md font-semibold mb-2">Public Hostname</h4>
                         <div class="text-xs opacity-60 mt-1">This will be combined with the subdomain to form the full hostname.</div>
                     </div>
                     <div class="md:col-span-2">
-                        <label class="label" for="manual_path"><span class="label-text">Path</span></label>
+                        <label class="label" for="manual_path_display"><span class="label-text">Path</span></label>
                         <div class="join w-full">
                             <span class="join-item btn btn-disabled normal-case pointer-events-none bg-base-200 border-base-300 !min-h-[3rem] !h-[3rem] px-3">/</span>
-                            <input type="text" id="manual_path" name="manual_path" placeholder="(optional) path" class="input input-bordered join-item w-full" />
+                            <input type="text" id="manual_path_display" placeholder="(optional) path" class="input input-bordered join-item w-full" />
                         </div>
-                         <div class="text-xs opacity-60 mt-1">If blank, rule applies to the root. Must start with '/' if specified.</div>
+                        <input type="hidden" id="manual_path" name="manual_path" />
+                         <div class="text-xs opacity-60 mt-1">If blank, rule applies to the root. User types "app", submitted as "/app".</div>
                     </div>
                 </div>
             </div>