Rewrite backend in Rust, add Impressum, privacy policy and account tools

New axum server in backend/ with the same HTTP API and database as the
Python one. The pl8list session is only held in memory during the feed
crawl and logged out afterwards. Local sessions use a __Host- cookie,
30-day idle expiry and weekly token rotation; the old cookie is migrated.

The audio and image proxy only accepts known parameters, fixes the content
type, follows redirects only to pl8list's file host and caches segments and
images on disk. Strict security headers, origin checks on POST, body and
concurrency limits.

/impressum and /datenschutz are rendered from env variables. The account
menu offers data export, sign out on all devices and account deletion.
hls.js is self-hosted and artist images are proxied, so the browser only
talks to this server. The Docker image builds a static binary on scratch.

static/app.js

@@ -16,6 +16,8 @@ const filtersForm = document.getElementById("filters");
 const filtersBtn = document.getElementById("filters-btn");
 const likesPanel = document.getElementById("likes");
 const likesBtn = document.getElementById("likes-btn");
+const accountPanel = document.getElementById("account");
+const accountBtn = document.getElementById("account-btn");
 const startEl = document.getElementById("start");
 const helpEl = document.getElementById("help");
 const toastEl = document.getElementById("toast");
@@ -86,6 +88,8 @@ function showStats(s) {
 // Uploads are often titled after their file name.
 const cleanTitle = (t) => t.replace(/\.(wav|mp3|flac|aiff?|ogg|m4a)$/i, "");
 const trackUrl = (t) => `${PL8}/${t.handle}/${t.slug}`;
+// Images come through our server, so pl8list never sees the visitor's address.
+const artistImg = (t) => `/img/${encodeURIComponent(t.artist_img)}`;
 const fmtTime = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
 
 let toastTimer = 0;
@@ -100,7 +104,7 @@ function toast(text, ms = 2200) {
 
 function buildCard(track, { liked = false } = {}) {
   const el = tpl.content.firstElementChild.cloneNode(true);
-  const img = track.artist_img ? `url("${PL8}/img/${track.artist_img}")` : "";
+  const img = track.artist_img ? `url("${artistImg(track)}")` : "";
   el.querySelector(".bg").style.backgroundImage = img;
   if (img) el.querySelector(".art").style.backgroundImage = img;
   else el.querySelector(".initial").textContent = (track.artist_name || "?")[0].toUpperCase();
@@ -377,7 +381,7 @@ const observer = new IntersectionObserver((entries) => {
 function updateMediaSession(track) {
   if (!("mediaSession" in navigator)) return;
   const artwork = [{ src: "/static/icons/icon-512.png", sizes: "512x512", type: "image/png" }];
-  if (track.artist_img) artwork.unshift({ src: `${PL8}/img/${track.artist_img}`, sizes: "512x512" });
+  if (track.artist_img) artwork.unshift({ src: artistImg(track), sizes: "512x512" });
   navigator.mediaSession.metadata = new MediaMetadata({
     title: cleanTitle(track.title),
     artist: track.artist_name,
@@ -471,7 +475,7 @@ feed.addEventListener("click", (e) => {
 
 // Panels and overlays -----------------------------------------------------
 
-const panels = [[filtersForm, filtersBtn], [likesPanel, likesBtn]];
+const panels = [[filtersForm, filtersBtn], [likesPanel, likesBtn], [accountPanel, accountBtn]];
 
 function closePanels() {
   for (const [panel, btn] of panels) {
@@ -692,15 +696,48 @@ document.getElementById("resend").addEventListener("click", () => {
 
 document.getElementById("restart").addEventListener("click", showLogin);
 
+// Account -----------------------------------------------------------------
+
+const deleteForm = document.getElementById("delete-form");
+
+accountBtn.addEventListener("click", () => {
+  if (togglePanel(accountPanel)) deleteForm.hidden = true;
+});
+
 document.getElementById("logout-btn").addEventListener("click", async () => {
   await postJSON("/auth/logout");
   location.reload();
 });
 
+document.getElementById("logout-all-btn").addEventListener("click", async () => {
+  await postJSON("/account/logout-all");
+  location.reload();
+});
+
+document.getElementById("delete-open").addEventListener("click", () => {
+  deleteForm.hidden = false;
+  deleteForm.confirm.value = "";
+  deleteForm.confirm.focus();
+});
+
+deleteForm.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  try {
+    await postJSON("/account/delete", { confirm: deleteForm.confirm.value.trim() });
+    localStorage.removeItem(FILTERS_KEY);
+    localStorage.removeItem(HINT_KEY);
+    location.reload();
+  } catch (err) {
+    toast(err.message, 4000);
+  }
+});
+
 function signedIn(user) {
   loginEl.hidden = true;
   document.getElementById("bar").hidden = false;
-  document.getElementById("logout-btn").textContent = `sign out @${user.handle}`;
+  accountBtn.textContent = `@${user.handle}`;
+  document.getElementById("account-handle").textContent = `@${user.handle}`;
+  document.getElementById("delete-handle").textContent = user.handle;
   // Typing the login code counts as a user gesture, so playback may start right away.
   if (navigator.userActivation?.hasBeenActive) start();
   else if (!started) startEl.hidden = false;

static/index.html

@@ -14,9 +14,9 @@
   <link rel="icon" href="/static/icons/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/static/icons/apple-touch-icon.png">
   <link rel="stylesheet" href="/static/style.css">
-  <script src="https://cdn.jsdelivr.net/npm/hls.js@1.6.16/dist/hls.min.js"
-          integrity="sha384-5E8B0pTlZZJMabWpC0fyYf6OUpe15jJij34BqBAh4NXoHAlLNOjCPRrwtOXOQFAn"
-          crossorigin="anonymous"></script>
+  <!-- Served by us, not a CDN, so no visitor address goes to a third party. -->
+  <script src="/static/vendor/hls.min.js"
+          integrity="sha384-5E8B0pTlZZJMabWpC0fyYf6OUpe15jJij34BqBAh4NXoHAlLNOjCPRrwtOXOQFAn"></script>
 </head>
 <body>
   <!-- Shared icons, referenced with <use href="#i-…">. -->
@@ -36,7 +36,7 @@
     <button id="filters-btn" type="button" aria-controls="filters" aria-expanded="false">filters</button>
     <button id="likes-btn" type="button" aria-controls="likes" aria-expanded="false">likes</button>
     <button id="help-btn" type="button" title="shortcuts (?)" aria-label="help">?</button>
-    <button id="logout-btn" type="button" title="sign out"></button>
+    <button id="account-btn" type="button" aria-controls="account" aria-expanded="false" title="account"></button>
   </header>
 
   <div id="login" hidden>
@@ -61,7 +61,12 @@
       <p id="login-error" role="alert"></p>
       <p class="fineprint">
         No account? <a href="https://pl8list.com/signup" target="_blank" rel="noopener">sign up on pl8list</a>.
-        This site is not affiliated with pl8list. It never stores your pl8list login.
+        This site is not affiliated with pl8list. Your email and code go to pl8list, which signs this
+        server in for you. We use that pl8list login once to read your library, then log it out; it is
+        never stored. We keep your pl8list handle and what you play and like, to pick tracks for you.
+      </p>
+      <p class="fineprint legal-links">
+        <a href="/datenschutz">Datenschutz / privacy</a> · <a href="/impressum">Impressum</a>
       </p>
     </div>
   </div>
@@ -79,6 +84,23 @@
     <ol id="likes-list"></ol>
   </aside>
 
+  <aside id="account" class="panel" hidden>
+    <h2 id="account-handle"></h2>
+    <button type="button" id="logout-btn">sign out</button>
+    <button type="button" id="logout-all-btn" class="link">sign out on all devices</button>
+    <a href="/account/export" download>download my data</a>
+    <button type="button" id="delete-open" class="link danger">delete account…</button>
+    <form id="delete-form" hidden>
+      <label for="delete-confirm">This deletes your likes and listening history here, right away.
+        Your pl8list account is not touched. Type <b id="delete-handle"></b> to confirm.</label>
+      <input id="delete-confirm" name="confirm" autocomplete="off" required>
+      <button type="submit" class="danger">delete my account</button>
+    </form>
+    <p class="fineprint legal-links">
+      <a href="/datenschutz">Datenschutz / privacy</a> · <a href="/impressum">Impressum</a>
+    </p>
+  </aside>
+
   <main id="feed"></main>
 
   <div id="start" hidden>

static/style.css

@@ -55,7 +55,7 @@ button {
 .logo b { color: var(--accent); }
 #stats { color: var(--muted); font-size: 0.8rem; }
 #help-btn { width: 2.2em; padding: 0.35em 0; }
-#logout-btn { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#account-btn { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 #filters-btn.active::after {
   content: "";
   display: inline-block;
@@ -114,6 +114,16 @@ button {
 }
 #likes li .play-now svg { width: 0.9rem; height: 0.9rem; }
 
+#account { width: min(20rem, calc(100vw - 2rem)); display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
+#account h2 { margin: 0; font-size: 1rem; }
+#account a { font-size: 0.85rem; color: var(--muted); }
+#delete-form { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
+#delete-form label { color: var(--muted); font-size: 0.85rem; }
+#delete-form input { padding: 0.4em 0.6em; border-radius: 8px; border: 1px solid #444; background: #111; }
+.link.danger { color: var(--accent); }
+button.danger:not(.link) { background: var(--accent); border: none; color: #fff; font-weight: 600; }
+.legal-links a { color: inherit; }
+
 /* Feed ------------------------------------------------------------------- */
 
 #feed {
@@ -426,6 +436,14 @@ button {
 #login-error { margin: 0; min-height: 1.2em; color: var(--accent); font-size: 0.9rem; }
 .fineprint { margin: 0; color: #666; font-size: 0.75rem; }
 
+/* Impressum and privacy pages -------------------------------------------- */
+
+html:has(body.legal), body.legal { height: auto; overflow: auto; }
+body.legal main { max-width: 42rem; margin: 0 auto; padding: 2rem 1.2rem 4rem; line-height: 1.6; }
+body.legal h1 { font-size: 1.8rem; }
+body.legal h2 { font-size: 1.1rem; margin-top: 2rem; }
+body.legal a { color: var(--accent); }
+
 /* Phones ----------------------------------------------------------------- */
 
 @media (max-width: 640px) {
@@ -433,7 +451,7 @@ button {
   #bar { gap: 0.4rem; padding-left: 0.7rem; padding-right: 0.7rem; }
   #bar button { padding: 0.3em 0.7em; font-size: 0.85rem; }
   #help-btn { display: none; }
-  #logout-btn { max-width: 6.5rem; }
+  #account-btn { max-width: 6.5rem; }
   .panel { left: 0.7rem; right: 0.7rem; }
   #likes { width: auto; }
   .content { width: calc(100vw - 2rem); margin-bottom: 4.5rem; }

static/vendor/README.txt

@@ -0,0 +1,3 @@
+hls.js 1.6.16 from https://cdn.jsdelivr.net/npm/hls.js@1.6.16/dist/hls.min.js
+sha384-5E8B0pTlZZJMabWpC0fyYf6OUpe15jJij34BqBAh4NXoHAlLNOjCPRrwtOXOQFAn
+License: Apache-2.0, see hls.js.LICENSE.txt

static/vendor/hls.js.LICENSE.txt

@@ -0,0 +1,28 @@
+Copyright (c) 2017 Dailymotion (http://www.dailymotion.com)
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+src/remux/mp4-generator.js and src/demux/exp-golomb.ts implementation in this project
+are derived from the HLS library for video.js (https://github.com/videojs/videojs-contrib-hls)
+
+That work is also covered by the Apache 2 License, following copyright:
+Copyright (c) 2013-2015 Brightcove
+
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

static/vendor/hls.min.js

@@ -0,0 +1,2 @@
+!function e(t){var r,i;r=this,i=function(){"use strict";function r(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,f(i.key),i)}}function i(e,t,i){return t&&r(e.prototype,t),i&&r(e,i),Object.defineProperty(e,"prototype",{writable:!1}),e}function n(e,t,r){return(t=f(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)({}).hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},a.apply(null,arguments)}function s(e){return s=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},s(e)}function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,h(e,t)}function l(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(e){}return(l=function(){return!!e})()}function u(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,i)}return r}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?u(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function h(e,t){return h=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},h(e,t)}function f(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var i=r.call(e,t);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function c(e){var t="function"==typeof Map?new Map:void 0;return c=function(e){if(null===e||!function(e){try{return-1!==Function.toString.call(e).indexOf("[native code]")}catch(t){return"function"==typeof e}}(e))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return function(e,t,r){if(l())return Reflect.construct.apply(null,arguments);var i=[null];i.push.apply(i,t);var n=new(e.bind.apply(e,i));return r&&h(n,r.prototype),n}(e,arguments,s(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),h(r,e)},c(e)}function g(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var v,m,p={exports:{}},y=(v||(v=1,function(e){var t=Object.prototype.hasOwnProperty,r="~";function i(){}function n(e,t,r){this.fn=e,this.context=t,this.once=r||!1}function a(e,t,i,a,s){if("function"!=typeof i)throw new TypeError("The listener must be a function");var o=new n(i,a||e,s),l=r?r+t:t;return e._events[l]?e._events[l].fn?e._events[l]=[e._events[l],o]:e._events[l].push(o):(e._events[l]=o,e._eventsCount++),e}function s(e,t){0==--e._eventsCount?e._events=new i:delete e._events[t]}function o(){this._events=new i,this._eventsCount=0}Object.create&&(i.prototype=Object.create(null),(new i).__proto__||(r=!1)),o.prototype.eventNames=function(){var e,i,n=[];if(0===this._eventsCount)return n;for(i in e=this._events)t.call(e,i)&&n.push(r?i.slice(1):i);return Object.getOwnPropertySymbols?n.concat(Object.getOwnPropertySymbols(e)):n},o.prototype.listeners=function(e){var t=r?r+e:e,i=this._events[t];if(!i)return[];if(i.fn)return[i.fn];for(var n=0,a=i.length,s=new Array(a);n<a;n++)s[n]=i[n].fn;return s},o.prototype.listenerCount=function(e){var t=r?r+e:e,i=this._events[t];return i?i.fn?1:i.length:0},o.prototype.emit=function(e,t,i,n,a,s){var o=r?r+e:e;if(!this._events[o])return!1;var l,u,d=this._events[o],h=arguments.length;if(d.fn){switch(d.once&&this.removeListener(e,d.fn,void 0,!0),h){case 1:return d.fn.call(d.context),!0;case 2:return d.fn.call(d.context,t),!0;case 3:return d.fn.call(d.context,t,i),!0;case 4:return d.fn.call(d.context,t,i,n),!0;case 5:return d.fn.call(d.context,t,i,n,a),!0;case 6:return d.fn.call(d.context,t,i,n,a,s),!0}for(u=1,l=new Array(h-1);u<h;u++)l[u-1]=arguments[u];d.fn.apply(d.context,l)}else{var f,c=d.length;for(u=0;u<c;u++)switch(d[u].once&&this.removeListener(e,d[u].fn,void 0,!0),h){case 1:d[u].fn.call(d[u].context);break;case 2:d[u].fn.call(d[u].context,t);break;case 3:d[u].fn.call(d[u].context,t,i);break;case 4:d[u].fn.call(d[u].context,t,i,n);break;default:if(!l)for(f=1,l=new Array(h-1);f<h;f++)l[f-1]=arguments[f];d[u].fn.apply(d[u].context,l)}}return!0},o.prototype.on=function(e,t,r){return a(this,e,t,r,!1)},o.prototype.once=function(e,t,r){return a(this,e,t,r,!0)},o.protLine truncated
+//# sourceMappingURL=hls.min.js.map