feat: Supports masking tokens in super admin (#6491)

Supports masking/unmasking sensitive data such as API Tokens in the super admin dashboard.
ref: #6322

Co-authored-by: raph941 <45232708+raph941@users.noreply.github.com>
Co-authored-by: phunguyenmurcul <51897872+phunguyenmurcul@users.noreply.github.com>

app/assets/config/manifest.js

@@ -2,3 +2,4 @@
 //= link administrate/application.css
 //= link administrate/application.js
 //= link dashboardChart.js
+//= link secretField.js

app/assets/javascripts/secretField.js

@@ -0,0 +1,34 @@
+// eslint-disable-next-line
+function toggleSecretField(e) {
+  e.preventDefault();
+  e.stopPropagation();
+
+  const toggler = e.currentTarget;
+  const secretField = toggler.parentElement;
+  const textElement = secretField.querySelector('[data-secret-masked]');
+
+  if (!textElement) return;
+
+  if (textElement.dataset.secretMasked === 'false') {
+    textElement.textContent = '•'.repeat(10);
+    textElement.dataset.secretMasked = 'true';
+    toggler.querySelector('svg use').setAttribute('xlink:href', '#eye-show');
+
+    return;
+  }
+
+  textElement.textContent = secretField.dataset.secretText;
+  textElement.dataset.secretMasked = 'false';
+  toggler.querySelector('svg use').setAttribute('xlink:href', '#eye-hide');
+}
+
+// eslint-disable-next-line
+function copySecretField(e) {
+  e.preventDefault();
+  e.stopPropagation();
+
+  const toggler = e.currentTarget;
+  const secretField = toggler.parentElement;
+
+  navigator.clipboard.writeText(secretField.dataset.secretText);
+}

app/assets/stylesheets/administrate/components/_cells.scss

@@ -43,3 +43,20 @@
 .cell-label--number {
   text-align: right;
 }
+
+.cell-data__secret-field {
+  align-items: center;
+  display: flex;
+
+  span {
+    flex: 1;
+  }
+
+  button {
+    margin-left: 5px;
+
+    svg {
+      fill: currentColor;
+    }
+  }
+}