bootstrap 5 class updates

netbox/project-static/src/clipboard.ts

@@ -0,0 +1,8 @@
+import Clipboard from 'clipboard';
+import { getElements } from './util';
+
+export function initClipboard() {
+  for (const element of getElements('a.copy-token', 'button.copy-secret')) {
+    new Clipboard(element);
+  }
+}

netbox/project-static/src/global.d.ts

@@ -26,6 +26,11 @@ type APIObjectBase = {
   [k: string]: JSONAble;
 };
 
+type APIKeyPair = {
+  public_key: string;
+  private_key: string;
+};
+
 type APIReference = {
   id: number;
   name: string;

netbox/project-static/src/index.ts

@@ -1,5 +1,4 @@
 import 'babel-polyfill';
 import '@popperjs/core';
 import 'bootstrap';
-import 'clipboard';
 import './netbox';

netbox/project-static/src/netbox.ts

@@ -1,11 +1,13 @@
-import { Tooltip } from 'bootstrap';
+import { Modal, Tooltip } from 'bootstrap';
 import Masonry from 'masonry-layout';
 import { initApiSelect, initStaticSelect, initColorSelect } from './select';
 import { initDateSelector } from './dateSelector';
 import { initMessageToasts } from './toast';
 import { initSpeedSelector, initForms } from './forms';
 import { initRackElevation } from './buttons';
+import { initClipboard } from './clipboard';
 import { initSearchBar } from './search';
+// import { initGenerateKeyPair } from './secrets';
 import { getElements } from './util';
 
 const INITIALIZERS = [
@@ -18,6 +20,8 @@ const INITIALIZERS = [
   initSpeedSelector,
   initColorSelect,
   initRackElevation,
+  initClipboard,
+  // initGenerateKeyPair,
 ] as (() => void)[];
 
 /**
@@ -30,6 +34,10 @@ function initBootstrap(): void {
     for (const tooltip of getElements('[data-bs-toggle="tooltip"]')) {
       new Tooltip(tooltip, { container: 'body', boundary: 'window' });
     }
+    for (const modal of getElements('[data-bs-toggle="modal"]')) {
+      // for (const modal of getElements('div.modal')) {
+      new Modal(modal);
+    }
     initMessageToasts();
     initForms();
   }

netbox/project-static/src/secrets.ts

@@ -0,0 +1,62 @@
+import { apiGetBase, getElements, isApiError } from './util';
+/**
+ * 
+ * $('#generate_keypair').click(function() {
+        $('#new_keypair_modal').modal('show');
+        $.ajax({
+            url: netbox_api_path + 'secrets/generate-rsa-key-pair/',
+            type: 'GET',
+            dataType: 'json',
+            success: function (response, status) {
+                var public_key = response.public_key;
+                var private_key = response.private_key;
+                $('#new_pubkey').val(public_key);
+                $('#new_privkey').val(private_key);
+            },
+            error: function (xhr, ajaxOptions, thrownError) {
+                alert("There was an error generating a new key pair.");
+            }
+        });
+    });
+ */
+export function initGenerateKeyPair() {
+  const element = document.getElementById('new_keypair_modal') as HTMLDivElement;
+  const accept = document.getElementById('use_new_pubkey') as HTMLButtonElement;
+  const publicElem = element.querySelector<HTMLTextAreaElement>('textarea#new_pubkey');
+  const privateElem = element.querySelector<HTMLTextAreaElement>('textarea#new_privkey');
+
+  function handleOpen() {
+    for (const elem of [publicElem, privateElem]) {
+      if (elem !== null) {
+        elem.setAttribute('readonly', '');
+      }
+    }
+
+    apiGetBase<APIKeyPair>('/api/secrets/generate-rsa-key-pair').then(data => {
+      if (!isApiError(data)) {
+        const { private_key: priv, public_key: pub } = data;
+        if (publicElem !== null && privateElem !== null) {
+          publicElem.value = pub;
+          privateElem.value = priv;
+        }
+      }
+    });
+  }
+  function handleAccept() {
+    const publicKeyField = document.getElementById('id_public_key') as HTMLTextAreaElement;
+    if (publicElem !== null) {
+      publicKeyField.value = publicElem.value;
+      publicKeyField.innerText = publicElem.value;
+    }
+  }
+  element.addEventListener('shown.bs.modal', handleOpen);
+  accept.addEventListener('click', handleAccept);
+}
+
+export function initLockUnlock() {
+  for (const element of getElements<HTMLButtonElement>('button.unlock-secret')) {
+    function handleClick() {
+      const { secretId } = element.dataset;
+    }
+  }
+}

netbox/project-static/src/util.ts

@@ -32,6 +32,18 @@ export function getCsrfToken(): string {
   return csrfToken;
 }
 
+export async function apiGetBase<T extends Record<string, unknown>>(
+  url: string,
+): Promise<T | APIError> {
+  const token = getCsrfToken();
+  const res = await fetch(url, {
+    method: 'GET',
+    headers: { 'X-CSRFToken': token },
+  });
+  const json = (await res.json()) as T | APIError;
+  return json;
+}
+
 /**
  * Fetch data from the NetBox API (authenticated).
  * @param url API endpoint
@@ -39,13 +51,7 @@ export function getCsrfToken(): string {
 export async function getApiData<T extends APIObjectBase>(
   url: string,
 ): Promise<APIAnswer<T> | APIError> {
-  const token = getCsrfToken();
-  const res = await fetch(url, {
-    method: 'GET',
-    headers: { 'X-CSRFToken': token },
-  });
-  const json = (await res.json()) as APIAnswer<T> | APIError;
-  return json;
+  return await apiGetBase<APIAnswer<T>>(url);
 }
 
 export function getElements<K extends keyof SVGElementTagNameMap>(