* Updated Bulma to 0.6.2. Text will look slightly bigger in general now. I may change that in the future.

* Updated SweetAlert to 2.1.0.

* A bunch of other updates to make it compatible with the updated Bulma and SweetAlert.
This commit is contained in:
Bobby Wibowo 2018-03-19 23:51:39 +07:00
parent 288795c6e3
commit c96f5b0a33
No known key found for this signature in database
GPG Key ID: 51C3A1E1E22D26CF
13 changed files with 415 additions and 337 deletions

View File

@ -5,15 +5,14 @@
<meta charset="utf-8" />
<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
<meta name="keywords" content="upload,lolisafe,file,images,hosting,bobby,fiery">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>safe.fiery.me &#8211; A small safe worth protecting.</title>
<!-- Stylesheets and scripts -->
<link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css">
<link rel="stylesheet" type="text/css" href="libs/sweetalert/sweetalert.min.css">
<link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=V2RnA3Mwhh">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js"></script>
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=V2RnA3Mwhh"></script>
<script type="text/javascript" src="libs/axios/axios.min.js"></script>
<script type="text/javascript" src="js/album.js"></script>

View File

@ -5,16 +5,15 @@
<meta charset="utf-8" />
<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
<meta name="keywords" content="upload,lolisafe,file,images,hosting,bobby,fiery">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>safe.fiery.me &#8211; A small safe worth protecting.</title>
<!-- Stylesheets and scripts -->
<link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css">
<link rel="stylesheet" type="text/css" href="libs/sweetalert/sweetalert.min.css">
<link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=V2RnA3Mwhh">
<link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js"></script>
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=V2RnA3Mwhh"></script>
<script type="text/javascript" src="libs/axios/axios.min.js"></script>
<script type="text/javascript" src="js/auth.js"></script>
@ -64,33 +63,35 @@
<section id='login' class="hero is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column is-one-quarter is-hidden-mobile"></div>
<div class="column">
<h1 class="title">
Dashboard Access
</h1>
<h2 class="subtitle">
Login or register
</h2>
<div class="columns">
<div class="column">
<p class="control">
<input id='user' class="input" type="text" placeholder="Your username">
</p>
<p class="control">
<input id='pass' class="input" type="password" placeholder="Your password">
</p>
<p class="control has-addons is-pulled-right">
<a class="button" id='registerBtn' onclick="page.do('register')">
<span>Register</span>
</a>
<a class="button" id='loginBtn' onclick="page.do('login')">
<span>Log in</span>
</a>
</p>
<div class="field">
<div class="control">
<input id="user" class="input" type="text" onkeypress="page.onkeypress(event, this)" placeholder="Your username">
</div>
<div class="column is-hidden-mobile"></div>
<div class="column is-hidden-mobile"></div>
</div>
<div class="field">
<div class="control">
<input id="pass" class="input" type="password" onkeypress="page.onkeypress(event, this)" placeholder="Your password">
</div>
</div>
<div class="field is-grouped is-grouped-right">
<div class="control">
<a id="registerBtn" class="button" onclick="page.do('register')">Register</a>
</div>
<div class="control">
<a id="loginBtn" class="button" onclick="page.do('login')">Log in</a>
</div>
</div>
</div>
<div class="column is-one-quarter is-hidden-mobile"></div>
</div>
</div>
</div>

View File

