feat(gdpr): token modal + delete-with-token disclosure markup

Author: JohnMcLear

src/templates/pad.html

@@ -164,6 +164,13 @@ <h2 data-l10n-id="pad.settings.myView"></h2>
             <% e.end_block(); %>
           </div>
           <button data-l10n-id="pad.settings.deletePad" id="delete-pad">Delete pad</button>
+          <details id="delete-pad-with-token">
+            <summary data-l10n-id="pad.deletionToken.deleteWithToken">Delete with token</summary>
+            <label for="delete-pad-token-input" data-l10n-id="pad.deletionToken.tokenFieldLabel">Pad deletion token</label>
+            <input type="password" id="delete-pad-token-input" autocomplete="off" spellcheck="false">
+            <button id="delete-pad-token-submit" type="button" class="btn btn-danger"
+                    data-l10n-id="pad.settings.deletePad">Delete pad</button>
+          </details>
         <div id="theme-switcher" style="display: none;">
           <svg width="2rem" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
@@ -182,6 +189,22 @@ <h2 data-l10n-id="pad.settings.about">About</h2>
           <a href="https://etherpad.org" target="_blank" referrerpolicy="no-referrer" rel="noopener">Etherpad</a>
         <% if (settings.exposeVersion) { %>(commit <%= settings.gitVersion %>)<% } %>      </div></div>
 
+      <!--------------------------------------------------->
+      <!-- PAD DELETION TOKEN MODAL (shown once on create) -->
+      <!--------------------------------------------------->
+
+      <div id="deletiontoken-modal" class="popup" hidden><div class="popup-content">
+          <h1 data-l10n-id="pad.deletionToken.modalTitle">Save your pad deletion token</h1>
+          <p data-l10n-id="pad.deletionToken.modalBody">
+            This token is the only way to delete this pad if you lose your browser session or switch device. Save it somewhere safe — it is shown here exactly once.
+          </p>
+          <div class="deletiontoken-row">
+            <input type="text" id="deletiontoken-value" readonly>
+            <button id="deletiontoken-copy" type="button" data-l10n-id="pad.deletionToken.copy">Copy</button>
+          </div>
+          <button id="deletiontoken-ack" type="button" class="btn btn-primary"
+                  data-l10n-id="pad.deletionToken.acknowledge">I've saved it</button>
+      </div></div>
 
       <!------------------------->
       <!-- IMPORT EXPORT POPUP -->