Add input validation to settings form

core/scripts/webpanel/templates/settings.html

@@ -21,24 +21,25 @@
                     <div class='card-header p-0 pt-1 border-bottom-0'>
                         <ul class='nav nav-pills' id='custom-tabs-three-tab' role='tablist' style="margin-left: 20px; margin-top: 10px;">
                             <li class='nav-item'>
-                                <a class='nav-link active' id='subs-tab' data-toggle='pill' href='#subs' role='tab' aria-controls='subs' aria-selected='false'>Subscriptions</a>
+                                <a class='nav-link active' id='subs-tab' data-toggle='pill' href='#subs' role='tab' aria-controls='subs' aria-selected='false'><i class="fas fa-link"></i> Subscriptions</a>
                             </li>
                             <li class='nav-item'>
-                                <a class='nav-link' id='telegram-tab' data-toggle='pill' href='#telegram' role='tab' aria-controls='telegram' aria-selected='true'>Telegram
+                                <a class='nav-link' id='telegram-tab' data-toggle='pill' href='#telegram' role='tab' aria-controls='telegram' aria-selected='true'><i class="fab fa-telegram"></i> Telegram
                                     Bot</a>
                             </li>
                             <li class='nav-item'>
-                                <a class='nav-link' id='port-tab' data-toggle='pill' href='#port' role='tab' aria-controls='port' aria-selected='false'>Change Port</a>
+                                <a class='nav-link' id='port-tab' data-toggle='pill' href='#port' role='tab' aria-controls='port' aria-selected='false'><i class="fas fa-server"></i> Change Port</a>
                             </li>
                             <li class='nav-item'>
-                                <a class='nav-link' id='sni-tab' data-toggle='pill' href='#sni' role='tab' aria-controls='sni' aria-selected='false'>Change SNI</a>
+                                <a class='nav-link' id='sni-tab' data-toggle='pill' href='#sni' role='tab' aria-controls='sni' aria-selected='false'><i class="fas fa-shield-alt"></i> Change SNI</a>
                             </li>
                             <li class='nav-item'>
-                                <a class='nav-link' id='ip-tab' data-toggle='pill' href='#change_ip' role='tab' aria-controls='change_ip' aria-selected='false'>Change IP</a>
+                                <a class='nav-link' id='ip-tab' data-toggle='pill' href='#change_ip' role='tab' aria-controls='change_ip' aria-selected='false'><i class="fas fa-network-wired"></i> Change IP</a>
                             </li>
                         </ul>
                     </div>
                     <div class='card-body' style="margin-left: 25px;">
+                         <!-- Rest of your form content (same as before) -->
                          <div class='tab-content' id='custom-tabs-three-tabContent'>
 
                             <!-- Subscriptions Tab -->
@@ -61,10 +62,16 @@
                                             <div class='form-group'>
                                                 <label for='singbox_domain'>Domain:</label>
                                                 <input type='text' class='form-control' id='singbox_domain' placeholder='Enter Domain'>
