Added token submission to frontpage

public/css/style.css

@@ -50,6 +50,8 @@ div#dropzone:hover {
     color: #fff;
 }
 
+div#uploads, p#tokenContainer { display: none; }
+
 img.logo { height: 200px; margin-top: 20px; }
 .dz-preview .dz-details { display: flex; }
 .dz-preview .dz-details .dz-size, .dz-preview .dz-details .dz-filename { flex: 1 }

public/index.html

@@ -24,9 +24,15 @@
 
 					<div class="columns">
 						<div class="column"></div>
-						<div class="column">
-							<a class="button is-danger is-outlined" id='btnGithub' href='https://github.com/kanadeko/loli-safe' target='_blank'>View on Github</a>
-							<div id="dropzone">Click here or drag and drop files</div>
+						<div class="column" id='uploadContainer'>
+
+							<p id='tokenContainer' class="control has-addons has-addons-centered">
+								<input id='token' class="input is-danger" type="text" placeholder="Your upload token">
+							  	<a id='tokenSubmit' class="button is-danger">Check</a>
+							</p>
+
+							<a id='btnGithub' class="button is-danger is-outlined" href='https://github.com/kanadeko/loli-safe' target='_blank'>View on Github</a>
+
 						</div>
 						<div class="column"></div>
 					</div>

public/js/upload.js

@@ -1,53 +1,79 @@
-var maxSize = '512';
-
-var xhr = new XMLHttpRequest();
-xhr.onreadystatechange = function() {
-	if (xhr.readyState == XMLHttpRequest.DONE) {
-		if(xhr.responseText !== 'not-authorized'){
-			document.getElementById('btnGithub').style.display = 'none';
-			document.getElementById('dropzone').style.display = 'flex';
-		}
-		if(xhr.responseText.maxFileSize)
-			maxSize = xhr.responseText.maxFileSize;
-	}
-}
-xhr.open('GET', '/api/info', true);
-xhr.send(null);
 
 window.onload = function () {
 
-	var previewNode = document.querySelector("#template");
-	previewNode.id = "";
-	var previewTemplate = previewNode.parentNode.innerHTML;
-	previewNode.parentNode.removeChild(previewNode);
-
-	var dropzone = new Dropzone('div#dropzone', { 
-		url: '/api/upload',
-		paramName: 'file',
-		maxFilesize: maxSize,
-		parallelUploads: 2,
-		uploadMultiple: false,
-		previewsContainer: 'div#uploads',
-		previewTemplate: previewTemplate,
-		createImageThumbnails: false,
-		maxFiles: 1000,
-		autoProcessQueue: true
-	});
-
-	// Update the total progress bar
-	dropzone.on("uploadprogress", function(file, progress) {
-		file.previewElement.querySelector(".progress").style.width = progress + "%";
-	});
-
-	dropzone.on("success", function(file, response) {
-		// Handle the responseText here. For example, add the text to the preview element:
-		a = document.createElement('a');
-		a.href = response.url;
-		a.target = '_blank';
-		a.innerHTML = response.filename;
-
-		file.previewTemplate.querySelector(".progress").style.display = 'none';
-		file.previewTemplate.querySelector(".link").appendChild(a);
-	});
+	var maxSize = '512';
+
+	if(!localStorage.token){
+		document.getElementById('tokenContainer').style.display = 'flex'
+		document.getElementById("tokenSubmit").addEventListener("click", function(){
+			getInfo(document.getElementById("token").value)
+		});
+	}else{
+		getInfo(localStorage.token);
+	}
+
+	function prepareDropzone(){
+
+		var previewNode = document.querySelector("#template");
+		previewNode.id = "";
+		var previewTemplate = previewNode.parentNode.innerHTML;
+		previewNode.parentNode.removeChild(previewNode);
+
+		var dropzone = new Dropzone('div#dropzone', { 
+			url: '/api/upload',
+			paramName: 'file',
+			maxFilesize: maxSize,
+			parallelUploads: 2,
+			uploadMultiple: false,
+			previewsContainer: 'div#uploads',
+			previewTemplate: previewTemplate,
+			createImageThumbnails: false,
+			maxFiles: 1000,
+			autoProcessQueue: true
+		});
+
+		// Update the total progress bar
+		dropzone.on("uploadprogress", function(file, progress) {
+			file.previewElement.querySelector(".progress").style.width = progress + "%";
+		});
 
+		dropzone.on("success", function(file, response) {
+			// Handle the responseText here. For example, add the text to the preview element:
+			a = document.createElement('a');
+			a.href = response.url;
+			a.target = '_blank';
+			a.innerHTML = response.filename;
+
+			file.previewTemplate.querySelector(".progress").style.display = 'none';
+			file.previewTemplate.querySelector(".link").appendChild(a);
+		});
+
+	}
+	
+	function getInfo(token) {
+		var xhr = new XMLHttpRequest();
+
+		xhr.onreadystatechange = function() {
+			if (xhr.readyState == XMLHttpRequest.DONE) {
+				if(xhr.responseText !== 'not-authorized'){
+					
+					div = document.createElement('div');
+					div.id = 'dropzone';
+					div.innerHTML = 'Click here or drag and drop files';
+					div.style.display = 'flex';
+
+					document.getElementById('btnGithub').style.display = 'none';
+					document.getElementById('tokenContainer').style.display = 'none';
+					document.getElementById('uploadContainer').appendChild(div);
+
+					if(xhr.responseText.maxFileSize) maxSize = xhr.responseText.maxFileSize;
+					if(token) localStorage.token = token;
+					prepareDropzone();
+				}
+			}
+		}
+		xhr.open('GET', '/api/info', true);
+		xhr.setRequestHeader('auth', token);
+		xhr.send(null);
+	}
 };