Use templates instead of raw pages

lolisafe.js

@@ -21,7 +21,11 @@ fs.existsSync('./' + config.uploads.folder + '/zips') || fs.mkdirSync('./' + con
 safe.use(helmet());
 safe.set('trust proxy', 1);
 
-safe.engine('handlebars', exphbs({ defaultLayout: 'main' }));
+safe.engine('handlebars', exphbs({ 
+	extname: 'handlebars',
+	partialsDir: `${__dirname}/views/partials/`
+}));
+
 safe.set('view engine', 'handlebars');
 safe.enable('view cache');
 
@@ -41,14 +45,10 @@ safe.use('/', album);
 safe.use('/api', api);
 
 for (let page of config.pages) {
-	let root = './pages/';
-	if (fs.existsSync(`./pages/custom/${page}.html`)) {
-		root = './pages/custom/';
-	}
 	if (page === 'home') {
-		safe.get('/', (req, res, next) => res.sendFile(`${page}.html`, { root: root }));
+		safe.get('/', (req, res, next) => res.render('home', { layout: false, config: config }));
 	} else {
-		safe.get(`/${page}`, (req, res, next) => res.sendFile(`${page}.html`, { root: root }));
+		safe.get(`/${page}`, (req, res, next) => res.render(page, { layout:false, config: config }));
 	}
 }
 

package.json

@@ -27,7 +27,7 @@
     "multer": "^1.3.0",
     "randomstring": "^1.1.5",
     "sharp": "^0.21.0",
-    "sqlite3": "^4.0.6"
+    "sqlite3": "^4.0.8"
   },
   "devDependencies": {
     "eslint": "^4.18.1",

pages/album.html

@@ -6,31 +6,31 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-		<link rel="apple-touch-icon" sizes="180x180" href="https://lolisafe.moe/images/icons/apple-touch-icon.png?v=XBreOJMe24">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-32x32.png?v=XBreOJMe24" sizes="32x32">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-16x16.png?v=XBreOJMe24" sizes="16x16">
-		<link rel="manifest" href="https://lolisafe.moe/images/icons/manifest.json?v=XBreOJMe24">
-		<link rel="mask-icon" href="https://lolisafe.moe/images/icons/safari-pinned-tab.svg?v=XBreOJMe24" color="#5bbad5">
-		<link rel="shortcut icon" href="https://lolisafe.moe/images/icons/favicon.ico?v=XBreOJMe24">
-		<meta name="apple-mobile-web-app-title" content="lolisafe">
-		<meta name="application-name" content="lolisafe">
-		<meta name="msapplication-config" content="https://lolisafe.moe/images/icons/browserconfig.xml?v=XBreOJMe24">
+		<link rel="apple-touch-icon" sizes="180x180" href="https://safe.meido.space/images/icons/apple-touch-icon.png?v=XBreOJMe24">
+		<link rel="icon" type="image/png" href="https://safe.meido.space/images/icons/favicon-32x32.png?v=XBreOJMe24" sizes="32x32">
+		<link rel="icon" type="image/png" href="https://safe.meido.space/images/icons/favicon-16x16.png?v=XBreOJMe24" sizes="16x16">
+		<link rel="manifest" href="https://safe.meido.space/images/icons/manifest.json?v=XBreOJMe24">
+		<link rel="mask-icon" href="https://safe.meido.space/images/icons/safari-pinned-tab.svg?v=XBreOJMe24" color="#5bbad5">
+		<link rel="shortcut icon" href="https://safe.meido.space/images/icons/favicon.ico?v=XBreOJMe24">
+		<meta name="apple-mobile-web-app-title" content="meidosafe">
+		<meta name="application-name" content="meidosafe">
+		<meta name="msapplication-config" content="https://safe.meido.space/images/icons/browserconfig.xml?v=XBreOJMe24">
 		<meta name="theme-color" content="#ffffff">
 
-		<meta property="og:url" content="https://lolisafe.moe" />
+		<meta property="og:url" content="https://safe.meido.space" />
 		<meta property="og:type" content="website" />
-		<meta property="og:title" content="lolisafe.moe | A small safe worth protecting." />
+		<meta property="og:title" content="safe.meido.space | A small safe worth protecting." />
 		<meta property="og:description" content="A pomf-like file uploading service that doesn't suck." />
-		<meta property="og:image" content="http://lolisafe.moe/images/logo_square.png" />
-		<meta property="og:image:secure_url" content="https://lolisafe.moe/images/logo_square.png" />
+		<meta property="og:image" content="http://safe.meido.space/images/logo_square.png" />
+		<meta property="og:image:secure_url" content="https://safe.meido.space/images/logo_square.png" />
 
 		<meta name="twitter:card" content="summary">
-		<meta name="twitter:title" content="lolisafe.moe | A small safe worth protecting.">
+		<meta name="twitter:title" content="safe.meido.space | A small safe worth protecting.">
 		<meta name="twitter:description" content="A pomf-like file uploading service that doesn't suck.">
-		<meta name="twitter:image" content="https://lolisafe.moe/files/images/logo_square.png">
-		<meta name="twitter:image:src" content="https://lolisafe.moe/images/logo_square.png">
+		<meta name="twitter:image" content="https://safe.meido.space/files/images/logo_square.png">
+		<meta name="twitter:image:src" content="https://safe.meido.space/images/logo_square.png">
 
-		<title>lolisafe - A small safe worth protecting.</title>
+		<title>meidosafe - A file safe protected by Muku.</title>
 		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.0/css/bulma.min.css">
 		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
 		<link rel="stylesheet" type="text/css" href="/css/style.css">

pages/auth.html

@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-
-		<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
-		<meta name="keywords" content="upload,lolisafe,file,images,hosting">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-		<link rel="apple-touch-icon" sizes="180x180" href="https://lolisafe.moe/images/icons/apple-touch-icon.png?v=XBreOJMe24">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-32x32.png?v=XBreOJMe24" sizes="32x32">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-16x16.png?v=XBreOJMe24" sizes="16x16">
-		<link rel="manifest" href="https://lolisafe.moe/images/icons/manifest.json?v=XBreOJMe24">
-		<link rel="mask-icon" href="https://lolisafe.moe/images/icons/safari-pinned-tab.svg?v=XBreOJMe24" color="#5bbad5">
-		<link rel="shortcut icon" href="https://lolisafe.moe/images/icons/favicon.ico?v=XBreOJMe24">
-		<meta name="apple-mobile-web-app-title" content="lolisafe">
-		<meta name="application-name" content="lolisafe">
-		<meta name="msapplication-config" content="https://lolisafe.moe/images/icons/browserconfig.xml?v=XBreOJMe24">
-		<meta name="theme-color" content="#ffffff">
-
-		<meta property="og:url" content="https://lolisafe.moe" />
-		<meta property="og:type" content="website" />
-		<meta property="og:title" content="lolisafe.moe | A small safe worth protecting." />
-		<meta property="og:description" content="A pomf-like file uploading service that doesn't suck." />
-		<meta property="og:image" content="http://lolisafe.moe/images/logo_square.png" />
-		<meta property="og:image:secure_url" content="https://lolisafe.moe/images/logo_square.png" />
-
-		<meta name="twitter:card" content="summary">
-		<meta name="twitter:title" content="lolisafe.moe | A small safe worth protecting.">
-		<meta name="twitter:description" content="A pomf-like file uploading service that doesn't suck.">
-		<meta name="twitter:image" content="https://lolisafe.moe/files/images/logo_square.png">
-		<meta name="twitter:image:src" content="https://lolisafe.moe/images/logo_square.png">
-
-		<title>lolisafe - A small safe worth protecting.</title>
-		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.0/css/bulma.min.css">
-		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
-		<link rel="stylesheet" type="text/css" href="/css/style.css">
-		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
-		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
-		<script type="text/javascript" src="https://use.fontawesome.com/cd26baa9bd.js"></script>
-		<script type="text/javascript" src="/js/auth.js"></script>
-	</head>
-	<body>
-
-		<style type="text/css">
-			section#login {
-				background-color: #f5f6f8;
-			}
-		</style>
-
-		<section id='login' class="hero is-fullheight">
-			<div class="hero-body">
-				<div class="container">
-					<h1 class="title">
-						Dashboard Access
-					</h1>
-					<h2 class="subtitle">
-						Login or register
-					</h2>
-					<div class="columns">
-						<div class="column">
-							<p class="control">
-								<input id='user' class="input" type="text" placeholder="Your username">
-							</p>
-							<p class="control">
-								<input id='pass' class="input" type="password" placeholder="Your password">
-							</p>
-
-							<p class="control has-addons is-pulled-right">
-								<a class="button" id='registerBtn' onclick="page.do('register')">
-									<span>Register</span>
-								</a>
-								<a class="button" id='loginBtn' onclick="page.do('login')">
-									<span>Log in</span>
-								</a>
-							</p>
-
-						</div>
-						<div class="column is-hidden-mobile"></div>
-						<div class="column is-hidden-mobile"></div>
-					</div>
-				</div>
-			</div>
-		</section>
-
-	</body>
-</html>

