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

Updates

Browse Source 
* Added VSCode settings to git repo. Now you can match yours with mine, if you want.

* Added .jsbeautifyrc for js-beautify (to be used by VSCode's Beautify extension).

* Refactored all instances of require('**/*.js') with require('**/*') wherever applicable (basically gotten rid of the .js extension).

* Refactored path in all instances of require() wherever applicable.

* Sorted instances of require() wherever applicable.

* Fixed 500 HTTP error trying to load an error page for 505 HTTP error.

* Removed special treatement of NoJS page from uploadsController.processFilesForDisplay().

* Updated version string of all static files.

* Beautified all HTML, HANDLEBARS and CSS files.

* Refactored the structure of footer links in homepage and No-JS uploader. This should now fix homepage going out-of-bound in smaller screens.

* Added CSS prefixes wherever applicable.

* Improved back-end side of No-JS uploader. This will now handle errors properly.

* No-JS uploader will now show max file size.

* No-JS uploader will now show a proper message when private mode is enabled and/or registration is disabled.
This commit is contained in:
Bobby Wibowo 2018-04-13 23:20:57 +07:00
parent c12add2ace
commit dd43acecea
No known key found for this signature in database
GPG Key ID: 51C3A1E1E22D26CF
26 changed files with 607 additions and 477 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.editorconfig
View File

@ -19,3 +19,7 @@ insert_final_newline = false
[./public/safe.fiery.me.sxcu] [./public/safe.fiery.me.sxcu]
insert_final_newline = false insert_final_newline = false
[./.vscode/settings.json]
indent_size = 4
insert_final_newline = false

1
.gitignore vendored
View File

@ -12,4 +12,3 @@ migrate.js
yarn.lock yarn.lock
yarn-error.log yarn-error.log
package-lock.json package-lock.json
.vscode/

6
.jsbeautifyrc Normal file
View File

@ -0,0 +1,6 @@
{
"indent_size": 2,
"indent_char": " ",
"indent_inner_html": true,
"indent_handlebars": true
}

33
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,33 @@
{
"beautify.ignore": [
"**/*.js"
],
"beautify.language": {
"js": {},
"css": [
"css",
"scss"
],
"html": [
"htm",
"html",
"hbs",
"handlebars"
]
},
"discord.enabled": true,
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"editor.rulers": [
120
],
"editor.wordWrapColumn": 120,
"editor.wordWrap": "bounded",
"editor.wrappingIndent": "indent",
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"javascript.format.enable": false,
"javascript.suggestionActions.enabled": false,
"javascript.validate.enable": false,
"npm-intellisense.importES6": false
}

9
controllers/albumsController.js
View File

@ -1,10 +1,11 @@
const config = require('../config.js') const config = require('./../config')
const db = require('knex')(config.database) const db = require('knex')(config.database)
const randomstring = require('randomstring')
const utils = require('./utilsController.js')
const path = require('path')
const fs = require('fs') const fs = require('fs')
const path = require('path')
const randomstring = require('randomstring')
const utils = require('./utilsController')
const Zip = require('jszip') const Zip = require('jszip')
const albumsController = {} const albumsController = {}
albumsController.list = async (req, res, next) => { albumsController.list = async (req, res, next) => {

6
controllers/authController.js
View File

@ -1,8 +1,8 @@
const config = require('../config.js')
const db = require('knex')(config.database)
const bcrypt = require('bcrypt') const bcrypt = require('bcrypt')
const config = require('./../config')
const db = require('knex')(config.database)
const randomstring = require('randomstring') const randomstring = require('randomstring')
const utils = require('./utilsController.js') const utils = require('./utilsController')
const authController = {} const authController = {}

4
controllers/tokenController.js
View File

@ -1,7 +1,7 @@
const config = require('../config.js') const config = require('./../config')
const db = require('knex')(config.database) const db = require('knex')(config.database)
const randomstring = require('randomstring') const randomstring = require('randomstring')
const utils = require('./utilsController.js') const utils = require('./utilsController')
const tokenController = {} const tokenController = {}

15
controllers/uploadController.js
View File

@ -1,11 +1,11 @@
const config = require('../config.js') const config = require('./../config')
const path = require('path') const path = require('path')
const multer = require('multer') const multer = require('multer')
const randomstring = require('randomstring') const randomstring = require('randomstring')
const db = require('knex')(config.database) const db = require('knex')(config.database)
const crypto = require('crypto') const crypto = require('crypto')
const fs = require('fs') const fs = require('fs')
const utils = require('./utilsController.js') const utils = require('./utilsController')
const uploadsController = {} const uploadsController = {}
@ -450,17 +450,6 @@ uploadsController.processFilesForDisplay = async (req, res, files, existingFiles
}) })
} }
if (req.params.nojs) {
return res.render('nojs', {
layout: false,
files: mappedFiles.map(file => {
const exec = /.[\w]+(\?|$)/.exec(file.url)
file.image = exec && exec[0] && utils.imageExtensions.includes(exec[0].toLowerCase())
return file
})
})
}
return res.json({ return res.json({
success: albumSuccess, success: albumSuccess,
description: albumSuccess ? null : 'Warning: Album may not have been properly updated.', description: albumSuccess ? null : 'Warning: Album may not have been properly updated.',

8
controllers/utilsController.js
View File

@ -1,9 +1,9 @@
const path = require('path') const config = require('./../config')
const config = require('../config.js') const db = require('knex')(config.database)
const ffmpeg = require('fluent-ffmpeg')
const fs = require('fs') const fs = require('fs')
const gm = require('gm') const gm = require('gm')
const ffmpeg = require('fluent-ffmpeg') const path = require('path')
const db = require('knex')(config.database)
const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']

2
database/migration.js
View File

@ -1,4 +1,4 @@
const config = require('../config.js') const config = require('./../config')
const db = require('knex')(config.database) const db = require('knex')(config.database)
const map = { const map = {

12
lolisafe.js
View File

@ -1,7 +1,7 @@
const config = require('./config.js') const config = require('./config')
const api = require('./routes/api.js') const api = require('./routes/api')
const album = require('./routes/album.js') const album = require('./routes/album')
const nojs = require('./routes/nojs.js') const nojs = require('./routes/nojs')
const express = require('express') const express = require('express')
const helmet = require('helmet') const helmet = require('helmet')
const bodyParser = require('body-parser') const bodyParser = require('body-parser')
@ -64,11 +64,11 @@ for (const page of config.pages) {
// NOTE: Uses fiery.me branch of https://github.com/BobbyWibowo/HttpErrorPages // NOTE: Uses fiery.me branch of https://github.com/BobbyWibowo/HttpErrorPages
safe.use((req, res, next) => { safe.use((req, res, next) => {
res.status(404).sendFile('HTTP404.html', { root: '../HttpErrorPages/dist/' }) res.status(404).sendFile('HTTP404.html', { root: './../HttpErrorPages/dist/' })
}) })
safe.use((error, req, res, next) => { safe.use((error, req, res, next) => {
console.error(error) console.error(error)
res.status(500).sendFile('HTTP505.html', { root: '../HttpErrorPages/dist/' }) res.status(500).sendFile('HTTP500.html', { root: './../HttpErrorPages/dist/' })
}) })
safe.listen(config.port, () => console.log(`lolisafe started on port ${config.port}`)) safe.listen(config.port, () => console.log(`lolisafe started on port ${config.port}`))

16
pages/album.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -10,11 +11,11 @@
<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?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="css/style.css?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="css/style.css?v=L4ZeQAC3XC">
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="libs/axios/axios.min.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="libs/axios/axios.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="js/album.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="js/album.js?v=L4ZeQAC3XC"></script>
<!-- Open Graph tags --> <!-- Open Graph tags -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@ -42,10 +43,10 @@
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180">
<link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=V2RnA3Mwhh"> <link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=L4ZeQAC3XC">
<meta name="apple-mobile-web-app-title" content="safe.fiery.me"> <meta name="apple-mobile-web-app-title" content="safe.fiery.me">
<meta name="application-name" content="safe.fiery.me"> <meta name="application-name" content="safe.fiery.me">
<meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=V2RnA3Mwhh"> <meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=L4ZeQAC3XC">
<meta name="theme-color" content="#232629"> <meta name="theme-color" content="#232629">
</head> </head>
@ -68,4 +69,5 @@
</section> </section>
</body> </body>
</html> </html>

35
pages/auth.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<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">
@ -10,12 +10,13 @@
<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?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=cjjyPrikAR"> <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="css/style.css?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="css/style.css?v=L4ZeQAC3XC">
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=vvtL7Y3cjD"></script> <link rel="stylesheet" type="text/css" href="css/auth.css?v=L4ZeQAC3XC">
<script type="text/javascript" src="libs/axios/axios.min.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="js/auth.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="libs/axios/axios.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="js/auth.js?v=L4ZeQAC3XC"></script>
<!-- Open Graph tags --> <!-- Open Graph tags -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@ -43,27 +44,15 @@
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180">
<link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=V2RnA3Mwhh"> <link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=L4ZeQAC3XC">
<meta name="apple-mobile-web-app-title" content="safe.fiery.me"> <meta name="apple-mobile-web-app-title" content="safe.fiery.me">
<meta name="application-name" content="safe.fiery.me"> <meta name="application-name" content="safe.fiery.me">
<meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=V2RnA3Mwhh"> <meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=L4ZeQAC3XC">
<meta name="theme-color" content="#232629"> <meta name="theme-color" content="#232629">
<style>
/* ------------------
COLORS BASED ON
KDE BREEZE DARK
------------------ */
section#login {
background-color: #232629;
}
</style>
</head> </head>
<body> <body>
<section id="login" class="hero is-fullheight" style="background-color: #232629">
<section id="login" class="hero is-fullheight">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<div class="columns is-centered"> <div class="columns is-centered">
@ -109,6 +98,6 @@
</div> </div>
</div> </div>
</section> </section>
</body> </body>
</html> </html>

36
pages/dashboard.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<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">
@ -10,14 +10,14 @@
<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?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=cjjyPrikAR"> <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="css/style.css?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="css/style.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="css/dashboard.css?v=8XQkPhnc2S"> <link rel="stylesheet" type="text/css" href="css/dashboard.css?v=L4ZeQAC3XC">
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="libs/axios/axios.min.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="libs/axios/axios.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="libs/clipboard.js/clipboard.min.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="libs/clipboard.js/clipboard.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="js/dashboard.js?v=cjjyPrikAR"></script> <script type="text/javascript" src="js/dashboard.js?v=L4ZeQAC3XC"></script>
<!-- Open Graph tags --> <!-- Open Graph tags -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@ -45,18 +45,15 @@
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180">
<link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=V2RnA3Mwhh"> <link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=L4ZeQAC3XC">
<meta name="apple-mobile-web-app-title" content="safe.fiery.me"> <meta name="apple-mobile-web-app-title" content="safe.fiery.me">
<meta name="application-name" content="safe.fiery.me"> <meta name="application-name" content="safe.fiery.me">
<meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=V2RnA3Mwhh"> <meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=L4ZeQAC3XC">
<meta name="theme-color" content="#232629"> <meta name="theme-color" content="#232629">
</head> </head>
<body> <body>
<section id="auth" class="hero is-light is-fullheight"> <section id="auth" class="hero is-light is-fullheight">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<h1 class="title"> <h1 class="title">
@ -70,13 +67,10 @@
</h2> </h2>
</div> </div>
</div> </div>
</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"> <h1 class="title">
Dashboard Dashboard
</h1> </h1>
@ -127,20 +121,18 @@
<img src="images/logo.png"> <img src="images/logo.png">
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<div id="modal" class="modal"> <div id="modal" class="modal">
<div class="modal-background" onclick="panel.closeModal()"></div> <div class="modal-background" onclick="panel.closeModal()"></div>
<div class="modal-content" style="background-color: #31363b; border-radius: 5px; box-shadow: 0 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1); padding: 20px; width: auto;"> <div class="modal-content">
<figure class="image" style="width: 200px; height: 200px; display: flex; align-items: center;"> <figure class="image">
<img id="modalImage"> <img id="modalImage">
</figure> </figure>
</div> </div>
<button class="modal-close is-large" aria-label="close" onclick="panel.closeModal()"></button> <button class="modal-close is-large" aria-label="close" onclick="panel.closeModal()"></button>
</div> </div>
</body> </body>
</html> </html>

39
pages/faq.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<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">
@ -10,8 +10,8 @@
<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?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="css/style.css?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="css/style.css?v=L4ZeQAC3XC">
<!-- Open Graph tags --> <!-- Open Graph tags -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@ -39,38 +39,30 @@
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180">
<link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=V2RnA3Mwhh"> <link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=L4ZeQAC3XC">
<meta name="apple-mobile-web-app-title" content="safe.fiery.me"> <meta name="apple-mobile-web-app-title" content="safe.fiery.me">
<meta name="application-name" content="safe.fiery.me"> <meta name="application-name" content="safe.fiery.me">
<meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=V2RnA3Mwhh"> <meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=L4ZeQAC3XC">
<meta name="theme-color" content="#232629"> <meta name="theme-color" content="#232629">
<style> <style>
/* ------------------
COLORS BASED ON
KDE BREEZE DARK
------------------ */
.message-body { .message-body {
color: #eff0f1; color: #eff0f1;
background-color: #31363b; background-color: #31363b;
border-color: #898b8d; border-color: #898b8d;
} }
</style> </style>
</head> </head>
<body> <body>
<section class="hero is-fullheight has-text-centered" id="home"> <section class="hero is-fullheight has-text-centered" id="home">
<div class="hero-body"> <div class="hero-body">
<div class="container has-text-left"> <div class="container has-text-left">
<h2 class='subtitle'>What is safe.fiery.me?</h2> <h2 class='subtitle'>What is safe.fiery.me?</h2>
<article class="message"> <article class="message">
<div class="message-body"> <div class="message-body">
safe.fiery.me is merely another clone of lolisafe.<br> safe.fiery.me is merely another clone of lolisafe. We accept your files, photos, documents, anything, and give you back a shareable link for you to send to others.<br> lolisafe itself is an easy to use, open source and completely free file
lolisafe itself is an easy to use, open source and completely free file upload service. We accept your files, photos, documents, anything, and give you back a shareable link for you to send to others.<br> upload service.
On a side note, this site was originally made for personal use but I figured it would be rather lonely, so yeah, feel free..
</div> </div>
</article> </article>
@ -84,24 +76,24 @@
<h2 class='subtitle'>How can I keep track of my uploads?</h2> <h2 class='subtitle'>How can I keep track of my uploads?</h2>
<article class="message"> <article class="message">
<div class="message-body"> <div class="message-body">
Simply create a user on the site and every upload will be associated with your account, granting you access to your uploaded files through our dashboard.<br> Simply create a user on the site and every upload will be associated with your account, granting you access to your uploaded files through our dashboard.<br> By having an account, you will also be able to set file name length for your new
By having an account, you will also be able to set file name length for your new uploads! uploads!
</div> </div>
</article> </article>
<h2 class='subtitle'>Do you have any No-JS uploader?</h2> <h2 class='subtitle'>Do you have any No-JS uploader?</h2>
<article class="message"> <article class="message">
<div class="message-body"> <div class="message-body">
Yes, check out <a href="../nojs" target="_blank">this page</a>.<br> Yes, check out <a href="../nojs" target="_blank">this page</a>.<br> Unfortunately you will not be able to associate your uploads to your account, if you have any.<br> Then again, if you want to use the No-JS uploader, then it's very likely
Unfortunately you will not be able to associate your uploads to your account, if you have any.<br> that you will not use the Dashboard anyways.
Then again, if you want to use the No-JS uploader, then it's very likely that you will not use the Dashboard anyways.
</div> </div>
</article> </article>
<h2 class='subtitle'>What are albums?</h2> <h2 class='subtitle'>What are albums?</h2>
<article class="message"> <article class="message">
<div class="message-body"> <div class="message-body">
Albums are a simple way of sorting uploads together. Right now you can create albums through the dashboard, then afterwards you can use them through the homepage uploader or with <a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj" target="_blank">our chrome extension</a>, which will enable you to <strong>right click -> send to lolisafe</strong> or to a desired album if you have any. You will probably have to change some things involving <b>https://safe.fiery.me/api/upload</b> if you want to use the extension though. Albums are a simple way of sorting uploads together. Right now you can create albums through the dashboard, then afterwards you can use them through the homepage uploader or with <a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj"
target="_blank">our chrome extension</a>, which will enable you to <strong>right click -> send to lolisafe</strong> or to a desired album if you have any. You will probably have to change some things involving <b>https://safe.fiery.me/api/upload</b> if you want to use the extension though.
</div> </div>
</article> </article>
@ -115,7 +107,7 @@
<h2 class='subtitle'>I saw something too illegal for my tastes here, what do?</h2> <h2 class='subtitle'>I saw something too illegal for my tastes here, what do?</h2>
<article class="message"> <article class="message">
<div class="message-body"> <div class="message-body">
Send a strongly worded email to <a href="mailto:bobby@fiery.me">bobby@fiery.me</a> and I will try to get back to you within 24 hours. Send a strongly worded email to <a href="mailto:bobby@fiery.me">bobby@fiery.me</a> and I will try to get back to you within 24 hours.
</div> </div>
</article> </article>
@ -125,10 +117,9 @@
Yes, the homepage uploader will chunk your uploads into 10 MB pieces by default. If you want to utilize chunked uploads with the API, then feel free to inspect the HTTP requests. Yes, the homepage uploader will chunk your uploads into 10 MB pieces by default. If you want to utilize chunked uploads with the API, then feel free to inspect the HTTP requests.
</div> </div>
</article> </article>
</div> </div>
</div> </div>
</section> </section>
</body> </body>
</html> </html>

190
pages/home.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<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">
@ -10,14 +10,15 @@
<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?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=cjjyPrikAR"> <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="css/style.css?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="css/style.css?v=L4ZeQAC3XC">
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=vvtL7Y3cjD"></script> <link rel="stylesheet" type="text/css" href="css/home.css?v=L4ZeQAC3XC">
<script type="text/javascript" src="libs/dropzone/dropzone.min.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="libs/axios/axios.min.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="libs/dropzone/dropzone.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="libs/clipboard.js/clipboard.min.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="libs/axios/axios.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="js/home.js?v=D6LvZYepOF"></script> <script type="text/javascript" src="libs/clipboard.js/clipboard.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="js/home.js?v=L4ZeQAC3XC"></script>
<!-- Open Graph tags --> <!-- Open Graph tags -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@ -45,41 +46,14 @@
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180">
<link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=V2RnA3Mwhh"> <link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=L4ZeQAC3XC">
<meta name="apple-mobile-web-app-title" content="safe.fiery.me"> <meta name="apple-mobile-web-app-title" content="safe.fiery.me">
<meta name="application-name" content="safe.fiery.me"> <meta name="application-name" content="safe.fiery.me">
<meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=V2RnA3Mwhh"> <meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=L4ZeQAC3XC">
<meta name="theme-color" content="#232629"> <meta name="theme-color" content="#232629">
<style>
#dropzone * {
pointer-events: none;
}
img[data-dz-thumbnail] {
max-width: 200px;
}
.clipboard-mobile {
margin-top: 5px;
}
#links {
display: flex;
align-items: center;
justify-content: center;
}
#links a {
display: block;
margin: 5px;
}
</style>
</head> </head>
<body> <body>
<section class="hero is-fullheight has-text-centered" id="home"> <section class="hero is-fullheight has-text-centered" id="home">
<div class="hero-body section"> <div class="hero-body section">
<div class="container"> <div class="container">
@ -87,21 +61,23 @@
<img class="logo" src="images/logo_smol.png"> <img class="logo" src="images/logo_smol.png">
</p> </p>
<h1 class="title">safe.fiery.me</h1> <h1 class="title">safe.fiery.me</h1>
<h2 class="subtitle">A <h2 class="subtitle">
<strong>modern</strong> self-hosted file upload service</h2> A <strong>modern</strong> self-hosted file upload service
</h2>
<h3 class="subtitle" id="maxFileSize"></h3> <h3 class="subtitle" id="maxFileSize"></h3>
<div class="columns">
<div class="columns is-gapless">
<div class="column is-hidden-mobile"></div> <div class="column is-hidden-mobile"></div>
<div class="column" id="uploadContainer"> <div id="uploadContainer" class="column">
<a id="loginToUpload" class="button is-danger is-loading" style="display: flex"></a> <a id="loginToUpload" class="button is-danger is-loading" style="display: flex"></a>
<div class="field" id="albumDiv" style="display: none"> <div id="albumDiv" class="field" style="display: none">
<p class="control select-wrapper"> <p class="control select-wrapper">
<span class="select"> <span class="select">
<select id="albumSelect"> <select id="albumSelect">
<option value="">Upload to album</option> <option value="">Upload to album</option>
</select> </select>
</span> </span>
</p> </p>
</div> </div>
</div> </div>
@ -109,7 +85,7 @@
</div> </div>
<div id="uploads"> <div id="uploads">
<div id="template" class="columns"> <div id="template" class="columns is-gapless">
<div class="column is-hidden-mobile"></div> <div class="column is-hidden-mobile"></div>
<div class="column"> <div class="column">
<progress class="progress is-small is-danger" value="0" max="100"></progress> <progress class="progress is-small is-danger" value="0" max="100"></progress>
@ -120,11 +96,11 @@
</p> </p>
<p class="clipboard-mobile is-hidden-desktop" style="display: none"> <p class="clipboard-mobile is-hidden-desktop" style="display: none">
<a class="button is-info is-outlined clipboard-js" style="display: flex"> <a class="button is-info is-outlined clipboard-js" style="display: flex">
<span class="icon"> <span class="icon">
<i class="icon-clipboard-1"></i> <i class="icon-clipboard-1"></i>
</span> </span>
<span>Copy link to clipboard</span> <span>Copy link to clipboard</span>
</a> </a>
</p> </p>
</div> </div>
<div class="column is-hidden-mobile"></div> <div class="column is-hidden-mobile"></div>
@ -134,52 +110,74 @@
<h3 class="subtitle"> <h3 class="subtitle">
<a href="auth" id="loginLinkText"></a> <a href="auth" id="loginLinkText"></a>
</h3> </h3>
<h3 id="links">
<a href="https://fiery.me" title="Home">
<span class="icon is-medium">
<i class="icon-home icon-2x"></i>
</span>
</a>
<a href="https://blog.fiery.me" title="Blog">
<span class="icon is-medium">
<i class="icon-archive icon-2x"></i>
</span>
</a>
<a id="ShareX" href="https://safe.fiery.me/safe.fiery.me.sxcu" title="ShareX">
<span class="icon is-medium">
<i class="icon-sharex icon-2x"></i>
</span>
</a>
<a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj" target="_blank" title="Chrome extension">
<span class="icon is-medium">
<i class="icon-chrome icon-2x"></i>
</span>
</a>
<a href="https://github.com/BobbyWibowo/uguush/tree/lolisafe-kde" target="_blank" title="Bash uploader">
<span class="icon is-medium">
<i class="icon-terminal icon-2x"></i>
</span>
</a>
<a href="faq" title="FAQ">
<span class="icon is-medium">
<i class="icon-help-circled icon-2x"></i>
</span>
</a>
<a href="auth" title="Dashboard">
<span class="icon is-medium">
<i class="icon-gauge icon-2x"></i>
</span>
</a>
<a href="https://github.com/BobbyWibowo/lolisafe" target="_blank" title="GitHub">
<span class="icon is-medium">
<i class="icon-github-circled icon-2x"></i>
</span>
</a>
</h3>
<div class="columns is-gapless">
<div class="column is-hidden-mobile"></div>
<div class="column">
<div id="linksColumn" class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<a href="https://fiery.me" title="Home">
<span class="icon is-medium">
<i class="icon-home icon-2x"></i>
</span>
</a>
</div>
<div class="column is-narrow">
<a href="https://blog.fiery.me" title="Blog">
<span class="icon is-medium">
<i class="icon-archive icon-2x"></i>
</span>
</a>
</div>
<div class="column is-narrow">
<a id="ShareX" href="https://safe.fiery.me/safe.fiery.me.sxcu" title="ShareX">
<span class="icon is-medium">
<i class="icon-sharex icon-2x"></i>
</span>
</a>
</div>
<div class="column is-narrow">
<a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj" target="_blank" title="Chrome extension">
<span class="icon is-medium">
<i class="icon-chrome icon-2x"></i>
</span>
</a>
</div>
<div class="column is-narrow">
<a href="https://github.com/BobbyWibowo/uguush/tree/lolisafe-kde" target="_blank" title="Bash uploader">
<span class="icon is-medium">
<i class="icon-terminal icon-2x"></i>
</span>
</a>
</div>
<div class="column is-narrow">
<a href="faq" title="FAQ">
<span class="icon is-medium">
<i class="icon-help-circled icon-2x"></i>
</span>
</a>
</div>
<div class="column is-narrow">
<a href="auth" title="Dashboard">
<span class="icon is-medium">
<i class="icon-gauge icon-2x"></i>
</span>
</a>
</div>
<div class="column is-narrow">
<a href="https://github.com/BobbyWibowo/lolisafe" target="_blank" title="GitHub">
<span class="icon is-medium">
<i class="icon-github-circled icon-2x"></i>
</span>
</a>
</div>
</div>
</div>
<div class="column is-hidden-mobile"></div>
</div>
</div> </div>
</div> </div>
</section> </section>
</body> </body>
</html> </html>

31
public/css/auth.css Normal file
View File

@ -0,0 +1,31 @@
input {
background: rgba(0, 0, 0, 0);
}
input,
a {
border-left: 0px;
border-top: 0px;
border-right: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0 0;
box-shadow: 0 0 0;
}
.select-wrapper {
text-align: center;
margin-bottom: 10px;
}
#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;
}

36
public/css/dashboard.css
View File

@ -1,7 +1,7 @@
/* ------------------ #auth,
COLORS BASED ON #dashboard {
KDE BREEZE DARK display: none
------------------ */ }
.button.is-breeze { .button.is-breeze {
background-color: #2980b9; background-color: #2980b9;
@ -74,12 +74,16 @@ html {
} }
.image-container { .image-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
width: 200px; width: 200px;
height: 200px; height: 200px;
margin: 9px; margin: 9px;
background-color: #31363b; background-color: #31363b;
overflow: hidden; overflow: hidden;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
position: relative; position: relative;
} }
@ -102,6 +106,8 @@ html {
} }
.image-container .controls { .image-container .controls {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
position: absolute; position: absolute;
top: .75rem; top: .75rem;
@ -142,12 +148,14 @@ html {
.no-touch .image-container .file-checkbox { .no-touch .image-container .file-checkbox {
opacity: .25; opacity: .25;
-webkit-transition: opacity .25s;
transition: opacity .25s; transition: opacity .25s;
} }
.no-touch .image-container .controls, .no-touch .image-container .controls,
.no-touch .image-container .details { .no-touch .image-container .details {
opacity: 0; opacity: 0;
-webkit-transition: opacity .25s;
transition: opacity .25s; transition: opacity .25s;
} }
@ -199,3 +207,23 @@ html {
color: #eff0f1; color: #eff0f1;
height: 2.25em; height: 2.25em;
} }
#modal .modal-content {
background-color: #31363b;
border-radius: 5px;
-webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
padding: 20px;
width: auto;
}
#modal .modal-content .image {
width: 200px;
height: 200px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

167
public/css/home.css Normal file
View File

@ -0,0 +1,167 @@
#b {
width: 200px;
height: 200px;
border-radius: 100%;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: floatUp;
animation-name: floatUp;
-webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
border-radius: 24px;
display: inline-block;
height: 240px;
margin-bottom: 40px;
position: relative;
vertical-align: top;
width: 240px;
-webkit-box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
}
#dropzone {
border: 1px solid #dbdbdb;
background-color: rgba(0, 0, 0, 0);
border-color: #ff3860;
color: #ff3860;
display: none;
width: 100%;
border-radius: 3px;
-webkit-box-shadow: none;
box-shadow: none;
height: 2.5em;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-left: .75em;
padding-right: .75em;
text-align: center;
cursor: pointer;
}
#dropzone * {
pointer-events: none;
}
#uploads,
#tokenContainer,
#panel {
display: none;
}
#dropzone:hover {
background-color: #ff3860;
border-color: #ff3860;
color: #fff;
}
#maxFileSize {
font-size: 1rem;
}
img.logo {
max-height: 200px;
margin-top: 20px;
}
.dz-preview .dz-details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.dz-preview .dz-details .dz-size,
.dz-preview .dz-details .dz-filename {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.dz-preview img,
.dz-preview .dz-success-mark,
.dz-preview .dz-error-mark {
display: none;
}
#uploads {
margin-bottom: 25px;
}
@-webkit-keyframes floatUp {
0% {
opacity: 0;
-webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-webkit-transform: scale(0.86);
transform: scale(0.86);
}
25% {
opacity: 100;
}
67% {
-webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes floatUp {
0% {
opacity: 0;
-webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-webkit-transform: scale(0.86);
transform: scale(0.86);
}
25% {
opacity: 100;
}
67% {
-webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-webkit-transform: scale(1);
transform: scale(1);
}
}
img[data-dz-thumbnail] {
max-width: 200px;
}
.clipboard-mobile {
margin-top: 5px;
}
#albumDiv .control {
text-align: inherit;
}
#linksColumn {
margin-left: -0.25rem;
margin-right: -0.25rem;
}
#linksColumn .column {
padding-left: 0.25rem;
padding-right: 0.25rem;
}

