Hide runner token in CI/CD settings page

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/38019

1 files changed, 42 insertions, 0 deletions

diff --git a/app/assets/javascripts/behaviors/secret_values.js b/app/assets/javascripts/behaviors/secret_values.js
new file mode 100644
index 00000000000..1cf0b960eb0
--- /dev/null
+++ b/app/assets/javascripts/behaviors/secret_values.js
@@ -0,0 +1,42 @@
+import { n__ } from '../locale';
+import { convertPermissionToBoolean } from '../lib/utils/common_utils';
+
+export default class SecretValues {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init() {
+    this.values = this.container.querySelectorAll('.js-secret-value');
+    this.placeholders = this.container.querySelectorAll('.js-secret-value-placeholder');
+    this.revealButton = this.container.querySelector('.js-secret-value-reveal-button');
+
+    this.revealText = n__('Reveal value', 'Reveal values', this.values.length);
+    this.hideText = n__('Hide value', 'Hide values', this.values.length);
+
+    const isRevealed = convertPermissionToBoolean(this.revealButton.dataset.secretRevealStatus);
+    this.updateDom(isRevealed);
+
+    this.revealButton.addEventListener('click', this.onRevealButtonClicked.bind(this));
+  }
+
+  onRevealButtonClicked() {
+    const previousIsRevealed = convertPermissionToBoolean(
+      this.revealButton.dataset.secretRevealStatus,
+    );
+    this.updateDom(!previousIsRevealed);
+  }
+
+  updateDom(isRevealed) {
+    this.values.forEach((value) => {
+      value.classList.toggle('hide', !isRevealed);
+    });
+
+    this.placeholders.forEach((placeholder) => {
+      placeholder.classList.toggle('hide', isRevealed);
+    });
+
+    this.revealButton.textContent = isRevealed ? this.hideText : this.revealText;
+    this.revealButton.dataset.secretRevealStatus = isRevealed;
+  }
+}