Add delete token UI for info page

web/static/app.js

@@ -230,7 +230,9 @@
 
     var warn = el('div', 'warn');
     warn.appendChild(el('h2', null, 'Delete token'));
-    warn.appendChild(el('p', null, 'Shown once. Keep it if you want to remove the file before it expires.'));
+    warn.appendChild(el('p', null,
+      'Shown once. Keep it alongside the share link: pasting it under ' +
+      '"Remove this file" on that page deletes the file before it expires.'));
     warn.appendChild(el('p', 'mono wrap', r.delete_token));
     card.appendChild(warn);
 

web/static/style.css

@@ -212,3 +212,26 @@ table.admin form { margin: 0; }
 button.small { padding: .2rem .5rem; font-size: .75rem; }
 
 .cli code, .hint code { background: var(--bg); padding: .1rem .3rem; border-radius: 4px; }
+
+/* Disclosure sections and inline errors ----------------------------------- */
+
+details > summary {
+  cursor: pointer;
+  font-weight: 500;
+  padding: .125rem 0;
+}
+details[open] > summary { margin-bottom: .75rem; }
+details .field { margin-top: .75rem; max-width: 28rem; }
+
+p.error {
+  margin: 0 0 .75rem;
+  padding: .5rem .75rem;
+  color: var(--danger);
+  background: var(--warn-bg);
+  border: 1px solid var(--danger);
+  border-radius: 6px;
+  font-size: .875rem;
+}
+
+.card .actions { margin: 1.25rem 0; }
+.card > .field:last-child { margin-bottom: 0; }

web/templates/info.html

@@ -6,6 +6,46 @@
     <dt>Expires</dt><dd>{{.Expires}}</dd>
     <dt>SHA-256</dt><dd class="mono wrap">{{.Meta.SHA256}}</dd>
   </dl>
-  <p><a class="button" href="{{.Base}}d/{{.Meta.ID}}">Download</a></p>
+
+  <p class="actions"><a class="button" href="{{.Base}}d/{{.Meta.ID}}">Download</a></p>
+
+  <div class="field">
+    <span>Direct link</span>
+    <div class="copyrow">
+      <input type="text" id="link-file" value="{{.URL}}" readonly>
+      <button type="button" class="copy" data-copy="link-file" hidden>Copy</button>
+    </div>
+  </div>
+</section>
+
+<section class="card">
+  <details{{if .Error}} open{{end}}>
+    <summary>Remove this file</summary>
+
+    {{if .Error}}<p class="error">{{.Error}}</p>{{end}}
+
+    {{if .CanDelete}}
+      <p class="hint">Your token can remove this file.</p>
+      <form method="post" action="{{.Base}}api/d/{{.Meta.ID}}/delete">
+        <input type="hidden" name="from" value="info">
+        <button type="submit" class="danger"
+                data-confirm="Delete {{.Meta.Filename}}? This cannot be undone.">Delete this file</button>
+      </form>
+    {{else}}
+      <p class="hint">
+        Paste the delete token you were given when this file was uploaded.
+        It is the only way to remove a file early without an owning token.
+      </p>
+      <form method="post" action="{{.Base}}api/d/{{.Meta.ID}}/delete">
+        <input type="hidden" name="from" value="info">
+        <label class="field">
+          <span>Delete token</span>
+          <input type="password" name="token" autocomplete="off" required>
+        </label>
+        <button type="submit" class="danger"
+                data-confirm="Delete {{.Meta.Filename}}? This cannot be undone.">Delete this file</button>
+      </form>
+    {{end}}
+  </details>
 </section>
 {{end}}

web/templates/result.html

@@ -29,11 +29,16 @@
 
   <div class="warn">
     <h2>Delete token</h2>
-    <p>Shown once. Keep it if you want to remove the file before it expires.</p>
+    <p>
+      Shown once. Keep it alongside the share link: pasting it under
+      <strong>Remove this file</strong> on that page deletes the file before it
+      expires.
+    </p>
     <p class="mono wrap">{{.DeleteToken}}</p>
     <form method="post" action="{{.Base}}api/d/{{.Meta.ID}}/delete">
       <input type="hidden" name="token" value="{{.DeleteToken}}">
-      <button type="submit" class="danger">Delete it now</button>
+      <button type="submit" class="danger"
+              data-confirm="Delete {{.Meta.Filename}}? This cannot be undone.">Delete it now</button>
     </form>
   </div>