dashboard.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620
  1. let panel = {};
  2. panel.page;
  3. panel.username;
  4. panel.token = localStorage.token;
  5. panel.filesView = localStorage.filesView;
  6. panel.preparePage = function(){
  7. if(!panel.token) return window.location = '/auth';
  8. panel.verifyToken(panel.token, true);
  9. };
  10. panel.verifyToken = function(token, reloadOnError){
  11. if(reloadOnError === undefined)
  12. reloadOnError = false;
  13. axios.post('/api/tokens/verify', {
  14. token: token
  15. })
  16. .then(function (response) {
  17. if(response.data.success === false){
  18. swal({
  19. title: "An error ocurred",
  20. text: response.data.description,
  21. type: "error"
  22. }, function(){
  23. if(reloadOnError){
  24. localStorage.removeItem("token");
  25. location.location = '/auth';
  26. }
  27. });
  28. return;
  29. }
  30. axios.defaults.headers.common['token'] = token;
  31. localStorage.token = token;
  32. panel.token = token;
  33. panel.username = response.data.username;
  34. return panel.prepareDashboard();
  35. })
  36. .catch(function (error) {
  37. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  38. console.log(error);
  39. });
  40. };
  41. panel.prepareDashboard = function(){
  42. panel.page = document.getElementById('page');
  43. document.getElementById('auth').style.display = 'none';
  44. document.getElementById('dashboard').style.display = 'block';
  45. document.getElementById('itemUploads').addEventListener('click', function(){
  46. panel.setActiveMenu(this);
  47. });
  48. document.getElementById('itemManageGallery').addEventListener('click', function(){
  49. panel.setActiveMenu(this);
  50. });
  51. document.getElementById('itemTokens').addEventListener('click', function(){
  52. panel.setActiveMenu(this);
  53. });
  54. document.getElementById('itemPassword').addEventListener('click', function(){
  55. panel.setActiveMenu(this);
  56. });
  57. document.getElementById('itemLogout').innerHTML = `Logout ( ${panel.username} )`;
  58. panel.getAlbumsSidebar();
  59. };
  60. panel.logout = function(){
  61. localStorage.removeItem("token");
  62. location.reload('/');
  63. };
  64. panel.getUploads = function(album = undefined, page = undefined){
  65. if(page === undefined) page = 0;
  66. let url = '/api/uploads/' + page;
  67. if(album !== undefined)
  68. url = '/api/album/' + album + '/' + page;
  69. axios.get(url).then(function (response) {
  70. if(response.data.success === false){
  71. if(response.data.description === 'No token provided') return panel.verifyToken(panel.token);
  72. else return swal("An error ocurred", response.data.description, "error");
  73. }
  74. var prevPage = 0;
  75. var nextPage = page + 1;
  76. if(response.data.files.length < 25)
  77. nextPage = page;
  78. if(page > 0) prevPage = page - 1;
  79. panel.page.innerHTML = '';
  80. var container = document.createElement('div');
  81. var pagination = `<nav class="pagination is-centered">
  82. <a class="pagination-previous" onclick="panel.getUploads(${album}, ${prevPage} )">Previous</a>
  83. <a class="pagination-next" onclick="panel.getUploads(${album}, ${nextPage} )">Next page</a>
  84. </nav>`;
  85. var listType = `
  86. <div class="columns">
  87. <div class="column">
  88. <a class="button is-small is-outlined is-danger" title="List view" onclick="panel.setFilesView('list', ${album}, ${page})">
  89. <span class="icon is-small">
  90. <i class="fa fa-list-ul"></i>
  91. </span>
  92. </a>
  93. <a class="button is-small is-outlined is-danger" title="List view" onclick="panel.setFilesView('thumbs', ${album}, ${page})">
  94. <span class="icon is-small">
  95. <i class="fa fa-th-large"></i>
  96. </span>
  97. </a>
  98. </div>
  99. </div>`;
  100. if(panel.filesView === 'thumbs'){
  101. container.innerHTML = `
  102. ${pagination}
  103. <hr>
  104. ${listType}
  105. <div class="columns is-multiline is-mobile" id="table">
  106. </div>
  107. ${pagination}
  108. `;
  109. panel.page.appendChild(container);
  110. var table = document.getElementById('table');
  111. for(var item of response.data.files){
  112. var div = document.createElement('div');
  113. div.className = "column is-2";
  114. if(item.thumb !== undefined)
  115. div.innerHTML = `<a href="${item.file}" target="_blank"><img src="${item.thumb}"/></a><a class="button is-small is-danger is-outlined" title="Delete file" onclick="panel.deleteFile(${item.id})"><span class="icon is-small"><i class="fa fa-trash-o"></i></span></a>`;
  116. else
  117. div.innerHTML = `<a href="${item.file}" target="_blank"><h1 class="title">.${item.file.split('.').pop()}</h1></a><a class="button is-small is-danger is-outlined" title="Delete file" onclick="panel.deleteFile(${item.id})"><span class="icon is-small"><i class="fa fa-trash-o"></i></span></a>`;
  118. table.appendChild(div);
  119. }
  120. }else{
  121. var albumOrUser = 'Album';
  122. if(panel.username === 'root')
  123. albumOrUser = 'User';
  124. container.innerHTML = `
  125. ${pagination}
  126. <hr>
  127. ${listType}
  128. <table class="table is-striped is-narrow is-left">
  129. <thead>
  130. <tr>
  131. <th>File</th>
  132. <th>${albumOrUser}</th>
  133. <th>Date</th>
  134. <th></th>
  135. </tr>
  136. </thead>
  137. <tbody id="table">
  138. </tbody>
  139. </table>
  140. <hr>
  141. ${pagination}
  142. `;
  143. panel.page.appendChild(container);
  144. var table = document.getElementById('table');
  145. for(var item of response.data.files){
  146. var tr = document.createElement('tr');
  147. var displayAlbumOrUser = item.album;
  148. if(panel.username === 'root'){
  149. displayAlbumOrUser = '';
  150. if(item.username !== undefined)
  151. displayAlbumOrUser = item.username;
  152. }
  153. tr.innerHTML = `
  154. <tr>
  155. <th><a href="${item.file}" target="_blank">${item.file}</a></th>
  156. <th>${displayAlbumOrUser}</th>
  157. <td>${item.date}</td>
  158. <td>
  159. <a class="button is-small is-danger is-outlined" title="Delete album" onclick="panel.deleteFile(${item.id})">
  160. <span class="icon is-small">
  161. <i class="fa fa-trash-o"></i>
  162. </span>
  163. </a>
  164. </td>
  165. </tr>
  166. `;
  167. table.appendChild(tr);
  168. }
  169. }
  170. })
  171. .catch(function (error) {
  172. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  173. console.log(error);
  174. });
  175. };
  176. panel.setFilesView = function(view, album, page){
  177. localStorage.filesView = view;
  178. panel.filesView = view;
  179. panel.getUploads(album, page);
  180. };
  181. panel.deleteFile = function(id){
  182. swal({
  183. title: "Are you sure?",
  184. text: "You wont be able to recover the file!",
  185. type: "warning",
  186. showCancelButton: true,
  187. confirmButtonColor: "#ff3860",
  188. confirmButtonText: "Yes, delete it!",
  189. closeOnConfirm: false
  190. },
  191. function(){
  192. axios.post('/api/upload/delete', {
  193. id: id
  194. })
  195. .then(function (response) {
  196. if(response.data.success === false){
  197. if(response.data.description === 'No token provided') return panel.verifyToken(panel.token);
  198. else return swal("An error ocurred", response.data.description, "error");
  199. }
  200. swal("Deleted!", "The file has been deleted.", "success");
  201. panel.getUploads();
  202. })
  203. .catch(function (error) {
  204. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  205. console.log(error);
  206. });
  207. }
  208. );
  209. };
  210. panel.getAlbums = function(){
  211. axios.get('/api/albums').then(function (response) {
  212. if(response.data.success === false){
  213. if(response.data.description === 'No token provided') return panel.verifyToken(panel.token);
  214. else return swal("An error ocurred", response.data.description, "error");
  215. }
  216. panel.page.innerHTML = '';
  217. var container = document.createElement('div');
  218. container.className = "container";
  219. container.innerHTML = `
  220. <h2 class="subtitle">Create new album</h2>
  221. <p class="control has-addons has-addons-centered">
  222. <input id="albumName" class="input" type="text" placeholder="Name">
  223. <a id="submitAlbum" class="button is-primary">Submit</a>
  224. </p>
  225. <h2 class="subtitle">List of albums</h2>
  226. <table class="table is-striped is-narrow">
  227. <thead>
  228. <tr>
  229. <th>Name</th>
  230. <th>Files</th>
  231. <th>Created At</th>
  232. <th>Public link</th>
  233. <th></th>
  234. </tr>
  235. </thead>
  236. <tbody id="table">
  237. </tbody>
  238. </table>`;
  239. panel.page.appendChild(container);
  240. var table = document.getElementById('table');
  241. for(var item of response.data.albums){
  242. var tr = document.createElement('tr');
  243. tr.innerHTML = `
  244. <tr>
  245. <th>${item.name}</th>
  246. <th>${item.files}</th>
  247. <td>${item.date}</td>
  248. <td><a href="${item.identifier}" target="_blank">Album link</a></td>
  249. <td>
  250. <a class="button is-small is-primary is-outlined" title="Edit name" onclick="panel.renameAlbum(${item.id})">
  251. <span class="icon is-small">
  252. <i class="fa fa-pencil"></i>
  253. </span>
  254. </a>
  255. <a class="button is-small is-danger is-outlined" title="Delete album" onclick="panel.deleteAlbum(${item.id})">
  256. <span class="icon is-small">
  257. <i class="fa fa-trash-o"></i>
  258. </span>
  259. </a>
  260. </td>
  261. </tr>
  262. `;
  263. table.appendChild(tr);
  264. }
  265. document.getElementById('submitAlbum').addEventListener('click', function(){
  266. panel.submitAlbum();
  267. });
  268. })
  269. .catch(function (error) {
  270. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  271. console.log(error);
  272. });
  273. };
  274. panel.renameAlbum = function(id){
  275. swal({
  276. title: "Rename album",
  277. text: "New name you want to give the album:",
  278. type: "input",
  279. showCancelButton: true,
  280. closeOnConfirm: false,
  281. animation: "slide-from-top",
  282. inputPlaceholder: "My super album"
  283. },function(inputValue){
  284. if (inputValue === false) return false;
  285. if (inputValue === "") {
  286. swal.showInputError("You need to write something!");
  287. return false;
  288. }
  289. axios.post('/api/albums/rename', {
  290. id: id,
  291. name: inputValue
  292. })
  293. .then(function (response) {
  294. if(response.data.success === false){
  295. if(response.data.description === 'No token provided') return panel.verifyToken(panel.token);
  296. else if(response.data.description === 'Name already in use') swal.showInputError("That name is already in use!");
  297. else swal("An error ocurred", response.data.description, "error");
  298. return;
  299. }
  300. swal("Success!", "Your album was renamed to: " + inputValue, "success");
  301. panel.getAlbumsSidebar();
  302. panel.getAlbums();
  303. })
  304. .catch(function (error) {
  305. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  306. console.log(error);
  307. });
  308. });
  309. };
  310. panel.deleteAlbum = function(id){
  311. swal({
  312. title: "Are you sure?",
  313. text: "This won't delete your files, only the album!",
  314. type: "warning",
  315. showCancelButton: true,
  316. confirmButtonColor: "#ff3860",
  317. confirmButtonText: "Yes, delete it!",
  318. closeOnConfirm: false
  319. },
  320. function(){
  321. axios.post('/api/albums/delete', {
  322. id: id
  323. })
  324. .then(function (response) {
  325. if(response.data.success === false){
  326. if(response.data.description === 'No token provided') return panel.verifyToken(panel.token);
  327. else return swal("An error ocurred", response.data.description, "error");
  328. }
  329. swal("Deleted!", "Your album has been deleted.", "success");
  330. panel.getAlbumsSidebar();
  331. panel.getAlbums();
  332. })
  333. .catch(function (error) {
  334. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  335. console.log(error);
  336. });
  337. }
  338. );
  339. };
  340. panel.submitAlbum = function(){
  341. axios.post('/api/albums', {
  342. name: document.getElementById('albumName').value
  343. })
  344. .then(function (response) {
  345. if(response.data.success === false){
  346. if(response.data.description === 'No token provided') return panel.verifyToken(panel.token);
  347. else return swal("An error ocurred", response.data.description, "error");
  348. }
  349. swal("Woohoo!", "Album was added successfully", "success");
  350. panel.getAlbumsSidebar();
  351. panel.getAlbums();
  352. })
  353. .catch(function (error) {
  354. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  355. console.log(error);
  356. });
  357. };
  358. panel.getAlbumsSidebar = function(){
  359. axios.get('/api/albums/sidebar')
  360. .then(function (response) {
  361. if(response.data.success === false){
  362. if(response.data.description === 'No token provided') return panel.verifyToken(panel.token);
  363. else return swal("An error ocurred", response.data.description, "error");
  364. }
  365. var albumsContainer = document.getElementById('albumsContainer');
  366. albumsContainer.innerHTML = '';
  367. if(response.data.albums === undefined) return;
  368. for(var album of response.data.albums){
  369. li = document.createElement('li');
  370. a = document.createElement('a');
  371. a.id = album.id;
  372. a.innerHTML = album.name;
  373. a.addEventListener('click', function(){
  374. panel.getAlbum(this);
  375. });
  376. li.appendChild(a);
  377. albumsContainer.appendChild(li);
  378. }
  379. })
  380. .catch(function (error) {
  381. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  382. console.log(error);
  383. });
  384. };
  385. panel.getAlbum = function(item){
  386. panel.setActiveMenu(item);
  387. panel.getUploads(item.id);
  388. };
  389. panel.changeToken = function(){
  390. axios.get('/api/tokens')
  391. .then(function (response) {
  392. if(response.data.success === false){
  393. if(response.data.description === 'No token provided') return panel.verifyToken(panel.token);
  394. else return swal("An error ocurred", response.data.description, "error");
  395. }
  396. panel.page.innerHTML = '';
  397. var container = document.createElement('div');
  398. container.className = "container";
  399. container.innerHTML = `
  400. <h2 class="subtitle">Manage your token</h2>
  401. <label class="label">Your current token:</label>
  402. <p class="control has-addons">
  403. <input id="token" readonly class="input is-expanded" type="text" placeholder="Your token" value="${response.data.token}">
  404. <a id="getNewToken" class="button is-primary">Request new token</a>
  405. </p>
  406. `;
  407. panel.page.appendChild(container);
  408. document.getElementById('getNewToken').addEventListener('click', function(){
  409. panel.getNewToken();
  410. });
  411. })
  412. .catch(function (error) {
  413. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  414. console.log(error);
  415. });
  416. };
  417. panel.getNewToken = function(){
  418. axios.post('/api/tokens/change')
  419. .then(function (response) {
  420. if(response.data.success === false){
  421. if(response.data.description === 'No token provided') return panel.verifyToken(panel.token);
  422. else return swal("An error ocurred", response.data.description, "error");
  423. }
  424. swal({
  425. title: "Woohoo!",
  426. text: 'Your token was changed successfully.',
  427. type: "success"
  428. }, function(){
  429. localStorage.token = response.data.token;
  430. location.reload();
  431. });
  432. })
  433. .catch(function (error) {
  434. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  435. console.log(error);
  436. });
  437. };
  438. panel.changePassword = function(){
  439. panel.page.innerHTML = '';
  440. var container = document.createElement('div');
  441. container.className = "container";
  442. container.innerHTML = `
  443. <h2 class="subtitle">Change your password</h2>
  444. <label class="label">New password:</label>
  445. <p class="control has-addons">
  446. <input id="password" class="input is-expanded" type="password" placeholder="Your new password">
  447. </p>
  448. <label class="label">Confirm password:</label>
  449. <p class="control has-addons">
  450. <input id="passwordConfirm" class="input is-expanded" type="password" placeholder="Verify your new password">
  451. <a id="sendChangePassword" class="button is-primary">Set new password</a>
  452. </p>
  453. `;
  454. panel.page.appendChild(container);
  455. document.getElementById('sendChangePassword').addEventListener('click', function(){
  456. if (document.getElementById('password').value === document.getElementById('passwordConfirm').value) {
  457. panel.sendNewPassword(document.getElementById('password').value);
  458. } else {
  459. swal({
  460. title: "Password mismatch!",
  461. text: 'Your passwords do not match, please try again.',
  462. type: "error"
  463. }, function() {
  464. panel.changePassword();
  465. });
  466. }
  467. });
  468. };
  469. panel.sendNewPassword = function(pass){
  470. axios.post('/api/password/change', {password: pass})
  471. .then(function (response) {
  472. if(response.data.success === false){
  473. if(response.data.description === 'No token provided') return panel.verifyToken(panel.token);
  474. else return swal("An error ocurred", response.data.description, "error");
  475. }
  476. swal({
  477. title: "Woohoo!",
  478. text: 'Your password was changed successfully.',
  479. type: "success"
  480. }, function(){
  481. location.reload();
  482. });
  483. })
  484. .catch(function (error) {
  485. return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error");
  486. console.log(error);
  487. });
  488. };
  489. panel.setActiveMenu = function(item){
  490. var menu = document.getElementById('menu');
  491. var items = menu.getElementsByTagName('a');
  492. for(var i = 0; i < items.length; i++)
  493. items[i].className = "";
  494. item.className = 'is-active';
  495. };
  496. window.onload = function () {
  497. panel.preparePage();
  498. };