Merge pull request #78 from Psycojoker/encrypt

[enh] add password acces

docs/changelog.rst

@@ -1,6 +1,10 @@
 Changelog
 =========
 
+0.7 (unreleased)
+
+ * Add password access (based on https://robinmoisson.github.io/staticrypt/)
+
 0.6 (2017-07-14)
  
  * Compatibility python 2 and 3

docs/configuration.rst

@@ -309,3 +309,14 @@ by::
       quality: 90
       strip: False
       auto-orient: False
+
+Password access
+_______________
+
+You can protect access of gallery with password::
+
+    title: Gallery title
+    sub_title: Gallery sub-title
+    password: my_super_password
+
+

prosopopee/prosopopee.py

@@ -17,8 +17,9 @@ import shutil
 import socketserver
 import http.server
 
+from subprocess import check_output
+
 import ruamel.yaml as yaml
-#import yaml
 from docopt import docopt
 
 from path import Path
@@ -64,7 +65,6 @@ SETTINGS = {
     }
 }
 
-
 class Video(object):
     base_dir = Path()
     target_dir = Path()
@@ -446,6 +446,7 @@ def create_cover(gallery_name, gallery_settings, gallery_path):
 def build_gallery(settings, gallery_settings, gallery_path, template):
     gallery_index_template = template.get_template("gallery-index.html")
     page_template = template.get_template("page.html")
+    encrypted_template = template.get_template("encrypted.html")
 
     # this should probably be a factory
     Image.base_dir = Path(".").joinpath(gallery_path)
@@ -475,6 +476,19 @@ def build_gallery(settings, gallery_settings, gallery_path, template):
 
     open(Path("build").joinpath(gallery_path, "index.html"), "wb").write(html)
 
