Encrypting Data on Client Side Before Submission

I found that code a few days ago and I’m already using it to turn my text field into a password field. What I’m trying to do is encrypt certain field data before it gets sent without changing the value of the field itself.

That code only changes the input field type to a password field, it doesn’t encrypt the data being sent. I managed to find a solution. To intercept and encrypt text-1 field, I managed to intercept the ajax request, then I had to encrypt the password synchronously so that the function waiting for a return didn’t throw any errors.

function syncMethod(settings) {
    try {
        var password = settings.data.get('text-1');
        const encryptedPassword = window.syncEncryptPassword(publicKey, password);
        settings.data.set('text-1', encryptedPassword);
        return settings;
    } catch (error) {
        console.log("Error: ", error);
        return settings;
    }
}

jQuery(document).ready(function($) {
    var originalAjaxFunction = $.ajax;
    $.ajax = function(settings) {
        if (settings.url.indexOf('admin-ajax.php') !== -1 && settings.data instanceof FormData) {
            if (settings.data.get('form_id') === '602') {
                var newSettings = syncMethod(settings);
                return originalAjaxFunction(newSettings)
                    .done(function(response) {
                        if (response.success === true) {
                            console.log("Successful Login");
                            // Redirect to the URL in the response
                            // window.location.href = response.data.redirect_url;
                        } else {
                            // Handle any custom error message
                            alert(response.message);
                        }
                    })
                    .fail(function(jqXHR, textStatus, errorThrown) { // Handling failure                
                        // Handle any generic error here
                        console.error("Request failed: " + textStatus, errorThrown);
                        alert("An error occurred. Please try again later.");
                    });
            }else{
                return originalAjaxFunction.apply(this, arguments); // Fallback to the original jQuery AJAX function
            }
        }else{
            return originalAjaxFunction.apply(this, arguments); // Fallback to the original jQuery AJAX function
        }
    };
});