From 7ff8796266be53fff3621c1ea780fa93c02a67ac Mon Sep 17 00:00:00 2001
From: Ludwig Schubert <github-email@ludwigschubert.de>
Date: Tue, 6 Mar 2018 16:13:05 -0800
Subject: [PATCH] Improve interstitial behavior Remove if no password during
 pre-render Remove if no password during onFrontMatterChanged Remove self if
 on production host

---
 src/components/d-interstitial.js      | 38 +++++++++++++++++++++------
 src/controller.js                     |  6 ++++-
 src/transforms/optional-components.js |  2 ++
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/components/d-interstitial.js b/src/components/d-interstitial.js
index e214f66..22e1b27 100644
--- a/src/components/d-interstitial.js
+++ b/src/components/d-interstitial.js
@@ -3,6 +3,7 @@ import { Template } from '../mixins/template';
 // This overlay is not secure.
 // It is only meant as a social deterrent.
 
+const productionHostname = 'distill.pub';
 const T = Template('d-interstitial', `
 <style>
 
@@ -109,13 +110,11 @@ p small {
 export class Interstitial extends T(HTMLElement) {
 
   connectedCallback() {
-    const passwordInput = this.root.querySelector('#interstitial-password-input');
-    passwordInput.oninput = (event) => this.passwordChanged(event);
-    if (typeof(Storage) !== 'undefined') {
-      if (localStorage.getItem('distill-interstitial-password-correct') === 'true') {
-        console.log('Loaded that correct password was entered before; skipping interstitial.');
-        this.parentElement.removeChild(this);
-      }
+    if (this.shouldRemoveSelf()) {
+      this.parentElement.removeChild(this);
+    } else {
+      const passwordInput = this.root.querySelector('#interstitial-password-input');
+      passwordInput.oninput = (event) => this.passwordChanged(event);
     }
   }
 
@@ -126,9 +125,32 @@ export class Interstitial extends T(HTMLElement) {
       this.parentElement.removeChild(this);
       if (typeof(Storage) !== 'undefined') {
         console.log('Saved that correct password was entered.');
-        localStorage.setItem('distill-interstitial-password-correct', 'true');
+        localStorage.setItem(this.localStorageIdentifier(), 'true');
       }
     }
   }
 
+  shouldRemoveSelf() {
+    // should never be visible in production
+    if (window && window.location.hostname === productionHostname) {
+      console.warn('Interstitial found on production, hiding it.');
+      return true
+    }
+    // should only have to enter password once
+    if (typeof(Storage) !== 'undefined') {
+      if (localStorage.getItem(this.localStorageIdentifier()) === 'true') {
+        console.log('Loaded that correct password was entered before; skipping interstitial.');
+        return true;
+      }
+    }
+    // otherwise, leave visible
+    return false;
+  }
+
+  localStorageIdentifier() {
+    const prefix = 'distill-drafts'
+    const suffix = 'interstitial-password-correct';
+    return prefix + (window ? window.location.pathname : '-') + suffix
+  }
+
 }
diff --git a/src/controller.js b/src/controller.js
index c8e88a4..e935d65 100644
--- a/src/controller.js
+++ b/src/controller.js
@@ -120,7 +120,11 @@ export const Controller = {
 
       const interstitial = document.querySelector('d-interstitial');
       if (interstitial) {
-        interstitial.password = frontMatter.password;
+        if (typeof frontMatter.password !== 'undefined') {
+          interstitial.password = frontMatter.password;
+        } else {
+          interstitial.parentElement.removeChild(interstitial);
+        }
       }
 
       const prerendered = document.body.hasAttribute('distill-prerendered');
diff --git a/src/transforms/optional-components.js b/src/transforms/optional-components.js
index e7897b4..057d45a 100644
--- a/src/transforms/optional-components.js
+++ b/src/transforms/optional-components.js
@@ -50,6 +50,8 @@ export default function(dom, data) {
       interstitial.password = data.password;
       body.insertBefore(interstitial, body.firstChild);
     }
+  } else if (!hasPassword && interstitial) {
+    interstitial.parentElement.removeChild(this);
   }
 
   let appendix = dom.querySelector('d-appendix');