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

@@ -1,15 +1,15 @@
 // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
 
 Dropzone.options.dropzone = {
-    init: function() {
+    init: function () {
         var dzone = document.getElementById("dzone");
         dzone.style.display = "block";
     },
-    addedfile: function(file) {
+    addedfile: function (file) {
         if (!this.options.autoProcessQueue) {
             var dropzone = this;
             var xhr = new XMLHttpRequest();
-            xhr.onload = function() {
+            xhr.onload = function () {
                 if (xhr.readyState !== XMLHttpRequest.DONE) {
                     return;
                 }
@@ -39,7 +39,7 @@ Dropzone.options.dropzone = {
         var cancelAction = document.createElement("span");
         cancelAction.className = "cancel";
         cancelAction.innerHTML = "Cancel";
-        cancelAction.addEventListener('click', function(ev) {
+        cancelAction.addEventListener('click', function (ev) {
             this.removeFile(file);
         }.bind(this));
         file.cancelActionElement = cancelAction;
@@ -53,19 +53,19 @@ Dropzone.options.dropzone = {
 
         document.getElementById("uploads").appendChild(upload);
     },
-    uploadprogress: function(file, p, bytesSent) {
+    uploadprogress: function (file, p, bytesSent) {
         p = parseInt(p);
         file.progressElement.innerHTML = p + "%";
         file.uploadElement.setAttribute("style", 'background-image: -webkit-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -moz-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -ms-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -o-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%)');
     },
-    sending: function(file, xhr, formData) {
+    sending: function (file, xhr, formData) {
         var randomize = document.getElementById("randomize");
-        if(randomize != null) {
+        if (randomize != null) {
             formData.append("randomize", randomize.checked);
         }
         formData.append("expires", document.getElementById("expires").value);
     },
-    success: function(file, resp) {
+    success: function (file, resp) {
         file.fileActions.removeChild(file.progressElement);
 
         var fileLabelLink = document.createElement("a");
@@ -79,11 +79,11 @@ Dropzone.options.dropzone = {
         var deleteAction = document.createElement("span");
         deleteAction.innerHTML = "Delete";
         deleteAction.className = "cancel";
-        deleteAction.addEventListener('click', function(ev) {
+        deleteAction.addEventListener('click', function (ev) {
             xhr = new XMLHttpRequest();
             xhr.open("DELETE", resp.url, true);
             xhr.setRequestHeader("Linx-Delete-Key", resp.delete_key);
-            xhr.onreadystatechange = function(file) {
+            xhr.onreadystatechange = function (file) {
                 if (xhr.readyState == 4 && xhr.status === 200) {
                     var text = document.createTextNode("Deleted ");
                     file.fileLabel.insertBefore(text, file.fileLabelLink);
@@ -97,10 +97,10 @@ Dropzone.options.dropzone = {
         file.cancelActionElement = deleteAction;
         file.fileActions.appendChild(deleteAction);
     },
-    canceled: function(file) {
+    canceled: function (file) {
         this.options.error(file);
     },
-    error: function(file, resp, xhrO) {
+    error: function (file, resp, xhrO) {
         file.fileActions.removeChild(file.cancelActionElement);
         file.fileActions.removeChild(file.progressElement);
 
@@ -125,12 +125,12 @@ Dropzone.options.dropzone = {
     maxFilesize: Math.round(parseInt(document.getElementById("dropzone").getAttribute("data-maxsize"), 10) / 1024 / 1024),
     previewsContainer: "#uploads",
     parallelUploads: 5,
-    headers: {"Accept": "application/json"},
+    headers: { "Accept": "application/json" },
     dictDefaultMessage: "Click or Drop file(s) or Paste image",
     dictFallbackMessage: ""
 };
 
-document.onpaste = function(event) {
+document.onpaste = function (event) {
     var items = (event.clipboardData || event.originalEvent.clipboardData).items;
     for (index in items) {
         var item = items[index];
@@ -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>