pages/dashboard.html

@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-
-		<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
-		<meta name="keywords" content="upload,lolisafe,file,images,hosting">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-		<link rel="apple-touch-icon" sizes="180x180" href="https://lolisafe.moe/images/icons/apple-touch-icon.png?v=XBreOJMe24">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-32x32.png?v=XBreOJMe24" sizes="32x32">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-16x16.png?v=XBreOJMe24" sizes="16x16">
-		<link rel="manifest" href="https://lolisafe.moe/images/icons/manifest.json?v=XBreOJMe24">
-		<link rel="mask-icon" href="https://lolisafe.moe/images/icons/safari-pinned-tab.svg?v=XBreOJMe24" color="#5bbad5">
-		<link rel="shortcut icon" href="https://lolisafe.moe/images/icons/favicon.ico?v=XBreOJMe24">
-		<meta name="apple-mobile-web-app-title" content="lolisafe">
-		<meta name="application-name" content="lolisafe">
-		<meta name="msapplication-config" content="https://lolisafe.moe/images/icons/browserconfig.xml?v=XBreOJMe24">
-		<meta name="theme-color" content="#ffffff">
-
-		<meta property="og:url" content="https://lolisafe.moe" />
-		<meta property="og:type" content="website" />
-		<meta property="og:title" content="lolisafe.moe | A small safe worth protecting." />
-		<meta property="og:description" content="A pomf-like file uploading service that doesn't suck." />
-		<meta property="og:image" content="http://lolisafe.moe/images/logo_square.png" />
-		<meta property="og:image:secure_url" content="https://lolisafe.moe/images/logo_square.png" />
-
-		<meta name="twitter:card" content="summary">
-		<meta name="twitter:title" content="lolisafe.moe | A small safe worth protecting.">
-		<meta name="twitter:description" content="A pomf-like file uploading service that doesn't suck.">
-		<meta name="twitter:image" content="https://lolisafe.moe/files/images/logo_square.png">
-		<meta name="twitter:image:src" content="https://lolisafe.moe/images/logo_square.png">
-
-		<title>lolisafe - A small safe worth protecting.</title>
-		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.0/css/bulma.min.css">
-		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
-		<link rel="stylesheet" type="text/css" href="/css/style.css">
-		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
-		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
-		<script type="text/javascript" src="https://use.fontawesome.com/cd26baa9bd.js"></script>
-		<script type="text/javascript" src="/js/dashboard.js"></script>
-	</head>
-	<body>
-
-		<section id='auth' class="hero is-light is-fullheight">
-
-			<div class="hero-body">
-				<div class="container">
-					<h1 class="title">
-						Admin dashboard
-					</h1>
-					<h2 class="subtitle">
-						<p class="control has-addons">
-							<input id='token' class="input is-danger" type="text" placeholder="Your admin token">
-							<a id='tokenSubmit' class="button is-danger is-outlined">Check</a>
-						</p>
-					</h2>
-				</div>
-			</div>
-
-		</section>
-
-		<section id='dashboard' class="section">
-
-			<div id="panel" class="container">
-				<h1 class="title">Dashboard</h1>
-				<h2 class="subtitle">A simple <strong>dashboard</strong>, to sort your uploaded stuff</h2>
-				<hr>
-				<div class="columns">
-					<div class="column is-3">
-						<aside class="menu" id="menu">
-							<p class="menu-label">General</p>
-							<ul class="menu-list">
-								<li><a href="/">Frontpage</a></li>
-								<li><a id="itemUploads" onclick="panel.getUploads()">Uploads</a></li>
-							</ul>
-							<p class="menu-label">Albums</p>
-							<ul class="menu-list">
-								<li><a id="itemManageGallery" onclick="panel.getAlbums()">Manage your albums</a></li>
-								<li>
-									<ul id='albumsContainer'></ul>
-								</li>
-							</ul>
-							<p class="menu-label">Administration</p>
-							<ul class="menu-list">
-								<li><a id="itemTokens" onclick="panel.changeToken()">Change your token</a></li>
-								<li><a id="itemPassword" onclick="panel.changePassword()">Change your password</a></li>
-								<li><a id="itemLogout"onclick="panel.logout()">Logout</a></li>
-							</ul>
-						</aside>
-					</div>
-					<div class="column has-text-centered" id='page'>
-						<img src="/images/logo.png">
-					</div>
-				</div>
-			</div>
-
-		</section>
-	</body>
-</html>

