Gracefully handle errors when creating guest links (#548)

e2e/guest-links.spec.ts

@@ -133,3 +133,23 @@ test("files uploaded through guest link remain accessible after guest link is de
 
   await expect(page.locator("body")).toHaveText("uploaded by a guest user");
 });
+
+test("invalid options on guest link generate error message", async ({
+  page,
+}) => {
+  await login(page);
+
+  await page.getByRole("menuitem", { name: "Guest Links" }).click();
+
+  await page.getByRole("button", { name: "Create new" }).click();
+
+  await expect(page).toHaveURL("/guest-links/new");
+  await page.locator("#label").fill("A".repeat(5000));
+  await page.getByRole("button", { name: "Create" }).click();
+
+  // We should still be on the same page.
+  await expect(page).toHaveURL("/guest-links/new");
+
+  // There should be an error message
+  await expect(page.getByText("Invalid request: label too long")).toBeVisible();
+});

handlers/templates/pages/guest-link-create.html

@@ -4,12 +4,19 @@
 {{ define "script-tags" }}
   <script type="module" nonce="{{ .CspNonce }}">
     import { guestLinkNew } from "/js/controllers/guestLinks.js";
+    import { showElement, hideElement } from "/js/lib/bulma.js";
+    import { enableElement, disableElement } from "/js/lib/html.js";
 
     const labelInput = document.getElementById("label");
     const expirationSelect = document.getElementById("expiration-select");
     const maxFileBytesInput = document.getElementById("max-file-size");
     const fileUploadLimitInput = document.getElementById("file-upload-limit");
     const createLinkForm = document.getElementById("create-guest-link-form");
+    const createBtn = document.querySelector(
+      "#create-guest-link-form .button[type='submit']"
+    );
+    const errorContainer = document.getElementById("error");
+    const progressSpinner = document.getElementById("progress-spinner");
 
     function megabytesToBytes(megabytes) {
       return megabytes * 1024 * 1024;
@@ -30,16 +37,36 @@
 
     createLinkForm.addEventListener("submit", (evt) => {
       evt.preventDefault();
+
+      disableElement(createBtn);
+      showElement(progressSpinner);
+      hideElement(errorContainer);
+
       const guestLink = guestLinkFromInputs();
       guestLinkNew(
         guestLink.label,
         guestLink.expirationTime,
         guestLink.maxFileBytes,
         guestLink.maxFileUploads
-      ).then(() => {
-        document.location = "/guest-links";
-      });
+      )
+        .then(() => {
+          document.location = "/guest-links";
+        })
+        .catch((error) => {
+          document.getElementById("error-message").innerText = error;
+          showElement(errorContainer);
+        })
+        .finally(() => {
+          hideElement(progressSpinner);
+          enableElement(createBtn);
+        });
     });
+
+    document
+      .querySelector("#error .delete")
+      .addEventListener("click", (evt) => {
+        hideElement(errorContainer);
+      });
   </script>
 {{ end }}
 
@@ -127,6 +154,20 @@ <h1 class="title">Create Guest Link</h1>
       </div>
     </div>
   </form>
+
+  <div class="fa-3x is-hidden" id="progress-spinner">
+    <i class="fas fa-spinner fa-spin"></i>
+  </div>
+
+  <div id="error" class="is-hidden my-5">
+    <article class="message is-danger">
+      <div class="message-header">
+        Error
+        <button class="delete" aria-label="delete"></button>
+      </div>
+      <div id="error-message" class="message-body">Placeholder error.</div>
+    </article>
+  </div>
 {{ end }}
 
 {{ template "base.html" }}