freedomofpress · garrettr · May 24, 2014 · Apr 29, 2014 · Apr 29, 2014 · Apr 29, 2014
@@ -14,6 +14,7 @@
 import crypto_util
 import store
 import background
+import util
 from db import db_session, Source, Submission
 
 app = Flask(__name__, template_folder=config.JOURNALIST_TEMPLATES_DIR)
@@ -25,7 +26,7 @@
     app.jinja_env.globals['header_image'] = config.CUSTOM_HEADER_IMAGE
     app.jinja_env.globals['use_custom_header_image'] = True
 else:
-    app.jinja_env.globals['header_image'] = 'securedrop.png'
+    app.jinja_env.globals['header_image'] = 'logo.png'
     app.jinja_env.globals['use_custom_header_image'] = False
 
 @app.teardown_appcontext
@@ -151,7 +152,7 @@ def reply():
 
     crypto_util.encrypt(crypto_util.getkey(g.sid), msg, output=
                         store.path(g.sid, filename))
-    
+
     db_session.commit()
     return render_template('reply.html', sid=g.sid,
             codename=g.source.journalist_designation)

@@ -1,32 +1,41 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel='stylesheet' href='/static/css/securedrop.css' type='text/css' media='all' />
-    <link rel="icon" type="image/png" href="/static/i/favicon.png">
     <title>SecureDrop</title>
+    <link rel="stylesheet" href="/static/css/normalize.css" type="text/css" media="all" />
+    <link rel="stylesheet" href="/static/css/styles.css" type="text/css" media="all" />
+    <link rel="stylesheet" href="/static/css/font-awesome.css" type="text/css" media="all" />
+    <link rel="icon" type="image/png" href="/static/i/favicon.png">
     <script src="/static/js/libs/jquery-2.1.1.min.js"></script>
     <script src="/static/js/libs/localForage.js"></script>
     <script src="/static/js/journalist.js"></script>
+    {% block extrahead %}{% endblock %}
   </head>
   <body>
-    <div id="wrapper">
+    <div class="content">
       {% block header %}
       <div id="header">
-        <a href="/"><img src="/static/i/{{ header_image }}" alt="SecureDrop"></a>
+        <a href="/"><img src="/static/i/{{ header_image }}" class="logo small" alt="SecureDrop"></a>
         {% if use_custom_header_image %}
-        <div class="powered">Powered by <img src="/static/i/securedrop_small.png" alt="SecureDrop"></div>
+        <div class="powered">
+          Powered by<br/>
+          <img src="/static/i/securedrop_small.png" alt="SecureDrop">
+        </div>
         {% endif %}
       </div>
       {% endblock %}
 
-      {% include 'flashed.html' %}
-      {% block body %}{% endblock %}
+      <div class="panel selected">
+        <hr class="no-line" />
+        {% include 'flashed.html' %}
+
+        {% block body %}{% endblock %}
+      </div>
 
       {% block footer %}
-      <div id="footer">
-        Like all software, SecureDrop may contain security bugs. Use at your own risk.<br/>
+      <footer>
         Powered by <em>SecureDrop {{ version }}</em>.
-      </div>
+      </footer>
       {% endblock %}
     </div>
   </body>

@@ -6,8 +6,8 @@ <h2><span class="headline">Read documents</span></h2>
 <h3>Collection from: <span class="code-name">{{ codename }}</span></h3>
 <form action='/regenerate-code' method='post'>
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
-  <input type='hidden' name='sid' value='{{ sid }}'>
-  <input type='submit' value='Generate a new codename for this source'>
+  <input type="hidden" name="sid" value="{{ sid }}">
+  <input type="submit" value="Generate a new codename for this source" class="btn small">
 </form>
 
 {% if docs %}
@@ -24,13 +24,13 @@ <h3>Collection from: <span class="code-name">{{ codename }}</span></h3>
   {% endif %}
 </li>
 {% endfor %}
+</ul>
 <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
 <input type="hidden" name="sid" value="{{ sid }}" autocomplete="off"/>
 <p>
-  <button type="submit" name="action" value="download">Download selected</button>
-  <button type="submit" name="action" value="delete">Delete selected</button>
-  (<span id="select_all">select all</span>, <span id="select_none">select none</span>)</p>
-</ul>
+  <button type="submit" name="action" value="download" class="small">Download selected</button>
+  <button type="submit" name="action" value="delete" class="small">Delete selected</button>
+  <span id="select_all" class="select"><i class="fa fa-check-square-o"></i> select all</span> <span id="select_none" class="select"><i class="fa fa-square-o"></i> select none</span></p>
 </form>
 {% else %}
 <p><br />No documents to display.</p>

@@ -1,6 +1,9 @@
 {% extends "base.html" %}
 {% block body %}
-<p class="notification">Thanks!</p>
+<p class="flash notification">
+  <i class="fa fa-info-circle pull-left"></i>
+Thanks!
+</p>
 
 <p>SecureDrop will generate a secure encryption key for this source the next time that they log in. Once the key has been generated, a reply box will appear under their collection of documents. You can use this box to write encrypted replies to them.</p>
 

