ui: add a 'Preferences' tab to the Settings tab that allows enabling … (#276)

…saving of cookies and localStorage

(actual support for this in separate PR)

- Updates Browsertrix link and description

---------

Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>

Author: ikreymer

src/ui/app.ts

@@ -65,7 +65,7 @@ class ArchiveWebApp extends ReplayWebApp {
 
     this.settingsError = "";
 
-    this.settingsTab = localStorage.getItem("settingsTab") || "browsertrix";
+    this.settingsTab = localStorage.getItem("settingsTab") || "prefs";
 
     try {
       const res = localStorage.getItem("ipfsOpts");
@@ -91,6 +91,10 @@ class ArchiveWebApp extends ReplayWebApp {
       this.btrixOpts = null;
     }
 
+    if (!self.localStorage.getItem("archiveCookies")) {
+      self.localStorage.setItem("archiveCookies", "1");
+    }
+
     getLocalOption("autorunBehaviors").then(
       (res) => (this.autorun = res === "1"),
     );
@@ -987,10 +991,21 @@ class ArchiveWebApp extends ReplayWebApp {
   }
 
   renderSettingsModal() {
+    let archiveCookies = false,
+      archiveStorage = false;
+    if (this.settingsTab === "prefs") {
+      archiveCookies = self.localStorage.getItem("archiveCookies") === "1";
+      archiveStorage = self.localStorage.getItem("archiveStorage") === "1";
+    }
     return html`
       <wr-modal @modal-closed="${this.onCancelSettings}" title="Settings">
         <div class="tabs mb-3">
           <ul>
+            <li class="${this.settingsTab === "prefs" ? "is-active" : ""}">
+              <a @click=${() => (this.settingsTab = "prefs")}
+                >Archiving Privacy</a
+              >
+            </li>
             <li
               class="${this.settingsTab === "browsertrix" ? "is-active" : ""}"
             >
@@ -1008,6 +1023,51 @@ class ArchiveWebApp extends ReplayWebApp {
           class="is-flex is-flex-direction-column is-size-7"
           @submit="${this.onSaveSettings}"
         >
+          ${this.settingsTab === "prefs"
+            ? html` <fieldset>
+                <div class="is-size-6">
+                  Control archiving of sensitive browser data.
+                </div>
+                <div class="field is-size-6 mt-4">
+                  <input
+                    name="prefArchiveCookies"
+                    id="archiveCookies"
+                    class="checkbox"
+                    type="checkbox"
+                    ?checked="${archiveCookies}"
+                  /><span class="ml-1">Archive cookies</span>
+                  <p class="is-size-7 mt-1">
+                    Archiving cookies may expose private information that is
+                    <em>normally only shared with the site</em>. When enabled,
+                    users should exercise caution about sharing these archived
+                    items publicly.
+                  </p>
+                </div>
+                <div class="field is-size-6 mt-4">
+                  <input
+                    name="prefArchiveStorage"
+                    id="archiveStorage"
+                    class="checkbox"
+                    type="checkbox"
+                    ?checked="${archiveStorage}"
+                  /><span class="ml-1">Archive local storage</span>
+                  <p class="is-size-7 mt-1">
+                    Archiving local storage will archive information that is
+                    generally <em>always private.</em> Archiving local storage
+                    may be required for certain paywalled sites but should be
+                    avoided where possible.
+                  </p>
+                  <p class="is-size-7 mt-1">
+                    <strong
+                      >Sharing content created with this setting enabled may
+                      compromise your login credentials.</strong
+                    >
+                    <br />Archived items created with this settings should
+                    generally be kept private!
+                  </p>
+                </div>
+              </fieldset>`
+            : ``}
           ${this.settingsTab === "ipfs"
             ? html` <p class="is-size-6 mb-3">
                   Configure settings for sharing archived items to IPFS.
@@ -1054,14 +1114,13 @@ class ArchiveWebApp extends ReplayWebApp {
             ? html`
                 <p class="is-size-6 mb-3">
                   Configure your credentials to upload archived items to
-                  Browsertrix.
+                  Browsertrix: Webrecorder's cloud-based crawling service.
                 </p>
                 <p class="is-size-7 p-4 has-background-info">
-                  Don't have a Browsertrix account? Visit
-                  <a target="_blank" href="https://browsertrix.com/"
-                    >https://browsertrix.com/</a
+                  Don't have a Browsertrix account?
+                  <a target="_blank" href="https://webrecorder.net/browsertrix/"
+                    >Sign up today!</a
                   >
-                  for more info.
                 </p>
                 <fieldset>
                   <div class="field has-addons">
@@ -1276,7 +1335,7 @@ class ArchiveWebApp extends ReplayWebApp {
   }
 
   // @ts-expect-error - TS7006 - Parameter 'event' implicitly has an 'any' type.
-  async onTitle(event) {
+  override async onTitle(event): void {
     super.onTitle(event);
 
     if (
@@ -1363,6 +1422,23 @@ class ArchiveWebApp extends ReplayWebApp {
       }
     }
 
+    const archiveCookies = this.renderRoot.querySelector("#archiveCookies");
+    const archiveStorage = this.renderRoot.querySelector("#archiveStorage");
+
+    if (archiveCookies) {
+      self.localStorage.setItem(
+        "archiveCookies",
+        (archiveCookies as HTMLInputElement).checked ? "1" : "0",
+      );
+    }
+
+    if (archiveStorage) {
+      self.localStorage.setItem(
+        "archiveStorage",
+        (archiveStorage as HTMLInputElement).checked ? "1" : "0",
+      );
+    }
+
     localStorage.setItem("settingsTab", this.settingsTab);
 
     // @ts-expect-error - TS2339 - Property 'showSettings' does not exist on type 'ArchiveWebApp'.