+                                                <div class="invalid-feedback">
+                                                    Please enter a valid domain (without http:// or https://).
+                                                </div>
                                             </div>
                                             <div class='form-group'>
                                                 <label for='singbox_port'>Port:</label>
                                                 <input type='text' class='form-control' id='singbox_port' placeholder='Enter Port'>
+                                                <div class="invalid-feedback">
+                                                    Please enter a valid port number.
+                                                </div>
                                             </div>
                                             <button id="singbox_start" type='button' class='btn btn-success'>Start</button>
                                             <button id="singbox_stop" type='button' class='btn btn-danger' style="display: none;">Stop</button>
@@ -78,10 +85,16 @@
                                             <div class='form-group'>
                                                 <label for='normal_domain'>Domain:</label>
                                                 <input type='text' class='form-control' id='normal_domain' placeholder='Enter Domain'>
+                                                <div class="invalid-feedback">
+                                                    Please enter a valid domain (without http:// or https://).
+                                                </div>
                                             </div>
                                             <div class='form-group'>
                                                 <label for='normal_port'>Port:</label>
                                                 <input type='text' class='form-control' id='normal_port' placeholder='Enter Port'>
+                                                <div class="invalid-feedback">
+                                                    Please enter a valid port number.
+                                                </div>
                                             </div>
                                             <button id="normal_start" type='button' class='btn btn-success'>Start</button>
                                             <button id="normal_stop" type='button' class='btn btn-danger' style="display: none;">Stop</button>
@@ -98,10 +111,16 @@
                                     <div class='form-group'>
                                         <label for='telegram_api_token'>API Token:</label>
                                         <input type='text' class='form-control' id='telegram_api_token' placeholder='Enter API Token'>
+                                          <div class="invalid-feedback">
+                                                Please enter a valid API Token.
+                                          </div>
                                     </div>
                                     <div class='form-group'>
                                         <label for='telegram_admin_id'>Admin ID:</label>
                                         <input type='text' class='form-control' id='telegram_admin_id' placeholder='Enter Admin ID'>
+                                        <div class="invalid-feedback">
+                                                Please enter a valid Admin ID.
+                                        </div>
                                     </div>
                                     <button id="telegram_start" type='button' class='btn btn-success'>Start</button>
                                     <button id="telegram_stop" type='button' class='btn btn-danger' style="display: none;">Stop</button>
@@ -116,6 +135,9 @@
                                     <div class='form-group'>
                                         <label for='hysteria_port'>Port:</label>
                                         <input type='text' class='form-control' id='hysteria_port' placeholder='Enter Port'>
+                                        <div class="invalid-feedback">
+                                            Please enter a valid port number.
+                                        </div>
                                     </div>
                                     <button id="port_change" type='button' class='btn btn-primary'>Save</button>
                                 </form>
@@ -128,6 +150,9 @@
                                     <div class='form-group'>
                                         <label for='sni_domain'>Domain:</label>
                                         <input type='text' class='form-control' id='sni_domain' placeholder='Enter Domain'>
+                                        <div class="invalid-feedback">
+                                            Please enter a valid domain (without http:// or https://).
+                                        </div>
                                     </div>
                                     <button id="sni_change" type='button' class='btn btn-primary'>Save</button>
                                 </form>
@@ -139,10 +164,16 @@
                                     <div class='form-group'>
                                         <label for='ipv4'>IPv4:</label>
                                         <input type='text' class='form-control' id='ipv4' placeholder='Enter IPv4' value="{{ ipv4 or '' }}">
+                                         <div class="invalid-feedback">
+                                            Please enter a valid IPv4 address.
+                                        </div>
                                     </div>
                                     <div class='form-group'>
                                         <label for='ipv6'>IPv6:</label>
                                         <input type='text' class='form-control' id='ipv6' placeholder='Enter IPv6' value="{{ ipv6 or '' }}">
+                                        <div class="invalid-feedback">
+                                            Please enter a valid IPv6 address.
+                                        </div>
                                     </div>
                                     <button id="ip_change" type='button' class='btn btn-primary'>Save</button>
                                 </form>
@@ -161,6 +192,9 @@
 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<!-- Font Awesome -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js" integrity="sha512-yFjZbTYRCJodnuyGlsKamNE/LlEaEA/3apsIOPr7/l+jCMq9Dn9x5qyuAGqgpr4/NBZ95p8yrl/sLhJvoazg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
 <script>
 
     function initUI() {
@@ -251,6 +285,28 @@
         // Init UI
         initUI();
 
+        // Validation functions
+        function isValidDomain(domain) {
+            if (!domain) return false;
+            return !domain.startsWith("http://") && !domain.startsWith("https://");
+        }
+
+        function isValidPort(port) {
+             if (!port) return false;
+            return /^[0-9]+$/.test(port) && parseInt(port) > 0 && parseInt(port) <= 65535;
+        }
+        function isValidIP(ip, version) {
+            if (!ip) return true; // Allow empty input (optional)
+
+            if (version === 4) {
+                 return /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip);
+            } else if (version === 6) {
+                return /^(([0-9a-fA-F]{1,4}:){7,7}([0-9a-fA-F]{1,4}|:)|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:))$/.test(ip);
+            }
+            return false;
+        }
+
+
         // Function to show confirmation before executing API calls
         function confirmAction(actionName, callback) {
             Swal.fire({
@@ -288,9 +344,59 @@
                 }
             });
         }
+        // Function to validate form fields
 
+        function validateForm(formId) {
+             let isValid = true;
+            $(`#${formId} .form-control`).each(function() {
+                const input = $(this);
+                const id = input.attr('id');
+
+                if (id.includes('domain')) {
+                    if (!isValidDomain(input.val())) {
+                        input.addClass('is-invalid');
+                        isValid = false;
+                    } else {
+                        input.removeClass('is-invalid');
+                    }
+                } else if (id.includes('port')) {
+                    if (!isValidPort(input.val())) {
+                        input.addClass('is-invalid');
+                        isValid = false;
+                    } else {
+                        input.removeClass('is-invalid');
+                    }
+                } else if (id === 'ipv4') {
+                    if (!isValidIP(input.val(), 4)) {
+                        input.addClass('is-invalid');
+                        isValid = false;
+                    } else {
+                        input.removeClass('is-invalid');
+                    }
+                } else if (id === 'ipv6') {
+                    if (!isValidIP(input.val(), 6)) {
+                        input.addClass('is-invalid');
+                        isValid = false;
+                    } else {
+                        input.removeClass('is-invalid');
+                    }
+                } else {
+                    // For other fields (like token, admin_id), just check if it's empty.  You could
+                    // add more robust validation for these if needed.
+                     if (!input.val().trim()) {
+                        input.addClass('is-invalid');
+                        isValid = false;
+                    } else {
+                        input.removeClass('is-invalid');
+                    }
+                }
+
+            });
+            return isValid;
+        }
         // Telegram Bot Start
         function startTelegram() {
+             if (!validateForm('telegram')) return;
             const apiToken = $("#telegram_api_token").val();
             const adminId = $("#telegram_admin_id").val();
             confirmAction("start the Telegram bot", function () {
@@ -317,6 +423,7 @@
 
         // SingBox Start
         function startSingbox() {
+            if (!validateForm('singbox')) return;
             const domain = $("#singbox_domain").val();
             const port = $("#singbox_port").val();
             confirmAction("start SingBox", function () {
@@ -343,6 +450,7 @@
 
         // Normal Subscription Start
         function startNormal() {
+             if (!validateForm('normal')) return;
             const domain = $("#normal_domain").val();
             const port = $("#normal_port").val();
             confirmAction("start the normal subscription", function () {
@@ -368,6 +476,7 @@
         }
 
         function changePort() {
+            if (!validateForm('port')) return;
             const port = $("#hysteria_port").val();
             const baseUrl = "{{ url_for('set_port_api', port='PORT_PLACEHOLDER') }}";
             const url = baseUrl.replace("PORT_PLACEHOLDER", port);
@@ -378,6 +487,7 @@
 
         // Change SNI
         function changeSNI() {
+            if (!validateForm('sni')) return;
             const domain = $("#sni_domain").val();
             const baseUrl = "{{ url_for('set_sni_api', sni='SNI_PLACEHOLDER') }}";
             const url = baseUrl.replace("SNI_PLACEHOLDER", domain);
@@ -388,6 +498,7 @@
 
         // Save IP
         function saveIP() {
+              if (!validateForm('change_ip')) return;
             confirmAction("save the new IP", function () {
                 sendRequest(
                     "{{ url_for('edit_ip_api') }}",
@@ -412,10 +523,44 @@
         $("#sni_change").on("click", changeSNI);
         $("#ip_change").on("click", saveIP);
 
+          // Input event listeners for real-time validation
+        $('#singbox_domain, #normal_domain, #sni_domain').on('input', function() {
+            if (isValidDomain($(this).val())) {
+                $(this).removeClass('is-invalid');
+            } else {
+                $(this).addClass('is-invalid');
+            }
+        });
+
+        $('#singbox_port, #normal_port, #hysteria_port').on('input', function() {
+            if (isValidPort($(this).val())) {
+                $(this).removeClass('is-invalid');
+            } else {
+                $(this).addClass('is-invalid');
+            }
+        });
+        $('#ipv4').on('input', function() {
+            if (isValidIP($(this).val(),4)) {
+                $(this).removeClass('is-invalid');
+            } else {
+                $(this).addClass('is-invalid');
+            }
+        });
+
+          $('#ipv6').on('input', function() {
+            if (isValidIP($(this).val(),6)) {
+                $(this).removeClass('is-invalid');
+            } else {
+                $(this).addClass('is-invalid');
+            }
+        });
+         $('#telegram_api_token, #telegram_admin_id').on('input', function() {
+            if ($(this).val().trim() !== "") {  // Basic check for non-empty
+                $(this).removeClass('is-invalid');
+            } else {
+                $(this).addClass('is-invalid');
+            }
+        });
     });
 </script>
-
-
-
-
 {% endblock %}