@@ -1,7 +1,16 @@
 {% with messages = get_flashed_messages(with_categories=true) %}
 {% if messages %}
   {% for category, message in messages %}
-  <p class="{{ category }}">{{ message }}</p>
+    {% if category != 'banner-warning' %}
+      <p class="flash {{ category }}">
+        {% if category == 'notification' %}
+        <i class="fa fa-info-circle pull-left"></i>
+        {% elif category == 'error' %}
+        <i class="fa fa-exclamation-triangle pull-left"></i>
+        {% endif %}
+        {{ message }}
+      </p>
+    {% endif %}
   {% endfor %}
 {% endif %}
 {% endwith %}

@@ -1,9 +1,8 @@
 {% extends "base.html" %}
 {% block body %}
 <div id="content" class="journalist-view-all">
-<h2><span class="headline">Latest submissions</span></h2>
+<h2><span class="headline">Sources</span></h2>
 {% if sources %}
-<p>Here are the various collections of documents that have been submitted, with the most recently updated first:</p>
 <form id="delete_collections" action="/col/delete" method="post">
 <input id='filter' type='text' placeholder='filter by codename' autofocus="autofocus">
 <ul id="cols" class="plain">
@@ -27,11 +26,8 @@ <h2><span class="headline">Latest submissions</span></h2>
 </ul>
 <input name="csrf_token" type="hidden" value="{{ csrf_token() }}"/>
 <p>
-  <button type="submit" name="action" value="delete">Delete selected</button>
-  (<span id="select_all">select all</span>, <span id="select_none">select none</span>)
-</p>
-<p>Click the button above to delete selected collections.
-<em>Warning: If you do this, the selected collections of submisisons will be unrecoverable and each corresponding source will no longer be able to login with their previous codename.</em>
+  <button type="submit" name="action" value="delete" class="small"><i class="fa fa-minus-circle"></i> Delete selected</button>
+  <span id="select_all" class="select"><i class="fa fa-check-square-o"></i> select all</span> <span id="select_none" class="select"><i class="fa fa-square-o"></i> select none</span>
 </p>
 </form>
 </div>

@@ -1,8 +1,11 @@
 {% extends "base.html" %}
 {% block body %}
-<p class="notification">Thanks! Your reply has been stored.</p>
+<p class="flash notification">
+  <i class="fa fa-info-circle pull-left"></i>
+  Thanks! Your reply has been stored.
+</p>
 
 <p>You will now see it in the list of documents in that collection. Once the source has read it, they will be asked to delete it. If it disappears from the list, then you know it has been read.</p>
 
-<p><a href="/col/{{ sid }}">Continue to the list of documents for {{ codename }}...</a></p>
+<p><a href="/col/{{ sid }}">Continue to the list of documents for <strong>{{ codename }}</strong>...</a></p>
 {% endblock %}
@@ -23,6 +23,7 @@
 import crypto_util
 import store
 import background
+import util
 from db import db_session, Source, Submission
 
 app = Flask(__name__, template_folder=config.SOURCE_TEMPLATES_DIR)
@@ -101,7 +102,7 @@ def check_tor2web():
         flash('<strong>WARNING:</strong> You appear to be using Tor2Web. '
               'This <strong>does not</strong> provide anonymity. '
               '<a href="/tor2web-warning">Why is this dangerous?</a>',
-              "header-warning")
+              "banner-warning")
 
 
 @app.route('/')
@@ -152,8 +153,8 @@ def lookup():
             except UnicodeDecodeError:
                 app.logger.error("Could not decode reply %s" % fn)
             else:
-                date = str(datetime.fromtimestamp(
-                           os.stat(store.path(g.sid, fn)).st_mtime))
+                d = datetime.fromtimestamp(os.stat(store.path(g.sid, fn)).st_mtime)
+                date = util.format_time(d)
                 replies.append(dict(id=fn, date=date, msg=msg))
 
     def async_genkey(sid, codename):

