Merge branch 'develop' into feature

netbox/project-static/src/buttons/index.ts

@@ -5,6 +5,7 @@ import { initReslug } from './reslug';
 import { initSelectAll } from './selectAll';
 import { initSelectMultiple } from './selectMultiple';
 import { initMarkdownPreviews } from './markdownPreview';
+import { initSecretToggle } from './secretToggle';
 
 export function initButtons(): void {
   for (const func of [
@@ -15,6 +16,7 @@ export function initButtons(): void {
     initSelectMultiple,
     initMoveButtons,
     initMarkdownPreviews,
+    initSecretToggle,
   ]) {
     func();
   }

netbox/project-static/src/buttons/secretToggle.ts

@@ -0,0 +1,77 @@
+import { secretState } from '../stores';
+import { getElement, getElements, isTruthy } from '../util';
+
+import type { StateManager } from '../state';
+
+type SecretState = { hidden: boolean };
+
+/**
+ * Change toggle button's text and attribute to reflect the current state.
+ *
+ * @param hidden `true` if the current state is hidden, `false` otherwise.
+ * @param button Toggle element.
+ */
+function toggleSecretButton(hidden: boolean, button: HTMLButtonElement): void {
+  button.setAttribute('data-secret-visibility', hidden ? 'hidden' : 'shown');
+  button.innerText = hidden ? 'Show Secret' : 'Hide Secret';
+}
+
+/**
+ * Show secret.
+ */
+function showSecret(): void {
+  const secret = getElement('secret');
+  if (isTruthy(secret)) {
+    const value = secret.getAttribute('data-secret');
+    if (isTruthy(value)) {
+      secret.innerText = value;
+    }
+  }
+}
+
+/**
+ * Hide secret.
+ */
+function hideSecret(): void {
+  const secret = getElement('secret');
+  if (isTruthy(secret)) {
+    const value = secret.getAttribute('data-secret');
+    if (isTruthy(value)) {
+      secret.innerText = '••••••••';
+    }
+  }
+}
+
+/**
+ * Update secret state and visualization when the button is clicked.
+ *
+ * @param state State instance.
+ * @param button Toggle element.
+ */
+function handleSecretToggle(state: StateManager<SecretState>, button: HTMLButtonElement): void {
+  state.set('hidden', !state.get('hidden'));
+  const hidden = state.get('hidden');
+
+  if (hidden) {
+    hideSecret();
+  } else {
+    showSecret();
+  }
+  toggleSecretButton(hidden, button);
+}
+
+/**
+ * Initialize secret toggle button.
+ */
+export function initSecretToggle(): void {
+  hideSecret();
+  for (const button of getElements<HTMLButtonElement>('button.toggle-secret')) {
+    button.addEventListener(
+      'click',
+      event => {
+        handleSecretToggle(secretState, event.currentTarget as HTMLButtonElement);
+      },
+      false,
+    );
+  }
+}

netbox/project-static/src/stores/index.ts

@@ -1,3 +1,4 @@
 export * from './objectDepth';
 export * from './rackImages';
 export * from './previousPkCheck';
+export * from './secret';

netbox/project-static/src/stores/secret.ts

@@ -0,0 +1,6 @@
+import { createState } from '../state';
+
+export const secretState = createState<{ hidden: boolean }>(
+  { hidden: true },
+  { persist: true, key: 'netbox-secret' },
+);