Access key: Some cosmetic changes

README.md

@@ -15,7 +15,7 @@ You can see what it looks like using the demo: [https://demo.linx-server.net/](h
 - Display syntax-highlighted code with in-place editing
 - Documented API with keys if need to restrict uploads (can use [linx-client](https://github.com/andreimarcu/linx-client) for uploading through command-line)
 - Torrent download of files using web seeding
-- File expiry, deletion key, and random filename options
+- File expiry, deletion key, file access key, and random filename options
 
 
 ### Screenshots

static/css/linx.css

@@ -264,21 +264,28 @@ body {
   margin: 0;
 }
 
+#access_key {
+  min-width: 100%;
+  line-height: 1.3em;
+}
+
+#access_key input, span {
+  vertical-align: middle;
+}
+
 #access_key_checkbox {
   margin: 0;
 }
 
-#access_key_checkbox:checked ~ #access_key {
+#access_key_checkbox:checked ~ #access_key_input {
   display: inline-block;
 }
-#access_key_checkbox:checked ~ #access_key_label {
+#access_key_checkbox:checked ~ #access_key_text {
   display: none;
 }
 
-#access_key {
-  line-height: 1em;
-  padding: 1px;
-  border: 3px;
+#access_key_input {
+  padding: 0;
   display: none;
 }
 

static/js/upload.js

@@ -140,4 +140,10 @@ document.onpaste = function(event) {
     }
 };
 
+document.getElementById("access_key_checkbox").onchange = function (event) {
+    if (event.target.checked == false) {
+        document.getElementById("access_key_input").value = "";
+    }
+};
+
 // @end-license

templates/API.html

@@ -49,7 +49,7 @@
 			 “direct_url”: the url to access the file directly<br/>
 			 “filename”:   the (optionally generated) filename<br/>
 			 “delete_key”: the (optionally generated) deletion key,<br/>
-			 “access_key”: the (optionally generated) access key,<br/>
+			 “access_key”: the (optionally supplied) access key,<br/>
 			 “expiry”: the unix timestamp at which the file will expire (0 if never)<br/>
 			 “size”: the size in bytes of the file<br/>
 			 “mimetype”:   the guessed mimetype of the file<br/>

templates/access.html

@@ -1,11 +1,12 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div id="main">
+<div id="main" class="oopscontent">
     <form action="{{ unlockpath }}" method="POST" enctype="multipart/form-data">
-        {{ filename }} is protected with password <br />
+        {{ filename }} is protected with a password: <br /><br />
         <input name="access_key" type="password" />
         <input id="submitbtn" type="submit" value="Unlock">
+        <br /><br />
     </form>
 </div>
 {% endblock %}

templates/index.html

@@ -17,7 +17,10 @@
         </div>
 
         <div id="choices">
-            <label>{% if not forcerandom %}<input name="randomize" id="randomize" type="checkbox" checked /> Randomize filename{% endif %}</label>
+            <span class="hint--top hint--bounce" data-hint="Replace the filename with random characters. The file extension is retained">
+                <label><input {% if forcerandom %} disabled {% endif %} name="randomize" id="randomize" type="checkbox" checked /> Randomize filename</label>
+            </span>
+
             <div id="expiry">
                 <label>File expiry:
                     <select name="expires" id="expires">
@@ -27,11 +30,14 @@
                     </select>
                 </label>
             </div>
-
-            <div>
+            <div id="access_key">
+                <span class="hint--top hint--bounce" data-hint="Require password to access (this does not encrypt the file but only limits access)">
+                    <label>
                         <input type="checkbox" id="access_key_checkbox"/>
-                <input id="access_key" name="access_key" type="text" placeholder="Access password"/>
-                <label id="access_key_label"> Require password to access</label>
+                        <input id="access_key_input" name="access_key" type="text" placeholder="Access password"/>
+                        <span id="access_key_text">Require access password</span>
+                    </label>
+                </span>
             </div>
         </div>
         <div class="clear"></div>