@ -5,17 +5,16 @@
<meta charset="utf-8" />
<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
<meta name="keywords" content="upload,lolisafe,file,images,hosting,bobby,fiery">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>safe.fiery.me &#8211; A small safe worth protecting.</title>
<!-- Stylesheets and scripts -->
<link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css">
<link rel="stylesheet" type="text/css" href="libs/sweetalert/sweetalert.min.css">
<link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=V2RnA3Mwhh">
<link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/dashboard.css">
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js"></script>
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=V2RnA3Mwhh"></script>
<script type="text/javascript" src="libs/axios/axios.min.js"></script>
<script type="text/javascript" src="js/dashboard.js"></script>
@ -73,39 +72,58 @@
</section>
<section id='dashboard' class="section">
<section id="dashboard" class="section">
<div id="panel" class="container">
<h1 class="title">Dashboard</h1>
<h2 class="subtitle">A simple <strong>dashboard</strong>, to sort your uploaded stuff</h2>
<h1 class="title">
Dashboard
</h1>
<h1 class="subtitle">
A simple <strong>dashboard</strong>, to sort your uploaded stuff
</h1>
<hr>
<div class="columns">
<div class="column is-3">
<div class="column is-one-quarter">
<aside class="menu" id="menu">
<p class="menu-label">General</p>
<ul class="menu-list">
<li><a href=".">Frontpage</a></li>
<li><a id="itemUploads" onclick="panel.getUploads()">Uploads</a></li>
<li>
<a href=".">Frontpage</a>
</li>
<li>
<a id="itemUploads" onclick="panel.getUploads()">Uploads</a>
</li>
</ul>
<p class="menu-label">Albums</p>
<ul class="menu-list">
<li><a id="itemManageGallery" onclick="panel.getAlbums()">Manage your albums</a></li>
<li>
<a id="itemManageGallery" onclick="panel.getAlbums()">Manage your albums</a>
</li>
<li>
<ul id='albumsContainer'></ul>
</li>
</ul>
<p class="menu-label">Administration</p>
<ul class="menu-list">
<li><a id="itemTokens" onclick="panel.changeToken()">Change your token</a></li>
<li><a id="itemPassword" onclick="panel.changePassword()">Change your password</a></li>
<li><a id="itemLogout"onclick="panel.logout()">Logout</a></li>
<li>
<a id="itemTokens" onclick="panel.changeToken()">Change your token</a>
</li>
<li>
<a id="itemPassword" onclick="panel.changePassword()">Change your password</a>
</li>
<li>
<a id="itemLogout" onclick="panel.logout()">Logout</a>
</li>
</ul>
</aside>
</div>
<div class="column has-text-centered" id='page'>
<div class="column has-text-centered is-third-quarters" id='page'>
<img src="images/logo.png">
</div>
</div>
</div>
</section>

View File

@ -5,12 +5,12 @@
<meta charset="utf-8" />
<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
<meta name="keywords" content="upload,lolisafe,file,images,hosting,bobby,fiery">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>safe.fiery.me &#8211; A small safe worth protecting.</title>
<!-- Stylesheets and scripts -->
<link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css">
<link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=V2RnA3Mwhh">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Open Graph tags -->

View File

@ -5,15 +5,14 @@
<meta charset="utf-8" />
<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
<meta name="keywords" content="upload,lolisafe,file,images,hosting,bobby,fiery">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>safe.fiery.me &#8211; A small safe worth protecting.</title>
<!-- Stylesheets and scripts -->
<link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css">
<link rel="stylesheet" type="text/css" href="libs/sweetalert/sweetalert.min.css">
<link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=V2RnA3Mwhh">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js"></script>
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=V2RnA3Mwhh"></script>
<script type="text/javascript" src="libs/dropzone/dropzone.min.js"></script>
<script type="text/javascript" src="libs/axios/axios.min.js"></script>
<script type="text/javascript" src="js/home.js"></script>
@ -95,7 +94,7 @@
<h3 class="subtitle"><a href="auth" id="loginLinkText"></a></h3>
<h3 id="links">
<a href="https://fiery.me" class="is-danger">Home</a><span>|</span><a href="https://blog.fiery.me" class="is-danger">Blog</a><span>|</span><a id="ShareX" href="https://safe.fiery.me/sharex.txt">ShareX</a><span>|</span><a href="faq" class="is-danger">FAQ</a><span>|</span><a href="auth" class="is-danger">Dashboard</a><span>|</span><a href="https://github.com/BobbyWibowo/lolisafe" target="_blank" class="is-danger">View on GitHub</a>
<a href="https://fiery.me" class="is-danger">Home</a><span>|</span><a href="https://blog.fiery.me" class="is-danger">Blog</a><span>|</span><a id="ShareX" href="https://safe.fiery.me/sharex.txt">ShareX</a><span>|</span><a href="faq" class="is-danger">FAQ</a><span>|</span><a href="auth" class="is-danger">Dashboard</a><span>|</span><a href="https://github.com/BobbyWibowo/lolisafe" target="_blank" class="is-danger">GitHub</a>
</h3>
</div>

View File

