Show only the last 4 characters of Global API Key & Zone ID in Cloudflare add-on

[GeekPress]

Is your feature request related to a problem? Please describe.
WP Rocket settings (accessible by all admins) displays the Cloudflare Global API Key and Zone ID.

Describe the solution you'd like
Once entered and saved, they don't need to be shown on the page.

We could display only the last 4 characters of the Cloudflare Global API Key and Zone ID. The rest will be hidden as if it was an input typed password.

Additional context
https://wp-media.productboard.com/insights/shared-inbox/notes/12491405

[NataliaDrause]

Similar request: https://secure.helpscout.net/conversation/2073839881/382958?folderId=3864740

[jeawhanlee]

Scope a solution ✅

The solution is quite simple. We will create a new function here to mask the values of any input

function maskField(id_selector){
  var inputField = $('#' + id_selector);

  if (inputField.val().length > 4) {
    // Get the input value
    var inputValue = inputField.val();

    var hiddenPart = '*'.repeat(Math.max(0, inputValue.length - 4));
    var visiblePart = inputValue.slice(-4);

    // Combine the hidden and visible parts
    var maskedValue = hiddenPart + visiblePart;

    inputField.val(maskedValue);
  }
}

Then we can call this function with the ids of the fields we want to mask in this case, it would be cloudflare_api_key and cloudflare_zone_id That should do the trick.
maskField('cloudflare_api_key');
maskField('cloudflare_zone_id');

To solve the issue of saving the masked value, we can update this line here to act as a proxy field by changing the key to cloudflare_api_key_mask

Then we will add the concrete id - cloudflare_api_key to the hidden fields array here only when WP_ROCKET_CF_API_KEY_HIDDEN is false or not defined.

Then we unset the proxy field here

Lastly we bind the 2 fields together by updating the maskField function above to become

function maskField(proxy_selector, concrete_selector){
    var concrete = {
        'val': concrete_selector.val(),
        'length': concrete_selector.val().length
    }

    if (concrete.length > 4) {

        var hiddenPart = '*'.repeat(Math.max(0, concrete.length - 4));
        var visiblePart = concrete.val.slice(-4);

        // Combine the hidden and visible parts
        var maskedValue = hiddenPart + visiblePart;

        proxy_selector.val(maskedValue);
    }
}

proxy_selector = $('#proxy_field');
concrete_selector = $('#concrete_field');

// Update the concrete field when the proxy is updated.
proxy_selector.on('input', function() {
    concrete_selector.val(proxy_selector.val());
});

Before updating the concrete field on input event, we can check if value contains '*' and if not update.

finally we mask the proxy field.
maskField(proxy_selector, concrete_selector);

Estimate the effort ✅

[S]

[Miraeld]

Looks fine to me.

[Tabrisrp]

Won't that make it that when saving the value, it will contain the * instead of the real value?

[jeawhanlee]

@Tabrisrp I updated the grooming based on your last point, What do you think?

[Tabrisrp]

New proposed solution looks good to me