mirror of
https://github.com/BobbyWibowo/lolisafe.git
synced 2024-12-13 16:06:21 +00:00
7770192ca8
* Improved list view. When a row is clicked, as long as it has a thumbnail, a modal will pop-out to show the thumbnail. * Improved image placement in thumb view. * Refactored all instances of id attribute in HTML files to use double quotes instead of single quote.
687 lines
22 KiB
JavaScript
687 lines
22 KiB
JavaScript
/* eslint-disable no-unused-expressions */
|
||
/* global swal, axios */
|
||
|
||
const panel = {
|
||
page: undefined,
|
||
username: undefined,
|
||
token: localStorage.token,
|
||
filesView: localStorage.filesView
|
||
}
|
||
|
||
panel.preparePage = () => {
|
||
if (!panel.token) {
|
||
window.location = 'auth'
|
||
}
|
||
panel.verifyToken(panel.token, true)
|
||
}
|
||
|
||
panel.verifyToken = (token, reloadOnError) => {
|
||
if (reloadOnError === undefined) {
|
||
reloadOnError = false
|
||
}
|
||
|
||
axios.post('api/tokens/verify', {
|
||
token: token
|
||
})
|
||
.then(response => {
|
||
if (response.data.success === false) {
|
||
swal({
|
||
title: 'An error occurred',
|
||
text: response.data.description,
|
||
icon: 'error'
|
||
}).then(() => {
|
||
if (reloadOnError) {
|
||
localStorage.removeItem('token')
|
||
location.location = 'auth'
|
||
}
|
||
})
|
||
return
|
||
}
|
||
|
||
axios.defaults.headers.common.token = token
|
||
localStorage.token = token
|
||
panel.token = token
|
||
panel.username = response.data.username
|
||
return panel.prepareDashboard()
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
}
|
||
|
||
panel.prepareDashboard = () => {
|
||
panel.page = document.getElementById('page')
|
||
document.getElementById('auth').style.display = 'none'
|
||
document.getElementById('dashboard').style.display = 'block'
|
||
|
||
document.getElementById('itemUploads').addEventListener('click', function () {
|
||
panel.setActiveMenu(this)
|
||
})
|
||
|
||
document.getElementById('itemManageGallery').addEventListener('click', function () {
|
||
panel.setActiveMenu(this)
|
||
})
|
||
|
||
document.getElementById('itemFileLength').addEventListener('click', function () {
|
||
panel.setActiveMenu(this)
|
||
})
|
||
|
||
document.getElementById('itemTokens').addEventListener('click', function () {
|
||
panel.setActiveMenu(this)
|
||
})
|
||
|
||
document.getElementById('itemPassword').addEventListener('click', function () {
|
||
panel.setActiveMenu(this)
|
||
})
|
||
|
||
document.getElementById('itemLogout').innerHTML = `Logout ( ${panel.username} )`
|
||
|
||
panel.getAlbumsSidebar()
|
||
}
|
||
|
||
panel.logout = () => {
|
||
localStorage.removeItem('token')
|
||
location.reload('.')
|
||
}
|
||
|
||
panel.closeModal = () => {
|
||
document.getElementById('modal').className = 'modal'
|
||
}
|
||
|
||
panel.getUploads = (album, page) => {
|
||
if (page === undefined) page = 0
|
||
|
||
let url = 'api/uploads/' + page
|
||
if (album !== undefined) { url = 'api/album/' + album + '/' + page }
|
||
|
||
axios.get(url).then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
|
||
else return swal('An error occurred', response.data.description, 'error')
|
||
}
|
||
|
||
let prevPage = 0
|
||
let nextPage = page + 1
|
||
|
||
if (response.data.files.length < 25) { nextPage = page }
|
||
|
||
if (page > 0) prevPage = page - 1
|
||
|
||
const pagination = `
|
||
<nav class="pagination is-centered">
|
||
<a class="pagination-previous" onclick="panel.getUploads(${album}, ${prevPage})">Previous</a>
|
||
<a class="pagination-next" onclick="panel.getUploads(${album}, ${nextPage})">Next page</a>
|
||
</nav>
|
||
`
|
||
const listType = `
|
||
<div class="columns">
|
||
<div class="column">
|
||
<a class="button is-small is-outlined is-danger" title="List view" onclick="panel.setFilesView('list', ${album}, ${page})">
|
||
<span class="icon is-small">
|
||
<i class="fa icon-list-bullet"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-outlined is-danger" title="Thumbs view" onclick="panel.setFilesView('thumbs', ${album}, ${page})">
|
||
<span class="icon is-small">
|
||
<i class="fa icon-th-large"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
`
|
||
|
||
if (panel.filesView === 'thumbs') {
|
||
panel.page.innerHTML = `
|
||
${pagination}
|
||
<hr>
|
||
${listType}
|
||
<div class="columns is-multiline is-mobile is-centered" id="table">
|
||
|
||
</div>
|
||
${pagination}
|
||
`
|
||
|
||
const table = document.getElementById('table')
|
||
|
||
for (const item of response.data.files) {
|
||
const div = document.createElement('div')
|
||
|
||
let displayAlbumOrUser = item.album
|
||
if (panel.username === 'root') {
|
||
displayAlbumOrUser = ''
|
||
if (item.username !== undefined) { displayAlbumOrUser = item.username }
|
||
}
|
||
|
||
div.className = 'image-container column is-narrow'
|
||
if (item.thumb !== undefined) {
|
||
div.innerHTML = `<a class="image" href="${item.file}" target="_blank"><img src="${item.thumb}"/></a>`
|
||
} else {
|
||
div.innerHTML = `<a class="image" href="${item.file}" target="_blank"><h1 class="title">.${item.file.split('.').pop()}</h1></a>`
|
||
}
|
||
div.innerHTML += `
|
||
<a class="button is-small is-danger is-outlined" title="Delete album" onclick="panel.deleteFile(${item.id}, ${album}, ${page})">
|
||
<span class="icon is-small">
|
||
<i class="fa icon-trash"></i>
|
||
</span>
|
||
</a>
|
||
<div class="name">
|
||
<p><span>${item.name}</span></p>
|
||
<p>${displayAlbumOrUser ? `<span>${displayAlbumOrUser}</span> – ` : ''}${item.size}</div>
|
||
`
|
||
table.appendChild(div)
|
||
}
|
||
} else {
|
||
let albumOrUser = 'Album'
|
||
if (panel.username === 'root') { albumOrUser = 'User' }
|
||
|
||
panel.page.innerHTML = `
|
||
${pagination}
|
||
<hr>
|
||
${listType}
|
||
<div class="table-container">
|
||
<table class="table is-narrow is-fullwidth is-hoverable">
|
||
<thead>
|
||
<tr>
|
||
<th>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 item of response.data.files) {
|
||
const tr = document.createElement('tr')
|
||
|
||
let displayAlbumOrUser = item.album
|
||
if (panel.username === 'root') {
|
||
displayAlbumOrUser = ''
|
||
if (item.username !== undefined) { displayAlbumOrUser = item.username }
|
||
}
|
||
|
||
tr.innerHTML = `
|
||
<tr>
|
||
<th><a href="${item.file}" target="_blank" onclick="event.stopPropagation()">${item.file}</a></th>
|
||
<th>${displayAlbumOrUser}</th>
|
||
<td>${item.size}</td>
|
||
<td>${item.date}</td>
|
||
<td>
|
||
<a class="button is-small is-danger is-outlined" title="Delete album" onclick="event.stopPropagation(); panel.deleteFile(${item.id}, ${album}, ${page})">
|
||
<span class="icon is-small">
|
||
<i class="fa icon-trash"></i>
|
||
</span>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
`
|
||
|
||
table.appendChild(tr)
|
||
|
||
if (item.thumb) {
|
||
tr.addEventListener('click', function (event) {
|
||
document.getElementById('modalImage').src = item.thumb
|
||
document.getElementById('modal').className += ' is-active'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
}
|
||
|
||
panel.setFilesView = (view, album, page) => {
|
||
localStorage.filesView = view
|
||
panel.filesView = view
|
||
panel.getUploads(album, page)
|
||
}
|
||
|
||
panel.deleteFile = (id, album, page) => {
|
||
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(value => {
|
||
if (!value) return
|
||
axios.post('api/upload/delete', {
|
||
id: id
|
||
})
|
||
.then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
|
||
else return swal('An error occurred', response.data.description, 'error')
|
||
}
|
||
|
||
swal('Deleted!', 'The file has been deleted.', 'success')
|
||
panel.getUploads(album, page)
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
})
|
||
}
|
||
|
||
panel.getAlbums = () => {
|
||
axios.get('api/albums').then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
|
||
else return swal('An error occurred', response.data.description, 'error')
|
||
}
|
||
|
||
panel.page.innerHTML = `
|
||
<h2 class="subtitle">Create new album</h2>
|
||
|
||
<div class="field has-addons has-addons-centered">
|
||
<div class="control is-expanded">
|
||
<input id="albumName" class="input" type="text" placeholder="Name">
|
||
</div>
|
||
<div class="control">
|
||
<a id="submitAlbum" class="button is-primary">Submit</a>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 class="subtitle">List of albums</h2>
|
||
|
||
<div class="table-container">
|
||
<table class="table is-narrow is-fullwidth is-hoverable">
|
||
<thead>
|
||
<tr>
|
||
<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 table = document.getElementById('table')
|
||
|
||
for (const item of response.data.albums) {
|
||
const tr = document.createElement('tr')
|
||
tr.innerHTML = `
|
||
<tr>
|
||
<th>${item.name}</th>
|
||
<th>${item.files}</th>
|
||
<td>${item.date}</td>
|
||
<td><a href="${item.identifier}" target="_blank">${item.identifier}</a></td>
|
||
<td>
|
||
<a class="button is-small is-primary is-outlined" title="Edit name" onclick="panel.renameAlbum(${item.id})">
|
||
<span class="icon is-small">
|
||
<i class="fa icon-pencil"></i>
|
||
</span>
|
||
</a>
|
||
<a class="button is-small is-danger is-outlined" title="Delete album" onclick="panel.deleteAlbum(${item.id})">
|
||
<span class="icon is-small">
|
||
<i class="fa icon-trash"></i>
|
||
</span>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
`
|
||
|
||
table.appendChild(tr)
|
||
}
|
||
|
||
document.getElementById('submitAlbum').addEventListener('click', function () {
|
||
panel.submitAlbum()
|
||
})
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
}
|
||
|
||
panel.renameAlbum = id => {
|
||
swal({
|
||
title: 'Rename album',
|
||
text: 'New name you want to give the album:',
|
||
icon: 'info',
|
||
content: {
|
||
element: 'input',
|
||
attributes: {
|
||
placeholder: 'My super album'
|
||
}
|
||
},
|
||
buttons: {
|
||
cancel: true,
|
||
confirm: {
|
||
closeModal: false
|
||
}
|
||
}
|
||
}).then(value => {
|
||
if (!value) return swal.close()
|
||
axios.post('api/albums/rename', {
|
||
id: id,
|
||
name: value
|
||
})
|
||
.then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
|
||
else if (response.data.description === 'Name already in use') swal.showInputError('That name is already in use!')
|
||
else swal('An error occurred', response.data.description, 'error')
|
||
return
|
||
}
|
||
|
||
swal('Success!', 'Your album was renamed to: ' + value, 'success')
|
||
panel.getAlbumsSidebar()
|
||
panel.getAlbums()
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
})
|
||
}
|
||
|
||
panel.deleteAlbum = 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
|
||
}
|
||
}
|
||
}).then(value => {
|
||
if (!value) return
|
||
axios.post('api/albums/delete', {
|
||
id: id
|
||
})
|
||
.then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
|
||
else return swal('An error occurred', response.data.description, 'error')
|
||
}
|
||
|
||
swal('Deleted!', 'Your album has been deleted.', 'success')
|
||
panel.getAlbumsSidebar()
|
||
panel.getAlbums()
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
})
|
||
}
|
||
|
||
panel.submitAlbum = () => {
|
||
axios.post('api/albums', {
|
||
name: document.getElementById('albumName').value
|
||
})
|
||
.then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
|
||
else return swal('An error occurred', response.data.description, 'error')
|
||
}
|
||
|
||
swal('Woohoo!', 'Album was added successfully', 'success')
|
||
panel.getAlbumsSidebar()
|
||
panel.getAlbums()
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
}
|
||
|
||
panel.getAlbumsSidebar = () => {
|
||
axios.get('api/albums/sidebar')
|
||
.then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.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 () {
|
||
panel.getAlbum(this)
|
||
})
|
||
|
||
li.appendChild(a)
|
||
albumsContainer.appendChild(li)
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
}
|
||
|
||
panel.getAlbum = item => {
|
||
panel.setActiveMenu(item)
|
||
panel.getUploads(item.id)
|
||
}
|
||
|
||
panel.changeFileLength = () => {
|
||
axios.get('api/filelength/config')
|
||
.then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
|
||
else return swal('An error occurred', response.data.description, 'error')
|
||
}
|
||
|
||
panel.page.innerHTML = `
|
||
<h2 class="subtitle">Preferred file name length</h2>
|
||
|
||
<div class="field">
|
||
<label class="label">Your current file name length:</label>
|
||
<div class="field has-addons">
|
||
<div class="control is-expanded">
|
||
<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>
|
||
<div class="control">
|
||
<a id="setFileLength" class="button is-primary">Set file name length</a>
|
||
</div>
|
||
</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>
|
||
`
|
||
|
||
document.getElementById('setFileLength').addEventListener('click', function () {
|
||
panel.setFileLength(document.getElementById('fileLength').value)
|
||
})
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
}
|
||
|
||
panel.setFileLength = fileLength => {
|
||
axios.post('api/filelength/change', { fileLength })
|
||
.then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
|
||
else return swal('An error occurred', response.data.description, 'error')
|
||
}
|
||
|
||
swal({
|
||
title: 'Woohoo!',
|
||
text: 'Your file length was successfully changed.',
|
||
icon: 'success'
|
||
}).then(() => {
|
||
location.reload()
|
||
})
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
}
|
||
|
||
panel.changeToken = () => {
|
||
axios.get('api/tokens')
|
||
.then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
|
||
else return swal('An error occurred', response.data.description, 'error')
|
||
}
|
||
|
||
panel.page.innerHTML = `
|
||
<h2 class="subtitle">Manage your token</h2>
|
||
|
||
<div class="field">
|
||
<label class="label">Your current token:</label>
|
||
<div class="field has-addons">
|
||
<div class="control is-expanded">
|
||
<input id="token" readonly class="input" type="text" placeholder="Your token" value="${response.data.token}">
|
||
</div>
|
||
<div class="control">
|
||
<a id="getNewToken" class="button is-primary">Request new token</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`
|
||
|
||
document.getElementById('getNewToken').addEventListener('click', function () {
|
||
panel.getNewToken()
|
||
})
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
}
|
||
|
||
panel.getNewToken = () => {
|
||
axios.post('api/tokens/change')
|
||
.then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
|
||
else return swal('An error occurred', response.data.description, 'error')
|
||
}
|
||
|
||
swal({
|
||
title: 'Woohoo!',
|
||
text: 'Your token was successfully changed.',
|
||
icon: 'success'
|
||
}).then(() => {
|
||
localStorage.token = response.data.token
|
||
location.reload()
|
||
})
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
}
|
||
|
||
panel.changePassword = () => {
|
||
panel.page.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" placeholder="Your new password">
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<label class="label">Confirm password:</label>
|
||
<div class="field has-addons">
|
||
<div class="control is-expanded">
|
||
<input id="passwordConfirm" class="input is-expanded" type="password" placeholder="Verify your new password">
|
||
</div>
|
||
<div class="control">
|
||
<a id="sendChangePassword" class="button is-primary">Set new password</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`
|
||
|
||
document.getElementById('sendChangePassword').addEventListener('click', function () {
|
||
if (document.getElementById('password').value === document.getElementById('passwordConfirm').value) {
|
||
panel.sendNewPassword(document.getElementById('password').value)
|
||
} else {
|
||
swal({
|
||
title: 'Password mismatch!',
|
||
text: 'Your passwords do not match, please try again.',
|
||
icon: 'error'
|
||
}).then(() => {
|
||
panel.changePassword()
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
panel.sendNewPassword = pass => {
|
||
axios.post('api/password/change', {password: pass})
|
||
.then(response => {
|
||
if (response.data.success === false) {
|
||
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
|
||
else return swal('An error occurred', response.data.description, 'error')
|
||
}
|
||
|
||
swal({
|
||
title: 'Woohoo!',
|
||
text: 'Your password was successfully changed.',
|
||
icon: 'success'
|
||
}).then(() => {
|
||
location.reload()
|
||
})
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
|
||
})
|
||
}
|
||
|
||
panel.setActiveMenu = item => {
|
||
const menu = document.getElementById('menu')
|
||
const items = menu.getElementsByTagName('a')
|
||
for (let i = 0; i < items.length; i++) {
|
||
items[i].className = ''
|
||
}
|
||
|
||
item.className = 'is-active'
|
||
}
|
||
|
||
window.onload = () => {
|
||
// Add 'no-touch' class to non-touch devices
|
||
if (!('ontouchstart' in document.documentElement)) {
|
||
document.documentElement.className += ' no-touch'
|
||
}
|
||
panel.preparePage()
|
||
}
|