From a51cc24345c26d17e3000f6c54201ea24e64496a Mon Sep 17 00:00:00 2001
From: Benjamin Bengfort <benjamin@rotational.io>
Date: Sat, 5 Oct 2024 09:19:41 -0500
Subject: [PATCH] Refactor API Key Update (#226)

---
 pkg/web/apikeys.go                            | 41 +++++++++++++++++++
 pkg/web/routes.go                             |  1 +
 .../partials/apikey/apikey_detail.html        | 33 +++------------
 .../partials/apikey/apikey_list.html          | 22 +++++-----
 .../partials/apikey/apikey_preview.html       | 36 ++++++++++++++++
 5 files changed, 95 insertions(+), 38 deletions(-)
 create mode 100644 pkg/web/templates/partials/apikey/apikey_preview.html

diff --git a/pkg/web/apikeys.go b/pkg/web/apikeys.go
index 903ff676..3f2c6c65 100644
--- a/pkg/web/apikeys.go
+++ b/pkg/web/apikeys.go
@@ -165,6 +165,47 @@ func (s *Server) APIKeyDetail(c *gin.Context) {
 	})
 }
 
+func (s *Server) UpdateAPIKeyPreview(c *gin.Context) {
+	var (
+		err    error
+		keyID  ulid.ULID
+		apikey *models.APIKey
+		out    *api.APIKey
+	)
+
+	// Parse the keyID from the URL
+	if keyID, err = ulid.Parse(c.Param("id")); err != nil {
+		c.JSON(http.StatusNotFound, api.Error("apikey not found"))
+		return
+	}
+
+	// Fetch the model from the database
+	if apikey, err = s.store.RetrieveAPIKey(c.Request.Context(), keyID); err != nil {
+		if errors.Is(err, dberr.ErrNotFound) {
+			c.JSON(http.StatusNotFound, api.Error("apikey not found"))
+			return
+		}
+
+		c.Error(err)
+		c.JSON(http.StatusInternalServerError, api.Error("unable to process apikey detail request"))
+		return
+	}
+
+	if out, err = api.NewAPIKey(apikey); err != nil {
+		c.Error(err)
+		c.JSON(http.StatusInternalServerError, api.Error("unable to process apikey detail request"))
+		return
+	}
+
+	// Content negotiation
+	c.Negotiate(http.StatusOK, gin.Negotiate{
+		Offered:  []string{binding.MIMEJSON, binding.MIMEHTML},
+		Data:     out,
+		HTMLName: "apikey_preview.html",
+		HTMLData: scene.New(c).WithAPIData(out),
+	})
+}
+
 func (s *Server) UpdateAPIKey(c *gin.Context) {
 	var (
 		err    error
diff --git a/pkg/web/routes.go b/pkg/web/routes.go
index 7dd963c8..2b8e1274 100644
--- a/pkg/web/routes.go
+++ b/pkg/web/routes.go
@@ -211,6 +211,7 @@ func (s *Server) setupRoutes() (err error) {
 			apikeys.GET("", authorize(permiss.APIKeysView), s.ListAPIKeys)
 			apikeys.POST("", authorize(permiss.APIKeysManage), s.CreateAPIKey)
 			apikeys.GET("/:id", authorize(permiss.APIKeysView), s.APIKeyDetail)
+			apikeys.GET("/:id/edit", authorize(permiss.APIKeysManage), s.UpdateAPIKeyPreview)
 			apikeys.PUT("/:id", authorize(permiss.APIKeysManage), s.UpdateAPIKey)
 			apikeys.DELETE("/:id", authorize(permiss.APIKeysRevoke), s.DeleteAPIKey)
 		}
diff --git a/pkg/web/templates/partials/apikey/apikey_detail.html b/pkg/web/templates/partials/apikey/apikey_detail.html
index e2ca346c..0638d3a1 100644
--- a/pkg/web/templates/partials/apikey/apikey_detail.html
+++ b/pkg/web/templates/partials/apikey/apikey_detail.html
@@ -1,36 +1,15 @@
 {{- with .APIKeyDetail -}}
 <div class="modal-box">
   <div class="flex justify-between items-center">
-    <h1 class="font-bold text-xl">Edit API Key</h1>
-    <button onclick="edit_key_modal.close()" class="btn btn-sm btn-circle btn-ghost">
+    <h1 class="font-bold text-xl">API Key Details</h1>
+    <button onclick="key_detail_modal.close()" class="btn btn-sm btn-circle btn-ghost">
       <i class="fa-solid fa-x"></i>
       <span class="sr-only">Close modal</span>
     </button>
   </div>
-  <form 
-    id="edit-key-form" 
-    hx-put="/v1/apikeys/{{ .ID }}" 
-    hx-target="#apikeys" 
-    hx-swap="outerHTML" 
-    hx-indicator="#loader" 
-    hx-ext="json-enc" 
-    method="dialog"
-  >
-    <input type="hidden" name="id" value="{{ .ID }}" />
-    <div class="my-4">
-      <label for="description" class="label-style pb-0.5">New API Key Description</label>
-      <input type="text" id="description" name="description" class="input-style" value="{{ .Description }}" required />
-    </div>
-    <div class="my-4 flex justify-center">
-      <button
-      id="edit-key-btn"
-      type="submit"
-      class="submit-btn w-44 btn bg-primary font-semibold text-lg text-white hover:bg-primary/80"
-      >
-        <span class="submit-btn-text">Save</span>
-        <span id="loader" class="htmx-indicator loading loading-spinner loading-md"></span>
-      </button>
-    </div>
-  </form>
+  <div>
+    <p>{{ .ID }}</p>
+    <p>{{ .Description }}</p>
+  </div>
 </div>
 {{- end }}
diff --git a/pkg/web/templates/partials/apikey/apikey_list.html b/pkg/web/templates/partials/apikey/apikey_list.html
index 11eadfff..76aff76d 100644
--- a/pkg/web/templates/partials/apikey/apikey_list.html
+++ b/pkg/web/templates/partials/apikey/apikey_list.html
@@ -23,24 +23,24 @@
           {{ end }}
           <td>
             <div class="flex gap-x-1 items-center w-full">
-              <button 
-              type="button" 
-              onclick="edit_key_modal.showModal()" 
-              hx-get="/v1/apikeys/{{ .ID }}" 
-              hx-target="#edit_key_modal" 
-              hx-swap="innerHTML" 
+              <button
+              type="button"
+              onclick="edit_key_modal.showModal()"
+              hx-get="/v1/apikeys/{{ .ID }}/edit"
+              hx-target="#edit_key_modal"
+              hx-swap="innerHTML"
               class="btn btn-sm w-20 bg-primary text-white hover:bg-primary/80"
               >
               Edit
             </button>
-              <button 
-              type="button" 
+              <button
+              type="button"
               id="open-revoke-btn"
               onclick="revoke_key_modal.showModal()"
               data-delete-ep="/v1/apikeys/{{ .ID }}"
-              data-description="{{ .Description }}" 
-              hx-target="#revoke_key_modal" 
-              hx-swap="innerHTML" 
+              data-description="{{ .Description }}"
+              hx-target="#revoke_key_modal"
+              hx-swap="innerHTML"
               class="btn btn-sm w-20 bg-warning text-white hover:bg-warning/80"
               >
               Revoke
diff --git a/pkg/web/templates/partials/apikey/apikey_preview.html b/pkg/web/templates/partials/apikey/apikey_preview.html
new file mode 100644
index 00000000..d12b0260
--- /dev/null
+++ b/pkg/web/templates/partials/apikey/apikey_preview.html
@@ -0,0 +1,36 @@
+{{- with .APIKeyDetail -}}
+<div class="modal-box">
+  <div class="flex justify-between items-center">
+    <h1 class="font-bold text-xl">Edit API Key</h1>
+    <button onclick="edit_key_modal.close()" class="btn btn-sm btn-circle btn-ghost">
+      <i class="fa-solid fa-x"></i>
+      <span class="sr-only">Close modal</span>
+    </button>
+  </div>
+  <form
+    id="edit-key-form"
+    hx-put="/v1/apikeys/{{ .ID }}"
+    hx-target="#apikeys"
+    hx-swap="outerHTML"
+    hx-indicator="#loader"
+    hx-ext="json-enc"
+    method="dialog"
+  >
+    <input type="hidden" name="id" value="{{ .ID }}" />
+    <div class="my-4">
+      <label for="description" class="label-style pb-0.5">New API Key Description</label>
+      <input type="text" id="description" name="description" class="input-style" value="{{ .Description }}" required />
+    </div>
+    <div class="my-4 flex justify-center">
+      <button
+      id="edit-key-btn"
+      type="submit"
+      class="submit-btn w-44 btn bg-primary font-semibold text-lg text-white hover:bg-primary/80"
+      >
+        <span class="submit-btn-text">Save</span>
+        <span id="loader" class="htmx-indicator loading loading-spinner loading-md"></span>
+      </button>
+    </div>
+  </form>
+</div>
+{{- end }}