+    if gallery_settings.get("password"):
+        template_to_render = encrypted_template
+        password = gallery_settings.get("password")
+        index_plain = Path("build").joinpath(gallery_path, "index.html")
+        encrypted = check_output('cat %s | openssl enc -e -base64 -A -aes-256-cbc -pass pass:"%s"' % (index_plain, password), shell=True)
+        html = template_to_render.render(
+            settings=settings,
+            gallery=gallery_settings,
+            ciphertext=str(encrypted, 'utf-8'),
+        ).encode("Utf-8")
+
+        open(Path("build").joinpath(gallery_path, "index.html"), "wb").write(html)
+
     # XXX shouldn't this be a call to build_gallery?
     # Build light mode gallery
     if gallery_settings.get("light_mode", False) or (
@@ -510,6 +524,20 @@ def build_gallery(settings, gallery_settings, gallery_path, template):
 
         open(Path("build").joinpath(gallery_light_path, "index.html"), "wb").write(html)
 
+        if gallery_settings.get("password"):
+            light_template_to_render = light_templates.get_template("encrypted.html")
+            template_to_render = encrypted_template
+            password = gallery_settings.get("password")
+            index_plain = Path("build").joinpath(gallery_light_path, "index.html")
+            encrypted = check_output('cat %s | openssl enc -e -base64 -A -aes-256-cbc -pass pass:"%s"' % (index_plain, password), shell=True)
+            html = light_template_to_render.render(
+                settings=settings,
+                gallery=gallery_settings,
+                ciphertext=str(encrypted, 'utf-8'),
+            ).encode("Utf-8")
+
+            open(Path("build").joinpath(gallery_light_path, "index.html"), "wb").write(html)
+
 
 def build_index(settings, galleries_cover, templates, gallery_path='', sub_index=False, gallery_settings={}):
     index_template = templates.get_template("index.html")

prosopopee/themes/exposure/static/css/style-page.css

@@ -129,9 +129,12 @@ a {
 }
 
 footer {
+    position: relative;
+    right: 0;
+    bottom: 0;
+    left: 0;
     margin-top: 6em;
     text-align: center;
-    position: relative;
     font-family: 'crimson', serif;
     font-size: 11px;
     color: #555;
@@ -517,3 +520,69 @@ span.left img, span.right img {
 .clear {
   clear: both;
 }
+
+.staticrypt-hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+}
+
+.staticrypt-page {
+  width: 360px;
+  padding: 8% 0 0;
+  margin: auto;
+  box-sizing: border-box;
+}
+
+.staticrypt-form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+
+.staticrypt-form input {
+  outline: 0;
+  background: #292525;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.staticrypt-form .staticrypt-decrypt-button {
+  text-transform: uppercase;
+  outline: 0;
+  background: #91C25F;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.staticrypt-html {
+  height: 100%;
+}
+
+.staticrypt-body {
+  background: #FFF; /* fallback for old browsers */
+  font-family: "Arial", sans-serif;
+}
+
+.staticrypt-instructions {
+  margin-top: -1em;
+  margin-bottom: 1em;
+}
+
+.staticrypt-title {
+  font-size: 1.5em;
+}

prosopopee/themes/exposure/templates/encrypted.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html class="staticrypt-html">
+  <head>
+    <meta charset="utf-8">
+    <title>{{ gallery.title }} · {{ settings.title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- do not cache this page -->
+    <meta http-equiv="cache-control" content="max-age=0"/>
+    <meta http-equiv="cache-control" content="no-cache"/>
+    <meta http-equiv="expires" content="0"/>
+    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
+    <meta http-equiv="pragma" content="no-cache"/>
+    <link type="text/css" rel="stylesheet" href="../static/css/style-page.css"  media="screen,projection"/>
+  </head>
+
+  <body class="staticrypt-body">
+    <div class="staticrypt-page">
+      <div class="staticrypt-form">
+        <div class="staticrypt-instructions">
+          <img id="logo" src="./../static/img/logo.svg">
+          <p class="staticrypt-title">{{ gallery.title }}</p>
+        </div>
+
+        <hr class="staticrypt-hr">
+
+        <form id="staticrypt-form" action="#" method="post">
+          <div id="error" style="color: red; padding-bottom: 10px; height: 20px;"></div>
+          <input id="staticrypt-password"
+                 type="password"
+                 name="password"
+                 placeholder="passphrase"
+                 autofocus/>
+
+          <input type="submit" class="staticrypt-decrypt-button" value="ENTER"/>
+        </form>
+      </div>
+
+    </div>
+     <footer style="position: absolute;">
+      <p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
+    </footer>
+    <script type="text/javascript" src="../static/js/crypto-js.min.js" charset="utf-8"></script>
+
+    <script>
+document.getElementById('staticrypt-form').addEventListener('submit', function(e) {
+  e.preventDefault();
+
+  var passphrase = document.getElementById('staticrypt-password').value,
+  encryptedMsg = '{{ ciphertext }}';
+
+  try{
+    var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
+  }
+  catch(err) {
+    document.getElementById("error").innerHTML = "Wrong keyword entry."
+    return;
+  }
+
+  document.write(plainHTML);
+  document.close();
+});
+    </script>
+  </body>
+</html>

prosopopee/themes/light/static/css/style-page.css

@@ -296,3 +296,70 @@ span.left img, span.right img {
 .clear {
   clear: both;
 }
+
+.staticrypt-hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+}
+
+.staticrypt-page {
+  width: 360px;
+  padding: 8% 0 0;
+  margin: auto;
+  box-sizing: border-box;
+}
+
+.staticrypt-form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+
+.staticrypt-form input {
+  outline: 0;
+  background: #292525;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.staticrypt-form .staticrypt-decrypt-button {
+  text-transform: uppercase;
+  outline: 0;
+  background: #91C25F;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.staticrypt-html {
+  height: 100%;
+}
+
+.staticrypt-body {
+  background: #FFF; /* fallback for old browsers */
+  font-family: "Arial", sans-serif;
+}
+
+.staticrypt-instructions {
+  margin-top: -1em;
+  margin-bottom: 1em;
+}
+
+.staticrypt-title {
+  font-size: 1.5em;
+}
+

prosopopee/themes/light/templates/encrypted.html

@@ -0,0 +1,69 @@
+{% if settings.settings.light_mode %}
+{% set pathstatic = "." %}
+{% else %}
+{% set pathstatic = ".." %}
+{% endif %}
+<!doctype html>
+<html class="staticrypt-html">
+  <head>
+    <meta charset="utf-8">
+    <title>{{ gallery.title }} · {{ settings.title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- do not cache this page -->
+    <meta http-equiv="cache-control" content="max-age=0"/>
+    <meta http-equiv="cache-control" content="no-cache"/>
+    <meta http-equiv="expires" content="0"/>
+    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
+    <meta http-equiv="pragma" content="no-cache"/>
+    <link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/style-page.css"  media="screen,projection"/>
+  </head>
+
+  <body class="staticrypt-body">
+    <div class="staticrypt-page">
+      <div class="staticrypt-form">
+        <div class="staticrypt-instructions">
+          <p class="staticrypt-title">{{ gallery.title }}</p>
+        </div>
+
+        <hr class="staticrypt-hr">
+
+        <form id="staticrypt-form" action="#" method="post">
+          <div id="error" style="color: red; padding-bottom: 10px; height: 20px;"></div>
+          <input id="staticrypt-password"
+                 type="password"
+                 name="password"
+                 placeholder="passphrase"
+                 autofocus/>
+
+          <input type="submit" class="staticrypt-decrypt-button" value="ENTER"/>
+        </form>
+      </div>
+
+    </div>
+     <footer>
+      <p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
+    </footer>
+    <script type="text/javascript" src="{{ pathstatic }}/static/js/crypto-js.min.js" charset="utf-8"></script>
+
+    <script>
+document.getElementById('staticrypt-form').addEventListener('submit', function(e) {
+  e.preventDefault();
+
+  var passphrase = document.getElementById('staticrypt-password').value,
+  encryptedMsg = '{{ ciphertext }}';
+
+  try{
+    var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
+  }
+  catch(err) {
+    document.getElementById("error").innerHTML = "Wrong keyword entry."
+    return;
+  }
+
+  document.write(plainHTML);
+  document.close();
+});
+    </script>
+  </body>
+</html>

prosopopee/themes/light/templates/sections/audio.html

@@ -1,4 +1,5 @@
 {% set extension = settings.ffmpeg_audio.extension %}
+{% set audio = Audio(section.image) %}
 {% if extension == "mp3" %}
 {% set format = "mpeg" %}
 {% else %}
@@ -8,9 +9,8 @@
 {% set pathstatic = ".." %}
 {% else %}
 {% set pathstatic = "." %}
-{{ audio.copy() }}
 {% endif %}
-{% set audio = Audio(section.image) %}
+{{ audio.copy() }}
 <h4>{% if section.title %}{{ section.title }}{% else %}{{ audio }}{% endif %}</h4>
 <audio controls preload=none>
   <source src="{{ pathstatic }}/{{ audio }}.{{ extension }}" type="audio/{{ format }}">

prosopopee/themes/material/static/css/style-page.css

@@ -215,3 +215,69 @@ span.right {
 .clear {
   clear: both;
 }
+
+.staticrypt-hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+}
+
+.staticrypt-page {
+  width: 360px;
+  padding: 8% 0 0;
+  margin: auto;
+  box-sizing: border-box;
+}
+
+.staticrypt-form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+
+.staticrypt-form input {
+  outline: 0;
+  background: #292525;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.staticrypt-form .staticrypt-decrypt-button {
+  text-transform: uppercase;
+  outline: 0;
+  background: #91C25F;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.staticrypt-html {
+  height: 100%;
+}
+
+.staticrypt-body {
+  background: #37474f; /* fallback for old browsers */
+  font-family: "Arial", sans-serif;
+}
+
+.staticrypt-instructions {
+  margin-top: -1em;
+  margin-bottom: 1em;
+}
+
+.staticrypt-title {
+  font-size: 1.5em;
+}

prosopopee/themes/material/templates/encrypted.html

@@ -0,0 +1,69 @@
+<!doctype html>
+<html class="staticrypt-html">
+  <head>
+    <meta charset="utf-8">
+    <title>{{ gallery.title }} · {{ settings.title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- do not cache this page -->
+    <meta http-equiv="cache-control" content="max-age=0"/>
+    <meta http-equiv="cache-control" content="no-cache"/>
+    <meta http-equiv="expires" content="0"/>
+    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
+    <meta http-equiv="pragma" content="no-cache"/>
+    <link type="text/css" rel="stylesheet" href="../static/css/style-page.css"  media="screen,projection"/>
+    <link type="text/css" rel="stylesheet" href="../static/css/materialize.css"  media="screen,projection"/>
+  </head>
+
+  <body class="staticrypt-body">
+    <div class="staticrypt-page">
+      <div class="staticrypt-form">
+        <div class="staticrypt-instructions">
+          <p class="staticrypt-title">{{ gallery.title }}</p>
+        </div>
+
+        <hr class="staticrypt-hr">
+
+        <form id="staticrypt-form" action="#" method="post">
+          <div id="error" style="color: red; padding-bottom: 10px; height: 20px;"></div>
+          <input id="staticrypt-password"
+                 type="password"
+                 name="password"
+                 placeholder="passphrase"
+                 autofocus/>
+          <button class="btn waves-effect waves-light" type="submit" name="action">ENTER
+          </button>
+        </form>
+      </div>
+
+    </div>
+    <footer class="page-footer blue-grey darken-1">
+      <div class="footer-copyright blue-grey darken-2">
+        <div class="container center">
+          Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>
+        </div>
+      </div>
+    </footer>
+    <script type="text/javascript" src="../static/js/crypto-js.min.js" charset="utf-8"></script>
+
+    <script>
+document.getElementById('staticrypt-form').addEventListener('submit', function(e) {
+  e.preventDefault();
+
+  var passphrase = document.getElementById('staticrypt-password').value,
+  encryptedMsg = '{{ ciphertext }}';
+
+  try{
+    var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
+  }
+  catch(err) {
+    document.getElementById("error").innerHTML = "Wrong keyword entry."
+      return;
+  }
+
+  document.write(plainHTML);
+  document.close();
+});
+    </script>
+  </body>
+</html>