Browse Source

Updates

* 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.
Bobby Wibowo 1 year ago
parent
commit
dd43acecea

+ 4 - 0
.editorconfig

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

+ 0 - 1
.gitignore

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

+ 6 - 0
.jsbeautifyrc

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

+ 33 - 0
.vscode/settings.json

@@ -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
+}

+ 5 - 4
controllers/albumsController.js

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

+ 3 - 3
controllers/authController.js

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

+ 2 - 2
controllers/tokenController.js

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

+ 2 - 13
controllers/uploadController.js

@@ -1,11 +1,11 @@
-const config = require('../config.js')
+const config = require('./../config')
 const path = require('path')
 const multer = require('multer')
 const randomstring = require('randomstring')
 const db = require('knex')(config.database)
 const crypto = require('crypto')
 const fs = require('fs')
-const utils = require('./utilsController.js')
+const utils = require('./utilsController')
 
 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({
     success: albumSuccess,
     description: albumSuccess ? null : 'Warning: Album may not have been properly updated.',

+ 4 - 4
controllers/utilsController.js

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

+ 1 - 1
database/migration.js

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

+ 6 - 6
lolisafe.js

@@ -1,7 +1,7 @@
-const config = require('./config.js')
-const api = require('./routes/api.js')
-const album = require('./routes/album.js')
-const nojs = require('./routes/nojs.js')
+const config = require('./config')
+const api = require('./routes/api')
+const album = require('./routes/album')
+const nojs = require('./routes/nojs')
 const express = require('express')
 const helmet = require('helmet')
 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
 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) => {
   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}`))

+ 9 - 7
pages/album.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
   <head>
 
     <meta charset="utf-8" />
@@ -10,11 +11,11 @@
     <title>safe.fiery.me &#8211; A small safe worth protecting.</title>
 
     <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=vvtL7Y3cjD">
-    <link rel="stylesheet" type="text/css" href="css/style.css?v=vvtL7Y3cjD">
-    <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="libs/axios/axios.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="js/album.js?v=vvtL7Y3cjD"></script>
+    <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=L4ZeQAC3XC">
+    <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=L4ZeQAC3XC"></script>
+    <script type="text/javascript" src="libs/axios/axios.min.js?v=L4ZeQAC3XC"></script>
+    <script type="text/javascript" src="js/album.js?v=L4ZeQAC3XC"></script>
 
     <!-- Open Graph tags -->
     <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/167px.png" sizes="167x167">
     <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="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">
 
   </head>
@@ -68,4 +69,5 @@
     </section>
 
   </body>
+
 </html>

+ 12 - 23
pages/auth.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
-  <head>
 
+  <head>
     <meta charset="utf-8" />
     <meta name="description" content="A pomf-like file uploading service that doesn't suck.">
     <meta name="keywords" content="upload,lolisafe,file,images,hosting,bobby,fiery">
@@ -10,12 +10,13 @@
     <title>safe.fiery.me &#8211; A small safe worth protecting.</title>
 
     <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=vvtL7Y3cjD">
-    <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=cjjyPrikAR">
-    <link rel="stylesheet" type="text/css" href="css/style.css?v=vvtL7Y3cjD">
-    <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="libs/axios/axios.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="js/auth.js?v=vvtL7Y3cjD"></script>
+    <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=L4ZeQAC3XC">
+    <link rel="stylesheet" type="text/css" href="css/style.css?v=L4ZeQAC3XC">
+    <link rel="stylesheet" type="text/css" href="css/auth.css?v=L4ZeQAC3XC">
+    <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=L4ZeQAC3XC"></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 -->
     <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/167px.png" sizes="167x167">
     <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="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">
-
-    <style>
-      /* ------------------
-          COLORS BASED ON
-          KDE BREEZE DARK
-      ------------------ */
-      section#login {
-        background-color: #232629;
-      }
-    </style>
-
   </head>
 
   <body>
-
-    <section id="login" class="hero is-fullheight">
+    <section id="login" class="hero is-fullheight" style="background-color: #232629">
       <div class="hero-body">
         <div class="container">
           <div class="columns is-centered">
@@ -109,6 +98,6 @@
         </div>
       </div>
     </section>
-
   </body>
+
 </html>

+ 14 - 22
pages/dashboard.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
-  <head>
 
+  <head>
     <meta charset="utf-8" />
     <meta name="description" content="A pomf-like file uploading service that doesn't suck.">
     <meta name="keywords" content="upload,lolisafe,file,images,hosting,bobby,fiery">
@@ -10,14 +10,14 @@
     <title>safe.fiery.me &#8211; A small safe worth protecting.</title>
 
     <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=vvtL7Y3cjD">
-    <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=cjjyPrikAR">
-    <link rel="stylesheet" type="text/css" href="css/style.css?v=vvtL7Y3cjD">
-    <link rel="stylesheet" type="text/css" href="css/dashboard.css?v=8XQkPhnc2S">
-    <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="libs/axios/axios.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="libs/clipboard.js/clipboard.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="js/dashboard.js?v=cjjyPrikAR"></script>
+    <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=L4ZeQAC3XC">
+    <link rel="stylesheet" type="text/css" href="css/style.css?v=L4ZeQAC3XC">
+    <link rel="stylesheet" type="text/css" href="css/dashboard.css?v=L4ZeQAC3XC">
+    <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=L4ZeQAC3XC"></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=L4ZeQAC3XC"></script>
+    <script type="text/javascript" src="js/dashboard.js?v=L4ZeQAC3XC"></script>
 
     <!-- Open Graph tags -->
     <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/167px.png" sizes="167x167">
     <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="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">
-
   </head>
 
   <body>
-
     <section id="auth" class="hero is-light is-fullheight">
-
       <div class="hero-body">
         <div class="container">
           <h1 class="title">
@@ -70,13 +67,10 @@
           </h2>
         </div>
       </div>
-
     </section>
 
     <section id="dashboard" class="section">
-
       <div id="panel" class="container">
-
         <h1 class="title">
           Dashboard
         </h1>
@@ -127,20 +121,18 @@
             <img src="images/logo.png">
           </div>
         </div>
-
       </div>
-
     </section>
 
     <div id="modal" class="modal">
       <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;">
-        <figure class="image" style="width: 200px; height: 200px; display: flex; align-items: center;">
+      <div class="modal-content">
+        <figure class="image">
           <img id="modalImage">
         </figure>
       </div>
       <button class="modal-close is-large" aria-label="close" onclick="panel.closeModal()"></button>
     </div>
-
   </body>
+
 </html>

File diff suppressed because it is too large
+ 15 - 24
pages/faq.html


+ 94 - 96
pages/home.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
-  <head>
 
+  <head>
     <meta charset="utf-8" />
     <meta name="description" content="A pomf-like file uploading service that doesn't suck.">
     <meta name="keywords" content="upload,lolisafe,file,images,hosting,bobby,fiery">
@@ -10,14 +10,15 @@
     <title>safe.fiery.me &#8211; A small safe worth protecting.</title>
 
     <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=vvtL7Y3cjD">
-    <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=cjjyPrikAR">
-    <link rel="stylesheet" type="text/css" href="css/style.css?v=vvtL7Y3cjD">
-    <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="libs/dropzone/dropzone.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="libs/axios/axios.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="libs/clipboard.js/clipboard.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="js/home.js?v=D6LvZYepOF"></script>
+    <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=L4ZeQAC3XC">
+    <link rel="stylesheet" type="text/css" href="css/style.css?v=L4ZeQAC3XC">
+    <link rel="stylesheet" type="text/css" href="css/home.css?v=L4ZeQAC3XC">
+    <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=L4ZeQAC3XC"></script>
+    <script type="text/javascript" src="libs/dropzone/dropzone.min.js?v=L4ZeQAC3XC"></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=L4ZeQAC3XC"></script>
+    <script type="text/javascript" src="js/home.js?v=L4ZeQAC3XC"></script>
 
     <!-- Open Graph tags -->
     <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/167px.png" sizes="167x167">
     <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="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">
-
-    <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>
 
   <body>
-
     <section class="hero is-fullheight has-text-centered" id="home">
       <div class="hero-body section">
         <div class="container">
@@ -87,21 +61,23 @@
             <img class="logo" src="images/logo_smol.png">
           </p>
           <h1 class="title">safe.fiery.me</h1>
-          <h2 class="subtitle">A
-            <strong>modern</strong> self-hosted file upload service</h2>
+          <h2 class="subtitle">
+            A <strong>modern</strong> self-hosted file upload service
+          </h2>
 
           <h3 class="subtitle" id="maxFileSize"></h3>
-          <div class="columns">
+
+          <div class="columns is-gapless">
             <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>
-              <div class="field" id="albumDiv" style="display: none">
+              <div id="albumDiv" class="field" style="display: none">
                 <p class="control select-wrapper">
                   <span class="select">
-                    <select id="albumSelect">
-                      <option value="">Upload to album</option>
-                    </select>
-                  </span>
+                  <select id="albumSelect">
+                    <option value="">Upload to album</option>
+                  </select>
+                </span>
                 </p>
               </div>
             </div>
@@ -109,7 +85,7 @@
           </div>
 
           <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">
                 <progress class="progress is-small is-danger" value="0" max="100"></progress>
@@ -120,11 +96,11 @@
                 </p>
                 <p class="clipboard-mobile is-hidden-desktop" style="display: none">
                   <a class="button is-info is-outlined clipboard-js" style="display: flex">
-                    <span class="icon">
-                      <i class="icon-clipboard-1"></i>
-                    </span>
-                    <span>Copy link to clipboard</span>
-                  </a>
+                  <span class="icon">
+                    <i class="icon-clipboard-1"></i>
+                  </span>
+                  <span>Copy link to clipboard</span>
+                </a>
                 </p>
               </div>
               <div class="column is-hidden-mobile"></div>
@@ -134,52 +110,74 @@
           <h3 class="subtitle">
             <a href="auth" id="loginLinkText"></a>
           </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>
     </section>
-
   </body>
+
 </html>

+ 31 - 0
public/css/auth.css

@@ -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;
+}

+ 32 - 4
public/css/dashboard.css

@@ -1,7 +1,7 @@
-/* ------------------
-    COLORS BASED ON
-    KDE BREEZE DARK
------------------- */
+#auth,
+#dashboard {
+  display: none
+}
 
 .button.is-breeze {
   background-color: #2980b9;
@@ -74,12 +74,16 @@ html {
 }
 
 .image-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
   width: 200px;
   height: 200px;
   margin: 9px;
   background-color: #31363b;
   overflow: hidden;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
   position: relative;
 }
@@ -102,6 +106,8 @@ html {
 }
 
 .image-container .controls {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
   position: absolute;
   top: .75rem;
@@ -142,12 +148,14 @@ html {
 
 .no-touch .image-container .file-checkbox {
   opacity: .25;
+  -webkit-transition: opacity .25s;
   transition: opacity .25s;
 }
 
 .no-touch .image-container .controls,
 .no-touch .image-container .details {
   opacity: 0;
+  -webkit-transition: opacity .25s;
   transition: opacity .25s;
 }
 
@@ -199,3 +207,23 @@ html {
   color: #eff0f1;
   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 - 0
public/css/home.css

@@ -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;
+}
+
[email protected] 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);
+  }
+}
+
[email protected] 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;
+}

+ 0 - 119
public/css/style.css

@@ -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; }
-
[email protected] 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 {
   background-color: #232629;
   color: #eff0f1;
@@ -123,29 +23,10 @@ a:hover {
   color: #3daee9;
 }
 
-section#home #b {
-  width: 200px;
-  height: 200px;
-  border-radius: 100%;
-}
-
 hr {
   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-focused,
 .input:active,

+ 1 - 1
public/js/home.js

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

+ 2 - 2
routes/album.js

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

+ 5 - 5
routes/api.js

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

+ 30 - 3
routes/nojs.js

@@ -1,12 +1,39 @@
+const config = require('./../config')
 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) => {
-  return res.render('nojs', { layout: false })
+  return res.render('nojs', renderOptions)
 })
 
 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)
 })
 

+ 16 - 40
views/album.handlebars

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
-	<head>
 
+  <head>
     <meta charset="utf-8" />
     <meta name="description" content="A pomf-like file uploading service that doesn't suck.">
     <meta name="keywords" content="upload,lolisafe,file,images,hosting,bobby,fiery">
@@ -10,10 +10,10 @@
     <title>{{ title }}</title>
 
     <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="../libs/bulma/bulma.min.css?v=vvtL7Y3cjD">
-    <link rel="stylesheet" type="text/css" href="../css/style.css?v=vvtL7Y3cjD">
-    <script type="text/javascript" src="../libs/sweetalert/sweetalert.min.js?v=vvtL7Y3cjD"></script>
-    <script type="text/javascript" src="../libs/axios/axios.min.js?v=vvtL7Y3cjD"></script>
+    <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=L4ZeQAC3XC">
+    <script type="text/javascript" src="../libs/sweetalert/sweetalert.min.js?v=L4ZeQAC3XC"></script>
+    <script type="text/javascript" src="../libs/axios/axios.min.js?v=L4ZeQAC3XC"></script>
 
     <!-- Open Graph tags -->
     <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/167px.png" sizes="167x167">
     <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="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">
+  </head>
 
-    <style>
-      /* ------------------
-          COLORS BASED ON
-          KDE BREEZE DARK
-      ------------------ */
-
-      html {
-        background-color: #232629;
-      }
-
-      .section {
-        background: none;
-      }
-    </style>
-
-	</head>
-
-	<body>
-
-		<section class="section">
-
+  <body>
+    <section class="section">
       <div class="container">
-
         <h1 id="title" class="title">
           {{ title }}
         </h1>
         <h1 id="count" class="subtitle">
           {{ count }} files
         </h1>
-
         {{#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}}
-
         <hr>
-
         <div id="table" class="columns is-multiline is-mobile is-centered">
           {{#each files}}
-          <div class="column is-narrow">
-            <a href="{{ this.file }}" target="_blank">{{{ this.thumb }}}</a>
-          </div>
+            <div class="column is-narrow">
+              <a href="{{ this.file }}" target="_blank">{{{ this.thumb }}}</a>
+            </div>
           {{/each}}
         </div>
-
       </div>
+    </section>
+  </body>
 
-		</section>
-
-	</body>
 </html>

+ 113 - 97
views/nojs.handlebars

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
-	<head>
 
+  <head>
     <meta charset="utf-8" />
     <meta name="description" content="A pomf-like file uploading service that doesn't suck.">
     <meta name="keywords" content="upload,lolisafe,file,images,hosting,bobby,fiery">
@@ -10,9 +10,10 @@
     <title>safe.fiery.me &#8211; A small safe worth protecting.</title>
 
     <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=vvtL7Y3cjD">
-    <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=cjjyPrikAR">
-    <link rel="stylesheet" type="text/css" href="css/style.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=L4ZeQAC3XC">
+    <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 -->
     <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/167px.png" sizes="167x167">
     <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="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">
-
-    <style>
-      #form input {
-        width: 100%;
-      }
-
-      #links {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      #links a {
-        display: block;
-        margin: 5px;
-      }
-    </style>
-
-	</head>
+  </head>
 
   <body>
-
     <section class="hero is-fullheight has-text-centered" id="home">
       <div class="hero-body section">
         <div class="container">
@@ -74,94 +56,128 @@
             <img class="logo" src="images/logo_smol.png">
           </p>
           <h1 class="title">safe.fiery.me</h1>
-          <h2 class="subtitle">A
-            <strong>modern</strong> self-hosted file upload service</h2>
+          <h2 class="subtitle">
+            A <strong>modern</strong> self-hosted file upload service
+          </h2>
+
+          <h3 class="subtitle" id="maxFileSize">
+            Maximum upload size per file is {{ maxFileSize }}
+          </h3>
 
-          <div class="columns">
+          <div class="columns is-gapless">
             <div class="column is-hidden-mobile"></div>
             <div class="column">
               <div class="content">
-                <form id="form" action="" method="post" enctype="multipart/form-data">
-                  <div class="field">
-                    <input type="file" name="files[]" multiple="multiple">
-                  </div>
-                  <div class="field">
-                    <input type="submit" class="button is-danger" value="Upload">
-                  </div>
-                </form>
+                <p class="subtitle" style="font-size: 1rem">
+                  Files uploaded through this No-JS uploader will not be associated to your account, if you have any.
+                </p>
               </div>
               <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 class="column is-hidden-mobile"></div>
           </div>
 
           {{#if files}}
-          <div id="uploads" style="display: block">
-            {{#each files}}
-            <div class="columns">
-              <div class="column is-hidden-mobile"></div>
-              <div class="column">
-                {{#if this.image}}
-                <img class="is-unselectable" style="max-width: 200px" src="{{ this.url }}">
-                {{/if}}
-                <p class="link">
-                  <a href="{{ this.url }}" target="_blank">{{{ this.url }}}</a>
-                </p>
-              </div>
-              <div class="column is-hidden-mobile"></div>
+            <div id="uploads" style="display: block">
+              {{#each files}}
+                <div class="columns">
+                  <div class="column is-hidden-mobile"></div>
+                  <div class="column">
+                    {{#if ./../errorMessage}}
+                      <p class="error">{{{ ./../errorMessage }}}</p>
+                    {{/if}}
+                    {{#if this.url }}
+                      <p class="link">
+                        <a href="{{ this.url }}" target="_blank">{{{ this.url }}}</a>
+                      </p>
+                    {{/if}}
+                  </div>
+                  <div class="column is-hidden-mobile"></div>
+                </div>
+              {{/each}}
             </div>
-            {{/each}}
-          </div>
           {{/if}}
 
-          <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 href="https://safe.fiery.me/sharex.txt" 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>
     </section>
-
   </body>
+
 </html>