pages/faq.html

@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
-		<meta name="keywords" content="upload,lolisafe,file,images,hosting">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-		<link rel="apple-touch-icon" sizes="180x180" href="https://lolisafe.moe/images/icons/apple-touch-icon.png?v=XBreOJMe24">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-32x32.png?v=XBreOJMe24" sizes="32x32">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-16x16.png?v=XBreOJMe24" sizes="16x16">
-		<link rel="manifest" href="https://lolisafe.moe/images/icons/manifest.json?v=XBreOJMe24">
-		<link rel="mask-icon" href="https://lolisafe.moe/images/icons/safari-pinned-tab.svg?v=XBreOJMe24" color="#5bbad5">
-		<link rel="shortcut icon" href="https://lolisafe.moe/images/icons/favicon.ico?v=XBreOJMe24">
-		<meta name="apple-mobile-web-app-title" content="lolisafe">
-		<meta name="application-name" content="lolisafe">
-		<meta name="msapplication-config" content="https://lolisafe.moe/images/icons/browserconfig.xml?v=XBreOJMe24">
-		<meta name="theme-color" content="#ffffff">
-
-		<meta property="og:url" content="https://lolisafe.moe" />
-		<meta property="og:type" content="website" />
-		<meta property="og:title" content="lolisafe.moe | A small safe worth protecting." />
-		<meta property="og:description" content="A pomf-like file uploading service that doesn't suck." />
-		<meta property="og:image" content="http://lolisafe.moe/images/logo_square.png" />
-		<meta property="og:image:secure_url" content="https://lolisafe.moe/images/logo_square.png" />
-
-		<meta name="twitter:card" content="summary">
-		<meta name="twitter:title" content="lolisafe.moe | A small safe worth protecting.">
-		<meta name="twitter:description" content="A pomf-like file uploading service that doesn't suck.">
-		<meta name="twitter:image" content="https://lolisafe.moe/files/images/logo_square.png">
-		<meta name="twitter:image:src" content="https://lolisafe.moe/images/logo_square.png">
-
-		<title>lolisafe - A small safe worth protecting.</title>
-		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.0/css/bulma.min.css">
-		<link rel="stylesheet" type="text/css" href="/css/style.css">
-	</head>
-
-	<body>
-		<section class="hero is-fullheight has-text-centered" id="home">
-			<div class="hero-body">
-				<div class="container has-text-left">
-
-					<h2 class='subtitle'>What is lolisafe?</h2>
-					<article class="message">
-						<div class="message-body">
-							lolisafe 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.
-						</div>
-					</article>
-
-					<h2 class='subtitle'>Will you keep my files forever?</h2>
-					<article class="message">
-						<div class="message-body">
-							Unless we receive a copyright complain or some other bullshit, we will.
-						</div>
-					</article>
-
-					<h2 class='subtitle'>How can I keep track of my uploads?</h2>
-					<article class="message">
-						<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.
-						</div>
-					</article>
-
-					<h2 class='subtitle'>What are albums?</h2>
-					<article class="message">
-						<div class="message-body">
-							Albums are a simple way of sorting uploads together. Right now you can create albums through the dashboard and use them only with <a target="_blank" href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">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.
-						</div>
-					</article>
-
-					<h2 class='subtitle'>Why should I use this?</h2>
-					<article class="message">
-						<div class="message-body">
-							There are too many file upload services out there, and a lot of them rely on the foundations of pomf which is ancient. In a desperate and unsuccessful attempt of finding a good file uploader that's easily extendable, lolisafe was born. We give you control over your files, we give you a way to sort your uploads into albums for ease of access and we give you an api to use with ShareX or any other thing that let's you make POST requests. Awesome isn't it? Just like you.
-						</div>
-					</article>
-
-				</div>
-			</div>
-		</section>
-
-	</body>
-</html>

