feat(ui): Add client-side password validation

core/scripts/webpanel/assets/js/users.js

@@ -13,6 +13,7 @@ $(function () {
     const GET_USER_URL_TEMPLATE = contentSection.dataset.getUserUrlTemplate;
 
     const usernameRegex = /^[a-zA-Z0-9_]+$/;
+    const passwordRegex = /^[a-zA-Z0-9]+$/;
     let cachedUserData = [];
 
     function setCookie(name, value, days) {
@@ -62,6 +63,18 @@ $(function () {
         $(inputElement).closest('form').find('button[type="submit"]').prop('disabled', !isValid);
     }
     
+    function validatePassword(inputElement, errorElement) {
+        const password = $(inputElement).val();
+        // The password is valid if it's empty (no change) OR it matches the alphanumeric regex.
+        const isValid = password === '' || passwordRegex.test(password);
+        $(errorElement).text(isValid ? "" : "Password can only contain letters and numbers.");
+        $('#editSubmitButton').prop('disabled', !isValid);
+    }
+    
+    $('#editPassword').on('input', function() {
+        validatePassword(this, '#editPasswordError');
+    });
+
     $('#addUsername, #addBulkPrefix').on('input', function() {
         validateUsername(this, `#${this.id}Error`);
     });
@@ -158,6 +171,9 @@ $(function () {
         const expiryText = dataRow.find("td:eq(6)").text();
         const note = dataRow.data('note');
         
+        $('#editPasswordError').text('');
+        $('#editSubmitButton').prop('disabled', false);
+
         $("#originalUsername").val(user);
         $("#editUsername").val(user);
         $("#editTrafficLimit").val(parseFloat(trafficText.split('/')[1]) || 0);
@@ -172,6 +188,7 @@ $(function () {
         $.getJSON(url)
             .done(userData => {
                 passwordInput.val(userData.password || '');
+                validatePassword('#editPassword', '#editPasswordError');
             })
             .fail(() => {
                 passwordInput.val("").attr("placeholder", "Failed to load password");
@@ -182,7 +199,7 @@ $(function () {
     });
     
     $('#editUserModal').on('click', '#generatePasswordBtn', function() {
-        $('#editPassword').val(generatePassword());
+        $('#editPassword').val(generatePassword()).trigger('input');
     });
     
     $("#editUserForm").on("submit", function (e) {

core/scripts/webpanel/templates/users.html

@@ -529,6 +529,7 @@
                                 <button class="btn btn-outline-secondary" type="button" id="generatePasswordBtn"><i class="fas fa-sync-alt"></i></button>
                             </div>
                         </div>
+                        <small class="form-text text-danger" id="editPasswordError"></small>
                     </div>
                     <div class="form-group">
                         <label for="editTrafficLimit">Traffic Limit (GB)</label>