Changed request system and post data

Changed from XMLHttpRequest to Axiios and made every POST call to look for params or json and not pass the values as headers. Token is still a header though

1 files changed, 246 insertions, 268 deletions

diff --git a/public/js/panel.js b/public/js/panel.js
index 3f99ef0..f59d3c6 100644
--- a/public/js/panel.js
+++ b/public/js/panel.js
@@ -15,38 +15,38 @@ panel.preparePage = function(){
 }
 
 panel.verifyToken = function(token, reloadOnError = false){
-	var xhr = new XMLHttpRequest();
+	
+	axios.post('/api/tokens/verify', {
+		type: 'admin',
+		token: token
+	})
+  	.then(function (response) {
+
+    	if(response.data.success === false){
+    		swal({
+				title: "An error ocurred", 
+				text: response.data.description, 
+				type: "error"
+			}, function(){
+				if(reloadOnError){
+					localStorage.removeItem("admintoken");
+					location.reload();
+				}
+			})
+			return;
+    	}
 
-	xhr.onreadystatechange = function() {
-		if (xhr.readyState == XMLHttpRequest.DONE) {
-			
-			var json = JSON.parse(xhr.responseText);
-			if(json.success === false){
-
-				swal({
-					title: "An error ocurred", 
-					text: json.description, 
-					type: "error"
-				}, function(){
-					if(reloadOnError){
-						localStorage.removeItem("admintoken");
-						location.reload();
-					}
-				})
-				
-				return;
-			}
+    	axios.defaults.headers.common['auth'] = token;
+    	localStorage.admintoken = token;
+		panel.token = token;
+		return panel.prepareDashboard();
 
-			localStorage.admintoken = token;
-			panel.token = token;
-			return panel.prepareDashboard();
+  	})
+  	.catch(function (error) {
+  		return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
+    	console.log(error);
+  	});
 
-		}
-	}
-	xhr.open('GET', '/api/tokens/verify', true);
-	xhr.setRequestHeader('type', 'admin');
-	xhr.setRequestHeader('token', token);
-	xhr.send(null);
 }
 
 panel.prepareDashboard = function(){
@@ -70,195 +70,183 @@ panel.prepareDashboard = function(){
 }
 
 panel.getUploads = function(album = undefined){
-	panel.page.innerHTML = '';
-	var xhr = new XMLHttpRequest();
 
-	xhr.onreadystatechange = function() {
-		if(xhr.readyState == XMLHttpRequest.DONE){
-			
-			if(xhr.responseText === 'not-authorized')
-				return panel.verifyToken(panel.token);
+	let url = '/api/uploads'
+	if(album !== undefined)
+		url = '/api/album/' + album
+
+	axios.get(url)
+  	.then(function (response) {
+  		if(response.data.success === false){
+  			if(response.data.description === 'not-authorized') return panel.verifyToken(panel.token);
+  			else return swal("An error ocurred", response.data.description, "error");		
+  		}
+    	
+    	panel.page.innerHTML = '';
+    	var container = document.createElement('div');
+		container.innerHTML = `
+			<table class="table is-striped is-narrow">
+		  		<thead>
+		    		<tr>
+					      <th>File</th>
+					      <th>Album</th>
+					      <th>Date</th>
+		    		</tr>
+		  		</thead>
+		  		<tbody id="table">
+		  		</tbody>
+		  	</table>`;
+		panel.page.appendChild(container);
+
+		var table = document.getElementById('table');
+
+		for(var item of response.data.files){
+
+			var tr = document.createElement('tr');
+			tr.innerHTML = `
+				<tr>
+			    	<th><a href="${item.file}" target="_blank">${item.file}</a></th>
+			      	<th>${item.album}</th>
+			      	<td>${item.date}</td>
+			    </tr>
+			    `;
+
+			table.appendChild(tr);
+		}
 
-			var json = JSON.parse(xhr.responseText);
+  	})
+  	.catch(function (error) {
+  		return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
+    	console.log(error);
+  	});
 
-			if(json.success === false)
-				return swal("An error ocurred", json.description, "error");
-			
-			var container = document.createElement('div');
-			container.innerHTML = `
-				<table class="table is-striped is-narrow">
-			  		<thead>
-			    		<tr>
-						      <th>File</th>
-						      <th>Album</th>
-						      <th>Date</th>
-			    		</tr>
-			  		</thead>
-			  		<tbody id="table">
-			  		</tbody>
-			  	</table>`;
-			panel.page.appendChild(container);
-
-			var table = document.getElementById('table');
-
-			for(var item of json){
-
-				var tr = document.createElement('tr');
-				tr.innerHTML = `
-					<tr>
-				    	<th><a href="${item.file}" target="_blank">${item.file}</a></th>
-				      	<th>${item.album}</th>
-				      	<td>${item.date}</td>
-				    </tr>
-				    `;
-
-				table.appendChild(tr);
-			}
-			
-		}
-	}
-	xhr.open('GET', '/api/uploads', true);
-	if(album !== undefined)
-		xhr.setRequestHeader('albumid', album);
-	xhr.setRequestHeader('auth', panel.token);
-	xhr.send(null);
 }
 
 panel.getAlbums = function(){
-	panel.page.innerHTML = '';
-	var xhr = new XMLHttpRequest();
-
-	var container = document.createElement('div');
-	container.className = "container";
-	container.innerHTML = `
-		<h2 class="subtitle">Create new album</h2>
-
-		<p class="control has-addons has-addons-centered">
-		  	<input id="albumName" class="input" type="text" placeholder="Name">
-		  	<a id="submitAlbum" class="button is-primary">Submit</a>
-		</p>
-
-		<h2 class="subtitle">List of albums</h2>
-
-		<table class="table is-striped is-narrow">
-	  		<thead>
-	    		<tr>
-				      <th>Name</th>
-				      <th>Files</th>
-				      <th>Created At</th>
-	    		</tr>
-	  		</thead>
-	  		<tbody id="table">
-	  		</tbody>
-	  	</table>`;
-
-	xhr.onreadystatechange = function() {
-		if (xhr.readyState == XMLHttpRequest.DONE) {
-			
-			if(xhr.responseText === 'not-authorized')
-				return panel.verifyToken(panel.token);
-
-			var json = JSON.parse(xhr.responseText);
-
-			if(json.success === false)
-				return swal("An error ocurred", json.description, "error");
 
-			panel.page.appendChild(container);
-			var table = document.getElementById('table');
+	axios.get('/api/albums')
+  	.then(function (response) {
+  		if(response.data.success === false){
+  			if(response.data.description === 'not-authorized') return panel.verifyToken(panel.token);
+  			else return swal("An error ocurred", response.data.description, "error");		
+  		}
+
+  		panel.page.innerHTML = '';
+  		var container = document.createElement('div');
+		container.className = "container";
+		container.innerHTML = `
+			<h2 class="subtitle">Create new album</h2>
+
+			<p class="control has-addons has-addons-centered">
+			  	<input id="albumName" class="input" type="text" placeholder="Name">
+			  	<a id="submitAlbum" class="button is-primary">Submit</a>
+			</p>
+
+			<h2 class="subtitle">List of albums</h2>
+
+			<table class="table is-striped is-narrow">
+		  		<thead>
+		    		<tr>
+					      <th>Name</th>
+					      <th>Files</th>
+					      <th>Created At</th>
+		    		</tr>
+		  		</thead>
+		  		<tbody id="table">
+		  		</tbody>
+		  	</table>`;
+
+		panel.page.appendChild(container);
+		var table = document.getElementById('table');
+
+		for(var item of response.data.albums){
+
+			var tr = document.createElement('tr');
+			tr.innerHTML = `
+				<tr>
+			    	<th>${item.name}</th>
+			      	<th>${item.files}</th>
+			      	<td>${item.date}</td>
+			    </tr>
+			    `;
+
+			table.appendChild(tr);
+		}
 
-			for(var item of json.albums){
+		document.getElementById('submitAlbum').addEventListener('click', function(){
+			panel.submitAlbum();
+		});
 
-				var tr = document.createElement('tr');
-				tr.innerHTML = `
-					<tr>
-				    	<th>${item.name}</th>
-				      	<th>${item.files}</th>
-				      	<td>${item.date}</td>
-				    </tr>
-				    `;
 
-				table.appendChild(tr);
-			}
+  	})
+  	.catch(function (error) {
+  		return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
+    	console.log(error);
+  	});
 
-			document.getElementById('submitAlbum').addEventListener('click', function(){
-				panel.submitAlbum();
-			});
-			
-		}
-	}
-
-	xhr.open('GET', '/api/albums', true);
-	xhr.setRequestHeader('auth', panel.token);
-	xhr.setRequestHeader('extended', '');
-	xhr.send(null);
 }
 
 panel.submitAlbum = function(){
 	
-	var xhr = new XMLHttpRequest();
-
-	xhr.onreadystatechange = function() {
-		if (xhr.readyState == XMLHttpRequest.DONE) {
-			
-			if(xhr.responseText === 'not-authorized')
-				return panel.verifyToken(panel.token);
-
-			var json = JSON.parse(xhr.responseText);
-			if(json.success === false)
-				return swal("An error ocurred", json.description, "error");
-
-			swal("Woohoo!", "Album was added successfully", "success");
-			panel.getAlbumsSidebar();
-			panel.getAlbums();
-			return;
-		}
-	}
+	axios.post('/api/albums', {
+		name: document.getElementById('albumName').value
+	})
+  	.then(function (response) {
+
+  		if(response.data.success === false){
+  			if(response.data.description === 'not-authorized') return panel.verifyToken(panel.token);
+  			else return swal("An error ocurred", response.data.description, "error");		
+  		}
+
+    	swal("Woohoo!", "Album was added successfully", "success");
+		panel.getAlbumsSidebar();
+		panel.getAlbums();
+		return;
 
-	xhr.open('POST', '/api/albums', true);
-	xhr.setRequestHeader('auth', panel.token);
-	xhr.setRequestHeader('name', document.getElementById('albumName').value);
-	xhr.send(null);
+  	})
+  	.catch(function (error) {
+  		return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
+    	console.log(error);
+  	});
 
 }
 
 panel.getAlbumsSidebar = function(){
-	var xhr = new XMLHttpRequest();
-
-	xhr.onreadystatechange = function() {
-		if (xhr.readyState == XMLHttpRequest.DONE) {
-			
-			if(xhr.responseText === 'not-authorized')
-				return panel.verifyToken(panel.token);
 
-			var json = JSON.parse(xhr.responseText);
-			if(json.success === false)
-				return swal("An error ocurred", json.description, "error");
+	axios.get('/api/albums/sidebar')
+  	.then(function (response) {
+  		if(response.data.success === false){
+  			if(response.data.description === 'not-authorized') return panel.verifyToken(panel.token);
+  			else return swal("An error ocurred", response.data.description, "error");		
+  		}
 
-			var albumsContainer = document.getElementById('albumsContainer');
-			albumsContainer.innerHTML = '';
+  		var albumsContainer = document.getElementById('albumsContainer');
+		albumsContainer.innerHTML = '';
 
-			if(json.albums === undefined) return;
+		if(response.data.albums === undefined) return;
 
-			for(var album of json.albums){
+		for(var album of response.data.albums){
 
-				li = document.createElement('li');
-				a = document.createElement('a');
-				a.id = album.id;
-				a.innerHTML = album.name;
+			li = document.createElement('li');
+			a = document.createElement('a');
+			a.id = album.id;
+			a.innerHTML = album.name;
 
-				a.addEventListener('click', function(){
-					panel.getAlbum(this);
-				});
+			a.addEventListener('click', function(){
+				panel.getAlbum(this);
+			});
 
-				li.appendChild(a);
-				albumsContainer.appendChild(li);
-			}
+			li.appendChild(a);
+			albumsContainer.appendChild(li);
 		}
-	}
 
-	xhr.open('GET', '/api/albums', true);
-	xhr.setRequestHeader('auth', panel.token);
-	xhr.send(null);
+
+  	})
+  	.catch(function (error) {
+  		return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
+    	console.log(error);
+  	});
+
 }
 
 panel.getAlbum = function(item){
@@ -266,99 +254,89 @@ panel.getAlbum = function(item){
 }
 
 panel.changeTokens = function(){
-	panel.page.innerHTML = '';
-	var xhr = new XMLHttpRequest();
-
-	var container = document.createElement('div');
-	container.className = "container";
-	container.innerHTML = `
-		<h2 class="subtitle">Manage your tokens</h2>
-
-		<label class="label">Client token:</label>
-		<p class="control has-addons">
-		  	<input id="clientToken" class="input is-expanded" type="text" placeholder="Your client token">
-		  	<a id="submitClientToken" class="button is-primary">Save</a>
-		</p>
-
-		<label class="label">Admin token:</label>
-		<p class="control has-addons">
-		  	<input id="adminToken" class="input is-expanded" type="text" placeholder="Your admin token">
-		  	<a id="submitAdminToken" class="button is-primary">Save</a>
-		</p>
-	`;
-
-	xhr.onreadystatechange = function() {
-		if (xhr.readyState == XMLHttpRequest.DONE) {
-			
-			if(xhr.responseText === 'not-authorized')
-				return panel.verifyToken(panel.token);
-
-			var json = JSON.parse(xhr.responseText);
-
-			console.log(json);
-
-			if(json.success === false)
-				return swal("An error ocurred", json.description, "error");
 
-			panel.page.appendChild(container);
+	axios.get('/api/tokens')
+  	.then(function (response) {
+  		if(response.data.success === false){
+  			if(response.data.description === 'not-authorized') return panel.verifyToken(panel.token);
+  			else return swal("An error ocurred", response.data.description, "error");		
+  		}
+
+  		panel.page.innerHTML = '';
+  		var container = document.createElement('div');
+		container.className = "container";
+		container.innerHTML = `
+			<h2 class="subtitle">Manage your tokens</h2>
+
+			<label class="label">Client token:</label>
+			<p class="control has-addons">
+			  	<input id="clientToken" class="input is-expanded" type="text" placeholder="Your client token">
+			  	<a id="submitClientToken" class="button is-primary">Save</a>
+			</p>
+
+			<label class="label">Admin token:</label>
+			<p class="control has-addons">
+			  	<input id="adminToken" class="input is-expanded" type="text" placeholder="Your admin token">
+			  	<a id="submitAdminToken" class="button is-primary">Save</a>
+			</p>
+		`;
+
+		panel.page.appendChild(container);
+
+		document.getElementById('clientToken').value = response.data.clientToken;
+		document.getElementById('adminToken').value = response.data.adminToken;
+
+		document.getElementById('submitClientToken').addEventListener('click', function(){
+			panel.submitToken('client', document.getElementById('clientToken').value);
+		});
 
-			document.getElementById('clientToken').value = json.clientToken;
-			document.getElementById('adminToken').value = json.adminToken;
+		document.getElementById('submitAdminToken').addEventListener('click', function(){
+			panel.submitToken('admin', document.getElementById('adminToken').value);
+		});
 
-			document.getElementById('submitClientToken').addEventListener('click', function(){
-				panel.submitToken('client', document.getElementById('clientToken').value);
-			});
 
-			document.getElementById('submitAdminToken').addEventListener('click', function(){
-				panel.submitToken('admin', document.getElementById('adminToken').value);
-			});
-		}
-	}
+  	})
+  	.catch(function (error) {
+  		return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
+    	console.log(error);
+  	});
 
-	xhr.open('GET', '/api/tokens', true);
-	xhr.setRequestHeader('auth', panel.token);
-	xhr.send(null);
 }
 
 panel.submitToken = function(type, token){
 
-	var xhr = new XMLHttpRequest();
-	xhr.onreadystatechange = function() {
-		if (xhr.readyState == XMLHttpRequest.DONE) {
+	axios.post('/api/tokens/change', {
+		type: type,
+		token: token
+	})
+  	.then(function (response) {
+
+  		if(response.data.success === false){
+  			if(response.data.description === 'not-authorized') return panel.verifyToken(panel.token);
+  			else return swal("An error ocurred", response.data.description, "error");		
+  		}
+
+    	swal({
+			title: "Woohoo!", 
+			text: 'Your token was changed successfully.', 
+			type: "success"
+		}, function(){
 			
-			if(xhr.responseText === 'not-authorized')
-				return panel.verifyToken(panel.token);
-
-			var json = JSON.parse(xhr.responseText);
+			if(type === 'client')
+				localStorage.token = token;
+			else if(type === 'admin')
+				localStorage.admintoken = token
 
-			console.log(json);
-
-			if(json.success === false)
-				return swal("An error ocurred", json.description, "error");
-
-			swal({
-				title: "Woohoo!", 
-				text: 'Your token was changed successfully.', 
-				type: "success"
-			}, function(){
+			location.reload();
 				
-				if(type === 'client')
-					localStorage.token = token;
-				else if(type === 'admin')
-					localStorage.admintoken = token
+		})
 
-				location.reload();
-					
-			})
-
-		}
-	}
+  	})
+  	.catch(function (error) {
+  		return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
+    	console.log(error);
+  	});
 
-	xhr.open('POST', '/api/tokens/change', true);
-	xhr.setRequestHeader('auth', panel.token);
-	xhr.setRequestHeader('type', type);
-	xhr.setRequestHeader('token', token);
-	xhr.send(null);
 }
 
 window.onload = function () {