mirror of
https://github.com/BobbyWibowo/lolisafe.git
synced 2024-12-14 16:36:21 +00:00
9e069f5a9a
* Added "create new album" button at homepage uploader. Due to this, albums list will always be shown even when you don't have any albums (and of course the list will be empty). Preview: https://i.fiery.me/ITQ5.mp4 (ignore the fact that the prompt says "Edit album", it's been fixed before this commit goes live) * Refactored various bits of the codes to use async/await instead of Promise.then. This will obviously cause the browser's requirement to raise but hell, it's the modern browsers age. * Various other code improvements.
1317 lines
39 KiB
JavaScript
1317 lines
39 KiB
JavaScript
/* global swal, axios, ClipboardJS, LazyLoad */
|
||
|
||
const 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: new Map(),
|
||
albums: new Map(),
|
||
|
||
clipboardJS: null,
|
||
lazyLoad: null
|
||
}
|
||
|
||
page.preparePage = () => {
|
||
if (!page.token) {
|
||
window.location = 'auth'
|
||
return
|
||
}
|
||
page.verifyToken(page.token, true)
|
||
}
|
||
|
||
page.verifyToken = async (token, reloadOnError = false) => {
|
||
const response = await axios.post('api/tokens/verify', { token })
|
||
.catch(error => {
|
||
console.log(error)
|
||
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
if (!response) { return }
|
||
|
||
if (response.data.success === false) {
|
||
await swal({
|
||
title: 'An error occurred!',
|
||
text: response.data.description,
|
||
icon: 'error'
|
||
})
|
||
if (reloadOnError) {
|
||
localStorage.removeItem('token')
|
||
location.location = 'auth'
|
||
}
|
||
return
|
||
}
|
||
|
||
axios.defaults.headers.common.token = token
|
||
localStorage.token = token
|
||
page.token = token
|
||
page.username = response.data.username
|
||
page.prepareDashboard()
|
||
}
|
||
|
||
page.prepareDashboard = () => {
|
||
page.dom = document.getElementById('page')
|
||
document.getElementById('auth').style.display = 'none'
|
||
document.getElementById('dashboard').style.display = 'block'
|
||
|
||
document.getElementById('itemUploads').addEventListener('click', function () {
|
||
page.setActiveMenu(this)
|
||
})
|
||
|
||
document.getElementById('itemDeleteByNames').addEventListener('click', function () {
|
||
page.setActiveMenu(this)
|
||
})
|
||
|
||
document.getElementById('itemManageGallery').addEventListener('click', function () {
|
||
page.setActiveMenu(this)
|
||
})
|
||
|
||
document.getElementById('itemFileLength').addEventListener('click', function () {
|
||
page.setActiveMenu(this)
|
||
})
|
||
|
||
document.getElementById('itemTokens').addEventListener('click', function () {
|
||
page.setActiveMenu(this)
|
||
})
|
||
|
||
document.getElementById('itemPassword').addEventListener('click', function () {
|
||
page.setActiveMenu(this)
|
||
})
|
||
|
||
document.getElementById('itemLogout').innerHTML = `Logout ( ${page.username} )`
|
||
|
||
page.getAlbumsSidebar()
|
||
}
|
||
|
||
page.logout = () => {
|
||
localStorage.removeItem('token')
|
||
location.reload('.')
|
||
}
|
||
|
||
page.isLoading = (element, state) => {
|
||
if (!element) { return }
|
||
if (state) { return element.classList.add('is-loading') }
|
||
element.classList.remove('is-loading')
|
||
}
|
||
|
||
page.getUploads = async (album, pageNum, element) => {
|
||
if (element) { page.isLoading(element, true) }
|
||
if (pageNum === undefined) { pageNum = 0 }
|
||
|
||
let url = 'api/uploads/' + pageNum
|
||
if (album !== undefined) { url = 'api/album/' + album + '/' + pageNum }
|
||
|
||
const response = await axios.get(url)
|
||
.catch(error => {
|
||
console.log(error)
|
||
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
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.files.clear()
|
||
|
||
let prevPage = 0
|
||
let nextPage = pageNum + 1
|
||
|
||
if (response.data.files.length < 25) { nextPage = pageNum }
|
||
|
||
if (pageNum > 0) { prevPage = pageNum - 1 }
|
||
|
||
const pagination = `
|
||
<nav class="pagination is-centered">
|
||
<a class="button pagination-previous" onclick="page.getUploads(${album}, ${prevPage}, this)">Previous</a>
|
||
<a class="button pagination-next" onclick="page.getUploads(${album}, ${nextPage}, this)">Next page</a>
|
||
</nav>
|
||
`
|
||
const controls = `
|
||
<div class="columns">
|
||
<div class="column is-hidden-mobile"></div>
|
||
<div class="column" style="text-align: center">
|
||
<a class="button is-small is-danger" title="List view" onclick="page.setFilesView('list', this)">
|
||
<span class="icon">
|
||
<i class="icon-th-list"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-danger" title="Thumbs view" onclick="page.setFilesView('thumbs', this)">
|
||
<span class="icon">
|
||
<i class="icon-th-large"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<div class="column" style="text-align: right">
|
||
<a class="button is-small is-info" title="Clear selection" onclick="page.clearSelection()">
|
||
<span class="icon">
|
||
<i class="icon-cancel"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-warning" title="Add selected files to album" onclick="page.addSelectedFilesToAlbum()">
|
||
<span class="icon">
|
||
<i class="icon-plus"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-danger" title="Bulk delete" onclick="page.deleteSelectedFiles()">
|
||
<span class="icon">
|
||
<i class="icon-trash"></i>
|
||
</span>
|
||
<span>Bulk delete</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
`
|
||
|
||
let allFilesSelected = true
|
||
if (page.filesView === 'thumbs') {
|
||
page.dom.innerHTML = `
|
||
${pagination}
|
||
<hr>
|
||
${controls}
|
||
<div id="table" class="columns is-multiline is-mobile is-centered">
|
||
|
||
</div>
|
||
${pagination}
|
||
`
|
||
|
||
const table = document.getElementById('table')
|
||
|
||
for (const file of response.data.files) {
|
||
const selected = page.selectedFiles.includes(file.id)
|
||
if (!selected && allFilesSelected) { allFilesSelected = false }
|
||
|
||
const div = document.createElement('div')
|
||
|
||
let displayAlbumOrUser = file.album
|
||
if (page.username === 'root') {
|
||
displayAlbumOrUser = ''
|
||
if (file.username !== undefined) { displayAlbumOrUser = file.username }
|
||
}
|
||
|
||
div.className = 'image-container column is-narrow'
|
||
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-id="${file.id}" onclick="page.selectFile(this, event)"${selected ? ' checked' : ''}>
|
||
<div class="controls">
|
||
<a class="button is-small is-info clipboard-js" title="Copy link to clipboard" data-clipboard-text="${file.file}">
|
||
<span class="icon">
|
||
<i class="icon-clipboard-1"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-warning" title="Add to album" onclick="page.addSingleFileToAlbum(${file.id})">
|
||
<span class="icon">
|
||
<i class="icon-plus"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-danger" title="Delete file" onclick="page.deleteFile(${file.id})">
|
||
<span class="icon">
|
||
<i class="icon-trash"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<div class="details">
|
||
<p><span class="name" title="${file.file}">${file.name}</span></p>
|
||
<p>${displayAlbumOrUser ? `<span>${displayAlbumOrUser}</span> – ` : ''}${file.size}</p>
|
||
</div>
|
||
`
|
||
table.appendChild(div)
|
||
page.checkboxes = Array.from(table.getElementsByClassName('file-checkbox'))
|
||
page.lazyLoad.update()
|
||
}
|
||
} else {
|
||
let albumOrUser = 'Album'
|
||
if (page.username === 'root') { albumOrUser = 'User' }
|
||
|
||
page.dom.innerHTML = `
|
||
${pagination}
|
||
<hr>
|
||
${controls}
|
||
<div class="table-container">
|
||
<table class="table is-narrow is-fullwidth is-hoverable">
|
||
<thead>
|
||
<tr>
|
||
<th><input id="selectAll" type="checkbox" title="Select all files" onclick="page.selectAllFiles(this)"></th>
|
||
<th style="width: 25%">File</th>
|
||
<th>${albumOrUser}</th>
|
||
<th>Size</th>
|
||
<th>Date</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="table">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<hr>
|
||
${pagination}
|
||
`
|
||
|
||
const table = document.getElementById('table')
|
||
|
||
for (const file of response.data.files) {
|
||
const selected = page.selectedFiles.includes(file.id)
|
||
if (!selected && allFilesSelected) { allFilesSelected = false }
|
||
|
||
page.files.set(file.id, {
|
||
name: file.name,
|
||
thumb: file.thumb
|
||
})
|
||
|
||
const tr = document.createElement('tr')
|
||
|
||
let displayAlbumOrUser = file.album
|
||
if (page.username === 'root') {
|
||
displayAlbumOrUser = ''
|
||
if (file.username !== undefined) { displayAlbumOrUser = file.username }
|
||
}
|
||
|
||
tr.innerHTML = `
|
||
<tr>
|
||
<th><input type="checkbox" class="file-checkbox" title="Select this file" data-id="${file.id}" onclick="page.selectFile(this, event)"${selected ? ' checked' : ''}></th>
|
||
<th><a href="${file.file}" target="_blank" rel="noopener" title="${file.file}">${file.name}</a></th>
|
||
<th>${displayAlbumOrUser}</th>
|
||
<td>${file.size}</td>
|
||
<td>${file.date}</td>
|
||
<td style="text-align: right">
|
||
<a class="button is-small is-primary" title="View thumbnail" onclick="page.displayThumbnail(${file.id})"${file.thumb ? '' : ' disabled'}>
|
||
<span class="icon">
|
||
<i class="icon-picture-1"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-info clipboard-js" title="Copy link to clipboard" data-clipboard-text="${file.file}">
|
||
<span class="icon">
|
||
<i class="icon-clipboard-1"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-warning" title="Add to album" onclick="page.addSingleFileToAlbum(${file.id})">
|
||
<span class="icon">
|
||
<i class="icon-plus"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-danger" title="Delete file" onclick="page.deleteFile(${file.id})">
|
||
<span class="icon">
|
||
<i class="icon-trash"></i>
|
||
</span>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
`
|
||
|
||
table.appendChild(tr)
|
||
page.checkboxes = Array.from(table.getElementsByClassName('file-checkbox'))
|
||
}
|
||
}
|
||
|
||
if (allFilesSelected && response.data.files.length) {
|
||
const selectAll = document.getElementById('selectAll')
|
||
if (selectAll) { selectAll.checked = true }
|
||
}
|
||
|
||
page.currentView.album = album
|
||
page.currentView.pageNum = pageNum
|
||
}
|
||
|
||
page.setFilesView = (view, element) => {
|
||
localStorage.filesView = view
|
||
page.filesView = view
|
||
page.getUploads(page.currentView.album, page.currentView.pageNum, element)
|
||
}
|
||
|
||
page.displayThumbnail = id => {
|
||
const file = page.files.get(id)
|
||
if (!file.thumb) { return }
|
||
swal({
|
||
text: file.name,
|
||
content: {
|
||
element: 'img',
|
||
attributes: { src: file.thumb }
|
||
},
|
||
button: true
|
||
})
|
||
}
|
||
|
||
page.selectAllFiles = element => {
|
||
const table = document.getElementById('table')
|
||
const checkboxes = table.getElementsByClassName('file-checkbox')
|
||
|
||
for (const checkbox of checkboxes) {
|
||
const id = parseInt(checkbox.dataset.id)
|
||
if (isNaN(id)) { continue }
|
||
if (checkbox.checked !== element.checked) {
|
||
checkbox.checked = element.checked
|
||
if (checkbox.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 = (element, lastElement) => {
|
||
if (!element || !lastElement) { return }
|
||
if (element === lastElement) { return }
|
||
if (!page.checkboxes || !page.checkboxes.length) { return }
|
||
|
||
const thisIndex = page.checkboxes.indexOf(element)
|
||
const lastIndex = page.checkboxes.indexOf(lastElement)
|
||
|
||
const distance = thisIndex - lastIndex
|
||
if (distance >= -1 && distance <= 1) { return }
|
||
|
||
for (let 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(parseInt(page.checkboxes[i].dataset.id))
|
||
}
|
||
}
|
||
|
||
localStorage.selectedFiles = JSON.stringify(page.selectedFiles)
|
||
}
|
||
|
||
page.selectFile = (element, event) => {
|
||
if (event.shiftKey && page.lastSelected) {
|
||
page.selectInBetween(element, page.lastSelected)
|
||
} else {
|
||
page.lastSelected = element
|
||
}
|
||
|
||
const id = parseInt(element.dataset.id)
|
||
|
||
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 = async () => {
|
||
const count = page.selectedFiles.length
|
||
if (!count) {
|
||
return swal('An error occurred!', 'You have not selected any files.', 'error')
|
||
}
|
||
|
||
const suffix = `file${count === 1 ? '' : 's'}`
|
||
const proceed = await swal({
|
||
title: 'Are you sure?',
|
||
text: `You are going to unselect ${count} ${suffix}.`,
|
||
buttons: true
|
||
})
|
||
if (!proceed) { return }
|
||
|
||
const table = document.getElementById('table')
|
||
const checkboxes = table.getElementsByClassName('file-checkbox')
|
||
|
||
for (const checkbox of checkboxes) {
|
||
if (checkbox.checked) {
|
||
checkbox.checked = false
|
||
}
|
||
}
|
||
|
||
page.selectedFiles = []
|
||
localStorage.removeItem('selectedFiles')
|
||
|
||
const selectAll = document.getElementById('selectAll')
|
||
if (selectAll) { selectAll.checked = false }
|
||
|
||
return swal('Cleared selection!', `Unselected ${count} ${suffix}.`, 'success')
|
||
}
|
||
|
||
page.deleteFile = async id => {
|
||
// TODO: Share function with bulk delete, just like 'add selected files to album' and 'add single file to album'
|
||
const proceed = await 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
|
||
}
|
||
}
|
||
})
|
||
if (!proceed) { return }
|
||
|
||
const response = await axios.post('api/upload/delete', { id })
|
||
.catch(error => {
|
||
console.log(error)
|
||
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
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)
|
||
}
|
||
|
||
page.deleteSelectedFiles = async () => {
|
||
const count = page.selectedFiles.length
|
||
if (!count) {
|
||
return swal('An error occurred!', 'You have not selected any files.', 'error')
|
||
}
|
||
|
||
const suffix = `file${count === 1 ? '' : 's'}`
|
||
const proceed = await 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
|
||
}
|
||
}
|
||
})
|
||
if (!proceed) { return }
|
||
|
||
const bulkdelete = await axios.post('api/upload/bulkdelete', {
|
||
field: 'id',
|
||
values: page.selectedFiles
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
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')
|
||
}
|
||
}
|
||
|
||
let deleted = count
|
||
if (bulkdelete.data.failed && bulkdelete.data.failed.length) {
|
||
deleted -= bulkdelete.data.failed.length
|
||
page.selectedFiles = page.selectedFiles.filter(id => 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)
|
||
}
|
||
|
||
page.deleteByNames = () => {
|
||
page.dom.innerHTML = `
|
||
<h2 class="subtitle">Delete by names</h2>
|
||
|
||
<div class="field">
|
||
<label class="label">File names:</label>
|
||
<div class="control">
|
||
<textarea id="names" class="textarea"></textarea>
|
||
</div>
|
||
<p class="help">Separate each entry with a new line.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="control">
|
||
<a class="button is-danger is-fullwidth" onclick="page.deleteFileByNames()">
|
||
<span class="icon">
|
||
<i class="icon-trash"></i>
|
||
</span>
|
||
<span>Bulk delete</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
`
|
||
}
|
||
|
||
page.deleteFileByNames = async () => {
|
||
const names = document.getElementById('names').value.split(/\r?\n/).filter(n => n.trim().length)
|
||
const count = names.length
|
||
if (!count) {
|
||
return swal('An error occurred!', 'You have not entered any file names.', 'error')
|
||
}
|
||
|
||
const suffix = `file${count === 1 ? '' : 's'}`
|
||
const proceed = await 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
|
||
}
|
||
}
|
||
})
|
||
if (!proceed) { return }
|
||
|
||
const bulkdelete = await axios.post('api/upload/bulkdelete', {
|
||
field: 'name',
|
||
values: names
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
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')
|
||
}
|
||
}
|
||
|
||
let 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')
|
||
}
|
||
|
||
page.addSelectedFilesToAlbum = async () => {
|
||
const count = page.selectedFiles.length
|
||
if (!count) {
|
||
return swal('An error occurred!', 'You have not selected any files.', 'error')
|
||
}
|
||
|
||
const failed = await page.addFilesToAlbum(page.selectedFiles)
|
||
if (!failed) { return }
|
||
if (failed.length) {
|
||
page.selectedFiles = page.selectedFiles.filter(id => failed.includes(id))
|
||
} else {
|
||
page.selectedFiles = []
|
||
}
|
||
localStorage.selectedFiles = JSON.stringify(page.selectedFiles)
|
||
page.getUploads(page.currentView.album, page.currentView.pageNum)
|
||
}
|
||
|
||
page.addSingleFileToAlbum = async id => {
|
||
const failed = await page.addFilesToAlbum([id])
|
||
if (!failed) { return }
|
||
page.getUploads(page.currentView.album, page.currentView.pageNum)
|
||
}
|
||
|
||
page.addFilesToAlbum = async ids => {
|
||
const count = ids.length
|
||
const proceed = await swal({
|
||
title: 'Are you sure?',
|
||
text: `You are about to move ${count} file${count === 1 ? '' : 's'} to an album.`,
|
||
buttons: {
|
||
cancel: true,
|
||
confirm: {
|
||
text: 'Yes',
|
||
closeModal: false
|
||
}
|
||
}
|
||
})
|
||
if (!proceed) { return }
|
||
|
||
const list = await axios.get('api/albums')
|
||
.catch(error => {
|
||
console.log(error)
|
||
swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
if (!list) { return }
|
||
|
||
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 (!page.selectAlbumContainer) {
|
||
// We want to this to be re-usable
|
||
page.selectAlbumContainer = document.createElement('div')
|
||
page.selectAlbumContainer.id = 'selectAlbum'
|
||
}
|
||
|
||
const options = list.data.albums
|
||
.map(album => `<option value="${album.id}">${album.name}</option>`)
|
||
.join('\n')
|
||
|
||
page.selectAlbumContainer.innerHTML = `
|
||
<div class="field">
|
||
<label class="label">If a file is already in an album, it will be moved.</label>
|
||
<div class="control">
|
||
<div class="select is-fullwidth">
|
||
<select>
|
||
<option value="-1">Remove from album</option>
|
||
<option value="" selected disabled>Choose an album</option>
|
||
${options}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
`
|
||
|
||
const choose = await swal({
|
||
content: page.selectAlbumContainer,
|
||
buttons: {
|
||
cancel: true,
|
||
confirm: {
|
||
text: 'OK',
|
||
closeModal: false
|
||
}
|
||
}
|
||
})
|
||
if (!choose) { return }
|
||
|
||
const albumid = parseInt(page.selectAlbumContainer.getElementsByTagName('select')[0].value)
|
||
if (isNaN(albumid)) {
|
||
swal('An error occurred!', 'You did not choose an album.', 'error')
|
||
return
|
||
}
|
||
|
||
const add = await axios.post('api/albums/addfiles', { ids, albumid })
|
||
.catch(error => {
|
||
console.log(error)
|
||
swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
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
|
||
}
|
||
|
||
let added = ids.length
|
||
if (add.data.failed && add.data.failed.length) {
|
||
added -= add.data.failed.length
|
||
}
|
||
const suffix = `file${ids.length === 1 ? '' : 's'}`
|
||
|
||
if (!added) {
|
||
swal('An error occurred!', `Could not add the ${suffix} to the album.`, 'error')
|
||
return
|
||
}
|
||
|
||
swal('Woohoo!', `Successfully ${albumid < 0 ? 'removed' : 'added'} ${added} ${suffix} ${albumid < 0 ? 'from' : 'to'} the album.`, 'success')
|
||
return add.data.failed
|
||
}
|
||
|
||
page.getAlbums = async () => {
|
||
const response = await axios.get('api/albums')
|
||
.catch(error => {
|
||
console.log(error)
|
||
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
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.clear()
|
||
|
||
page.dom.innerHTML = `
|
||
<h2 class="subtitle">Create new album</h2>
|
||
|
||
<div class="field">
|
||
<div class="control">
|
||
<input id="albumName" class="input" type="text" placeholder="Name">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="control">
|
||
<a id="submitAlbum" class="button is-breeze is-fullwidth" onclick="page.submitAlbum(this)">
|
||
<span class="icon">
|
||
<i class="icon-paper-plane-empty"></i>
|
||
</span>
|
||
<span>Create</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<h2 class="subtitle">List of albums</h2>
|
||
|
||
<div class="table-container">
|
||
<table class="table is-fullwidth is-hoverable">
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Name</th>
|
||
<th>Files</th>
|
||
<th>Created at</th>
|
||
<th>Public link</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="table">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
`
|
||
|
||
const homeDomain = response.data.homeDomain
|
||
const table = document.getElementById('table')
|
||
|
||
for (const album of response.data.albums) {
|
||
const albumUrl = `${homeDomain}/a/${album.identifier}`
|
||
|
||
page.albums.set(album.id, {
|
||
name: album.name,
|
||
download: album.download,
|
||
public: album.public
|
||
})
|
||
|
||
const tr = document.createElement('tr')
|
||
tr.innerHTML = `
|
||
<tr>
|
||
<th>${album.id}</th>
|
||
<th>${album.name}</th>
|
||
<th>${album.files}</th>
|
||
<td>${album.date}</td>
|
||
<td><a${album.public ? ` href="${albumUrl}"` : ''} target="_blank" rel="noopener">${albumUrl}</a></td>
|
||
<td style="text-align: right">
|
||
<a class="button is-small is-primary" title="Edit album" onclick="page.editAlbum(${album.id})">
|
||
<span class="icon is-small">
|
||
<i class="icon-pencil-1"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-info clipboard-js" title="Copy link to clipboard" ${album.public ? `data-clipboard-text="${albumUrl}"` : 'disabled'}>
|
||
<span class="icon is-small">
|
||
<i class="icon-clipboard-1"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-warning" title="Download album" ${album.download ? `href="api/album/zip/${album.identifier}?v=${album.editedAt}"` : 'disabled'}>
|
||
<span class="icon is-small">
|
||
<i class="icon-download"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-danger" title="Delete album" onclick="page.deleteAlbum(${album.id})">
|
||
<span class="icon is-small">
|
||
<i class="icon-trash"></i>
|
||
</span>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
`
|
||
|
||
table.appendChild(tr)
|
||
}
|
||
}
|
||
|
||
page.editAlbum = async id => {
|
||
const album = page.albums.get(id)
|
||
if (!album) { return }
|
||
|
||
const div = document.createElement('div')
|
||
div.innerHTML = `
|
||
<div class="field">
|
||
<label class="label">Album name</label>
|
||
<div class="controls">
|
||
<input id="_name" class="input" type="text" value="${album.name || ''}">
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="control">
|
||
<label class="checkbox">
|
||
<input id="_download" type="checkbox" ${album.download ? 'checked' : ''}>
|
||
Enable download
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="control">
|
||
<label class="checkbox">
|
||
<input id="_public" type="checkbox" ${album.public ? 'checked' : ''}>
|
||
Enable public link
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<div class="control">
|
||
<label class="checkbox">
|
||
<input id="_requestLink" type="checkbox">
|
||
Request new public link
|
||
</label>
|
||
</div>
|
||
</div>
|
||
`
|
||
const value = await swal({
|
||
title: 'Edit album',
|
||
icon: 'info',
|
||
content: div,
|
||
buttons: {
|
||
cancel: true,
|
||
confirm: {
|
||
closeModal: false
|
||
}
|
||
}
|
||
})
|
||
if (!value) { return }
|
||
|
||
const response = await axios.post('api/albums/edit', {
|
||
id,
|
||
name: document.getElementById('_name').value,
|
||
download: document.getElementById('_download').checked,
|
||
public: document.getElementById('_public').checked,
|
||
requestLink: document.getElementById('_requestLink').checked
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
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()
|
||
}
|
||
|
||
page.deleteAlbum = async id => {
|
||
const proceed = await 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
|
||
}
|
||
}
|
||
})
|
||
if (!proceed) { return }
|
||
|
||
const response = await axios.post('api/albums/delete', {
|
||
id,
|
||
purge: proceed === 'purge'
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
|
||
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()
|
||
}
|
||
|
||
page.submitAlbum = async element => {
|
||
page.isLoading(element, true)
|
||
|
||
const response = await axios.post('api/albums', {
|
||
name: document.getElementById('albumName').value
|
||
})
|
||
.catch(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')
|
||
})
|
||
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()
|
||
}
|
||
|
||
page.getAlbumsSidebar = async () => {
|
||
const response = await axios.get('api/albums/sidebar')
|
||
.catch(error => {
|
||
console.log(error)
|
||
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
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')
|
||
}
|
||
}
|
||
|
||
const albumsContainer = document.getElementById('albumsContainer')
|
||
albumsContainer.innerHTML = ''
|
||
|
||
if (response.data.albums === undefined) { return }
|
||
|
||
for (const album of response.data.albums) {
|
||
const li = document.createElement('li')
|
||
const 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)
|
||
}
|
||
}
|
||
|
||
page.getAlbum = album => {
|
||
page.setActiveMenu(album)
|
||
page.getUploads(album.id)
|
||
}
|
||
|
||
page.changeFileLength = async () => {
|
||
const response = await axios.get('api/filelength/config')
|
||
.catch(error => {
|
||
console.log(error)
|
||
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
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.dom.innerHTML = `
|
||
<h2 class="subtitle">File name length</h2>
|
||
|
||
<div class="field">
|
||
<div class="field">
|
||
<label class="label">Your current file name length:</label>
|
||
<div class="control">
|
||
<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}">
|
||
</div>
|
||
<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>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="control">
|
||
<a id="setFileLength" class="button is-breeze is-fullwidth">
|
||
<span class="icon">
|
||
<i class="icon-paper-plane-empty"></i>
|
||
</span>
|
||
<span>Set file name length</span>
|
||
</a>
|
||
</div>
|
||
<div>
|
||
</div>
|
||
`
|
||
|
||
document.getElementById('setFileLength').addEventListener('click', function () {
|
||
page.setFileLength(document.getElementById('fileLength').value, this)
|
||
})
|
||
}
|
||
|
||
page.setFileLength = async (fileLength, element) => {
|
||
page.isLoading(element, true)
|
||
|
||
const response = await axios.post('api/filelength/change', { fileLength })
|
||
.catch(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')
|
||
})
|
||
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')
|
||
}
|
||
}
|
||
|
||
await swal({
|
||
title: 'Woohoo!',
|
||
text: 'Your file length was successfully changed.',
|
||
icon: 'success'
|
||
})
|
||
|
||
page.changeFileLength()
|
||
}
|
||
|
||
page.changeToken = async () => {
|
||
const response = await axios.get('api/tokens')
|
||
.catch(error => {
|
||
console.log(error)
|
||
return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
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.dom.innerHTML = `
|
||
<h2 class="subtitle">Manage your token</h2>
|
||
|
||
<div class="field">
|
||
<label class="label">Your current token:</label>
|
||
<div class="field">
|
||
<div class="control">
|
||
<input id="token" readonly class="input" type="text" placeholder="Your token" value="${response.data.token}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="control">
|
||
<a id="getNewToken" class="button is-breeze is-fullwidth" onclick="page.getNewToken(this)">
|
||
<span class="icon">
|
||
<i class="icon-arrows-cw"></i>
|
||
</span>
|
||
<span>Request new token</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
`
|
||
}
|
||
|
||
page.getNewToken = async element => {
|
||
page.isLoading(element, true)
|
||
|
||
const response = await axios.post('api/tokens/change')
|
||
.catch(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')
|
||
})
|
||
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')
|
||
}
|
||
}
|
||
|
||
await swal({
|
||
title: 'Woohoo!',
|
||
text: 'Your token was successfully changed.',
|
||
icon: 'success'
|
||
})
|
||
|
||
axios.defaults.headers.common.token = response.data.token
|
||
localStorage.token = response.data.token
|
||
page.token = response.data.token
|
||
page.changeToken()
|
||
}
|
||
|
||
page.changePassword = () => {
|
||
page.dom.innerHTML = `
|
||
<h2 class="subtitle">Change your password</h2>
|
||
|
||
<div class="field">
|
||
<label class="label">New password:</label>
|
||
<div class="control">
|
||
<input id="password" class="input" type="password">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="label">Re-type new password:</label>
|
||
<div class="control">
|
||
<input id="passwordConfirm" class="input" type="password">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="control">
|
||
<a id="sendChangePassword" class="button is-breeze is-fullwidth">
|
||
<span class="icon">
|
||
<i class="icon-paper-plane-empty"></i>
|
||
</span>
|
||
<span>Set new password</span>
|
||
</a>
|
||
</div>
|
||
</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 = async (pass, element) => {
|
||
page.isLoading(element, true)
|
||
|
||
const response = await axios.post('api/password/change', { password: pass })
|
||
.catch(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')
|
||
})
|
||
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')
|
||
}
|
||
}
|
||
|
||
await swal({
|
||
title: 'Woohoo!',
|
||
text: 'Your password was successfully changed.',
|
||
icon: 'success'
|
||
})
|
||
|
||
page.changePassword()
|
||
}
|
||
|
||
page.setActiveMenu = activeItem => {
|
||
const menu = document.getElementById('menu')
|
||
const items = menu.getElementsByTagName('a')
|
||
for (const item of items) { item.classList.remove('is-active') }
|
||
|
||
activeItem.classList.add('is-active')
|
||
}
|
||
|
||
window.onload = () => {
|
||
// Add 'no-touch' class to non-touch devices
|
||
if (!('ontouchstart' in document.documentElement)) {
|
||
document.documentElement.classList.add('no-touch')
|
||
}
|
||
|
||
const selectedFiles = localStorage.selectedFiles
|
||
if (selectedFiles) {
|
||
page.selectedFiles = JSON.parse(selectedFiles)
|
||
}
|
||
|
||
page.preparePage()
|
||
|
||
page.clipboardJS = new ClipboardJS('.clipboard-js')
|
||
|
||
page.clipboardJS.on('success', () => {
|
||
return swal('Copied!', 'The link has been copied to clipboard.', 'success')
|
||
})
|
||
|
||
page.clipboardJS.on('error', 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()
|
||
}
|