@ -78,6 +78,7 @@ section#home div#uploads { margin-bottom: 25px; }
PANEL
------------------ */
/*
section#login input, section#login p.control a.button {
border-left: 0px;
border-top: 0px;
@ -89,7 +90,7 @@ section#login input, section#login p.control a.button {
section#login p.control a.button { margin-left: 10px; }
section#login p.control a#loginBtn { border-right: 0px; }
section#login p.control a#registerBtn { border-left: 0px; }
*/
section#auth, section#dashboard { display: none }
section#auth input { background: rgba(0, 0, 0, 0); }
@ -138,11 +139,11 @@ a:hover {
color: #3daee9;
}
section#home h3#links span {
#home #links span {
color: #898b8d;
}
section#home #b {
#home #b {
width: 200px;
height: 200px;
border-radius: 100%;
@ -155,3 +156,48 @@ hr {
.table-container {
overflow-x: auto;
}
/*
.textarea, .input {
border-width: 2px;
}
*/
#login .input {
border-top: 0;
border-right: 0;
border-left: 0;
border-radius: 0;
padding-right: calc(0.75em + 1px);
padding-left: calc(0.75em + 1px);
}
#login .control .button {
border-radius: 0;
}
.input.is-active, .input.is-focused, .input:active, .input:focus, .textarea.is-active, .textarea.is-focused, .textarea:active, .textarea:focus {
border-color: #2980b9;
}
.button.is-danger {
background-color: #da4453;
}
.button.is-danger.is-hovered, .button.is-danger:hover {
background-color: #3daee9;
}
/*
.table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
background-color: #383c41;
}
*/
.table.is-hoverable tbody tr:not(.is-selected):hover {
background-color: #4d4d4d;
}
.table td, .table th {
vertical-align: middle;
}

View File

