filesafe/public/js/dashboard.js
Bobby Wibowo a36062d33c
Updated dashboard.js
Add to album prompt will no longer ask for confirmation (i.e. Are you sure?), instead it will go directly to album selection. If you don't want to continue, you can always press Cancel.

Updated version string in _globals.njk.
2018-09-26 18:57:33 +07:00

1439 lines
49 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* global swal, axios, ClipboardJS, LazyLoad */
var page = {
// #page
dom: null,
// user token
token: localStorage.token,
username: null, // from api/tokens/verify
// view config (either list or thumbs)
filesView: localStorage.filesView,
// current view (which album and which page)
currentView: { album: null, pageNum: null },
// id of selected files (shared across pages and will be synced with localStorage)
selectedFiles: [],
checkboxes: [],
lastSelected: null,
// select album dom for dialogs/modals
selectAlbumContainer: null,
// cache of files and albums data for dialogs/modals
files: {},
albums: {},
clipboardJS: null,
lazyLoad: null
}
page.preparePage = function () {
if (!page.token) {
window.location = 'auth'
return
}
page.verifyToken(page.token, true)
}
page.verifyToken = function (token, reloadOnError) {
axios.post('api/tokens/verify', { token: token })
.then(function (response) {
if (response.data.success === false) {
return swal({
title: 'An error occurred!',
text: response.data.description,
icon: 'error'
})
.then(function () {
if (!reloadOnError) { return }
localStorage.removeItem('token')
location.location = 'auth'
})
}
axios.defaults.headers.common.token = token
localStorage.token = token
page.token = token
page.username = response.data.username
page.prepareDashboard()
})
.catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}
page.prepareDashboard = function () {
page.dom = document.getElementById('page')
page.dom.addEventListener('click', page.domClick, true)
document.getElementById('auth').style.display = 'none'
document.getElementById('dashboard').style.display = 'block'
document.getElementById('itemUploads').addEventListener('click', function () {
page.setActiveMenu(this)
page.getUploads()
})
document.getElementById('itemDeleteByNames').addEventListener('click', function () {
page.setActiveMenu(this)
page.deleteByNames()
})
document.getElementById('itemManageGallery').addEventListener('click', function () {
page.setActiveMenu(this)
page.getAlbums()
})
document.getElementById('itemFileLength').addEventListener('click', function () {
page.setActiveMenu(this)
page.changeFileLength()
})
document.getElementById('itemTokens').addEventListener('click', function () {
page.setActiveMenu(this)
page.changeToken()
})
document.getElementById('itemPassword').addEventListener('click', function () {
page.setActiveMenu(this)
page.changePassword()
})
var logoutBtn = document.getElementById('itemLogout')
logoutBtn.addEventListener('click', function () {
page.logout()
})
logoutBtn.innerHTML = 'Logout ( ' + page.username + ' )'
page.getAlbumsSidebar()
page.prepareShareX()
}
page.logout = function () {
localStorage.removeItem('token')
location.reload('.')
}
page.getItemID = function (element) {
// This expects the item's parent to have the item's ID
var parent = element.parentNode
// If the element is part of a set of controls, use the container's parent instead
if (element.parentNode.classList.contains('controls')) { parent = parent.parentNode }
return parseInt(parent.dataset.id)
}
page.domClick = function (event) {
var element = event.target
if (!element) { return }
// If the clicked element is an icon, delegate event to its A parent; hacky
if (element.tagName === 'I' && element.parentNode.tagName === 'SPAN') { element = element.parentNode }
if (element.tagName === 'SPAN' && element.parentNode.tagName === 'A') { element = element.parentNode }
// Skip elements that have no action data
if (!element.dataset || !element.dataset.action) { return }
event.stopPropagation() // maybe necessary
var id = page.getItemID(element)
var action = element.dataset.action
switch (action) {
case 'page-prev':
if (page.currentView.pageNum === 0) {
return swal('Can\'t do that!', 'This is already the first page!', 'warning')
}
return page.getUploads(page.currentView.album, page.currentView.pageNum - 1, element)
case 'page-next':
return page.getUploads(page.currentView.album, page.currentView.pageNum + 1, element)
case 'view-list':
return page.setFilesView('list', element)
case 'view-thumbs':
return page.setFilesView('thumbs', element)
case 'clear-selection':
return page.clearSelection()
case 'add-selected-files-to-album':
return page.addSelectedFilesToAlbum()
case 'bulk-delete':
return page.deleteSelectedFiles()
case 'select-file':
return page.selectFile(element, event)
case 'add-to-album':
return page.addSingleFileToAlbum(id)
case 'delete-file':
return page.deleteFile(id)
case 'select-all-files':
return page.selectAllFiles(element)
case 'display-thumbnail':
return page.displayThumbnail(id)
case 'delete-file-by-names':
return page.deleteFileByNames()
case 'submit-album':
return page.submitAlbum(element)
case 'edit-album':
return page.editAlbum(id)
case 'delete-album':
return page.deleteAlbum(id)
case 'get-new-token':
return page.getNewToken(element)
}
}
page.isLoading = function (element, state) {
if (!element) { return }
if (state) { return element.classList.add('is-loading') }
element.classList.remove('is-loading')
}
page.getUploads = function (album, pageNum, element) {
if (element) { page.isLoading(element, true) }
if (pageNum === undefined) { pageNum = 0 }
var url = 'api/uploads/' + pageNum
if (album !== undefined) { url = 'api/album/' + album + '/' + pageNum }
axios.get(url)
.then(function (response) {
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
if (pageNum && (response.data.files.length === 0)) {
// Only remove loading class here, since beyond this the entire page will be replaced anyways
if (element) { page.isLoading(element, false) }
return swal('Can\'t do that!', 'There are no more files!', 'warning')
}
page.files = {}
var pagination =
'<nav class="pagination is-centered">\n' +
' <a class="button pagination-previous" data-action="page-prev">Previous</a>\n' +
' <a class="button pagination-next" data-action="page-next">Next page</a>\n' +
'</nav>'
var controls =
'<div class="columns">\n' +
' <div class="column is-hidden-mobile"></div>\n' +
' <div class="column" style="text-align: center">\n' +
' <a class="button is-small is-danger" title="List view" data-action="view-list">\n' +
' <span class="icon">\n' +
' <i class="icon-th-list"></i>\n' +
' </span>\n' +
' </a>\n' +
' <a class="button is-small is-danger" title="Thumbs view" data-action="view-thumbs">\n' +
' <span class="icon">\n' +
' <i class="icon-th-large"></i>\n' +
' </span>\n' +
' </a>\n' +
' </div>\n' +
' <div class="column" style="text-align: right">\n' +
' <a class="button is-small is-info" title="Clear selection" data-action="clear-selection">\n' +
' <span class="icon">\n' +
' <i class="icon-cancel"></i>\n' +
' </span>\n' +
' </a>\n' +
' <a class="button is-small is-warning" title="Add selected files to album" data-action="add-selected-files-to-album">\n' +
' <span class="icon">\n' +
' <i class="icon-plus"></i>\n' +
' </span>\n' +
' </a>\n' +
' <a class="button is-small is-danger" title="Bulk delete" data-action="bulk-delete">\n' +
' <span class="icon">\n' +
' <i class="icon-trash"></i>\n' +
' </span>\n' +
' <span>Bulk delete</span>\n' +
' </a>\n' +
' </div>\n' +
'</div>'
var allFilesSelected = true
var table, i, file, selected, displayAlbumOrUser
if (page.filesView === 'thumbs') {
page.dom.innerHTML =
pagination + '\n' +
'<hr>\n' +
controls + '\n' +
'<div id="table" class="columns is-multiline is-mobile is-centered">\n' +
'</div>\n' +
pagination
table = document.getElementById('table')
for (i = 0; i < response.data.files.length; i++) {
file = response.data.files[i]
selected = page.selectedFiles.includes(file.id)
if (!selected && allFilesSelected) { allFilesSelected = false }
displayAlbumOrUser = file.album
if (page.username === 'root') {
displayAlbumOrUser = ''
if (file.username !== undefined) { displayAlbumOrUser = file.username }
}
var div = document.createElement('div')
div.className = 'image-container column is-narrow'
div.dataset.id = file.id
if (file.thumb !== undefined) {
div.innerHTML = '<a class="image" href="' + file.file + '" target="_blank" rel="noopener"><img alt="' + file.name + '" data-src="' + file.thumb + '"/></a>'
} else {
div.innerHTML = '<a class="image" href="' + file.file + '" target="_blank" rel="noopener"><h1 class="title">' + (file.extname || 'N/A') + '</h1></a>'
}
div.innerHTML +=
'<input type="checkbox" class="file-checkbox" title="Select this file" data-action="select-file"' + (selected ? ' checked' : '') + '>\n' +
'<div class="controls">\n' +
' <a class="button is-small is-info clipboard-js" title="Copy link to clipboard" data-clipboard-text="' + file.file + '">\n' +
' <span class="icon">\n' +
' <i class="icon-clipboard-1"></i>\n' +
' </span>\n' +
' </a>\n' +
' <a class="button is-small is-warning" title="Add to album" data-action="add-to-album">\n' +
' <span class="icon">\n' +
' <i class="icon-plus"></i>\n' +
' </span>\n' +
' </a>\n' +
' <a class="button is-small is-danger" title="Delete file" data-action="delete-file">\n' +
' <span class="icon">\n' +
' <i class="icon-trash"></i>\n' +
' </span>\n' +
' </a>\n' +
'</div>\n' +
'<div class="details">\n' +
' <p><span class="name" title="' + file.file + '">' + file.name + '</span></p>\n' +
' <p>' + (displayAlbumOrUser ? ('<span>' + displayAlbumOrUser + '</span> ') : '') + file.size + '</p>\n' +
'</div>'
table.appendChild(div)
page.checkboxes = Array.from(table.getElementsByClassName('file-checkbox'))
page.lazyLoad.update()
}
} else {
var albumOrUser = 'Album'
if (page.username === 'root') { albumOrUser = 'User' }
page.dom.innerHTML =
pagination + '\n' +
'<hr>\n' +
controls + '\n' +
'<div class="table-container">\n' +
' <table class="table is-narrow is-fullwidth is-hoverable">\n' +
' <thead>\n' +
' <tr>\n' +
' <th><input id="selectAll" type="checkbox" title="Select all files" data-action="select-all-files"></th>\n' +
' <th style="width: 25%">File</th>\n' +
' <th>' + albumOrUser + '</th>\n' +
' <th>Size</th>\n' +
' <th>Date</th>\n' +
' <th></th>\n' +
' </tr>\n' +
' </thead>\n' +
' <tbody id="table">\n' +
' </tbody>\n' +
' </table>\n' +
'</div>\n' +
'<hr>\n' +
pagination
table = document.getElementById('table')
for (i = 0; i < response.data.files.length; i++) {
file = response.data.files[i]
selected = page.selectedFiles.includes(file.id)
if (!selected && allFilesSelected) { allFilesSelected = false }
page.files[file.id] = {
name: file.name,
thumb: file.thumb
}
displayAlbumOrUser = file.album
if (page.username === 'root') {
displayAlbumOrUser = ''
if (file.username !== undefined) { displayAlbumOrUser = file.username }
}
var tr = document.createElement('tr')
tr.dataset.id = file.id
tr.innerHTML =
'<th class="controls"><input type="checkbox" class="file-checkbox" title="Select this file" data-action="select-file"' + (selected ? ' checked' : '') + '></th>\n' +
'<th><a href="' + file.file + '" target="_blank" rel="noopener" title="' + file.file + '">' + file.name + '</a></th>\n' +
'<th>' + displayAlbumOrUser + '</th>\n' +
'<td>' + file.size + '</td>\n' +
'<td>' + file.date + '</td>\n' +
'<td class="controls" style="text-align: right" >\n' +
' <a class="button is-small is-primary" title="View thumbnail" data-action="display-thumbnail"' + (file.thumb ? '' : ' disabled') + '>\n' +
' <span class="icon">\n' +
' <i class="icon-picture-1"></i>\n' +
' </span>\n' +
' </a>\n' +
' <a class="button is-small is-info clipboard-js" title="Copy link to clipboard" data-clipboard-text="' + file.file + '">\n' +
' <span class="icon">\n' +
' <i class="icon-clipboard-1"></i>\n' +
' </span>\n' +
' </a>\n' +
' <a class="button is-small is-warning" title="Add to album" data-action="add-to-album">\n' +
' <span class="icon">\n' +
' <i class="icon-plus"></i>\n' +
' </span>\n' +
' </a>\n' +
' <a class="button is-small is-danger" title="Delete file" data-action="delete-file">\n' +
' <span class="icon">\n' +
' <i class="icon-trash"></i>\n' +
' </span>\n' +
' </a>\n' +
'</td>'
table.appendChild(tr)
page.checkboxes = Array.from(table.getElementsByClassName('file-checkbox'))
}
}
if (allFilesSelected && response.data.files.length) {
var selectAll = document.getElementById('selectAll')
if (selectAll) { selectAll.checked = true }
}
page.currentView.album = album
page.currentView.pageNum = response.data.files.length ? pageNum : 0
})
.catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}
page.setFilesView = function (view, element) {
localStorage.filesView = view
page.filesView = view
page.getUploads(page.currentView.album, page.currentView.pageNum, element)
}
page.displayThumbnail = function (id) {
var file = page.files[id]
if (!file.thumb) { return }
return swal({
text: file.name,
content: {
element: 'img',
attributes: { src: file.thumb }
},
button: true
})
}
page.selectAllFiles = function (element) {
var table = document.getElementById('table')
var checkboxes = table.getElementsByClassName('file-checkbox')
for (var i = 0; i < checkboxes.length; i++) {
var id = page.getItemID(checkboxes[i])
if (isNaN(id)) { continue }
if (checkboxes[i].checked !== element.checked) {
checkboxes[i].checked = element.checked
if (checkboxes[i].checked) {
page.selectedFiles.push(id)
} else {
page.selectedFiles.splice(page.selectedFiles.indexOf(id), 1)
}
}
}
if (page.selectedFiles.length) {
localStorage.selectedFiles = JSON.stringify(page.selectedFiles)
} else {
localStorage.removeItem('selectedFiles')
}
element.title = element.checked ? 'Unselect all files' : 'Select all files'
}
page.selectInBetween = function (element, lastElement) {
if (!element || !lastElement) { return }
if (element === lastElement) { return }
if (!page.checkboxes || !page.checkboxes.length) { return }
var thisIndex = page.checkboxes.indexOf(element)
var lastIndex = page.checkboxes.indexOf(lastElement)
var distance = thisIndex - lastIndex
if (distance >= -1 && distance <= 1) { return }
for (var i = 0; i < page.checkboxes.length; i++) {
if ((thisIndex > lastIndex && i > lastIndex && i < thisIndex) ||
(thisIndex < lastIndex && i > thisIndex && i < lastIndex)) {
page.checkboxes[i].checked = true
page.selectedFiles.push(page.getItemID(page.checkboxes[i]))
}
}
localStorage.selectedFiles = JSON.stringify(page.selectedFiles)
}
page.selectFile = function (element, event) {
if (event.shiftKey && page.lastSelected) {
page.selectInBetween(element, page.lastSelected)
} else {
page.lastSelected = element
}
var id = page.getItemID(element)
if (isNaN(id)) { return }
if (!page.selectedFiles.includes(id) && element.checked) {
page.selectedFiles.push(id)
} else if (page.selectedFiles.includes(id) && !element.checked) {
page.selectedFiles.splice(page.selectedFiles.indexOf(id), 1)
}
if (page.selectedFiles.length) {
localStorage.selectedFiles = JSON.stringify(page.selectedFiles)
} else {
localStorage.removeItem('selectedFiles')
}
}
page.clearSelection = function () {
var count = page.selectedFiles.length
if (!count) {
return swal('An error occurred!', 'You have not selected any files.', 'error')
}
var suffix = 'file' + (count === 1 ? '' : 's')
return swal({
title: 'Are you sure?',
text: 'You are going to unselect ' + count + ' ' + suffix + '.',
buttons: true
})
.then(function (proceed) {
if (!proceed) { return }
var table = document.getElementById('table')
var checkboxes = table.getElementsByClassName('file-checkbox')
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkboxes[i].checked = false
}
}
page.selectedFiles = []
localStorage.removeItem('selectedFiles')
var selectAll = document.getElementById('selectAll')
if (selectAll) { selectAll.checked = false }
return swal('Cleared selection!', 'Unselected ' + count + ' ' + suffix + '.', 'success')
})
}
page.deleteFile = function (id) {
// TODO: Share function with bulk delete, just like 'add selected files to album' and 'add single file to album'
swal({
title: 'Are you sure?',
text: 'You won\'t be able to recover the file!',
icon: 'warning',
dangerMode: true,
buttons: {
cancel: true,
confirm: {
text: 'Yes, delete it!',
closeModal: false
}
}
})
.then(function (proceed) {
if (!proceed) { return }
axios.post('api/upload/delete', { id: id })
.then(function (response) {
if (!response) { return }
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
swal('Deleted!', 'The file has been deleted.', 'success')
page.getUploads(page.currentView.album, page.currentView.pageNum)
})
.catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
})
}
page.deleteSelectedFiles = function () {
var count = page.selectedFiles.length
if (!count) {
return swal('An error occurred!', 'You have not selected any files.', 'error')
}
var suffix = 'file' + (count === 1 ? '' : 's')
swal({
title: 'Are you sure?',
text: 'You won\'t be able to recover ' + count + ' ' + suffix + '!',
icon: 'warning',
dangerMode: true,
buttons: {
cancel: true,
confirm: {
text: 'Yes, nuke the ' + suffix + '!',
closeModal: false
}
}
})
.then(function (proceed) {
if (!proceed) { return }
axios.post('api/upload/bulkdelete', {
field: 'id',
values: page.selectedFiles
})
.then(function (bulkdelete) {
if (!bulkdelete) { return }
if (bulkdelete.data.success === false) {
if (bulkdelete.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', bulkdelete.data.description, 'error')
}
}
var deleted = count
if (bulkdelete.data.failed && bulkdelete.data.failed.length) {
deleted -= bulkdelete.data.failed.length
page.selectedFiles = page.selectedFiles.filter(function (id) {
return bulkdelete.data.failed.includes(id)
})
} else {
page.selectedFiles = []
}
localStorage.selectedFiles = JSON.stringify(page.selectedFiles)
swal('Deleted!', deleted + ' file' + (deleted === 1 ? ' has' : 's have') + ' been deleted.', 'success')
return page.getUploads(page.currentView.album, page.currentView.pageNum)
})
.catch(function (error) {
console.log(error)
swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
})
}
page.deleteByNames = function () {
page.dom.innerHTML =
'<h2 class="subtitle">Delete by names</h2>\n' +
'<div class="field">\n' +
' <label class="label">File names:</label>\n' +
' <div class="control">\n' +
' <textarea id="names" class="textarea"></textarea>\n' +
' </div>\n' +
' <p class="help">Separate each entry with a new line.</p>\n' +
'</div>\n' +
'<div class="field">\n' +
' <div class="control">\n' +
' <a class="button is-danger is-fullwidth" data-action="delete-file-by-names">\n' +
' <span class="icon">\n' +
' <i class="icon-trash"></i>\n' +
' </span>\n' +
' <span>Bulk delete</span>\n' +
' </a>\n' +
' </div>\n' +
'</div>'
}
page.deleteFileByNames = function () {
var names = document.getElementById('names').value
.split(/\r?\n/)
.filter(function (n) {
return n.trim().length
})
var count = names.length
if (!count) {
return swal('An error occurred!', 'You have not entered any file names.', 'error')
}
var suffix = 'file' + (count === 1 ? '' : 's')
swal({
title: 'Are you sure?',
text: 'You won\'t be able to recover ' + count + ' ' + suffix + '!',
icon: 'warning',
dangerMode: true,
buttons: {
cancel: true,
confirm: {
text: 'Yes, nuke the ' + suffix + '!',
closeModal: false
}
}
})
.then(function (proceed) {
if (!proceed) { return }
axios.post('api/upload/bulkdelete', {
field: 'name',
values: names
})
.then(function (bulkdelete) {
if (!bulkdelete) { return }
if (bulkdelete.data.success === false) {
if (bulkdelete.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', bulkdelete.data.description, 'error')
}
}
var deleted = count
if (bulkdelete.data.failed && bulkdelete.data.failed.length) {
deleted -= bulkdelete.data.failed.length
}
document.getElementById('names').value = bulkdelete.data.failed.join('\n')
swal('Deleted!', deleted + ' file' + (deleted === 1 ? ' has' : 's have') + ' been deleted.', 'success')
})
.catch(function (error) {
console.log(error)
swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
})
}
page.addSelectedFilesToAlbum = function () {
var count = page.selectedFiles.length
if (!count) {
return swal('An error occurred!', 'You have not selected any files.', 'error')
}
page.addFilesToAlbum(page.selectedFiles, function (failed) {
if (!failed) { return }
if (failed.length) {
page.selectedFiles = page.selectedFiles.filter(function (id) {
return failed.includes(id)
})
} else {
page.selectedFiles = []
}
localStorage.selectedFiles = JSON.stringify(page.selectedFiles)
page.getUploads(page.currentView.album, page.currentView.pageNum)
})
}
page.addSingleFileToAlbum = function (id) {
page.addFilesToAlbum([id], function (failed) {
if (!failed) { return }
page.getUploads(page.currentView.album, page.currentView.pageNum)
})
}
page.addFilesToAlbum = function (ids, callback) {
var count = ids.length
var content = document.createElement('div')
content.id = 'addFilesToAlbum'
content.innerHTML =
'<p>You are about to add <span style="font-weight: 800">' + count + '</span> file' + (count === 1 ? '' : 's') + ' to an album.</p>' +
'<div class="field">\n' +
' <label class="label">If a file is already in an album, it will be moved.</label>\n' +
' <div class="control">\n' +
' <div class="select is-fullwidth">\n' +
' <select disabled>\n' +
' <option value="-1">Remove from album</option>\n' +
' <option value="" selected disabled>Fetching albums list\u2026</option>\n' +
' </select>\n' +
' </div>\n' +
'</div>'
swal({
title: 'Add to album',
icon: 'warning',
content: content,
buttons: {
cancel: true,
confirm: {
text: 'OK',
closeModal: false
}
}
}).then(function (choose) {
if (!choose) { return }
var container = document.getElementById('addFilesToAlbum')
var select = container.getElementsByTagName('select')[0]
var albumid = parseInt(select.value)
if (isNaN(albumid)) {
return swal('An error occurred!', 'You did not choose an album.', 'error')
}
axios.post('api/albums/addfiles', {
ids: ids,
albumid: albumid
}).then(function (add) {
if (!add) { return }
if (add.data.success === false) {
if (add.data.description === 'No token provided') {
page.verifyToken(page.token)
} else {
swal('An error occurred!', add.data.description, 'error')
}
return
}
var added = ids.length
if (add.data.failed && add.data.failed.length) {
added -= add.data.failed.length
}
var suffix = 'file' + (ids.length === 1 ? '' : 's')
if (!added) {
return swal('An error occurred!', 'Could not add the ' + suffix + ' to the album.', 'error')
}
swal('Woohoo!', 'Successfully ' + (albumid < 0 ? 'removed' : 'added') + ' ' + added + ' ' + suffix + ' ' + (albumid < 0 ? 'from' : 'to') + ' the album.', 'success')
return callback(add.data.failed)
}).catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}).catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
// Get albums list then update content of swal
axios.get('api/albums').then(function (list) {
if (list.data.success === false) {
if (list.data.description === 'No token provided') {
page.verifyToken(page.token)
} else {
swal('An error occurred!', list.data.description, 'error')
}
return
}
// If the prompt was replaced, the container would be missing
var container = document.getElementById('addFilesToAlbum')
if (!container) { return }
var select = container.getElementsByTagName('select')[0]
select.innerHTML += list.data.albums
.map(function (album) {
return '<option value="' + album.id + '">' + album.name + '</option>'
})
.join('\n')
select.getElementsByTagName('option')[1].innerHTML = 'Choose an album'
select.removeAttribute('disabled')
}).catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}
page.getAlbums = function () {
axios.get('api/albums')
.then(function (response) {
if (!response) { return }
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
page.albums = {}
page.dom.innerHTML =
'<h2 class="subtitle">Create new album</h2>\n' +
'<div class="field">\n' +
' <div class="control">\n' +
' <input id="albumName" class="input" type="text" placeholder="Name">\n' +
' </div>\n' +
'</div>\n' +
'<div class="field">\n' +
' <div class="control">\n' +
' <a id="submitAlbum" class="button is-breeze is-fullwidth" data-action="submit-album">\n' +
' <span class="icon">\n' +
' <i class="icon-paper-plane-empty"></i>\n' +
' </span>\n' +
' <span>Create</span>\n' +
' </a>\n' +
' </div>\n' +
'</div>\n' +
'<hr>\n' +
'<h2 class="subtitle">List of albums</h2>\n' +
'<div class="table-container">\n' +
' <table class="table is-fullwidth is-hoverable">\n' +
' <thead>\n' +
' <tr>\n' +
' <th>ID</th>\n' +
' <th>Name</th>\n' +
' <th>Files</th>\n' +
' <th>Created at</th>\n' +
' <th>Public link</th>\n' +
' <th></th>\n' +
' </tr>\n' +
' </thead>\n' +
' <tbody id="table">\n' +
' </tbody>\n' +
' </table>\n' +
'</div>'
var homeDomain = response.data.homeDomain
var table = document.getElementById('table')
for (var i = 0; i < response.data.albums.length; i++) {
var album = response.data.albums[i]
var albumUrl = homeDomain + '/a/' + album.identifier
page.albums[album.id] = {
name: album.name,
download: album.download,
public: album.public
}
var tr = document.createElement('tr')
tr.innerHTML =
'<tr>\n' +
' <th>' + album.id + '</th>\n' +
' <th>' + album.name + '</th>\n' +
' <th>' + album.files + '</th>\n' +
' <td>' + album.date + '</td>\n' +
' <td><a' + (album.public ? (' href="' + albumUrl + '"') : '') + ' target="_blank" rel="noopener">' + albumUrl + '</a></td>\n' +
' <td style="text-align: right" data-id="' + album.id + '">\n' +
' <a class="button is-small is-primary" title="Edit album" data-action="edit-album">\n' +
' <span class="icon is-small">\n' +
' <i class="icon-pencil-1"></i>\n' +
' </span>\n' +
' </a>\n' +
' <a class="button is-small is-info clipboard-js" title="Copy link to clipboard" ' + (album.public ? ('data-clipboard-text="' + albumUrl + '"') : 'disabled') + '>\n' +
' <span class="icon is-small">\n' +
' <i class="icon-clipboard-1"></i>\n' +
' </span>\n' +
' </a>\n' +
' <a class="button is-small is-warning" title="Download album" ' + (album.download ? ('href="api/album/zip/' + album.identifier + '?v=' + album.editedAt + '"') : 'disabled') + '>\n' +
' <span class="icon is-small">\n' +
' <i class="icon-download"></i>\n' +
' </span>\n' +
' </a>\n' +
' <a class="button is-small is-danger" title="Delete album" data-action="delete-album">\n' +
' <span class="icon is-small">\n' +
' <i class="icon-trash"></i>\n' +
' </span>\n' +
' </a>\n' +
' </td>\n' +
'</tr>'
table.appendChild(tr)
}
})
.catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}
page.editAlbum = function (id) {
var album = page.albums[id]
if (!album) { return }
var div = document.createElement('div')
div.innerHTML =
'<div class="field">\n' +
' <label class="label">Album name</label>\n' +
' <div class="controls">\n' +
' <input id="_name" class="input" type="text" value="' + (album.name || '') + '">\n' +
' </div>\n' +
'</div>\n' +
'<div class="field">\n' +
' <div class="control">\n' +
' <label class="checkbox">\n' +
' <input id="_download" type="checkbox" ' + (album.download ? 'checked' : '') + '>\n' +
' Enable download\n' +
' </label>\n' +
' </div>\n' +
'</div>\n' +
'<div class="field">\n' +
' <div class="control">\n' +
' <label class="checkbox">\n' +
' <input id="_public" type="checkbox" ' + (album.public ? 'checked' : '') + '>\n' +
' Enable public link\n' +
' </label>\n' +
' </div>\n' +
'</div>\n' +
'<div class="field">\n' +
' <div class="control">\n' +
' <label class="checkbox">\n' +
' <input id="_requestLink" type="checkbox">\n' +
' Request new public link\n' +
' </label>\n' +
' </div>\n' +
'</div>'
swal({
title: 'Edit album',
icon: 'info',
content: div,
buttons: {
cancel: true,
confirm: {
closeModal: false
}
}
})
.then(function (value) {
if (!value) { return }
axios.post('api/albums/edit', {
id: id,
name: document.getElementById('_name').value,
download: document.getElementById('_download').checked,
public: document.getElementById('_public').checked,
requestLink: document.getElementById('_requestLink').checked
})
.then(function (response) {
if (!response) { return }
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
if (response.data.identifier) {
swal('Success!', 'Your album\'s new identifier is: ' + response.data.identifier + '.', 'success')
} else if (response.data.name !== album.name) {
swal('Success!', 'Your album was renamed to: ' + response.data.name + '.', 'success')
} else {
swal('Success!', 'Your album was edited!', 'success')
}
page.getAlbumsSidebar()
page.getAlbums()
})
.catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
})
}
page.deleteAlbum = function (id) {
swal({
title: 'Are you sure?',
text: 'This won\'t delete your files, only the album!',
icon: 'warning',
dangerMode: true,
buttons: {
cancel: true,
confirm: {
text: 'Yes, delete it!',
closeModal: false
},
purge: {
text: 'Umm, delete the files too please?',
value: 'purge',
className: 'swal-button--danger',
closeModal: false
}
}
})
.then(function (proceed) {
if (!proceed) { return }
console.log(proceed, proceed === 'purge')
axios.post('api/albums/delete', {
id: id,
purge: proceed === 'purge'
})
.then(function (response) {
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
swal('Deleted!', 'Your album has been deleted.', 'success')
page.getAlbumsSidebar()
page.getAlbums()
})
.catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
})
}
page.submitAlbum = function (element) {
page.isLoading(element, true)
axios.post('api/albums', {
name: document.getElementById('albumName').value
})
.then(function (response) {
if (!response) { return }
page.isLoading(element, false)
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
swal('Woohoo!', 'Album was created successfully', 'success')
page.getAlbumsSidebar()
page.getAlbums()
})
.catch(function (error) {
console.log(error)
page.isLoading(element, false)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}
page.getAlbumsSidebar = function () {
axios.get('api/albums/sidebar')
.then(function (response) {
if (!response) { return }
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
var albumsContainer = document.getElementById('albumsContainer')
albumsContainer.innerHTML = ''
if (response.data.albums === undefined) { return }
for (var i = 0; i < response.data.albums.length; i++) {
var album = response.data.albums[i]
var li = document.createElement('li')
var a = document.createElement('a')
a.id = album.id
a.innerHTML = album.name
a.addEventListener('click', function () {
page.getAlbum(this)
})
li.appendChild(a)
albumsContainer.appendChild(li)
}
})
.catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}
page.getAlbum = function (album) {
page.setActiveMenu(album)
page.getUploads(album.id)
}
page.changeFileLength = function () {
axios.get('api/filelength/config')
.then(function (response) {
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
page.dom.innerHTML =
'<h2 class="subtitle">File name length</h2>\n' +
'<div class="field">\n' +
' <div class="field">\n' +
' <label class="label">Your current file name length:</label>\n' +
' <div class="control">\n' +
' <input id="fileLength" class="input" type="text" placeholder="Your file length" value="' + (response.data.fileLength ? Math.min(Math.max(response.data.fileLength, response.data.config.min), response.data.config.max) : response.data.config.default) + '">\n' +
' </div>\n' +
' <p class="help">Default file name length is <b>' + response.data.config.default + '</b> characters. ' + (response.data.config.userChangeable ? ('Range allowed for user is <b>' + response.data.config.min + '</b> to <b>' + response.data.config.max + '</b> characters.') : 'Changing file name length is disabled at the moment.') + '</p>\n' +
' </div>\n' +
' <div class="field">\n' +
' <div class="control">\n' +
' <a id="setFileLength" class="button is-breeze is-fullwidth">\n' +
' <span class="icon">\n' +
' <i class="icon-paper-plane-empty"></i>\n' +
' </span>\n' +
' <span>Set file name length</span>\n' +
' </a>\n' +
' </div>\n' +
' <div>\n' +
'</div>'
document.getElementById('setFileLength').addEventListener('click', function () {
page.setFileLength(document.getElementById('fileLength').value, this)
})
})
.catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}
page.setFileLength = function (fileLength, element) {
page.isLoading(element, true)
axios.post('api/filelength/change', { fileLength: fileLength })
.then(function (response) {
page.isLoading(element, false)
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
swal({
title: 'Woohoo!',
text: 'Your file length was successfully changed.',
icon: 'success'
})
.then(function () {
page.changeFileLength()
})
})
.catch(function (error) {
console.log(error)
page.isLoading(element, false)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}
page.changeToken = function () {
axios.get('api/tokens')
.then(function (response) {
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
page.dom.innerHTML =
'<h2 class="subtitle">Manage your token</h2>\n' +
'<div class="field">\n' +
' <label class="label">Your current token:</label>\n' +
' <div class="field">\n' +
' <div class="control">\n' +
' <input id="token" readonly class="input" type="text" placeholder="Your token" value="' + response.data.token + '">\n' +
' </div>\n' +
' </div>\n' +
'</div>\n' +
'<div class="field">\n' +
' <div class="control">\n' +
' <a id="getNewToken" class="button is-breeze is-fullwidth" data-action="get-new-token">\n' +
' <span class="icon">\n' +
' <i class="icon-arrows-cw"></i>\n' +
' </span>\n' +
' <span>Request new token</span>\n' +
' </a>\n' +
' </div>\n' +
'</div>'
})
.catch(function (error) {
console.log(error)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}
page.getNewToken = function (element) {
page.isLoading(element, true)
axios.post('api/tokens/change')
.then(function (response) {
page.isLoading(element, false)
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
swal({
title: 'Woohoo!',
text: 'Your token was successfully changed.',
icon: 'success'
})
.then(function () {
axios.defaults.headers.common.token = response.data.token
localStorage.token = response.data.token
page.token = response.data.token
page.changeToken()
})
})
.catch(function (error) {
console.log(error)
page.isLoading(element, false)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}
page.changePassword = function () {
page.dom.innerHTML =
'<h2 class="subtitle">Change your password</h2>\n' +
'<div class="field">\n' +
' <label class="label">New password:</label>\n' +
' <div class="control">\n' +
' <input id="password" class="input" type="password">\n' +
' </div>\n' +
'</div>\n' +
'<div class="field">\n' +
' <label class="label">Re-type new password:</label>\n' +
' <div class="control">\n' +
' <input id="passwordConfirm" class="input" type="password">\n' +
' </div>\n' +
'</div>\n' +
'<div class="field">\n' +
' <div class="control">\n' +
' <a id="sendChangePassword" class="button is-breeze is-fullwidth">\n' +
' <span class="icon">\n' +
' <i class="icon-paper-plane-empty"></i>\n' +
' </span>\n' +
' <span>Set new password</span>\n' +
' </a>\n' +
' </div>\n' +
'</div>'
document.getElementById('sendChangePassword').addEventListener('click', function () {
if (document.getElementById('password').value === document.getElementById('passwordConfirm').value) {
page.sendNewPassword(document.getElementById('password').value, this)
} else {
swal({
title: 'Password mismatch!',
text: 'Your passwords do not match, please try again.',
icon: 'error'
})
}
})
}
page.sendNewPassword = function (pass, element) {
page.isLoading(element, true)
axios.post('api/password/change', { password: pass })
.then(function (response) {
page.isLoading(element, false)
if (response.data.success === false) {
if (response.data.description === 'No token provided') {
return page.verifyToken(page.token)
} else {
return swal('An error occurred!', response.data.description, 'error')
}
}
swal({
title: 'Woohoo!',
text: 'Your password was successfully changed.',
icon: 'success'
})
.then(function () {
page.changePassword()
})
})
.catch(function (error) {
console.log(error)
page.isLoading(element, false)
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
})
}
page.setActiveMenu = function (activeItem) {
var menu = document.getElementById('menu')
var items = menu.getElementsByTagName('a')
for (var i = 0; i < items.length; i++) {
items[i].classList.remove('is-active')
}
activeItem.classList.add('is-active')
}
page.prepareShareX = function () {
if (page.token) {
// TODO: "location.origin" is unsuitable if the safe is hosted in a subdir (e.i. http://example.com/safe)
var sharexElement = document.getElementById('ShareX')
var sharexFile =
'{\r\n' +
' "Name": "' + location.hostname + '",\r\n' +
' "DestinationType": "ImageUploader, FileUploader",\r\n' +
' "RequestType": "POST",\r\n' +
' "RequestURL": "' + location.origin + '/api/upload",\r\n' +
' "FileFormName": "files[]",\r\n' +
' "Headers": {\r\n' +
' "token": "' + page.token + '"\r\n' +
' },\r\n' +
' "ResponseType": "Text",\r\n' +
' "URL": "$json:files[0].url$",\r\n' +
' "ThumbnailURL": "$json:files[0].url$"\r\n' +
'}'
var sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' })
sharexElement.setAttribute('href', URL.createObjectURL(sharexBlob))
sharexElement.setAttribute('download', location.hostname + '.sxcu')
}
}
window.onload = function () {
// Add 'no-touch' class to non-touch devices
if (!('ontouchstart' in document.documentElement)) {
document.documentElement.classList.add('no-touch')
}
var selectedFiles = localStorage.selectedFiles
if (selectedFiles) {
page.selectedFiles = JSON.parse(selectedFiles)
}
page.preparePage()
page.clipboardJS = new ClipboardJS('.clipboard-js')
page.clipboardJS.on('success', function () {
return swal('Copied!', 'The link has been copied to clipboard.', 'success')
})
page.clipboardJS.on('error', function (event) {
console.error(event)
return swal('An error occurred!', 'There was an error when trying to copy the link to clipboard, please check the console for more information.', 'error')
})
page.lazyLoad = new LazyLoad()
}