Mirror/filesafe
1
0
Fork 0
mirror of https://github.com/BobbyWibowo/lolisafe.git synced 2025-01-07 12:21:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updates

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages/album.html
View File

@ -5,15 +5,14 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="A pomf-like file uploading service that doesn't suck."> <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="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"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>safe.fiery.me &#8211; A small safe worth protecting.</title> <title>safe.fiery.me &#8211; A small safe worth protecting.</title>
<!-- Stylesheets and scripts --> <!-- 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="libs/sweetalert/sweetalert.min.css">
<link rel="stylesheet" type="text/css" href="css/style.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="libs/axios/axios.min.js"></script>
<script type="text/javascript" src="js/album.js"></script> <script type="text/javascript" src="js/album.js"></script>

59
pages/auth.html
View File

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

48
pages/dashboard.html
View File

@ -5,17 +5,16 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="A pomf-like file uploading service that doesn't suck."> <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="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"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>safe.fiery.me &#8211; A small safe worth protecting.</title> <title>safe.fiery.me &#8211; A small safe worth protecting.</title>
<!-- Stylesheets and scripts --> <!-- 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="libs/sweetalert/sweetalert.min.css">
<link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css"> <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/style.css">
<link rel="stylesheet" type="text/css" href="css/dashboard.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="libs/axios/axios.min.js"></script>
<script type="text/javascript" src="js/dashboard.js"></script> <script type="text/javascript" src="js/dashboard.js"></script>
@ -73,39 +72,58 @@
</section> </section>
<section id='dashboard' class="section"> <section id="dashboard" class="section">
<div id="panel" class="container"> <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> <hr>
<div class="columns"> <div class="columns">
<div class="column is-3"> <div class="column is-one-quarter">
<aside class="menu" id="menu"> <aside class="menu" id="menu">
<p class="menu-label">General</p> <p class="menu-label">General</p>
<ul class="menu-list"> <ul class="menu-list">
<li><a href=".">Frontpage</a></li> <li>
<li><a id="itemUploads" onclick="panel.getUploads()">Uploads</a></li> <a href=".">Frontpage</a>
</li>
<li>
<a id="itemUploads" onclick="panel.getUploads()">Uploads</a>
</li>
</ul> </ul>
<p class="menu-label">Albums</p> <p class="menu-label">Albums</p>
<ul class="menu-list"> <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> <li>
<ul id='albumsContainer'></ul> <ul id='albumsContainer'></ul>
</li> </li>
</ul> </ul>
<p class="menu-label">Administration</p> <p class="menu-label">Administration</p>
<ul class="menu-list"> <ul class="menu-list">
<li><a id="itemTokens" onclick="panel.changeToken()">Change your token</a></li> <li>
<li><a id="itemPassword" onclick="panel.changePassword()">Change your password</a></li> <a id="itemTokens" onclick="panel.changeToken()">Change your token</a>
<li><a id="itemLogout"onclick="panel.logout()">Logout</a></li> </li>
<li>
<a id="itemPassword" onclick="panel.changePassword()">Change your password</a>
</li>
<li>
<a id="itemLogout" onclick="panel.logout()">Logout</a>
</li>
</ul> </ul>
</aside> </aside>
</div> </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"> <img src="images/logo.png">
</div> </div>
</div> </div>
</div> </div>
</section> </section>

4
pages/faq.html
View File

@ -5,12 +5,12 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="A pomf-like file uploading service that doesn't suck."> <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="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"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>safe.fiery.me &#8211; A small safe worth protecting.</title> <title>safe.fiery.me &#8211; A small safe worth protecting.</title>
<!-- Stylesheets and scripts --> <!-- 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"> <link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Open Graph tags --> <!-- Open Graph tags -->

9
pages/home.html
View File

@ -5,15 +5,14 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="A pomf-like file uploading service that doesn't suck."> <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="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"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>safe.fiery.me &#8211; A small safe worth protecting.</title> <title>safe.fiery.me &#8211; A small safe worth protecting.</title>
<!-- Stylesheets and scripts --> <!-- 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="libs/sweetalert/sweetalert.min.css">
<link rel="stylesheet" type="text/css" href="css/style.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/dropzone/dropzone.min.js"></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="libs/axios/axios.min.js"></script>
<script type="text/javascript" src="js/home.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 class="subtitle"><a href="auth" id="loginLinkText"></a></h3>
<h3 id="links"> <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> </h3>
</div> </div>