@@ -0,0 +1,6 @@
+{# these are flash messages that appear at the top and are really scary, like if you're using tor2web #}
+{% with messages = get_flashed_messages(with_categories=True, category_filter=["banner-warning"]) %}
+  {% for category, message in messages %}
+  <p class="flash {{ category }}"><i class="fa fa-exclamation-triangle pull-left"></i> {{ message|safe }}</p>
+  {% endfor %}
+{% endwith %}
@@ -1,36 +1,42 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="/static/css/securedrop.css" type="text/css" media="all" />
-    <link rel="icon" type="image/png" href="/static/i/favicon.png">
-    <title>SecureDrop</title>
+    <title>SecureDrop | Protecting Journalists and Sources</title>
+    <link rel="stylesheet" href="/static/css/normalize.css" type="text/css" media="all" />
+    <link rel="stylesheet" href="/static/css/styles.css" type="text/css" media="all" />
+    <link rel="stylesheet" href="/static/css/font-awesome.css" type="text/css" media="all" />
+    <link rel="icon" type="image/png" href="/static/i/favicon.png" >
     {% block extrahead %}{% endblock %}
   </head>
   <body>
-    {% with messages = get_flashed_messages(with_categories=True, category_filter=["header-warning"]) %}
-      {% for category, message in messages %}
-      <p class="{{ category }}">{{ message|safe }}</p>
-      {% endfor %}
-    {% endwith %}
+    {% include 'banner_warning_flashed.html' %}
 
-    <div id="wrapper">
+    <div class="content">
       {% block header %}
       <div id="header">
-        <a href="/"><img src="/static/i/{{ header_image }}" alt="SecureDrop"></a>
+        <a href="/"><img src="/static/i/{{ header_image }}" class="logo small" alt="SecureDrop"></a>
         {% if use_custom_header_image %}
-        <div class="powered">Powered by <img src="/static/i/securedrop_small.png" alt="SecureDrop"></div>
+        <div class="powered">
+          Powered by<br/>
+          <img src="/static/i/securedrop_small.png" alt="SecureDrop">
+        </div>
         {% endif %}
       </div>
       {% endblock %}
 
-      {% block body %}{% endblock %}
+      <div class="panel selected">
+        <hr class="no-line" />
+
+        {% block body %}{% endblock %}
 
-      {% block footer %}
-      <div id="footer">
-        Like all software, SecureDrop may contain security bugs. Use at your own risk.<br/>
-        Powered by <em>SecureDrop {{ version }}</em>.
       </div>
+
+      {% block footer %}
+      <footer>
+        Like all software, SecureDrop may contain security bugs. Use at your own risk. Powered by SecureDrop {{ version }}.
+      </footer>
       {% endblock %}
     </div>
   </body>
 </html>
+
@@ -1,7 +1,16 @@
 {% with messages = get_flashed_messages(with_categories=true) %}
 {% if messages %}
   {% for category, message in messages %}
-  <p class="{{ category }}">{{ message }}</p>
+    {% if category != 'banner-warning' %}
+      <p class="flash {{ category }}">
+        {% if category == 'notification' %}
+        <i class="fa fa-info-circle pull-left"></i>
+        {% elif category == 'error' %}
+        <i class="fa fa-exclamation-triangle pull-left"></i>
+        {% endif %}
+        {{ message }}
+      </p>
+    {% endif %}
   {% endfor %}
 {% endif %}
 {% endwith %}

@@ -1,33 +1,42 @@
 {% extends "base.html" %}
+
 {% block body %}
-<div id="content" class="submit-2">
-  <h2>Submitting for the first time</h2>
-  <p>To protect your identity, we're assigning you a unique code name.</p>
-  <p><b>Your code name is:</b></p>
-  <p id="code-name" class="code-name">{{ codename }}</p>
-  <div id='regenerate-box'>
-    Click Generate if you would like to create a different code name.
+<h2>Remember this code and keep it secret</h2>
+<p class="center">To protect your identity, we're assigning you a unique code name.</p>
+
+<hr class="no-line" />
+
+<div class="code">
+  <i class="fa fa-lock pull-left"></i>  <strong id="codename">{{ codename }}</strong>
+  <div class="pull-right">
     <form id="regenerate-form" method="post">
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-      Desired code name length:
       <select name="number-words" id="number-words">
-        <option value="7">7</option>
-        <option value="8" selected>8</option>
+        <option value="7">7 words</option>
+        <option value="8" selected>8 words</option>
         <option value="9">9</option>
         <option value="10">10</option>
       </select>
-      words.
-      <input type="submit" id="regenerate-submit" value="Generate">
+      <button type="submit" id="regenerate-submit" class="small">
+        <i class="fa fa-refresh"></i>
+      </button>
     </form>
   </div>
-  <p>
-    It is extremely important that you both remember this code and keep it secret. Memorize the code or write it down, but do not save it on your computer. After submitting documents, you will need to provide this code to log back in and check for responses. Also, this code is the only authentication needed to log in with your account: if you write it down, be sure to keep it hidden.
-  </p>
-  <form id="create-form" method="post" action="/create" autocomplete="off">
-    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-    <p>
-      Once you've taken care of that: <button id="continue-button" class="button-custom" type="submit">Continue...</button>
-    </p>
-  </form>
 </div>
+
+<div class="clearfix"></div>
+<hr class="no-line">
+
+<p class="serious">Store this code somewhere safe, or memorize it. It can be used to compromise your anonymity.</p>
+
+<hr class="no-line" />
+
+<p><strong>Next steps:</strong> You will need to provide this code to log back in and check for responses.</p>
+
+<hr class="no-line" />
+
+<form id="create-form" method="post" action="/create" autocomplete="off">
+  <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
+  <button type="submit" class="btn block pull-right" id="continue-button"><i class="fa fa-arrow-circle-o-right"></i> Continue</button>
+</form>
 {% endblock %}