pages/home.html

@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
-		<meta name="keywords" content="upload,lolisafe,file,images,hosting">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-		<link rel="apple-touch-icon" sizes="180x180" href="https://lolisafe.moe/images/icons/apple-touch-icon.png?v=XBreOJMe24">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-32x32.png?v=XBreOJMe24" sizes="32x32">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-16x16.png?v=XBreOJMe24" sizes="16x16">
-		<link rel="manifest" href="https://lolisafe.moe/images/icons/manifest.json?v=XBreOJMe24">
-		<link rel="mask-icon" href="https://lolisafe.moe/images/icons/safari-pinned-tab.svg?v=XBreOJMe24" color="#5bbad5">
-		<link rel="shortcut icon" href="https://lolisafe.moe/images/icons/favicon.ico?v=XBreOJMe24">
-		<meta name="apple-mobile-web-app-title" content="lolisafe">
-		<meta name="application-name" content="lolisafe">
-		<meta name="msapplication-config" content="https://lolisafe.moe/images/icons/browserconfig.xml?v=XBreOJMe24">
-		<meta name="theme-color" content="#ffffff">
-
-		<meta property="og:url" content="https://lolisafe.moe" />
-		<meta property="og:type" content="website" />
-		<meta property="og:title" content="lolisafe.moe | A small safe worth protecting." />
-		<meta property="og:description" content="A pomf-like file uploading service that doesn't suck." />
-		<meta property="og:image" content="http://lolisafe.moe/images/logo_square.png" />
-		<meta property="og:image:secure_url" content="https://lolisafe.moe/images/logo_square.png" />
-
-		<meta name="twitter:card" content="summary">
-		<meta name="twitter:title" content="lolisafe.moe | A small safe worth protecting.">
-		<meta name="twitter:description" content="A pomf-like file uploading service that doesn't suck.">
-		<meta name="twitter:image" content="https://lolisafe.moe/files/images/logo_square.png">
-		<meta name="twitter:image:src" content="https://lolisafe.moe/images/logo_square.png">
-
-		<title>lolisafe - A small safe worth protecting.</title>
-		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.0/css/bulma.min.css">
-		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
-		<link rel="stylesheet" type="text/css" href="/css/style.css">
-		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
-		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
-		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
-		<script type="text/javascript" src="/js/home.js"></script>
-	</head>
-
-	<body>
-		<section class="hero is-fullheight has-text-centered" id="home">
-			<div class="hero-body">
-				<div class="container">
-					<p id="b">
-						<img class="logo" src="/images/logo_smol.png">
-					</p>
-					<h1 class="title">lolisafe</h1>
-					<h2 class="subtitle">A <strong>modern</strong> self-hosted file upload service</h2>
-
-					<h3 class="subtitle" id="maxFileSize"></h3>
-					<div class="columns">
-						<div class="column is-hidden-mobile"></div>
-						<div class="column" id="uploadContainer">
-							<a id="loginToUpload" href="/auth" class="button is-danger">Running in private mode. Log in to upload.</a>
-							<div class="field" id="albumDiv" style="display: none">
-								<p class="control select-wrapper">
-									<span class="select">
-										<select id="albumSelect">
-											<option value="">Upload to album</option>
-										</select>
-									</span>
-								</p>
-							</div>
-						</div>
-						<div class="column is-hidden-mobile"></div>
-					</div>
-
-					<div id="uploads">
-						<div id="template" class="columns">
-							<div class="column is-hidden-mobile"></div>
-							<div class="column">
-								<progress class="progress is-small is-danger" value="0" max="100" data-dz-uploadprogress></progress>
-								<p data-dz-errormessage></p>
-								<p class="link"></p>
-							</div>
-							<div class="column is-hidden-mobile"></div>
-						</div>
-					</div>
-
-					<h3 class="subtitle"><a href="/auth" id="loginLinkText"></a></h3>
-					<h3 id="links">
-						<a href="https://github.com/WeebDev/lolisafe" target="_blank" class="is-danger">View on GitHub</a><span>|</span><a id="ShareX" href="https://lolisafe.moe/sharex.txt">ShareX</a><span>|</span><a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj" target="_blank" class="is-danger">Chrome extension</a><span>|</span><a href="/faq" class="is-danger">FAQ</a><span>|</span><a href="/auth" target="_blank" class="is-danger">Dashboard</a>
-					</h3>
-
-				</div>
-			</div>
-		</section>
-
-	</body>
-</html>