52
public/css/style.css
View File

@ -78,6 +78,7 @@ section#home div#uploads { margin-bottom: 25px; }
PANEL PANEL
------------------ */ ------------------ */
/*
section#login input, section#login p.control a.button { section#login input, section#login p.control a.button {
border-left: 0px; border-left: 0px;
border-top: 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.button { margin-left: 10px; }
section#login p.control a#loginBtn { border-right: 0px; } section#login p.control a#loginBtn { border-right: 0px; }
section#login p.control a#registerBtn { border-left: 0px; } section#login p.control a#registerBtn { border-left: 0px; }
*/
section#auth, section#dashboard { display: none } section#auth, section#dashboard { display: none }
section#auth input { background: rgba(0, 0, 0, 0); } section#auth input { background: rgba(0, 0, 0, 0); }
@ -138,11 +139,11 @@ a:hover {
color: #3daee9; color: #3daee9;
} }
section#home h3#links span { #home #links span {
color: #898b8d; color: #898b8d;
} }
section#home #b { #home #b {
width: 200px; width: 200px;
height: 200px; height: 200px;
border-radius: 100%; border-radius: 100%;
@ -155,3 +156,48 @@ hr {
.table-container { .table-container {
overflow-x: auto; 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;
}

48
public/js/auth.js
View File

@ -17,18 +17,24 @@ page.do = function (dest) {
username: user, username: user,
password: pass password: pass
}) })
.then(function (response) { .then(function (response) {
if (response.data.success === false) { if (response.data.success === false) {
return swal('Error', response.data.description, 'error') return swal('Error', response.data.description, 'error')
} }
localStorage.token = response.data.token localStorage.token = response.data.token
window.location = 'dashboard' window.location = 'dashboard'
}) })
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error') return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
}) })
}
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.verify = function () {
@ -38,17 +44,17 @@ page.verify = function () {
axios.post('api/tokens/verify', { axios.post('api/tokens/verify', {
token: page.token token: page.token
}) })
.then(function (response) { .then(function (response) {
if (response.data.success === false) { if (response.data.success === false) {
return swal('Error', response.data.description, 'error') return swal('Error', response.data.description, 'error')
} }
window.location = 'dashboard' window.location = 'dashboard'
}) })
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error') return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
}) })
} }
window.onload = function () { window.onload = function () {

507
public/js/dashboard.js
View File

@ -23,31 +23,31 @@ panel.verifyToken = function (token, reloadOnError) {
axios.post('api/tokens/verify', { axios.post('api/tokens/verify', {
token: token token: token
}) })
.then(function (response) { .then(function (response) {
if (response.data.success === false) { if (response.data.success === false) {
swal({ swal({
title: 'An error occurred', title: 'An error occurred',
text: response.data.description, text: response.data.description,
type: 'error' icon: 'error'
}, function () { }).then(() => {
if (reloadOnError) { if (reloadOnError) {
localStorage.removeItem('token') localStorage.removeItem('token')
location.location = 'auth' location.location = 'auth'
} }
}) })
return return
} }
axios.defaults.headers.common.token = token axios.defaults.headers.common.token = token
localStorage.token = token localStorage.token = token
panel.token = token panel.token = token
panel.username = response.data.username panel.username = response.data.username
return panel.prepareDashboard() return panel.prepareDashboard()
}) })
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error') return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
}) })
} }
panel.prepareDashboard = function () { panel.prepareDashboard = function () {
@ -100,31 +100,32 @@ panel.getUploads = function (album = undefined, page = undefined) {
if (page > 0) prevPage = page - 1 if (page > 0) prevPage = page - 1
panel.page.innerHTML = '' var pagination = `
var container = document.createElement('div') <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-previous" onclick="panel.getUploads(${album}, ${prevPage} )">Previous</a> <a class="pagination-next" onclick="panel.getUploads(${album}, ${nextPage} )">Next page</a>
<a class="pagination-next" onclick="panel.getUploads(${album}, ${nextPage} )">Next page</a> </nav>
</nav>` `
var listType = ` var listType = `
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<a class="button is-small is-outlined is-danger" title="List view" onclick="panel.setFilesView('list', ${album}, ${page})"> <a class="button is-small is-outlined is-danger" title="List view" onclick="panel.setFilesView('list', ${album}, ${page})">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa icon-list-bullet"></i> <i class="fa icon-list-bullet"></i>
</span> </span>
</a> </a>
<a class="button is-small is-outlined is-danger" title="List view" onclick="panel.setFilesView('thumbs', ${album}, ${page})"> <a class="button is-small is-outlined is-danger" title="List view" onclick="panel.setFilesView('thumbs', ${album}, ${page})">
<span class="icon is-small"> <span class="icon is-small">
<i class="fa icon-th-large"></i> <i class="fa icon-th-large"></i>
</span> </span>
</a> </a>
</div>
</div> </div>
</div>` `
var table, item var table, item
if (panel.filesView === 'thumbs') { if (panel.filesView === 'thumbs') {
container.innerHTML = ` panel.page.innerHTML = `
${pagination} ${pagination}
<hr> <hr>
${listType} ${listType}
@ -134,7 +135,6 @@ panel.getUploads = function (album = undefined, page = undefined) {
${pagination} ${pagination}
` `
panel.page.appendChild(container)
table = document.getElementById('table') table = document.getElementById('table')
for (item of response.data.files) { for (item of response.data.files) {
@ -151,12 +151,12 @@ panel.getUploads = function (album = undefined, page = undefined) {
var albumOrUser = 'Album' var albumOrUser = 'Album'
if (panel.username === 'root') { albumOrUser = 'User' } if (panel.username === 'root') { albumOrUser = 'User' }
container.innerHTML = ` panel.page.innerHTML = `
${pagination} ${pagination}
<hr> <hr>
${listType} ${listType}
<div class="table-container"> <div class="table-container">
<table class="table is-striped is-narrow is-left"> <table class="table is-narrow is-fullwidth is-hoverable">
<thead> <thead>
<tr> <tr>
<th>File</th> <th>File</th>
@ -173,7 +173,6 @@ panel.getUploads = function (album = undefined, page = undefined) {
${pagination} ${pagination}
` `
panel.page.appendChild(container)
table = document.getElementById('table') table = document.getElementById('table')
for (item of response.data.files) { for (item of response.data.files) {
@ -199,16 +198,16 @@ panel.getUploads = function (album = undefined, page = undefined) {
</a> </a>
</td> </td>
</tr> </tr>
` `
table.appendChild(tr) table.appendChild(tr)
} }
} }
}) })
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error') return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
}) })
} }
panel.setFilesView = function (view, album, page) { panel.setFilesView = function (view, album, page) {
@ -221,16 +220,20 @@ panel.deleteFile = function (id) {
swal({ swal({
title: 'Are you sure?', title: 'Are you sure?',
text: 'You wont be able to recover the file!', text: 'You wont be able to recover the file!',
type: 'warning', icon: 'warning',
showCancelButton: true, dangerMode: true,
confirmButtonColor: '#ff3860', buttons: {
confirmButtonText: 'Yes, delete it!', cancel: true,
closeOnConfirm: false confirm: {
}, text: 'Yes, delete it!',
function () { closeModal: false
axios.post('api/upload/delete', { }
id: id }
}) }).then(value => {
if (!value) return
axios.post('api/upload/delete', {
id: id
})
.then(function (response) { .then(function (response) {
if (response.data.success === false) { if (response.data.success === false) {
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token) if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
@ -244,8 +247,7 @@ panel.deleteFile = function (id) {
console.log(error) console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error') return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
}) })
} })
)
} }
panel.getAlbums = function () { panel.getAlbums = function () {
@ -255,34 +257,37 @@ panel.getAlbums = function () {
else return swal('An error occurred', response.data.description, 'error') else return swal('An error occurred', response.data.description, 'error')
} }
panel.page.innerHTML = '' panel.page.innerHTML = `
var container = document.createElement('div')
container.className = 'container'
container.innerHTML = `
<h2 class="subtitle">Create new album</h2> <h2 class="subtitle">Create new album</h2>
<p class="control has-addons has-addons-centered"> <div class="field has-addons has-addons-centered">
<input id="albumName" class="input" type="text" placeholder="Name"> <div class="control is-expanded">
<a id="submitAlbum" class="button is-primary">Submit</a> <input id="albumName" class="input" type="text" placeholder="Name">
</p> </div>
<div class="control">
<a id="submitAlbum" class="button is-primary">Submit</a>
</div>
</div>
<h2 class="subtitle">List of albums</h2> <h2 class="subtitle">List of albums</h2>
<table class="table is-striped is-narrow"> <div class="table-container">
<thead> <table class="table is-narrow is-fullwidth is-hoverable">
<tr> <thead>
<th>Name</th> <tr>
<th>Files</th> <th>Name</th>
<th>Created At</th> <th>Files</th>
<th>Public link</th> <th>Created At</th>
<th></th> <th>Public link</th>
</tr> <th></th>
</thead> </tr>
<tbody id="table"> </thead>
</tbody> <tbody id="table">
</table>` </tbody>
</table>
</div>
`
panel.page.appendChild(container)
var table = document.getElementById('table') var table = document.getElementById('table')
for (var item of response.data.albums) { for (var item of response.data.albums) {
@ -292,7 +297,7 @@ panel.getAlbums = function () {
<th>${item.name}</th> <th>${item.name}</th>
<th>${item.files}</th> <th>${item.files}</th>
<td>${item.date}</td> <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> <td>
<a class="button is-small is-primary is-outlined" title="Edit name" onclick="panel.renameAlbum(${item.id})"> <a class="button is-small is-primary is-outlined" title="Edit name" onclick="panel.renameAlbum(${item.id})">
<span class="icon is-small"> <span class="icon is-small">
@ -306,7 +311,7 @@ panel.getAlbums = function () {
</a> </a>
</td> </td>
</tr> </tr>
` `
table.appendChild(tr) table.appendChild(tr)
} }
@ -315,65 +320,72 @@ panel.getAlbums = function () {
panel.submitAlbum() panel.submitAlbum()
}) })
}) })
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error') return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
}) })
} }
panel.renameAlbum = function (id) { panel.renameAlbum = function (id) {
swal({ swal({
title: 'Rename album', title: 'Rename album',
text: 'New name you want to give the album:', text: 'New name you want to give the album:',
type: 'input', icon: 'info',
showCancelButton: true, content: {
closeOnConfirm: false, element: 'input',
animation: 'slide-from-top', attributes: {
inputPlaceholder: 'My super album' placeholder: 'My super album'
}, function (inputValue) { }
if (inputValue === false) return false },
if (inputValue === '') { buttons: {
swal.showInputError('You need to write something!') cancel: true,
return false confirm: {
closeModal: false
}
} }
}).then(value => {
if (!value) return swal.close()
axios.post('api/albums/rename', { axios.post('api/albums/rename', {
id: id, id: id,
name: inputValue name: value
}) })
.then(function (response) { .then(function (response) {
if (response.data.success === false) { if (response.data.success === false) {
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token) 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 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') else swal('An error occurred', response.data.description, 'error')
return return
} }
swal('Success!', 'Your album was renamed to: ' + inputValue, 'success') swal('Success!', 'Your album was renamed to: ' + value, 'success')
panel.getAlbumsSidebar() panel.getAlbumsSidebar()
panel.getAlbums() panel.getAlbums()
}) })
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error') return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
}) })
}) })
} }
panel.deleteAlbum = function (id) { panel.deleteAlbum = function (id) {
swal({ swal({
title: 'Are you sure?', title: 'Are you sure?',
text: "This won't delete your files, only the album!", text: 'This won\'t delete your files, only the album!',
type: 'warning', icon: 'warning',
showCancelButton: true, dangerMode: true,
confirmButtonColor: '#ff3860', buttons: {
confirmButtonText: 'Yes, delete it!', cancel: true,
closeOnConfirm: false confirm: {
}, text: 'Yes, delete it!',
function () { closeModal: false
axios.post('api/albums/delete', { }
id: id }
}) }).then(value => {
if (!value) return
axios.post('api/albums/delete', {
id: id
})
.then(function (response) { .then(function (response) {
if (response.data.success === false) { if (response.data.success === false) {
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token) if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
@ -388,62 +400,61 @@ panel.deleteAlbum = function (id) {
console.log(error) console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error') return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
}) })
} })
)
} }
panel.submitAlbum = function () { panel.submitAlbum = function () {
axios.post('api/albums', { axios.post('api/albums', {
name: document.getElementById('albumName').value name: document.getElementById('albumName').value
}) })
.then(function (response) { .then(function (response) {
if (response.data.success === false) { if (response.data.success === false) {
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token) if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
else return swal('An error occurred', response.data.description, 'error') else return swal('An error occurred', response.data.description, 'error')
} }
swal('Woohoo!', 'Album was added successfully', 'success') swal('Woohoo!', 'Album was added successfully', 'success')
panel.getAlbumsSidebar() panel.getAlbumsSidebar()
panel.getAlbums() panel.getAlbums()
}) })
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error') return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
}) })
} }
panel.getAlbumsSidebar = function () { panel.getAlbumsSidebar = function () {
axios.get('api/albums/sidebar') axios.get('api/albums/sidebar')
.then(function (response) { .then(function (response) {
if (response.data.success === false) { if (response.data.success === false) {
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token) if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
else return swal('An error occurred', response.data.description, 'error') else return swal('An error occurred', response.data.description, 'error')
} }
var albumsContainer = document.getElementById('albumsContainer') var albumsContainer = document.getElementById('albumsContainer')
albumsContainer.innerHTML = '' albumsContainer.innerHTML = ''
if (response.data.albums === undefined) return if (response.data.albums === undefined) return
var li, a var li, a
for (var album of response.data.albums) { for (var album of response.data.albums) {
li = document.createElement('li') li = document.createElement('li')
a = document.createElement('a') a = document.createElement('a')
a.id = album.id a.id = album.id
a.innerHTML = album.name a.innerHTML = album.name
a.addEventListener('click', function () { a.addEventListener('click', function () {
panel.getAlbum(this) panel.getAlbum(this)
}) })
li.appendChild(a) li.appendChild(a)
albumsContainer.appendChild(li) albumsContainer.appendChild(li)
} }
}) })
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error') return swal('An error occurred', 'There was an error with the request, please check the console for more information.', 'error')
}) })
} }
panel.getAlbum = function (item) { panel.getAlbum = function (item) {
@ -453,80 +464,84 @@ panel.getAlbum = function (item) {
panel.changeToken = function () { panel.changeToken = function () {
axios.get('api/tokens') axios.get('api/tokens')
.then(function (response) { .then(function (response) {
if (response.data.success === false) { if (response.data.success === false) {
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token) if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
else return swal('An error occurred', response.data.description, 'error') else return swal('An error occurred', response.data.description, 'error')
} }
panel.page.innerHTML = '' panel.page.innerHTML = `
var container = document.createElement('div') <h2 class="subtitle">Manage your token</h2>
container.className = 'container'
container.innerHTML = `
<h2 class="subtitle">Manage your token</h2>
<label class="label">Your current token:</label> <div class="field">
<p class="control has-addons"> <label class="label">Your current token:</label>
<input id="token" readonly class="input is-expanded" type="text" placeholder="Your token" value="${response.data.token}"> <div class="field has-addons">
<a id="getNewToken" class="button is-primary">Request new token</a> <div class="control is-expanded">
</p> <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>
`
panel.page.appendChild(container) document.getElementById('getNewToken').addEventListener('click', function () {
panel.getNewToken()
document.getElementById('getNewToken').addEventListener('click', function () { })
panel.getNewToken() })
.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')
})
} }
panel.getNewToken = function () { panel.getNewToken = function () {
axios.post('api/tokens/change') axios.post('api/tokens/change')
.then(function (response) { .then(function (response) {
if (response.data.success === false) { if (response.data.success === false) {
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token) if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
else return swal('An error occurred', response.data.description, 'error') else return swal('An error occurred', response.data.description, 'error')
} }
swal({ swal({
title: 'Woohoo!', title: 'Woohoo!',
text: 'Your token was changed successfully.', text: 'Your token was changed successfully.',
type: 'success' icon: 'success'
}, function () { }).then(() => {
localStorage.token = response.data.token localStorage.token = response.data.token
location.reload() location.reload()
})
})
.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')
})
} }
panel.changePassword = function () { panel.changePassword = function () {
panel.page.innerHTML = '' panel.page.innerHTML = `
var container = document.createElement('div')
container.className = 'container'
container.innerHTML = `
<h2 class="subtitle">Change your password</h2> <h2 class="subtitle">Change your password</h2>
<label class="label">New password:</label> <div class="field">
<p class="control has-addons"> <label class="label">New password:</label>
<input id="password" class="input is-expanded" type="password" placeholder="Your new password"> <div class="control">
</p> <input id="password" class="input" type="password" placeholder="Your new password">
<label class="label">Confirm password:</label> </div>
<p class="control has-addons"> </div>
<input id="passwordConfirm" class="input is-expanded" type="password" placeholder="Verify your new password"> <div class="field">
<a id="sendChangePassword" class="button is-primary">Set new password</a> <label class="label">Confirm password:</label>
</p> <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>
` `
panel.page.appendChild(container)
document.getElementById('sendChangePassword').addEventListener('click', function () { document.getElementById('sendChangePassword').addEventListener('click', function () {
if (document.getElementById('password').value === document.getElementById('passwordConfirm').value) { if (document.getElementById('password').value === document.getElementById('passwordConfirm').value) {
panel.sendNewPassword(document.getElementById('password').value) panel.sendNewPassword(document.getElementById('password').value)
@ -534,8 +549,8 @@ panel.changePassword = function () {
swal({ swal({
title: 'Password mismatch!', title: 'Password mismatch!',
text: 'Your passwords do not match, please try again.', text: 'Your passwords do not match, please try again.',
type: 'error' icon: 'error'
}, function () { }).then(() => {
panel.changePassword() panel.changePassword()
}) })
} }
@ -544,24 +559,24 @@ panel.changePassword = function () {
panel.sendNewPassword = function (pass) { panel.sendNewPassword = function (pass) {
axios.post('api/password/change', {password: pass}) axios.post('api/password/change', {password: pass})
.then(function (response) { .then(function (response) {
if (response.data.success === false) { if (response.data.success === false) {
if (response.data.description === 'No token provided') return panel.verifyToken(panel.token) if (response.data.description === 'No token provided') return panel.verifyToken(panel.token)
else return swal('An error occurred', response.data.description, 'error') else return swal('An error occurred', response.data.description, 'error')
} }
swal({ swal({
title: 'Woohoo!', title: 'Woohoo!',
text: 'Your password was changed successfully.', text: 'Your password was changed successfully.',
type: 'success' icon: 'success'
}, function () { }).then(() => {
location.reload() location.reload()
})
})
.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')
})
} }
panel.setActiveMenu = function (item) { panel.setActiveMenu = function (item) {

4
public/js/home.js
View File

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

2
public/libs/bulma/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
public/libs/sweetalert/sweetalert.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
public/libs/sweetalert/sweetalert.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
views/album.handlebars
View File

@ -5,15 +5,14 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="A pomf-like file uploading service that doesn't suck."> <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="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"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ title }}</title> <title>{{ title }}</title>
<!-- Stylesheets and scripts --> <!-- 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">
<link rel="stylesheet" type="text/css" href="../libs/sweetalert/sweetalert.min.css">
<link rel="stylesheet" type="text/css" href="../css/style.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="../libs/axios/axios.min.js"></script>
<!-- Open Graph tags --> <!-- Open Graph tags -->