@ -31,6 +31,12 @@ page.do = function (dest) {
})
}
page.onkeypress = function (event, element) {
event = event || window.event
if (!event) return
if (event.keyCode === 13 || event.which === 13) return this.do('login')
}
page.verify = function () {
page.token = localStorage.token
if (page.token === undefined) return

View File

@ -28,8 +28,8 @@ panel.verifyToken = function (token, reloadOnError) {
swal({
title: 'An error occurred',
text: response.data.description,
type: 'error'
}, function () {
icon: 'error'
}).then(() => {
if (reloadOnError) {
localStorage.removeItem('token')
location.location = 'auth'
@ -100,12 +100,12 @@ panel.getUploads = function (album = undefined, page = undefined) {
if (page > 0) prevPage = page - 1
panel.page.innerHTML = ''
var container = document.createElement('div')
var pagination = `<nav class="pagination is-centered">
var 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>`
</nav>
`
var listType = `
<div class="columns">
<div class="column">
@ -120,11 +120,12 @@ panel.getUploads = function (album = undefined, page = undefined) {
</span>
</a>
</div>
</div>`
</div>
`
var table, item
if (panel.filesView === 'thumbs') {
container.innerHTML = `
panel.page.innerHTML = `
${pagination}
<hr>
${listType}
@ -134,7 +135,6 @@ panel.getUploads = function (album = undefined, page = undefined) {
${pagination}
`
panel.page.appendChild(container)
table = document.getElementById('table')
for (item of response.data.files) {
@ -151,12 +151,12 @@ panel.getUploads = function (album = undefined, page = undefined) {
var albumOrUser = 'Album'
if (panel.username === 'root') { albumOrUser = 'User' }
container.innerHTML = `
panel.page.innerHTML = `
${pagination}
<hr>
${listType}
<div class="table-container">
<table class="table is-striped is-narrow is-left">
<table class="table is-narrow is-fullwidth is-hoverable">
<thead>
<tr>
<th>File</th>
@ -173,7 +173,6 @@ panel.getUploads = function (album = undefined, page = undefined) {
${pagination}
`
panel.page.appendChild(container)
table = document.getElementById('table')
for (item of response.data.files) {
@ -221,13 +220,17 @@ panel.deleteFile = function (id) {
swal({
title: 'Are you sure?',
text: 'You wont be able to recover the file!',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#ff3860',
confirmButtonText: 'Yes, delete it!',
closeOnConfirm: false
},
function () {
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
})
@ -244,8 +247,7 @@ panel.deleteFile = function (id) {
console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
})
}
)
})
}
panel.getAlbums = function () {
@ -255,20 +257,22 @@ panel.getAlbums = function () {
else return swal('An error occurred', response.data.description, 'error')
}
panel.page.innerHTML = ''
var container = document.createElement('div')
container.className = 'container'
container.innerHTML = `
panel.page.innerHTML = `
<h2 class="subtitle">Create new album</h2>
<p class="control has-addons has-addons-centered">
<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>
</p>
</div>
</div>
<h2 class="subtitle">List of albums</h2>
<table class="table is-striped is-narrow">
<div class="table-container">
<table class="table is-narrow is-fullwidth is-hoverable">
<thead>
<tr>
<th>Name</th>
@ -280,9 +284,10 @@ panel.getAlbums = function () {
</thead>
<tbody id="table">
</tbody>
</table>`
</table>
</div>
`
panel.page.appendChild(container)
var table = document.getElementById('table')
for (var item of response.data.albums) {
@ -292,7 +297,7 @@ panel.getAlbums = function () {
<th>${item.name}</th>
<th>${item.files}</th>
<td>${item.date}</td>
<td><a href="${item.identifier}" target="_blank">Album link</a></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">
@ -325,21 +330,24 @@ panel.renameAlbum = function (id) {
swal({
title: 'Rename album',
text: 'New name you want to give the album:',
type: 'input',
showCancelButton: true,
closeOnConfirm: false,
animation: 'slide-from-top',
inputPlaceholder: 'My super album'
}, function (inputValue) {
if (inputValue === false) return false
if (inputValue === '') {
swal.showInputError('You need to write something!')
return false
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: inputValue
name: value
})
.then(function (response) {
if (response.data.success === false) {
@ -349,7 +357,7 @@ panel.renameAlbum = function (id) {
return
}
swal('Success!', 'Your album was renamed to: ' + inputValue, 'success')
swal('Success!', 'Your album was renamed to: ' + value, 'success')
panel.getAlbumsSidebar()
panel.getAlbums()
})
@ -363,14 +371,18 @@ panel.renameAlbum = function (id) {
panel.deleteAlbum = function (id) {
swal({
title: 'Are you sure?',
text: "This won't delete your files, only the album!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#ff3860',
confirmButtonText: 'Yes, delete it!',
closeOnConfirm: false
},
function () {
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
})
@ -388,8 +400,7 @@ panel.deleteAlbum = function (id) {
console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
})
}
)
})
}
panel.submitAlbum = function () {
@ -459,21 +470,22 @@ panel.changeToken = function () {
else return swal('An error occurred', response.data.description, 'error')
}
panel.page.innerHTML = ''
var container = document.createElement('div')
container.className = 'container'
container.innerHTML = `
panel.page.innerHTML = `
<h2 class="subtitle">Manage your token</h2>
<div class="field">
<label class="label">Your current token:</label>
<p class="control has-addons">
<input id="token" readonly class="input is-expanded" type="text" placeholder="Your token" value="${response.data.token}">
<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>
</p>
</div>
</div>
</div>
`
panel.page.appendChild(container)
document.getElementById('getNewToken').addEventListener('click', function () {
panel.getNewToken()
})
@ -495,8 +507,8 @@ panel.getNewToken = function () {
swal({
title: 'Woohoo!',
text: 'Your token was changed successfully.',
type: 'success'
}, function () {
icon: 'success'
}).then(() => {
localStorage.token = response.data.token
location.reload()
})
@ -508,25 +520,28 @@ panel.getNewToken = function () {
}
panel.changePassword = function () {
panel.page.innerHTML = ''
var container = document.createElement('div')
container.className = 'container'
container.innerHTML = `
panel.page.innerHTML = `
<h2 class="subtitle">Change your password</h2>
<div class="field">
<label class="label">New password:</label>
<p class="control has-addons">
<input id="password" class="input is-expanded" type="password" placeholder="Your new password">
</p>
<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>
<p class="control has-addons">
<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>
</p>
</div>
</div>
</div>
`
panel.page.appendChild(container)
document.getElementById('sendChangePassword').addEventListener('click', function () {
if (document.getElementById('password').value === document.getElementById('passwordConfirm').value) {
panel.sendNewPassword(document.getElementById('password').value)
@ -534,8 +549,8 @@ panel.changePassword = function () {
swal({
title: 'Password mismatch!',
text: 'Your passwords do not match, please try again.',
type: 'error'
}, function () {
icon: 'error'
}).then(() => {
panel.changePassword()
})
}
@ -553,8 +568,8 @@ panel.sendNewPassword = function (pass) {
swal({
title: 'Woohoo!',
text: 'Your password was changed successfully.',
type: 'success'
}, function () {
icon: 'success'
}).then(() => {
location.reload()
})
})

View File

@ -45,8 +45,8 @@ upload.verifyToken = function (token, reloadOnError) {
swal({
title: 'An error occurred',
text: response.data.description,
type: 'error'
}, () => {
icon: 'error'
}).then(() => {
if (reloadOnError) {
localStorage.removeItem('token')
location.reload()

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -5,15 +5,14 @@
<meta charset="utf-8" />
<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
<meta name="keywords" content="upload,lolisafe,file,images,hosting,bobby,fiery">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ title }}</title>
<!-- Stylesheets and scripts -->
<link rel="stylesheet" type="text/css" href="../libs/bulma/bulma.min.css">
<link rel="stylesheet" type="text/css" href="../libs/sweetalert/sweetalert.min.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script type="text/javascript" src="../libs/sweetalert/sweetalert.min.js"></script>
<script type="text/javascript" src="../libs/sweetalert/sweetalert.min.js?v=V2RnA3Mwhh"></script>
<script type="text/javascript" src="../libs/axios/axios.min.js"></script>
<!-- Open Graph tags -->