119
public/css/style.css
View File

@ -1,103 +1,3 @@
/* ------------------
HOME
------------------ */
section#home #b {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: floatUp;
animation-name: floatUp;
-webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
border-radius: 24px;
display: inline-block;
height: 240px;
margin-bottom: 40px;
position: relative;
vertical-align: top;
width: 240px;
box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
}
section#home div#dropzone {
border: 1px solid #dbdbdb;
background-color: rgba(0, 0, 0, 0);
border-color: #ff3860;
color: #ff3860;
display: none;
width: 100%;
border-radius: 3px;
box-shadow: none;
height: 2.5em;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
user-select: none;
justify-content: center;
padding-left: .75em;
padding-right: .75em;
text-align: center;
cursor: pointer;
}
section#home div#uploads, section#home p#tokenContainer, section#home a#panel { display: none; }
section#home div#dropzone:hover { background-color: #ff3860; border-color: #ff3860; color: #fff; }
section#home h3#maxFileSize { font-size: 14px; }
section#home h3#links span { padding-left: 5px; padding-right: 5px; }
section#home img.logo { height: 200px; margin-top: 20px; }
section#home .dz-preview .dz-details { display: flex; }
section#home .dz-preview .dz-details .dz-size, section#home .dz-preview .dz-details .dz-filename { flex: 1; }
section#home .dz-preview img, section#home .dz-preview .dz-success-mark, section#home .dz-preview .dz-error-mark { display: none; }
section#home div#uploads { margin-bottom: 25px; }
@keyframes floatUp {
0% {
opacity: 0;
box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-webkit-transform: scale(0.86);
transform: scale(0.86);
}
25% { opacity: 100; }
67% {
box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* ------------------
PANEL
------------------ */
section#auth, section#dashboard { display: none }
section#auth input { background: rgba(0, 0, 0, 0); }
section#auth input, section#auth a {
border-left: 0px;
border-top: 0px;
border-right: 0px;
border-radius: 0px;
box-shadow: 0 0 0;
}
.select-wrapper {
text-align: center;
margin-bottom: 10px;
}
/* ------------------
COLORS BASED ON
KDE BREEZE DARK
------------------ */
.hero { .hero {
background-color: #232629; background-color: #232629;
color: #eff0f1; color: #eff0f1;
@ -123,29 +23,10 @@ a:hover {
color: #3daee9; color: #3daee9;
} }
section#home #b {
width: 200px;
height: 200px;
border-radius: 100%;
}
hr { hr {
background-color: #898b8d; background-color: #898b8d;
} }
#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-active,
.input.is-focused, .input.is-focused,
.input:active, .input:active,

2
public/js/home.js
View File

@ -114,7 +114,7 @@ upload.prepareUpload = () => {
const div = document.createElement('div') const div = document.createElement('div')
div.id = 'dropzone' div.id = 'dropzone'
div.className = 'button' div.className = 'button is-unselectable'
div.innerHTML = ` div.innerHTML = `
<span class="icon"> <span class="icon">
<i class="icon-upload-cloud"></i> <i class="icon-upload-cloud"></i>

4
routes/album.js
View File

@ -1,8 +1,8 @@
const config = require('../config.js') const config = require('./../config')
const routes = require('express').Router() const routes = require('express').Router()
const db = require('knex')(config.database) const db = require('knex')(config.database)
const path = require('path') const path = require('path')
const utils = require('../controllers/utilsController.js') const utils = require('./../controllers/utilsController')
routes.get('/a/:identifier', async (req, res, next) => { routes.get('/a/:identifier', async (req, res, next) => {
const identifier = req.params.identifier const identifier = req.params.identifier

10
routes/api.js
View File

@ -1,9 +1,9 @@
const config = require('../config.js') const config = require('./../config')
const routes = require('express').Router() const routes = require('express').Router()
const uploadController = require('../controllers/uploadController') const uploadController = require('./../controllers/uploadController')
const albumsController = require('../controllers/albumsController') const albumsController = require('./../controllers/albumsController')
const tokenController = require('../controllers/tokenController') const tokenController = require('./../controllers/tokenController')
const authController = require('../controllers/authController') const authController = require('./../controllers/authController')
routes.get('/check', (req, res, next) => { routes.get('/check', (req, res, next) => {
return res.json({ return res.json({

33
routes/nojs.js
View File

@ -1,12 +1,39 @@
const config = require('./../config')
const routes = require('express').Router() const routes = require('express').Router()
const uploadController = require('../controllers/uploadController') const uploadController = require('./../controllers/uploadController')
const renderOptions = {
layout: false,
uploadDisabled: false,
maxFileSize: config.uploads.maxSize
}
if (config.private) {
if (config.enableUserAccounts) {
renderOptions.uploadDisabled = 'Anonymous upload is disabled.'
} else {
renderOptions.uploadDisabled = 'Running in private mode.'
}
}
routes.get('/nojs', async (req, res, next) => { routes.get('/nojs', async (req, res, next) => {
return res.render('nojs', { layout: false }) return res.render('nojs', renderOptions)
}) })
routes.post('/nojs', (req, res, next) => { routes.post('/nojs', (req, res, next) => {
req.params.nojs = true res._json = res.json
res.json = (...args) => {
const result = args[0]
const _renderOptions = {}
Object.assign(_renderOptions, renderOptions)
_renderOptions.errorMessage = result.success ? '' : (result.description || 'An unexpected error occurred.')
_renderOptions.files = result.files || [{}]
return res.render('nojs', _renderOptions)
}
return uploadController.upload(req, res, next) return uploadController.upload(req, res, next)
}) })

56
views/album.handlebars
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<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">
@ -10,10 +10,10 @@
<title>{{ title }}</title> <title>{{ title }}</title>
<!-- Stylesheets and scripts --> <!-- Stylesheets and scripts -->
<link rel="stylesheet" type="text/css" href="../libs/bulma/bulma.min.css?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="../libs/bulma/bulma.min.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="../css/style.css?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="../css/style.css?v=L4ZeQAC3XC">
<script type="text/javascript" src="../libs/sweetalert/sweetalert.min.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="../libs/sweetalert/sweetalert.min.js?v=L4ZeQAC3XC"></script>
<script type="text/javascript" src="../libs/axios/axios.min.js?v=vvtL7Y3cjD"></script> <script type="text/javascript" src="../libs/axios/axios.min.js?v=L4ZeQAC3XC"></script>
<!-- Open Graph tags --> <!-- Open Graph tags -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@ -36,59 +36,35 @@
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180">
<link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=V2RnA3Mwhh"> <link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=L4ZeQAC3XC">
<meta name="apple-mobile-web-app-title" content="safe.fiery.me"> <meta name="apple-mobile-web-app-title" content="safe.fiery.me">
<meta name="application-name" content="safe.fiery.me"> <meta name="application-name" content="safe.fiery.me">
<meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=V2RnA3Mwhh"> <meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=L4ZeQAC3XC">
<meta name="theme-color" content="#232629"> <meta name="theme-color" content="#232629">
</head>
<style> <body>
/* ------------------ <section class="section">
COLORS BASED ON
KDE BREEZE DARK
------------------ */
html {
background-color: #232629;
}
.section {
background: none;
}
</style>
</head>
<body>
<section class="section">
<div class="container"> <div class="container">
<h1 id="title" class="title"> <h1 id="title" class="title">
{{ title }} {{ title }}
</h1> </h1>
<h1 id="count" class="subtitle"> <h1 id="count" class="subtitle">
{{ count }} files {{ count }} files
</h1> </h1>
{{#if enableDownload}} {{#if enableDownload}}
<a class="button is-primary is-outlined" title="Download album" href="../api/album/zip/{{ identifier }}">Download Album</a> <a class="button is-primary is-outlined" title="Download album" href="../api/album/zip/{{ identifier }}">Download Album</a>
{{/if}} {{/if}}
<hr> <hr>
<div id="table" class="columns is-multiline is-mobile is-centered"> <div id="table" class="columns is-multiline is-mobile is-centered">
{{#each files}} {{#each files}}
<div class="column is-narrow"> <div class="column is-narrow">
<a href="{{ this.file }}" target="_blank">{{{ this.thumb }}}</a> <a href="{{ this.file }}" target="_blank">{{{ this.thumb }}}</a>
</div> </div>
{{/each}} {{/each}}
</div> </div>
</div> </div>
</section>
</body>
</section>
</body>
</html> </html>

210
views/nojs.handlebars
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<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">
@ -10,9 +10,10 @@
<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?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=cjjyPrikAR"> <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="css/style.css?v=vvtL7Y3cjD"> <link rel="stylesheet" type="text/css" href="css/style.css?v=L4ZeQAC3XC">
<link rel="stylesheet" type="text/css" href="css/home.css?v=L4ZeQAC3XC">
<!-- Open Graph tags --> <!-- Open Graph tags -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@ -40,33 +41,14 @@
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/152px.png" sizes="152x152">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/167px.png" sizes="167x167">
<link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180"> <link rel="apple-touch-icon" href="https://safe.fiery.me/icons/180px.png" sizes="180x180">
<link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=V2RnA3Mwhh"> <link rel="manifest" href="https://safe.fiery.me/icons/manifest.json?v=L4ZeQAC3XC">
<meta name="apple-mobile-web-app-title" content="safe.fiery.me"> <meta name="apple-mobile-web-app-title" content="safe.fiery.me">
<meta name="application-name" content="safe.fiery.me"> <meta name="application-name" content="safe.fiery.me">
<meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=V2RnA3Mwhh"> <meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=L4ZeQAC3XC">
<meta name="theme-color" content="#232629"> <meta name="theme-color" content="#232629">
</head>
<style>
#form input {
width: 100%;
}
#links {
display: flex;
align-items: center;
justify-content: center;
}
#links a {
display: block;
margin: 5px;
}
</style>
</head>
<body> <body>
<section class="hero is-fullheight has-text-centered" id="home"> <section class="hero is-fullheight has-text-centered" id="home">
<div class="hero-body section"> <div class="hero-body section">
<div class="container"> <div class="container">
@ -74,94 +56,128 @@
<img class="logo" src="images/logo_smol.png"> <img class="logo" src="images/logo_smol.png">
</p> </p>
<h1 class="title">safe.fiery.me</h1> <h1 class="title">safe.fiery.me</h1>
<h2 class="subtitle">A <h2 class="subtitle">
<strong>modern</strong> self-hosted file upload service</h2> A <strong>modern</strong> self-hosted file upload service
</h2>
<div class="columns"> <h3 class="subtitle" id="maxFileSize">
Maximum upload size per file is {{ maxFileSize }}
</h3>
<div class="columns is-gapless">
<div class="column is-hidden-mobile"></div> <div class="column is-hidden-mobile"></div>
<div class="column"> <div class="column">
<div class="content"> <div class="content">
<form id="form" action="" method="post" enctype="multipart/form-data"> <p class="subtitle" style="font-size: 1rem">
<div class="field"> Files uploaded through this No-JS uploader will not be associated to your account, if you have any.
<input type="file" name="files[]" multiple="multiple"> </p>
</div>
<div class="field">
<input type="submit" class="button is-danger" value="Upload">
</div>
</form>
</div> </div>
<div class="content"> <div class="content">
<p>Files uploaded through this No JS form will not be associated to your account, if you have any.</p> {{#if uploadDisabled }}
<a class="button is-danger" style="display: flex" href="auth">{{{ uploadDisabled }}}</a>
{{else}}
<form id="form" action="" method="post" enctype="multipart/form-data">
<div class="field">
<input type="file" name="files[]" multiple="multiple" style="width: 100%">
</div>
<div class="field">
<input type="submit" class="button is-danger" value="Upload" style="width: 100%">
</div>
</form>
{{/if}}
</div> </div>
</div> </div>
<div class="column is-hidden-mobile"></div> <div class="column is-hidden-mobile"></div>
</div> </div>
{{#if files}} {{#if files}}
<div id="uploads" style="display: block"> <div id="uploads" style="display: block">
{{#each files}} {{#each files}}
<div class="columns"> <div class="columns">
<div class="column is-hidden-mobile"></div> <div class="column is-hidden-mobile"></div>
<div class="column"> <div class="column">
{{#if this.image}} {{#if ./../errorMessage}}
<img class="is-unselectable" style="max-width: 200px" src="{{ this.url }}"> <p class="error">{{{ ./../errorMessage }}}</p>
{{/if}} {{/if}}
<p class="link"> {{#if this.url }}
<a href="{{ this.url }}" target="_blank">{{{ this.url }}}</a> <p class="link">
</p> <a href="{{ this.url }}" target="_blank">{{{ this.url }}}</a>
</div> </p>
<div class="column is-hidden-mobile"></div> {{/if}}
</div>
<div class="column is-hidden-mobile"></div>
</div>
{{/each}}
</div> </div>
{{/each}}
</div>
{{/if}} {{/if}}
<h3 id="links"> <div class="columns is-gapless">
<a href="https://fiery.me" title="Home"> <div class="column is-hidden-mobile"></div>
<span class="icon is-medium"> <div class="column">
<i class="icon-home icon-2x"></i> <div id="linksColumn" class="columns is-mobile is-multiline is-centered">
</span> <div class="column is-narrow">
</a> <a href="https://fiery.me" title="Home">
<a href="https://blog.fiery.me" title="Blog"> <span class="icon is-medium">
<span class="icon is-medium"> <i class="icon-home icon-2x"></i>
<i class="icon-archive icon-2x"></i> </span>
</span> </a>
</a> </div>
<a href="https://safe.fiery.me/sharex.txt" title="ShareX"> <div class="column is-narrow">
<span class="icon is-medium"> <a href="https://blog.fiery.me" title="Blog">
<i class="icon-sharex icon-2x"></i> <span class="icon is-medium">
</span> <i class="icon-archive icon-2x"></i>
</a> </span>
<a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj" target="_blank" title="Chrome extension"> </a>
<span class="icon is-medium"> </div>
<i class="icon-chrome icon-2x"></i> <div class="column is-narrow">
</span> <a id="ShareX" href="https://safe.fiery.me/safe.fiery.me.sxcu" title="ShareX">
</a> <span class="icon is-medium">
<a href="https://github.com/BobbyWibowo/uguush/tree/lolisafe-kde" target="_blank" title="Bash uploader"> <i class="icon-sharex icon-2x"></i>
<span class="icon is-medium"> </span>
<i class="icon-terminal icon-2x"></i> </a>
</span> </div>
</a> <div class="column is-narrow">
<a href="faq" title="FAQ"> <a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj" target="_blank" title="Chrome extension">
<span class="icon is-medium"> <span class="icon is-medium">
<i class="icon-help-circled icon-2x"></i> <i class="icon-chrome icon-2x"></i>
</span> </span>
</a> </a>
<a href="auth" title="Dashboard"> </div>
<span class="icon is-medium"> <div class="column is-narrow">
<i class="icon-gauge icon-2x"></i> <a href="https://github.com/BobbyWibowo/uguush/tree/lolisafe-kde" target="_blank" title="Bash uploader">
</span> <span class="icon is-medium">
</a> <i class="icon-terminal icon-2x"></i>
<a href="https://github.com/BobbyWibowo/lolisafe" target="_blank" title="GitHub"> </span>
<span class="icon is-medium"> </a>
<i class="icon-github-circled icon-2x"></i> </div>
</span> <div class="column is-narrow">
</a> <a href="faq" title="FAQ">
</h3> <span class="icon is-medium">
<i class="icon-help-circled icon-2x"></i>
</span>
</a>
</div>
<div class="column is-narrow">
<a href="auth" title="Dashboard">
<span class="icon is-medium">
<i class="icon-gauge icon-2x"></i>
</span>
</a>
</div>
<div class="column is-narrow">
<a href="https://github.com/BobbyWibowo/lolisafe" target="_blank" title="GitHub">
<span class="icon is-medium">
<i class="icon-github-circled icon-2x"></i>
</span>
</a>
</div>
</div>
</div>
<div class="column is-hidden-mobile"></div>
</div>
</div> </div>
</div> </div>
</section> </section>
</body> </body>
</html> </html>