routes/album.js

@@ -42,7 +42,7 @@ routes.get('/a/:identifier', async (req, res, next) => {
 	let enableDownload = false;
 	if (config.uploads.generateZips) enableDownload = true;
 
-	return res.render('album', {
+	return res.render('album_public', {
 		layout: false,
 		title: album.name,
 		count: files.length,

views/album.handlebars

@@ -1,74 +1,24 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
-		<meta name="keywords" content="upload,lolisafe,file,images,hosting">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-		<link rel="apple-touch-icon" sizes="180x180" href="https://lolisafe.moe/images/icons/apple-touch-icon.png?v=XBreOJMe24">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-32x32.png?v=XBreOJMe24" sizes="32x32">
-		<link rel="icon" type="image/png" href="https://lolisafe.moe/images/icons/favicon-16x16.png?v=XBreOJMe24" sizes="16x16">
-		<link rel="manifest" href="https://lolisafe.moe/images/icons/manifest.json?v=XBreOJMe24">
-		<link rel="mask-icon" href="https://lolisafe.moe/images/icons/safari-pinned-tab.svg?v=XBreOJMe24" color="#5bbad5">
-		<link rel="shortcut icon" href="https://lolisafe.moe/images/icons/favicon.ico?v=XBreOJMe24">
-		<meta name="apple-mobile-web-app-title" content="lolisafe">
-		<meta name="application-name" content="lolisafe">
-		<meta name="msapplication-config" content="https://lolisafe.moe/images/icons/browserconfig.xml?v=XBreOJMe24">
-		<meta name="theme-color" content="#ffffff">
-
-		<meta property="og:url" content="https://lolisafe.moe" />
-		<meta property="og:type" content="website" />
-		<meta property="og:title" content="{{ title }} | {{ count }} files" />
-		<meta property="og:description" content="lolisafe.moe | A small safe worth protecting." />
-		<meta property="og:image" content="{{ thumb }}" />
-		<meta property="og:image:secure_url" content="{{ thumb }}" />
-
-		<meta name="twitter:card" content="summary">
-		<meta name="twitter:title" content="{{ title }} | {{ count }} files">
-		<meta name="twitter:description" content="lolisafe.moe | A small safe worth protecting.">
-		<meta name="twitter:image" content="{{ thumb }}">
-		<meta name="twitter:image:src" content="{{ thumb }}">
-
-		<title>{{ title }}</title>
-		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.0/css/bulma.min.css">
-		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
-		<link rel="stylesheet" type="text/css" href="/css/style.css">
-		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
+{{#> base}}
+    {{#*inline "head-block"}}
+       <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
-	</head>
-
-	<body>
-
-		<section class="hero is-fullheight">
+        <script type="text/javascript" src="/js/album.js"></script>
+    {{/inline}}
+    {{#*inline "body-block"}}
+        <section class="hero is-fullheight">
 			<div class="hero-head">
 				<div class="container">
-					<div class="columns">
-						<div class="column is-9">
-							<h1 class="title" id='title' style='margin-top: 1.5rem;'>{{ title }}</h1>
-							<h1 class="subtitle" id='count'>{{ count }} files</h1>
-						</div>
-						<div class="column is-3" style="text-align: right; padding-top: 45px;">
-							{{#if enableDownload}}
-								<a class="button is-primary is-outlined" title="Download album" href="/api/album/zip/{{ identifier }}">Download Album</a>
-							{{/if}}
-						</div>
-					</div>
+					<h1 class="title" id='title' style='margin-top: 1.5rem;'></h1>
+					<h1 class="subtitle" id='count'></h1>
 					<hr>
 				</div>
 			</div>
 			<div class="hero-body">
 				<div class="container" id='container'>
-					<div class="columns is-multiline is-mobile" id="table">
-						{{#each files}}
-						<div class="column is-2">
-							<a href="{{ this.file }}" target="_blank">{{{ this.thumb }}}</a>
-						</div>
-						{{/each}}
-					</div>
+
 				</div>
 			</div>
 		</section>
-
-	</body>
-</html>
+    {{/inline}}
+{{/base}}

views/album_public.handlebars

@@ -0,0 +1,52 @@
+{{#> base}}
+	{{#*inline "cards-block"}}
+        <meta property="og:url" content="https://lolisafe.moe" />
+		<meta property="og:type" content="website" />
+		<meta property="og:title" content="{{ title }} | {{ count }} files" />
+		<meta property="og:description" content="lolisafe.moe | A small safe worth protecting." />
+		<meta property="og:image" content="{{ thumb }}" />
+		<meta property="og:image:secure_url" content="{{ thumb }}" />
+
+		<meta name="twitter:card" content="summary">
+		<meta name="twitter:title" content="{{ title }} | {{ count }} files">
+		<meta name="twitter:description" content="lolisafe.moe | A small safe worth protecting.">
+		<meta name="twitter:image" content="{{ thumb }}">
+		<meta name="twitter:image:src" content="{{ thumb }}">
+    {{/inline}}
+		{{#*inline "head-block"}}
+				<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
+				<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
+    {{/inline}}
+    {{#*inline "body-block"}}
+		<section class="hero is-fullheight">
+			<div class="hero-head">
+				<div class="container">
+					<div class="columns">
+						<div class="column is-9">
+							<h1 class="title" id='title' style='margin-top: 1.5rem;'>{{ title }}</h1>
+							<h1 class="subtitle" id='count'>{{ count }} files</h1>
+						</div>
+						<div class="column is-3" style="text-align: right; padding-top: 45px;">
+							{{#if enableDownload}}
+								<a class="button is-primary is-outlined" title="Download album" href="/api/album/zip/{{ identifier }}">Download Album</a>
+							{{/if}}
+						</div>
+					</div>
+					<hr>
+				</div>
+			</div>
+			<div class="hero-body">
+				<div class="container" id='container'>
+					<div class="columns is-multiline is-mobile" id="table">
+						{{#each files}}
+						<div class="column is-2">
+							<a href="{{ this.file }}" target="_blank">{{{ this.thumb }}}</a>
+						</div>
+						{{/each}}
+					</div>
+				</div>
+			</div>
+		</section>
+    {{/inline}}
+{{/base}}

views/auth.handlebars

@@ -0,0 +1,51 @@
+{{#> base}}
+    {{#*inline "head-block"}}
+        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
+        <script type="text/javascript" src="https://use.fontawesome.com/cd26baa9bd.js"></script>
+        <script type="text/javascript" src="/js/auth.js"></script>
+    {{/inline}}
+    {{#*inline "body-block"}}
+        <style type="text/css">
+			section#login {
+				background-color: #f5f6f8;
+			}
+		</style>
+
+		<section id='login' class="hero is-fullheight">
+			<div class="hero-body">
+				<div class="container">
+					<h1 class="title">
+						Dashboard Access
+					</h1>
+					<h2 class="subtitle">
+						Login or register
+					</h2>
+					<div class="columns">
+						<div class="column">
+							<p class="control">
+								<input id='user' class="input" type="text" placeholder="Your username">
+							</p>
+							<p class="control">
+								<input id='pass' class="input" type="password" placeholder="Your password">
+							</p>
+
+							<p class="control has-addons is-pulled-right">
+								<a class="button" id='registerBtn' onclick="page.do('register')">
+									<span>Register</span>
+								</a>
+								<a class="button" id='loginBtn' onclick="page.do('login')">
+									<span>Log in</span>
+								</a>
+							</p>
+
+						</div>
+						<div class="column is-hidden-mobile"></div>
+						<div class="column is-hidden-mobile"></div>
+					</div>
+				</div>
+			</div>
+		</section>
+    {{/inline}}
+{{/base}}

views/dashboard.handlebars

@@ -0,0 +1,65 @@
+{{#> base}}
+    {{#*inline "head-block"}}
+		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
+        <script type="text/javascript" src="https://use.fontawesome.com/cd26baa9bd.js"></script>
+        <script type="text/javascript" src="/js/dashboard.js"></script>
+    {{/inline}}
+    {{#*inline "body-block"}}
+        <section id='auth' class="hero is-light is-fullheight">
+
+			<div class="hero-body">
+				<div class="container">
+					<h1 class="title">
+						Admin dashboard
+					</h1>
+					<h2 class="subtitle">
+						<p class="control has-addons">
+							<input id='token' class="input is-danger" type="text" placeholder="Your admin token">
+							<a id='tokenSubmit' class="button is-danger is-outlined">Check</a>
+						</p>
+					</h2>
+				</div>
+			</div>
+
+		</section>
+
+		<section id='dashboard' class="section">
+
+			<div id="panel" class="container">
+				<h1 class="title">Dashboard</h1>
+				<h2 class="subtitle">A simple <strong>dashboard</strong>, to sort your uploaded stuff</h2>
+				<hr>
+				<div class="columns">
+					<div class="column is-3">
+						<aside class="menu" id="menu">
+							<p class="menu-label">General</p>
+							<ul class="menu-list">
+								<li><a href="/">Frontpage</a></li>
+								<li><a id="itemUploads" onclick="panel.getUploads()">Uploads</a></li>
+							</ul>
+							<p class="menu-label">Albums</p>
+							<ul class="menu-list">
+								<li><a id="itemManageGallery" onclick="panel.getAlbums()">Manage your albums</a></li>
+								<li>
+									<ul id='albumsContainer'></ul>
+								</li>
+							</ul>
+							<p class="menu-label">Administration</p>
+							<ul class="menu-list">
+								<li><a id="itemTokens" onclick="panel.changeToken()">Change your token</a></li>
+								<li><a id="itemPassword" onclick="panel.changePassword()">Change your password</a></li>
+								<li><a id="itemLogout"onclick="panel.logout()">Logout</a></li>
+							</ul>
+						</aside>
+					</div>
+					<div class="column has-text-centered" id='page'>
+						<img src="/images/logo.png">
+					</div>
+				</div>
+			</div>
+
+		</section>
+    {{/inline}}
+{{/base}}

views/faq.handlebars

@@ -0,0 +1,46 @@
+{{#> base}}
+    {{#*inline "body-block"}}
+        <section class="hero is-fullheight has-text-centered" id="home">
+			<div class="hero-body">
+				<div class="container has-text-left">
+
+					<h2 class='subtitle'>What is lolisafe?</h2>
+					<article class="message">
+						<div class="message-body">
+							lolisafe 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.
+						</div>
+					</article>
+
+					<h2 class='subtitle'>Will you keep my files forever?</h2>
+					<article class="message">
+						<div class="message-body">
+							Unless we receive a copyright complain or some other bullshit, we will.
+						</div>
+					</article>
+
+					<h2 class='subtitle'>How can I keep track of my uploads?</h2>
+					<article class="message">
+						<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.
+						</div>
+					</article>
+
+					<h2 class='subtitle'>What are albums?</h2>
+					<article class="message">
+						<div class="message-body">
+							Albums are a simple way of sorting uploads together. Right now you can create albums through the dashboard and use them only with <a target="_blank" href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">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.
+						</div>
+					</article>
+
+					<h2 class='subtitle'>Why should I use this?</h2>
+					<article class="message">
+						<div class="message-body">
+							There are too many file upload services out there, and a lot of them rely on the foundations of pomf which is ancient. In a desperate and unsuccessful attempt of finding a good file uploader that's easily extendable, lolisafe was born. We give you control over your files, we give you a way to sort your uploads into albums for ease of access and we give you an api to use with ShareX or any other thing that let's you make POST requests. Awesome isn't it? Just like you.
+						</div>
+					</article>
+
+				</div>
+			</div>
+		</section>
+    {{/inline}}
+{{/base}}

views/home.handlebars

@@ -0,0 +1,58 @@
+{{#> base}}
+    {{#*inline "head-block"}}
+		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
+        <script type="text/javascript" src="/js/home.js"></script>
+    {{/inline}}
+    {{#*inline "body-block"}}
+        <section class="hero is-fullheight has-text-centered" id="home">
+			<div class="hero-body">
+				<div class="container">
+					<p id="b">
+						<img class="logo" src="/images/logo_smol.png">
+					</p>
+					<h1 class="title">meidosafe</h1>
+					<h2 class="subtitle">A <strong>modern</strong> self-hosted file upload service</h2>
+
+					<h3 class="subtitle" id="maxFileSize"></h3>
+					<div class="columns">
+						<div class="column is-hidden-mobile"></div>
+						<div class="column" id="uploadContainer">
+							<a id="loginToUpload" href="/auth" class="button is-danger">Running in private mode. Log in to upload.</a>
+							<div class="field" id="albumDiv" style="display: none">
+								<p class="control select-wrapper">
+									<span class="select">
+										<select id="albumSelect">
+											<option value="">Upload to album</option>
+										</select>
+									</span>
+								</p>
+							</div>
+						</div>
+						<div class="column is-hidden-mobile"></div>
+					</div>
+
+					<div id="uploads">
+						<div id="template" class="columns">
+							<div class="column is-hidden-mobile"></div>
+							<div class="column">
+								<progress class="progress is-small is-danger" value="0" max="100" data-dz-uploadprogress></progress>
+								<p data-dz-errormessage></p>
+								<p class="link"></p>
+							</div>
+							<div class="column is-hidden-mobile"></div>
+						</div>
+					</div>
+
+					<h3 class="subtitle"><a href="/auth" id="loginLinkText"></a></h3>
+					<h3 id="links">
+						<a href="https://github.com/WeebDev/lolisafe" target="_blank" class="is-danger">View on GitHub</a><span>|</span><a id="ShareX" href="https://safe.meido.space/sharex.txt">ShareX</a><span>|</span><a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj" target="_blank" class="is-danger">Chrome extension</a><span>|</span><a href="/faq" class="is-danger">FAQ</a><span>|</span><a href="/auth" target="_blank" class="is-danger">Dashboard</a>
+					</h3>
+
+				</div>
+			</div>
+		</section>
+    {{/inline}}
+{{/base}}

views/partials/base.handlebars

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="description" content="A pomf-like file uploading service that doesn't suck.">
+		<meta name="keywords" content="upload,lolisafe,file,images,hosting">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+		<link rel="apple-touch-icon" sizes="180x180" href="{{config.domain}}/images/icons/apple-touch-icon.png?v=XBreOJMe24">
+		<link rel="icon" type="image/png" href="{{config.domain}}/images/icons/favicon-32x32.png?v=XBreOJMe24" sizes="32x32">
+		<link rel="icon" type="image/png" href="{{config.domain}}/images/icons/favicon-16x16.png?v=XBreOJMe24" sizes="16x16">
+		<link rel="manifest" href="{{config.domain}}/images/icons/manifest.json?v=XBreOJMe24">
+		<link rel="mask-icon" href="{{config.domain}}/images/icons/safari-pinned-tab.svg?v=XBreOJMe24" color="#5bbad5">
+		<link rel="shortcut icon" href="{{config.domain}}/images/icons/favicon.ico?v=XBreOJMe24">
+		<meta name="apple-mobile-web-app-title" content="{{config.name}}">
+		<meta name="application-name" content="{{config.name}}">
+		<meta name="msapplication-config" content="{{config.domain}}/images/icons/browserconfig.xml?v=XBreOJMe24">
+		<meta name="theme-color" content="#ffffff">
+
+        {{#> cards-block}}
+            <meta property="og:url" content="{{config.domain}}" />
+		    <meta property="og:type" content="website" />
+		    <meta property="og:title" content="{{config.name}} | A small safe worth protecting." />
+		    <meta property="og:description" content="A pomf-like file uploading service that doesn't suck." />
+		    <meta property="og:image" content="{{config.domain}}/images/logo_square.png" />
+		    <meta property="og:image:secure_url" content="{{config.domain}}/images/logo_square.png" />
+
+		    <meta name="twitter:card" content="summary">
+		    <meta name="twitter:title" content="{{config.name}} | A small safe worth protecting.">
+		    <meta name="twitter:description" content="A pomf-like file uploading service that doesn't suck.">
+	    	<meta name="twitter:image" content="{{config.domain}}/files/images/logo_square.png">
+    		<meta name="twitter:image:src" content="{{config.domain}}/images/logo_square.png">
+        {{/cards-block}}
+
+		<title>{{#if title}}{{title}}{{else}}{{config.title}}{{/if}}</title>
+		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.0/css/bulma.min.css">
+		<link rel="stylesheet" type="text/css" href="/css/style.css">		
+        {{#> head-block}}
+        {{/head-block}}
+	</head>
+
+	<body>
+        {{#> body-block}}
+        {{/body-block}}
+	</body>
+</html>