Site

src/site/App.vue

@@ -0,0 +1,172 @@
+<template>
+	<div id="app"
+		@dragover="isDrag = true"
+		@dragend="isDrag = false"
+		@dragleave="isDrag = false"
+		@drop="isDrag = false">
+		<router-view :key="$route.fullPath"/>
+
+		<div v-if="!ready"
+			id="loading">
+			<div class="background"/>
+			<Loading class="square"/>
+		</div>
+
+		<div v-if="false"
+			id="drag-overlay">
+			<div class="background"/>
+			<div class="drop">
+				Drop your files here
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Fuse from 'fuse.js';
+import Logo from './components/logo/Logo.vue';
+import Loading from './components/loading/CubeShadow.vue';
+
+const protectedRoutes = [
+	'/dashboard',
+	'/dashboard/albums',
+	'/dashboard/settings'
+];
+
+export default {
+	components: {
+		Loading,
+		Logo
+	},
+	async getInitialData({ route, store }) {
+		try {
+			const res = await this.axios.get(`/api/config`);
+			Vue.prototype.$config = res.data;
+			await store.commit('config', res.data);
+			return { config: res.data };
+		} catch (error) {
+			return {};
+		}
+	},
+	data() {
+		return {
+			pageTitle: '',
+			ready: false,
+			isDrag: false
+		};
+	},
+	computed: {
+		user() {
+			return this.$store.state.user;
+		},
+		loggedIn() {
+			return this.$store.state.loggedIn;
+		},
+		config() {
+			return this.$store.state.config;
+		}
+	},
+	mounted() {
+		console.log(`%c Running lolisafe %c v${this.config.version} %c`, 'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff', 'background:#ff015b; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff', 'background:transparent');
+		this.ready = true;
+	},
+	metaInfo() { // eslint-disable-line complexity
+		return {};
+	},
+	created() {
+		/*
+			Register our global handles
+		*/
+		const App = this; // eslint-disable-line consistent-this
+		this.$store.commit('config', Vue.prototype.$config);
+		Vue.prototype.$search = function(term, list, options) {
+			return new Promise(resolve => {
+				const run = new Fuse(list, options);
+				const results = run.search(term);
+				return resolve(results);
+			});
+		};
+
+		Vue.prototype.$onPromiseError = function(error, logout = false) {
+			App.processCatch(error, logout);
+		};
+
+		Vue.prototype.$showToast = function(text, error, duration) {
+			App.showToast(text, error, duration);
+		};
+
+		Vue.prototype.$logOut = function() {
+			App.$store.commit('user', null);
+			App.$store.commit('loggedIn', false);
+			App.$store.commit('token', null);
+		};
+
+		this.$router.beforeEach((to, from, next) => {
+			if (this.$store.state.loggedIn) return next();
+			if (localStorage.getItem('ls-token')) return this.tryToLogin(next, `/login?redirect=${to.path}`);
+
+			for (const match of to.matched) {
+				if (protectedRoutes.includes(match.path)) {
+					if (this.$store.state.loggedIn === false) return next(`/login?redirect=${to.path}`);
+				}
+			}
+
+			return next();
+		});
+		if (process.browser) this.tryToLogin();
+	},
+	methods: {
+		showToast(text, error, duration) {
+			this.$toast.open({
+				duration: duration || 2500,
+				message: text,
+				position: 'is-bottom',
+				type: error ? 'is-danger' : 'is-success'
+			});
+		},
+		processCatch(error, logout) {
+			if (error.response && error.response.data && error.response.data.message) {
+				this.showToast(error.response.data.message, true, 5000);
+				if (error.response.status === 429) return;
+				if (error.response.status === 502) return;
+				if (logout) {
+					this.$logOut();
+					setTimeout(() => this.$router.push('/'), 3000);
+				}
+			} else {
+				console.error(error);
+				this.showToast('Something went wrong, please check the console :(', true, 5000);
+			}
+		},
+		tryToLogin(next, destination) {
+			this.$store.commit('token', localStorage.getItem('ls-token'));
+			this.axios.get(`${this.$config.baseURL}/verify`).then(res => {
+				this.$store.commit('user', res.data.user);
+				this.$store.commit('loggedIn', true);
+				if (next) return next();
+				return null;
+			}).catch(error => {
+				if (error.response && error.response.status === 520) return;
+				if (error.response && error.response.status === 429) {
+					setTimeout(() => {
+						this.tryToLogin(next, destination);
+					}, 1000);
+					return next(false);
+				} else {
+					this.$store.commit('user', null);
+					this.$store.commit('loggedIn', false);
+					this.$store.commit('token', null);
+					if (next && destination) return next(destination);
+					if (next) return next('/');
+					return null;
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+	@import "./styles/style.scss";
+</style>

src/site/components/grid/Grid.vue

@@ -0,0 +1,166 @@
+<style lang="scss" scoped>
+	@import '../../styles/_colors.scss';
+	.item-move {
+		transition: all .25s cubic-bezier(.55,0,.1,1);
+		-webkit-transition: all .25s cubic-bezier(.55,0,.1,1);
+	}
+	div.actions {
+		opacity: 0;
+		-webkit-transition: opacity 0.1s linear;
+		-moz-transition: opacity 0.1s linear;
+		-ms-transition: opacity 0.1s linear;
+		-o-transition: opacity 0.1s linear;
+		transition: opacity 0.1s linear;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: calc(100% - 6px);
+		background: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		span {
+			padding: 3px;
+
+			&:nth-child(1), &:nth-child(2) {
+				align-items: flex-end;
+			}
+
+			&:nth-child(1), &:nth-child(3) {
+				justify-content: flex-end;
+			}
+			a {
+				width: 30px;
+				height: 30px;
+				color: white;
+				justify-content: center;
+				align-items: center;
+				display: flex;
+				&:before {
+					content: '';
+					width: 30px;
+					height: 30px;
+					border: 1px solid white;
+					border-radius: 50%;
+					position: absolute;
+				}
+			}
+		}
+
+		&.fixed {
+			position: relative;
+			opacity: 1;
+			background: none;
+
+			a {
+				width: auto;
+				height: auto;
+				color: $defaultTextColor;
+				&:before {
+					display: none;
+				}
+			}
+
+		}
+	}
+</style>
+
+<style lang="scss">
+	.waterfall-item:hover {
+		div.actions {
+			opacity: 1
+		}
+	}
+</style>
+
+<template>
+	<Waterfall
+		:gutterWidth="10"
+		:gutterHeight="4">
+		<WaterfallItem v-for="(item, index) in files"
+			v-if="showWaterfall && item.thumb"
+			:key="index"
+			move-class="item-move">
+			<img :src="`${item.thumb}`">
+			<div :class="{ fixed }"
+				class="actions">
+				<b-tooltip label="Link"
+					position="is-top">
+					<a :href="`${item.url}`"
+						target="_blank">
+						<i class="icon-web-code"/>
+					</a>
+				</b-tooltip>
+				<b-tooltip label="Albums"
+					position="is-top">
+					<a @click="manageAlbums(item)">
+						<i class="icon-interface-window"/>
+					</a>
+				</b-tooltip>
+				<b-tooltip label="Tags"
+					position="is-top">
+					<a @click="manageTags(item)">
+						<i class="icon-ecommerce-tag-c"/>
+					</a>
+				</b-tooltip>
+				<b-tooltip label="Delete"
+					position="is-top">
+					<a @click="deleteFile(item, index)">
+						<i class="icon-editorial-trash-a-l"/>
+					</a>
+				</b-tooltip>
+			</div>
+		</WaterfallItem>
+	</Waterfall>
+</template>
+<script>
+import Waterfall from './waterfall/Waterfall.vue';
+import WaterfallItem from './waterfall/WaterfallItem.vue';
+
+export default {
+	components: {
+		Waterfall,
+		WaterfallItem
+	},
+	props: {
+		files: {
+			type: Array,
+			default: null
+		},
+		fixed: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return { showWaterfall: true };
+	},
+	mounted() {},
+	methods: {
+		deleteFile(file, index) {
+			this.$dialog.confirm({
+				title: 'Deleting file',
+				message: 'Are you sure you want to <b>delete</b> this file?',
+				confirmText: 'Delete File',
+				type: 'is-danger',
+				hasIcon: true,
+				onConfirm: async () => {
+					try {
+						const response = await this.axios.delete(`${this.$config.baseURL}/file/${file.id}`);
+						this.showWaterfall = false;
+						this.files.splice(index, 1);
+						this.$nextTick(() => {
+							this.showWaterfall = true;
+						});
+						return this.$toast.open(response.data.message);
+					} catch (error) {
+						return this.$onPromiseError(error);
+					}
+				}
+			});
+		}
+	}
+};
+</script>

src/site/components/grid/waterfall/Waterfall.vue

@@ -0,0 +1,181 @@
+<style>
+	.waterfall {
+		position: relative;
+	}
+</style>
+<template>
+	<div class="waterfall">
+		<slot/>
+	</div>
+</template>
+<script>
+// import {quickSort, getMinIndex, _, sum} from './util'
+
+const quickSort = (arr, type) => {
+	let left = [];
+	let right = [];
+	let povis;
+	if (arr.length <= 1) {
+		return arr;
+	}
+	povis = arr[0];
+	for (let i = 1; i < arr.length; i++) {
+		if (arr[i][type] < povis[type]) {
+			left.push(arr[i]);
+		} else {
+			right.push(arr[i]);
+		}
+	}
+	return quickSort(left, type).concat(povis, quickSort(right, type))
+};
+
+const getMinIndex = arr => {
+	let pos = 0;
+	for (let i = 0; i < arr.length; i++) {
+		if (arr[pos] > arr[i]) {
+			pos = i;
+		}
+	}
+	return pos;
+};
+
+const _ = {
+	on(el, type, func, capture = false) {
+		el.addEventListener(type, func, capture);
+	},
+	off(el, type, func, capture = false) {
+		el.removeEventListener(type, func, capture);
+	}
+};
+
+const sum = arr => arr.reduce((sum, val) => sum + val);
+export default {
+	name: 'Waterfall',
+	props: {
+		gutterWidth: {
+			type: Number,
+			default: 0
+		},
+		gutterHeight: {
+			type: Number,
+			default: 0
+		},
+		resizable: {
+			type: Boolean,
+			default: true
+		},
+		align: {
+			type: String,
+			default: 'center'
+		},
+		fixWidth: {
+			type: Number
+		},
+		minCol: {
+			type: Number,
+			default: 1
+		},
+		maxCol: {
+			type: Number
+		},
+		percent: {
+			type: Array
+		}
+	},
+	data() {
+		return {
+			timer: null,
+			colNum: 0,
+			lastWidth: 0,
+			percentWidthArr: []
+		};
+	},
+	created() {
+		this.$on('itemRender', () => {
+			if (this.timer) {
+				clearTimeout(this.timer);
+			}
+			this.timer = setTimeout(() => {
+				this.render();
+			}, 0);
+		});
+	},
+	mounted() {
+		this.resizeHandle();
+		this.$watch('resizable', this.resizeHandle);
+	},
+	methods: {
+		calulate(arr) {
+			let pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
+			// 百分比布局计算
+			if (this.percent) {
+				this.colNum = this.percent.length;
+				const total = sum(this.percent);
+				this.percentWidthArr = this.percent.map(value => (value / total) * pageWidth);
+				this.lastWidth = 0;
+			// 正常布局计算
+			} else {
+				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth));
+				if (this.minCol && this.colNum < this.minCol) {
+					this.colNum = this.minCol;
+					this.lastWidth = 0;
+				} else if (this.maxCol && this.colNum > this.maxCol) {
+					this.colNum = this.maxCol;
+					this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth;
+				} else {
+					this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth;
+				}
+			}
+		},
+		resizeHandle() {
+			if (this.resizable) {
+				_.on(window, 'resize', this.render, false);
+			} else {
+				_.off(window, 'resize', this.render, false);
+			}
+		},
+		render() {
+			// 重新排序
+			let childArr = [];
+			childArr = this.$children.map(child => child.getMeta());
+			childArr = quickSort(childArr, 'order');
+			// 计算列数
+			this.calulate(childArr[0])
+			let offsetArr = Array(this.colNum).fill(0);
+			// 渲染
+			childArr.forEach(child => {
+				let position = getMinIndex(offsetArr);
+				// 百分比布局渲染
+				if (this.percent) {
+					let left = 0;
+					child.el.style.width = `${this.percentWidthArr[position]}px`;
+					if (position === 0) {
+						left = 0;
+					} else {
+						for (let i = 0; i < position; i++) {
+							left += this.percentWidthArr[i];
+						}
+					}
+					child.el.style.left = `${left}px`;
+				// 正常布局渲染
+				} else {
+					if (this.align === 'left') { // eslint-disable-line no-lonely-if
+						child.el.style.left = `${position * (child.width + this.gutterWidth)}px`;
+					} else if (this.align === 'right') {
+						child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth}px`;
+					} else {
+						child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth / 2}px`;
+					}
+				}
+				if (child.height === 0) {
+					return;
+				}
+				child.el.style.top = `${offsetArr[position]}px`;
+				offsetArr[position] += (child.height + this.gutterHeight);
+				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
+			});
+			this.$emit('rendered', this);
+		}
+	}
+};
+</script>

src/site/components/grid/waterfall/WaterfallItem.vue

@@ -0,0 +1,60 @@
+<style>
+	.waterfall-item {
+		position: absolute;
+	}
+</style>
+<template>
+	<div class="waterfall-item">
+		<slot/>
+	</div>
+</template>
+<script>
+import imagesLoaded from 'imagesloaded';
+export default {
+	name: 'WaterfallItem',
+	props: {
+		order: {
+			type: Number,
+			default: 0
+		},
+		width: {
+			type: Number,
+			default: 150
+		}
+	},
+	data() {
+		return {
+			itemWidth: 0,
+			height: 0
+		};
+	},
+	created() {
+		this.$watch(() => this.height, this.emit);
+	},
+	mounted() {
+		this.$el.style.display = 'none';
+		this.$el.style.width = `${this.width}px`;
+		this.emit();
+		imagesLoaded(this.$el, () => {
+			this.$el.style.left = '-9999px';
+			this.$el.style.top = '-9999px';
+			this.$el.style.display = 'block';
+			this.height = this.$el.offsetHeight;
+			this.itemWidth = this.$el.offsetWidth;
+		});
+	},
+	methods: {
+		emit() {
+			this.$parent.$emit('itemRender');
+		},
+		getMeta() {
+			return {
+				el: this.$el,
+				height: this.height,
+				width: this.itemWidth,
+				order: this.order
+			};
+		}
+	}
+}
+</script>

src/site/components/grid/waterfall/old/waterfall-slot.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="vue-waterfall-slot" v-show="isShow">
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+.vue-waterfall-slot {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+</style>
+
+<script>
+
+export default {
+  data: () => ({
+    isShow: false
+  }),
+  props: {
+    width: {
+      required: true,
+      validator: (val) => val >= 0
+    },
+    height: {
+      required: true,
+      validator: (val) => val >= 0
+    },
+    order: {
+      default: 0
+    },
+    moveClass: {
+      default: ''
+    }
+  },
+  methods: {
+    notify () {
+      this.$parent.$emit('reflow', this)
+    },
+    getMeta () {
+      return {
+        vm: this,
+        node: this.$el,
+        order: this.order,
+        width: this.width,
+        height: this.height,
+        moveClass: this.moveClass
+      }
+    }
+  },
+  created () {
+    this.rect = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    }
+    this.$watch(() => (
+      this.width,
+      this.height
+    ), this.notify)
+  },
+  mounted () {
+    this.$parent.$once('reflowed', () => {
+      this.isShow = true
+    })
+    this.notify()
+  },
+  destroyed () {
+    this.notify()
+  }
+}
+
+</script>

src/site/components/grid/waterfall/old/waterfall.vue

@@ -0,0 +1,442 @@
+<template>
+  <div class="vue-waterfall" :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+.vue-waterfall {
+  position: relative;
+  /*overflow: hidden; cause clientWidth = 0 in IE if height not bigger than 0 */
+}
+</style>
+
+<script>
+
+const MOVE_CLASS_PROP = '_wfMoveClass'
+
+export default {
+  props: {
+    autoResize: {
+      default: true
+    },
+    interval: {
+      default: 200,
+      validator: (val) => val >= 0
+    },
+    align: {
+      default: 'left',
+      validator: (val) => ~['left', 'right', 'center'].indexOf(val)
+    },
+    line: {
+      default: 'v',
+      validator: (val) => ~['v', 'h'].indexOf(val)
+    },
+    lineGap: {
+      required: true,
+      validator: (val) => val >= 0
+    },
+    minLineGap: {
+      validator: (val) => val >= 0
+    },
+    maxLineGap: {
+      validator: (val) => val >= 0
+    },
+    singleMaxWidth: {
+      validator: (val) => val >= 0
+    },
+    fixedHeight: {
+      default: false
+    },
+    grow: {
+      validator: (val) => val instanceof Array
+    },
+    watch: {
+      default: () => ({})
+    }
+  },
+  data: () => ({
+    style: {
+      height: '',
+      overflow: ''
+    },
+    token: null
+  }),
+  methods: {
+    reflowHandler,
+    autoResizeHandler,
+    reflow
+  },
+  created () {
+    this.virtualRects = []
+    this.$on('reflow', () => {
+      this.reflowHandler()
+    })
+    this.$watch(() => (
+      this.align,
+      this.line,
+      this.lineGap,
+      this.minLineGap,
+      this.maxLineGap,
+      this.singleMaxWidth,
+      this.fixedHeight,
+      this.watch
+    ), this.reflowHandler)
+    this.$watch('grow', this.reflowHandler)
+  },
+  mounted () {
+    this.$watch('autoResize', this.autoResizeHandler)
+    on(this.$el, getTransitionEndEvent(), tidyUpAnimations, true)
+    this.autoResizeHandler(this.autoResize)
+  },
+  beforeDestroy () {
+    this.autoResizeHandler(false)
+    off(this.$el, getTransitionEndEvent(), tidyUpAnimations, true)
+  }
+}
+
+function autoResizeHandler (autoResize) {
+  if (autoResize === false || !this.autoResize) {
+    off(window, 'resize', this.reflowHandler, false)
+  } else {
+    on(window, 'resize', this.reflowHandler, false)
+  }
+}
+
+function tidyUpAnimations (event) {
+  let node = event.target
+  let moveClass = node[MOVE_CLASS_PROP]
+  if (moveClass) {
+    removeClass(node, moveClass)
+  }
+}
+
+function reflowHandler () {
+  clearTimeout(this.token)
+  this.token = setTimeout(this.reflow, this.interval)
+}
+
+function reflow () {
+  if (!this.$el) { return }
+  let width = this.$el.clientWidth
+  let metas = this.$children.map((slot) => slot.getMeta())
+  metas.sort((a, b) => a.order - b.order)
+  this.virtualRects = metas.map(() => ({}))
+  calculate(this, metas, this.virtualRects)
+  setTimeout(() => {
+    if (isScrollBarVisibilityChange(this.$el, width)) {
+      calculate(this, metas, this.virtualRects)
+    }
+    this.style.overflow = 'hidden'
+    render(this.virtualRects, metas)
+    this.$emit('reflowed', this)
+  }, 0)
+}
+
+function isScrollBarVisibilityChange (el, lastClientWidth) {
+  return lastClientWidth !== el.clientWidth
+}
+
+function calculate (vm, metas, styles) {
+  let options = getOptions(vm)
+  let processor = vm.line === 'h' ? horizontalLineProcessor : verticalLineProcessor
+  processor.calculate(vm, options, metas, styles)
+}
+
+function getOptions (vm) {
+  const maxLineGap = vm.maxLineGap ? +vm.maxLineGap : vm.lineGap
+  return {
+    align: ~['left', 'right', 'center'].indexOf(vm.align) ? vm.align : 'left',
+    line: ~['v', 'h'].indexOf(vm.line) ? vm.line : 'v',
+    lineGap: +vm.lineGap,
+    minLineGap: vm.minLineGap ? +vm.minLineGap : vm.lineGap,
+    maxLineGap: maxLineGap,
+    singleMaxWidth: Math.max(vm.singleMaxWidth || 0, maxLineGap),
+    fixedHeight: !!vm.fixedHeight,
+    grow: vm.grow && vm.grow.map(val => +val)
+  }
+}
+
+var verticalLineProcessor = (() => {
+
+  function calculate (vm, options, metas, rects) {
+    let width = vm.$el.clientWidth
+    let grow = options.grow
+    let strategy = grow
+      ? getRowStrategyWithGrow(width, grow)
+      : getRowStrategy(width, options)
+    let tops = getArrayFillWith(0, strategy.count)
+    metas.forEach((meta, index) => {
+      let offset = tops.reduce((last, top, i) => top < tops[last] ? i : last, 0)
+      let width = strategy.width[offset % strategy.count]
+      let rect = rects[index]
+      rect.top = tops[offset]
+      rect.left = strategy.left + (offset ? sum(strategy.width.slice(0, offset)) : 0)
+      rect.width = width
+      rect.height = meta.height * (options.fixedHeight ? 1 : width / meta.width)
+      tops[offset] = tops[offset] + rect.height
+    })
+    vm.style.height = Math.max.apply(Math, tops) + 'px'
+  }
+
+  function getRowStrategy (width, options) {
+    let count = width / options.lineGap
+    let slotWidth
+    if (options.singleMaxWidth >= width) {
+      count = 1
+      slotWidth = Math.max(width, options.minLineGap)
+    } else {
+      let maxContentWidth = options.maxLineGap * ~~count
+      let minGreedyContentWidth = options.minLineGap * ~~(count + 1)
+      let canFit = maxContentWidth >= width
+      let canFitGreedy = minGreedyContentWidth <= width
+      if (canFit && canFitGreedy) {
+        count = Math.round(count)
+        slotWidth = width / count
+      } else if (canFit) {
+        count = ~~count
+        slotWidth = width / count
+      } else if (canFitGreedy) {
+        count = ~~(count + 1)
+        slotWidth = width / count
+      } else {
+        count = ~~count
+        slotWidth = options.maxLineGap
+      }
+      if (count === 1) {
+        slotWidth = Math.min(width, options.singleMaxWidth)
+        slotWidth = Math.max(slotWidth, options.minLineGap)
+      }
+    }
+    return {
+      width: getArrayFillWith(slotWidth, count),
+      count: count,
+      left: getLeft(width, slotWidth * count, options.align)
+    }
+  }
+
+  function getRowStrategyWithGrow (width, grow) {
+    let total = sum(grow)
+    return {
+      width: grow.map(val => width * val / total),
+      count: grow.length,
+      left: 0
+    }
+  }
+
+  return {
+    calculate
+  }
+
+})()
+
+var horizontalLineProcessor = (() => {
+
+  function calculate (vm, options, metas, rects) {
+    let width = vm.$el.clientWidth
+    let total = metas.length
+    let top = 0
+    let offset = 0
+    while (offset < total) {
+      let strategy = getRowStrategy(width, options, metas, offset)
+      for (let i = 0, left = 0, meta, rect; i < strategy.count; i++) {
+        meta = metas[offset + i]
+        rect = rects[offset + i]
+        rect.top = top
+        rect.left = strategy.left + left
+        rect.width = meta.width * strategy.height / meta.height
+        rect.height = strategy.height
+        left += rect.width
+      }
+      offset += strategy.count
+      top += strategy.height
+    }
+    vm.style.height = top + 'px'
+  }
+
+  function getRowStrategy (width, options, metas, offset) {
+    let greedyCount = getGreedyCount(width, options.lineGap, metas, offset)
+    let lazyCount = Math.max(greedyCount - 1, 1)
+    let greedySize = getContentSize(width, options, metas, offset, greedyCount)
+    let lazySize = getContentSize(width, options, metas, offset, lazyCount)
+    let finalSize = chooseFinalSize(lazySize, greedySize, width)
+    let height = finalSize.height
+    let fitContentWidth = finalSize.width
+    if (finalSize.count === 1) {
+      fitContentWidth = Math.min(options.singleMaxWidth, width)
+      height = metas[offset].height * fitContentWidth / metas[offset].width
+    }
+    return {
+      left: getLeft(width, fitContentWidth, options.align),
+      count: finalSize.count,
+      height: height
+    }
+  }
+
+  function getGreedyCount (rowWidth, rowHeight, metas, offset) {
+    let count = 0
+    for (let i = offset, width = 0; i < metas.length && width <= rowWidth; i++) {
+      width += metas[i].width * rowHeight / metas[i].height
+      count++
+    }
+    return count
+  }
+
+  function getContentSize (rowWidth, options, metas, offset, count) {
+    let originWidth = 0
+    for (let i = count - 1; i >= 0; i--) {
+      let meta = metas[offset + i]
+      originWidth += meta.width * options.lineGap / meta.height
+    }
+    let fitHeight = options.lineGap * rowWidth / originWidth
+    let canFit = (fitHeight <= options.maxLineGap && fitHeight >= options.minLineGap)
+    if (canFit) {
+      return {
+        cost: Math.abs(options.lineGap - fitHeight),
+        count: count,
+        width: rowWidth,
+        height: fitHeight
+      }
+    } else {
+      let height = originWidth > rowWidth ? options.minLineGap : options.maxLineGap
+      return {
+        cost: Infinity,
+        count: count,
+        width: originWidth * height / options.lineGap,
+        height: height
+      }
+    }
+  }
+
+  function chooseFinalSize (lazySize, greedySize, rowWidth) {
+    if (lazySize.cost === Infinity && greedySize.cost === Infinity) {
+      return greedySize.width < rowWidth ? greedySize : lazySize
+    } else {
+      return greedySize.cost >= lazySize.cost ? lazySize : greedySize
+    }
+  }
+
+  return {
+    calculate
+  }
+
+})()
+
+function getLeft (width, contentWidth, align) {
+  switch (align) {
+    case 'right':
+      return width - contentWidth
+    case 'center':
+      return (width - contentWidth) / 2
+    default:
+      return 0
+  }
+}
+
+function sum (arr) {
+  return arr.reduce((sum, val) => sum + val)
+}
+
+function render (rects, metas) {
+  let metasNeedToMoveByTransform = metas.filter((meta) => meta.moveClass)
+  let firstRects = getRects(metasNeedToMoveByTransform)
+  applyRects(rects, metas)
+  let lastRects = getRects(metasNeedToMoveByTransform)
+  metasNeedToMoveByTransform.forEach((meta, i) => {
+    meta.node[MOVE_CLASS_PROP] = meta.moveClass
+    setTransform(meta.node, firstRects[i], lastRects[i])
+  })
+  document.body.clientWidth // forced reflow
+  metasNeedToMoveByTransform.forEach((meta) => {
+    addClass(meta.node, meta.moveClass)
+    clearTransform(meta.node)
+  })
+}
+
+function getRects (metas) {
+  return metas.map((meta) => meta.vm.rect)
+}
+
+function applyRects (rects, metas) {
+  rects.forEach((rect, i) => {
+    let style = metas[i].node.style
+    metas[i].vm.rect = rect
+    for (let prop in rect) {
+      style[prop] = rect[prop] + 'px'
+    }
+  })
+}
+
+function setTransform (node, firstRect, lastRect) {
+  let dx = firstRect.left - lastRect.left
+  let dy = firstRect.top - lastRect.top
+  let sw = firstRect.width / lastRect.width
+  let sh = firstRect.height / lastRect.height
+  node.style.transform =
+  node.style.WebkitTransform = `translate(${dx}px,${dy}px) scale(${sw},${sh})`
+  node.style.transitionDuration = '0s'
+}
+
+function clearTransform (node) {
+  node.style.transform = node.style.WebkitTransform = ''
+  node.style.transitionDuration = ''
+}
+
+function getTransitionEndEvent () {
+  let isWebkitTrans =
+    window.ontransitionend === undefined &&
+    window.onwebkittransitionend !== undefined
+  let transitionEndEvent = isWebkitTrans
+    ? 'webkitTransitionEnd'
+    : 'transitionend'
+  return transitionEndEvent
+}
+
+/**
+ * util
+ */
+
+function getArrayFillWith (item, count) {
+  let getter = (typeof item === 'function') ? () => item() : () => item
+  let arr = []
+  for (let i = 0; i < count; i++) {
+    arr[i] = getter()
+  }
+  return arr
+}
+
+function addClass (elem, name) {
+  if (!hasClass(elem, name)) {
+    let cur = attr(elem, 'class').trim()
+    let res = (cur + ' ' + name).trim()
+    attr(elem, 'class', res)
+  }
+}
+
+function removeClass (elem, name) {
+  let reg = new RegExp('\\s*\\b' + name + '\\b\\s*', 'g')
+  let res = attr(elem, 'class').replace(reg, ' ').trim()
+  attr(elem, 'class', res)
+}
+
+function hasClass (elem, name) {
+  return (new RegExp('\\b' + name + '\\b')).test(attr(elem, 'class'))
+}
+
+function attr (elem, name, value) {
+  if (typeof value !== 'undefined') {
+    elem.setAttribute(name, value)
+  } else {
+    return elem.getAttribute(name) || ''
+  }
+}
+
+function on (elem, type, listener, useCapture = false) {
+  elem.addEventListener(type, listener, useCapture)
+}
+
+function off (elem, type, listener, useCapture = false) {
+  elem.removeEventListener(type, listener, useCapture)
+}
+
+</script>

src/site/components/home/links/Links.vue

@@ -0,0 +1,100 @@
+<style lang="scss" scoped>
+	@import '../../../styles/_colors.scss';
+	.links {
+		margin-bottom: 3em;
+		align-items: stretch;
+		display: flex;
+		justify-content: space-between;
+
+		div.link { cursor: pointer; }
+		.link {
+			background: $backgroundAccent;
+			display: block;
+			width: calc(25% - 2rem);
+			border-radius: 6px;
+			box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10,10,10,.05);
+			transition-duration: 86ms;
+			transition-property: box-shadow,-webkit-transform;
+			transition-property: box-shadow,transform;
+			transition-property: box-shadow,transform,-webkit-transform;
+			will-change: box-shadow,transform;
+
+			header.bd-footer-star-header {
+				padding: 1.5rem;
+
+				&:hover .bd-footer-subtitle { color: $textColorHighlight; }
+
+				h4.bd-footer-title {
+					color: $textColorHighlight;
+					font-size: 1.5rem;
+					line-height: 1.25;
+					margin-bottom: .5rem;
+					transition-duration: 86ms;
+					transition-property: color;
+					font-weight: 700;
+				}
+
+				p.bd-footer-subtitle {
+					color: $textColor;
+					margin-top: -.5rem;
+					transition-duration: 86ms;
+					transition-property: color;
+					font-weight: 400;
+				}
+			}
+
+			&:hover {
+				box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
+				-webkit-transform: translateY(-.5rem);
+				transform: translateY(-.5rem);
+			}
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		.links {
+			display: block;
+			padding: 0px 2em;
+			.link {
+				width: 100%;
+				margin-bottom: 1.5em;
+			}
+		}
+	}
+</style>
+<template>
+	<div class="links">
+		<a href="https://github.com/WeebDev/lolisafe"
+			target="_blank"
+			class="link">
+			<header class="bd-footer-star-header">
+				<h4 class="bd-footer-title">GitHub</h4>
+				<p class="bd-footer-subtitle">Deploy your own lolisafe</p>
+			</header>
+		</a>
+		<div class="link">
+			<header class="bd-footer-star-header">
+				<h4 class="bd-footer-title">ShareX</h4>
+				<p class="bd-footer-subtitle">Upload from your Desktop</p>
+			</header>
+		</div>
+		<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj"
+			target="_blank"
+			class="link">
+			<header class="bd-footer-star-header">
+				<h4 class="bd-footer-title">Extension</h4>
+				<p class="bd-footer-subtitle">Upload from any website</p>
+			</header>
+		</a>
+		<router-link to="faq"
+			class="link">
+			<header class="bd-footer-star-header">
+				<h4 class="bd-footer-title">FAQ</h4>
+				<p class="bd-footer-subtitle">dunno</p>
+			</header>
+		</router-link>
+	</div>
+</template>
+<script>
+export default {}
+</script>

src/site/components/loading/CubeShadow.vue

@@ -0,0 +1,48 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner--cube-shadow" />
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '60px'
+		},
+		background: {
+			type: String,
+			default: '#9C27B0'
+		},
+		duration: {
+			type: String,
+			default: '1.8s'
+		}
+	},
+	computed: {
+		styles() {
+			return {
+				width: this.size,
+				height: this.size,
+				backgroundColor: this.background,
+				animationDuration: this.duration
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.spinner{
+		animation: cube-shadow-spinner 1.8s cubic-bezier(0.75, 0, 0.5, 1) infinite;
+	}
+	@keyframes cube-shadow-spinner {
+		50% {
+			border-radius: 50%;
+			transform: scale(0.5) rotate(360deg);
+		}
+		100% {
+			transform: scale(1) rotate(720deg);
+		}
+	}
+</style>

src/site/components/loading/Origami.vue

@@ -0,0 +1,121 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner-origami">
+		<div :style="innerStyles"
+			class="spinner-inner loading">
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '40px'
+		}
+	},
+	computed: {
+		innerStyles() {
+			let size = parseInt(this.size);
+			return { transform: `scale(${(size / 60)})` };
+		},
+		styles() {
+			return {
+				width: this.size,
+				height: this.size
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/colors.scss';
+
+@for $i from 1 through 6 {
+	@keyframes origami-show-#{$i}{
+		from{
+			transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+	}
+	@keyframes origami-hide-#{$i}{
+		to{
+			transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+	}
+
+	@keyframes origami-cycle-#{$i} {
+
+		$startIndex: $i*5;
+		$reverseIndex: (80 - $i*5);
+
+		#{$startIndex * 1%} {
+			transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+		#{$startIndex + 5%},
+		#{$reverseIndex * 1%} {
+			transform: rotateZ(60* $i + deg) rotateY(0) rotateX(0deg);
+			border-left-color: #41b883;
+		}
+
+		#{$reverseIndex + 5%},
+		100%{
+			transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+	}
+}
+
+.spinner{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	* {
+	line-height: 0;
+	box-sizing: border-box;
+	}
+}
+.spinner-inner{
+	display: block;
+	width: 60px;
+	height: 68px;
+	.slice {
+		border-top: 18px solid transparent;
+		border-right: none;
+		border-bottom: 16px solid transparent;
+		border-left: 30px solid #f7484e;
+		position: absolute;
+		top: 0px;
+		left: 50%;
+		transform-origin: left bottom;
+		border-radius: 3px 3px 0 0;
+	}
+
+	@for $i from 1 through 6 {
+		.slice:nth-child(#{$i}) {
+			transform: rotateZ(60* $i + deg) rotateY(0deg) rotateX(0);
+			animation: .15s linear .9 - $i*.08s origami-hide-#{$i} both 1;
+		}
+	}
+
+	&.loading{
+		@for $i from 1 through 6 {
+			.slice:nth-child(#{$i}) {
+				transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0);
+				animation: 2s origami-cycle-#{$i} linear infinite both;
+			}
+		}
+	}
+
+}
+</style>

src/site/components/loading/PingPong.vue

@@ -0,0 +1,98 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner--ping-pong">
+		<div :style="innerStyles"
+			class="spinner-inner">
+			<div class="board">
+				<div class="left"/>
+				<div class="right"/>
+				<div class="ball"/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '60px'
+		}
+	},
+	computed: {
+		innerStyles() {
+			let size = parseInt(this.size);
+			return { transform: `scale(${size / 250})` };
+		},
+		styles() {
+			return {
+				width: this.size,
+				height: this.size
+			};
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.spinner{
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		* {
+			line-height: 0;
+			box-sizing: border-box;
+		}
+	}
+	.board {
+		width:250px;
+		position: relative;
+	}
+	.left,
+	.right {
+		height:50px;
+		width:15px;
+		background:#41b883;
+		display: inline-block;
+		position:absolute;
+	}
+	.left {
+		left:0;
+		animation: pingpong-position1 2s linear infinite;
+	}
+	.right {
+		right:0;
+		animation: pingpong-position2 2s linear infinite;
+	}
+	.ball{
+		width:15px;
+		height:15px;
+		border-radius:50%;
+		background:#f7484e;
+		position:absolute;
+		animation: pingpong-bounce 2s linear infinite;
+	}
+	@keyframes pingpong-position1 {
+		0% {top:-60px;}
+		25% {top:0;}
+		50% {top:60px;}
+		75% {top:-60px;}
+		100% {top:-60px;}
+	}
+	@keyframes pingpong-position2 {
+		0% {top:60px;}
+		25% {top:0;}
+		50% {top:-60px;}
+		75% {top:-60px;}
+		100% {top:60px;}
+	}
+	@keyframes pingpong-bounce {
+		0% {top:-35px;left:10px;}
+		25% {top:25px;left:225px;}
+		50% {top:75px;left:10px;}
+		75% {top:-35px;left:225px;}
+		100% {top:-35px;left:10px;}
+	}
+</style>

src/site/components/loading/RotateSquare.vue

@@ -0,0 +1,87 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner--rotate-square-2" />
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '40px'
+		}
+	},
+	computed: {
+		styles() {
+			return {
+				width: this.size,
+				height: this.size,
+				display: 'inline-block'
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/colors.scss';
+
+.spinner {
+	position: relative;
+	* {
+		line-height: 0;
+		box-sizing: border-box;
+	}
+	&:before {
+		content: '';
+		width: 100%;
+		height: 20%;
+		min-width: 5px;
+		background: #000;
+		opacity: 0.1;
+		position: absolute;
+		bottom: 0%;
+		left: 0;
+		border-radius: 50%;
+		animation: rotate-square-2-shadow .5s linear infinite;
+	}
+	&:after {
+		content: '';
+		width: 100%;
+		height: 100%;
+		background: $basePink;
+		animation: rotate-square-2-animate .5s linear infinite;
+		position: absolute;
+		bottom:40%;
+		left: 0;
+		border-radius: 3px;
+	}
+}
+
+@keyframes rotate-square-2-animate {
+	17% {
+		border-bottom-right-radius: 3px;
+	}
+	25% {
+		transform: translateY(20%) rotate(22.5deg);
+	}
+	50% {
+		transform: translateY(40%) scale(1, .9) rotate(45deg);
+		border-bottom-right-radius: 50%;
+	}
+	75% {
+		transform: translateY(20%) rotate(67.5deg);
+	}
+	100% {
+		transform: translateY(0) rotate(90deg);
+	}
+}
+@keyframes rotate-square-2-shadow {
+	0%, 100% {
+		transform: scale(1, 1);
+	}
+	50% {
+		transform: scale(1.2, 1);
+	}
+}
+</style>

src/site/components/logo/Logo.vue

@@ -0,0 +1,59 @@
+<style lang="scss" scoped>
+	@import '../../styles/_colors.scss';
+	#logo {
+		-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;
+		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);
+		background: $backgroundAccent;
+		pointer-events: none;
+	}
+
+	#logo img {
+		height: 200px;
+		margin-top: 20px;
+	}
+
+	@keyframes floatUp {
+		0% {
+			opacity: 0;
+			box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
+			-webkit-transform: scale(0.86);
+			transform: scale(0.86);
+		}
+		25% { opacity: 100; }
+		67% {
+			box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+			-webkit-transform: scale(1);
+			transform: scale(1);
+		}
+		100% {
+			box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+			-webkit-transform: scale(1);
+			transform: scale(1);
+		}
+	}
+</style>
+
+<template>
+	<p id="logo">
+		<img src="../../../../public/images/logo.png">
+	</p>
+</template>
+
+<script>
+export default {};
+</script>

src/site/components/navbar/Navbar.vue

@@ -0,0 +1,119 @@
+<style lang="scss" scoped>
+	@import '../../styles/colors.scss';
+	nav.navbar {
+		background: transparent;
+		box-shadow: none;
+
+		.navbar-brand {
+			width: 100%;
+			align-items: flex-start;
+			padding: 1em;
+
+			div.spacer { flex: 1 0 10px; }
+			a.navbar-item {
+				color: $defaultTextColor;
+				font-size: 16px;
+				font-weight: 700;
+				text-decoration-style: solid;
+			}
+			a.navbar-item:hover, a.navbar-item.is-active, a.navbar-link:hover, a.navbar-link.is-active {
+				text-decoration: underline;
+				background: transparent;
+			}
+
+			i {
+				font-size: 2em;
+				&.hidden {
+					width: 0px;
+					height: 1.5em;
+					pointer-events: none;
+				}
+			}
+		}
+
+		&.isWhite {
+			.navbar-brand {
+				a.navbar-item {
+					color: white;
+				}
+			}
+		}
+	}
+</style>
+
+<template>
+	<nav :class="{ isWhite }"
+		class="navbar is-transparent">
+		<div class="navbar-brand">
+			<router-link to="/"
+				class="navbar-item no-active">
+				<i class="icon-ecommerce-safebox"/> {{ config.serviceName }}
+			</router-link>
+
+			<!--
+			<template v-if="loggedIn">
+				<router-link
+					to="/dashboard/uploads"
+					class="navbar-item no-active"
+					exact><i class="hidden"/>Uploads</router-link>
+
+				<router-link
+					to="/dashboard/albums"
+					class="navbar-item no-active"
+					exact><i class="hidden"/>Albums</router-link>
+
+				<router-link
+					to="/dashboard/tags"
+					class="navbar-item no-active"
+					exact><i class="hidden"/>Tags</router-link>
+
+				<router-link
+					to="/dashboard/settings"
+					class="navbar-item no-active"
+					exact><i class="hidden"/>Settings</router-link>
+			</template>
+			-->
+
+			<div class="spacer" />
+
+			<router-link v-if="!loggedIn"
+				class="navbar-item"
+				to="/login"><i class="hidden"/>Login</router-link>
+
+			<router-link v-else
+				to="/dashboard"
+				class="navbar-item no-active"
+				exact><i class="hidden"/>Dashboard</router-link>
+		</div>
+	</nav>
+</template>
+
+<script>
+export default {
+	props: {
+		isWhite: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return { hamburger: false };
+	},
+	computed: {
+		loggedIn() {
+			return this.$store.state.loggedIn;
+		},
+		user() {
+			return this.$store.state.user;
+		},
+		config() {
+			return this.$store.state.config;
+		}
+	},
+	methods: {
+		logOut() {
+			this.$emit('logout');
+		}
+	}
+};
+</script>

src/site/components/sidebar/Sidebar.vue

@@ -0,0 +1,43 @@
+<style lang="scss" scoped>
+	@import '../../styles/colors.scss';
+	.dashboard-menu {
+		a {
+			display: block;
+			font-weight: 700;
+			color: #868686;
+			position: relative;
+			padding-left: 40px;
+			height: 35px;
+			&:hover, &:first-child {
+				color: $defaultTextColor;
+			}
+
+			i {
+				position: absolute;
+				font-size: 1.5em;
+				top: -4px;
+				left: 5px;
+			}
+		}
+
+		hr { margin-top: 0.6em; }
+	}
+</style>
+<template>
+	<div class="dashboard-menu">
+		<router-link to="/"><i class="icon-ecommerce-safebox"/>lolisafe</router-link>
+		<hr>
+		<a><i class="icon-interface-cloud-upload"/>Upload files</a>
+		<hr>
+		<router-link to="/dashboard"><i class="icon-com-pictures"/>Files</router-link>
+		<router-link to="/dashboard/albums"><i class="icon-interface-window"/>Albums</router-link>
+		<router-link to="/dashboard/tags"><i class="icon-ecommerce-tag-c"/>Tags</router-link>
+		<hr>
+		<router-link to="/dashboard/settings"><i class="icon-setting-gear-a"/>Settings</router-link>
+	</div>
+</template>
+<script>
+export default {
+
+}
+</script>

src/site/components/uploader/Uploader.vue

@@ -0,0 +1,251 @@
+<template>
+	<div :class="{ hasFiles: files.length > 0 }"
+		class="uploader-wrapper">
+		<b-select v-if="loggedIn"
+			v-model="selectedAlbum"
+			placeholder="Upload to album"
+			size="is-medium"
+			expanded>
+			<option
+				v-for="album in albums"
+				:value="album.id"
+				:key="album.id">
+				{{ album.name }}
+			</option>
+		</b-select>
+		<dropzone v-if="showDropzone"
+			id="dropzone"
+			ref="el"
+			:options="dropzoneOptions"
+			:include-styling="false"
+			@vdropzone-success="dropzoneSuccess"
+			@vdropzone-error="dropzoneError"
+			@vdropzone-files-added="dropzoneFilesAdded" />
+
+		<div id="template"
+			ref="template">
+			<div class="dz-preview dz-file-preview">
+				<div class="dz-details">
+					<div class="dz-filename"><span data-dz-name/></div>
+					<div class="dz-size"><span data-dz-size/></div>
+				</div>
+				<div class="result">
+					<div class="copyLink">
+						<b-tooltip label="Copy link">
+							<i class="icon-web-code"/>
+						</b-tooltip>
+					</div>
+					<div class="openLink">
+						<b-tooltip label="Open file">
+							<a class="link"
+								target="_blank">
+								<i class="icon-web-url"/>
+							</a>
+						</b-tooltip>
+					</div>
+				</div>
+				<div class="error">
+					<div>
+						<span>
+							<span class="error-message"
+								data-dz-errormessage/>
+							<i class="icon-web-warning"/>
+						</span>
+					</div>
+				</div>
+				<div class="dz-progress">
+					<span class="dz-upload"
+						data-dz-uploadprogress/>
+				</div>
+				<!--
+				<div class="dz-error-message"><span data-dz-errormessage/></div>
+				<div class="dz-success-mark"><i class="fa fa-check"/></div>
+				<div class="dz-error-mark"><i class="fa fa-close"/></div>
+				-->
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import Dropzone from 'nuxt-dropzone';
+import '../../styles/dropzone.scss';
+
+export default {
+	components: { Dropzone },
+	data() {
+		return {
+			files: [],
+			dropzoneOptions: {},
+			showDropzone: false,
+			albums: [],
+			selectedAlbum: null
+		};
+	},
+	computed: {
+		config() {
+			return this.$store.state.config;
+		},
+		token() {
+			return this.$store.state.token;
+		},
+		loggedIn() {
+			return this.$store.state.loggedIn;
+		}
+	},
+	watch: {
+		loggedIn() {
+			this.getAlbums();
+		},
+		selectedAlbum() {
+			this.updateDropzoneConfig();
+		}
+	},
+	mounted() {
+		this.dropzoneOptions = {
+			url: `${this.$config.baseURL}/upload`,
+			autoProcessQueue: true,
+			addRemoveLinks: false,
+			parallelUploads: 5,
+			uploadMultiple: false,
+			maxFiles: 1000,
+			createImageThumbnails: false,
+			paramName: 'file',
+			chunking: true,
+			retryChunks: true,
+			retryChunksLimit: 3,
+			parallelChunkUploads: false,
+			chunkSize: this.config.chunkSize * 1000000,
+			chunksUploaded: this.dropzoneChunksUploaded,
+			maxFilesize: this.config.maxFileSize,
+			previewTemplate: this.$refs.template.innerHTML,
+			dictDefaultMessage: 'Drag & Drop your files or click to browse',
+			headers: { Accept: 'application/vnd.lolisafe.json' }
+		};
+		this.showDropzone = true;
+		if (this.loggedIn) this.getAlbums();
+	},
+	methods: {
+		/*
+			Get all available albums so the user can upload directly to one (or several soon™) of them.
+		*/
+		async getAlbums() {
+			try {
+				const response = await this.axios.get(`${this.$config.baseURL}/albums/dropdown`);
+				this.albums = response.data.albums;
+				this.updateDropzoneConfig();
+			} catch (error) {
+				this.$onPromiseError(error);
+			}
+		},
+
+		/*
+			This method needs to be called after the token or selectedAlbum changes
+			since dropzone doesn't seem to update the config values unless you force it.
+			Tch.
+		*/
+		updateDropzoneConfig() {
+			this.$refs.el.setOption('headers', {
+				Accept: 'application/vnd.lolisafe.json',
+				Authorization: this.token ? `Bearer ${this.token}` : '',
+				albumId: this.selectedAlbum ? this.selectedAlbum : null
+			});
+		},
+
+		/*
+			Dropzone stuff
+		*/
+		dropzoneFilesAdded(files) {
+			// console.log(files);
+		},
+		dropzoneSuccess(file, response) {
+			this.processResult(file, response);
+		},
+		dropzoneError(file, message, xhr) {
+			this.$showToast('There was an error uploading this file. Check the console.', true, 5000);
+			console.error(file, message, xhr);
+		},
+		dropzoneChunksUploaded(file, done) {
+			const response = JSON.parse(file.xhr.response);
+			if (!response.url) {
+				console.error('There was a problem uploading the file?');
+				return done();
+			}
+
+			this.processResult(file, response);
+			this.$forceUpdate();
+			return done();
+		},
+
+		/*
+			If upload/s was/were successfull we modify the template so that the buttons for
+			copying the returned url or opening it in a new window appear.
+		*/
+		processResult(file, response) {
+			if (!response.url) return;
+			file.previewTemplate.querySelector('.link').setAttribute('href', response.url);
+			file.previewTemplate.querySelector('.copyLink').addEventListener('click', () => {
+				this.$showToast('Link copied!', false, 1000);
+				this.$clipboard(response.url);
+			});
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+	#template { display: none; }
+	.uploader-wrapper {
+		display: block;
+		width: 400px;
+		margin: 0 auto;
+		max-width: 100%;
+		transition-duration: 86ms;
+		transition-property: box-shadow,-webkit-transform;
+		transition-property: box-shadow,transform;
+		transition-property: box-shadow,transform,-webkit-transform;
+		will-change: box-shadow,transform;
+
+		&:hover, &.hasFiles {
+			box-shadow: 0 1rem 3rem 0rem rgba(10, 10, 10, 0.25);
+			-webkit-transform: translateY(-.5rem);
+			transform: translateY(-.5rem);
+		}
+	}
+</style>
+<style lang="scss">
+	@import '../../styles/colors.scss';
+	.filepond--panel-root {
+		background: transparent;
+		border: 2px solid #2c3340;
+	}
+	.filepond--drop-label {
+		color: #c7ccd8;
+		pointer-events: none;
+	}
+
+	.filepond--item-panel {
+		background-color: #767b8b;
+	}
+
+	.filepond--root .filepond--drip-blob {
+		background-color: #7f8a9a
+	}
+
+	.filepond--drip {
+		background: black;
+	}
+
+	div.uploader-wrapper {
+		div.control {
+			margin-bottom: 5px;
+			span.select {
+				select {
+					border: 2px solid #2c3340;
+					background: rgba(0, 0, 0, 0.15);
+					border-radius: .3em;
+					color: $uploaderDropdownColor;
+				}
+			}
+		}
+	}
+</style>

src/site/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
+		<!--ream-head-placeholder-->
+		<!--ream-styles-placeholder-->
+	</head>
+	<body>
+		<!--ream-app-placeholder-->
+		<!--ream-scripts-placeholder-->
+	</body>
+</html>

src/site/index.js

@@ -0,0 +1,51 @@
+import Vue from 'vue';
+
+import VueMeta from 'vue-meta';
+import axios from 'axios';
+import VueAxios from 'vue-axios';
+import Buefy from 'buefy';
+import VueTimeago from 'vue-timeago';
+import VueLazyload from 'vue-lazyload';
+import VueAnalytics from 'vue-analytics';
+import Clipboard from 'v-clipboard';
+import VueIsYourPasswordSafe from 'vue-isyourpasswordsafe';
+
+import router from './router';
+import store from './store';
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+Vue.use(VueMeta);
+Vue.use(VueLazyload);
+/*
+Vue.use(VueAnalytics, {
+	id: 'UA-000000000-0',
+	debug: {
+		enabled: !isProduction,
+		sendHitTask: isProduction
+	}
+});
+*/
+Vue.use(VueIsYourPasswordSafe, {
+	minLength: 6,
+	maxLength: 64
+});
+Vue.use(VueAxios, axios);
+Vue.use(Buefy);
+Vue.use(VueTimeago, {
+	name: 'timeago',
+	locale: 'en-US',
+	locales: { 'en-US': require('vue-timeago/locales/en-US.json') }
+});
+Vue.use(Clipboard);
+
+Vue.axios.defaults.headers.common.Accept = 'application/vnd.lolisafe.json';
+// Vue.prototype.$config = require('./config');
+
+export default () => {
+	return {
+		root: () => import('./App.vue'),
+		router,
+		store
+	};
+};

src/site/router/index.js

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+Vue.use(Router);
+
+const router = new Router({
+	mode: 'history',
+	routes: [
+		{ path: '/', component: () => import('../views/Home.vue') },
+		{ path: '/login', component: () => import('../views/Auth/Login.vue') },
+		{ path: '/register', component: () => import('../views/Auth/Register.vue') },
+		{ path: '/dashboard', component: () => import('../views/Dashboard/Uploads.vue') },
+		{ path: '/dashboard/albums', component: () => import('../views/Dashboard/Albums.vue') },
+		{ path: '/dashboard/settings', component: () => import('../views/Dashboard/Settings.vue') },
+		{ path: '*', component: () => import('../views/NotFound.vue') }
+	]
+});
+
+export default router;

src/site/store/index.js

@@ -0,0 +1,51 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+const state = {
+	loggedIn: false,
+	user: {},
+	token: null,
+	config: null
+};
+
+/* eslint-disable no-shadow */
+const mutations = {
+	loggedIn(state, payload) {
+		state.loggedIn = payload;
+	},
+	user(state, payload) {
+		if (!payload) {
+			state.user = {};
+			localStorage.removeItem('ls-user');
+			return;
+		}
+		localStorage.setItem('ls-user', JSON.stringify(payload));
+		state.user = payload;
+	},
+	token(state, payload) {
+		if (!payload) {
+			localStorage.removeItem('ls-token');
+			state.token = null;
+			return;
+		}
+		localStorage.setItem('ls-token', payload);
+		setAuthorizationHeader(payload);
+		state.token = payload;
+	},
+	config(state, payload) {
+		state.config = payload;
+	}
+};
+
+const setAuthorizationHeader = payload => {
+	Vue.axios.defaults.headers.common.Authorization = payload ? `Bearer ${payload}` : '';
+};
+
+const store = new Vuex.Store({
+	state,
+	mutations
+});
+
+export default store;

src/site/styles/_colors.scss

@@ -0,0 +1,19 @@
+// $basePink: #EC1A55;
+
+$background: #1e2430;
+$backgroundAccent: #20222b;
+$backgroundLight1: #f5f6f8;
+
+$defaultTextColor: #4a4a4a;
+$textColor: #c7ccd8;
+$textColorHighlight: white;
+
+$basePink: #ff015b;
+$basePinkHover: rgb(196, 4, 71);
+$baseBlue: #30A9ED;
+$baseBlueHover: rgb(21, 135, 201);
+
+$uploaderDropdownColor: #797979;
+
+$boxShadow: 0 10px 15px rgba(4,39,107,0.2);
+$boxShadowLight: 5px 5px 15px rgba(4, 39, 107, 0.2);

src/site/styles/dropzone.scss

@@ -0,0 +1,713 @@
+/*
+ * The MIT License
+ * Copyright (c) 2012 Matias Meno <m@tias.me>
+ */
+
+ @-webkit-keyframes passing-through {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(40px);
+		-moz-transform: translateY(40px);
+		-ms-transform: translateY(40px);
+		-o-transform: translateY(40px);
+		transform: translateY(40px);
+	}
+	30%,
+	70% {
+		opacity: 1;
+		-webkit-transform: translateY(0px);
+		-moz-transform: translateY(0px);
+		-ms-transform: translateY(0px);
+		-o-transform: translateY(0px);
+		transform: translateY(0px);
+	}
+	100% {
+		opacity: 0;
+		-webkit-transform: translateY(-40px);
+		-moz-transform: translateY(-40px);
+		-ms-transform: translateY(-40px);
+		-o-transform: translateY(-40px);
+		transform: translateY(-40px);
+	}
+}
+@-moz-keyframes passing-through {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(40px);
+		-moz-transform: translateY(40px);
+		-ms-transform: translateY(40px);
+		-o-transform: translateY(40px);
+		transform: translateY(40px);
+	}
+	30%,
+	70% {
+		opacity: 1;
+		-webkit-transform: translateY(0px);
+		-moz-transform: translateY(0px);
+		-ms-transform: translateY(0px);
+		-o-transform: translateY(0px);
+		transform: translateY(0px);
+	}
+	100% {
+		opacity: 0;
+		-webkit-transform: translateY(-40px);
+		-moz-transform: translateY(-40px);
+		-ms-transform: translateY(-40px);
+		-o-transform: translateY(-40px);
+		transform: translateY(-40px);
+	}
+}
+@keyframes passing-through {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(40px);
+		-moz-transform: translateY(40px);
+		-ms-transform: translateY(40px);
+		-o-transform: translateY(40px);
+		transform: translateY(40px);
+	}
+	30%,
+	70% {
+		opacity: 1;
+		-webkit-transform: translateY(0px);
+		-moz-transform: translateY(0px);
+		-ms-transform: translateY(0px);
+		-o-transform: translateY(0px);
+		transform: translateY(0px);
+	}
+	100% {
+		opacity: 0;
+		-webkit-transform: translateY(-40px);
+		-moz-transform: translateY(-40px);
+		-ms-transform: translateY(-40px);
+		-o-transform: translateY(-40px);
+		transform: translateY(-40px);
+	}
+}
+@-webkit-keyframes slide-in {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(40px);
+		-moz-transform: translateY(40px);
+		-ms-transform: translateY(40px);
+		-o-transform: translateY(40px);
+		transform: translateY(40px);
+	}
+	30% {
+		opacity: 1;
+		-webkit-transform: translateY(0px);
+		-moz-transform: translateY(0px);
+		-ms-transform: translateY(0px);
+		-o-transform: translateY(0px);
+		transform: translateY(0px);
+	}
+}
+@-moz-keyframes slide-in {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(40px);
+		-moz-transform: translateY(40px);
+		-ms-transform: translateY(40px);
+		-o-transform: translateY(40px);
+		transform: translateY(40px);
+	}
+	30% {
+		opacity: 1;
+		-webkit-transform: translateY(0px);
+		-moz-transform: translateY(0px);
+		-ms-transform: translateY(0px);
+		-o-transform: translateY(0px);
+		transform: translateY(0px);
+	}
+}
+@keyframes slide-in {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(40px);
+		-moz-transform: translateY(40px);
+		-ms-transform: translateY(40px);
+		-o-transform: translateY(40px);
+		transform: translateY(40px);
+	}
+	30% {
+		opacity: 1;
+		-webkit-transform: translateY(0px);
+		-moz-transform: translateY(0px);
+		-ms-transform: translateY(0px);
+		-o-transform: translateY(0px);
+		transform: translateY(0px);
+	}
+}
+@-webkit-keyframes pulse {
+	0% {
+		-webkit-transform: scale(1);
+		-moz-transform: scale(1);
+		-ms-transform: scale(1);
+		-o-transform: scale(1);
+		transform: scale(1);
+	}
+	10% {
+		-webkit-transform: scale(1.1);
+		-moz-transform: scale(1.1);
+		-ms-transform: scale(1.1);
+		-o-transform: scale(1.1);
+		transform: scale(1.1);
+	}
+	20% {
+		-webkit-transform: scale(1);
+		-moz-transform: scale(1);
+		-ms-transform: scale(1);
+		-o-transform: scale(1);
+		transform: scale(1);
+	}
+}
+@-moz-keyframes pulse {
+	0% {
+		-webkit-transform: scale(1);
+		-moz-transform: scale(1);
+		-ms-transform: scale(1);
+		-o-transform: scale(1);
+		transform: scale(1);
+	}
+	10% {
+		-webkit-transform: scale(1.1);
+		-moz-transform: scale(1.1);
+		-ms-transform: scale(1.1);
+		-o-transform: scale(1.1);
+		transform: scale(1.1);
+	}
+	20% {
+		-webkit-transform: scale(1);
+		-moz-transform: scale(1);
+		-ms-transform: scale(1);
+		-o-transform: scale(1);
+		transform: scale(1);
+	}
+}
+@keyframes pulse {
+	0% {
+		-webkit-transform: scale(1);
+		-moz-transform: scale(1);
+		-ms-transform: scale(1);
+		-o-transform: scale(1);
+		transform: scale(1);
+	}
+	10% {
+		-webkit-transform: scale(1.1);
+		-moz-transform: scale(1.1);
+		-ms-transform: scale(1.1);
+		-o-transform: scale(1.1);
+		transform: scale(1.1);
+	}
+	20% {
+		-webkit-transform: scale(1);
+		-moz-transform: scale(1);
+		-ms-transform: scale(1);
+		-o-transform: scale(1);
+		transform: scale(1);
+	}
+}
+.dropzone,
+.dropzone * {
+	box-sizing: border-box;
+}
+.dropzone {
+	min-height: 75px;
+	border: 2px solid #2c3340;
+	background: rgba(0, 0, 0, 0.15);
+	border-radius: .3em;
+	// border: 2px solid rgba(0, 0, 0, 0.3);
+	// background: white;
+	// padding: 20px 20px;
+}
+.dropzone.dz-clickable {
+	cursor: pointer;
+}
+.dropzone.dz-clickable * {
+	cursor: default;
+}
+.dropzone.dz-clickable .dz-message,
+.dropzone.dz-clickable .dz-message * {
+	cursor: pointer;
+}
+.dropzone.dz-started .dz-message {
+	display: none;
+}
+.dropzone.dz-drag-hover {
+	border-style: solid;
+}
+.dropzone.dz-drag-hover .dz-message {
+	opacity: 0.5;
+}
+.dropzone .dz-message {
+	text-align: center;
+	margin: 2em 0;
+	font-size: .875em;
+	font-weight: 400;
+	line-height: 1.5;
+}
+.dropzone .dz-preview {
+	position: relative;
+	display: inline-block;
+	vertical-align: top;
+	min-height: 40px;
+	margin: 1em;
+	margin-bottom: 0.5em;
+	width: calc(100% - 2em);
+	background: #808080;
+	border-radius: .3em;
+}
+
+.dropzone .dz-preview:not(:nth-child(2)) {
+	margin-top: 0px;
+}
+
+.dropzone .dz-preview:last-child {
+	margin-bottom: 1em;
+}
+.dropzone .dz-preview:hover {
+	z-index: 1000;
+}
+.dropzone .dz-preview:hover .dz-details {
+	opacity: 1;
+}
+.dropzone .dz-preview.dz-file-preview .dz-image {
+	border-radius: 20px;
+	background: #999;
+	background: linear-gradient(to bottom, #eee, #ddd);
+}
+.dropzone .dz-preview.dz-file-preview .dz-details {
+	opacity: 1;
+}
+.dropzone .dz-preview.dz-image-preview {
+	background: white;
+}
+.dropzone .dz-preview.dz-image-preview .dz-details {
+	-webkit-transition: opacity 0.2s linear;
+	-moz-transition: opacity 0.2s linear;
+	-ms-transition: opacity 0.2s linear;
+	-o-transition: opacity 0.2s linear;
+	transition: opacity 0.2s linear;
+}
+.dropzone .dz-preview .dz-remove {
+	font-size: 14px;
+	text-align: center;
+	display: block;
+	cursor: pointer;
+	border: none;
+}
+.dropzone .dz-preview .dz-remove:hover {
+	text-decoration: underline;
+}
+.dropzone .dz-preview:hover .dz-details {
+	opacity: 1;
+}
+.dropzone .dz-preview .dz-details {
+	z-index: 20;
+	position: absolute;
+	top: 0;
+	left: 0;
+	opacity: 0;
+	font-size: 13px;
+	min-width: 100%;
+	max-width: 100%;
+	// padding: 2em 1em;
+	text-align: center;
+	color: rgba(0, 0, 0, 0.9);
+	line-height: 150%;
+}
+.dropzone .dz-preview .dz-details .dz-size {
+	// margin-bottom: 1em;
+	font-size: 12px !important;
+	transform: translateY(-5px);
+}
+.dropzone .dz-preview .dz-details .dz-filename {
+	white-space: nowrap;
+	font-size: .75em;
+	line-height: 1.5;
+	width: 225px;
+	margin-top: 3px;
+}
+.dropzone .dz-preview .dz-details .dz-filename:hover span {
+	border: 1px solid rgba(200, 200, 200, 0.8);
+	background-color: rgba(255, 255, 255, 0.8);
+}
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+	border: 1px solid transparent;
+}
+.dropzone .dz-preview .dz-details .dz-filename span,
+.dropzone .dz-preview .dz-details .dz-size span {
+	/*
+	background-color: rgba(255, 255, 255, 0.4);
+	padding: 0 0.4em;
+	border-radius: 3px;
+	*/
+}
+.dropzone .dz-preview:hover .dz-image img {
+	-webkit-transform: scale(1.05, 1.05);
+	-moz-transform: scale(1.05, 1.05);
+	-ms-transform: scale(1.05, 1.05);
+	-o-transform: scale(1.05, 1.05);
+	transform: scale(1.05, 1.05);
+	-webkit-filter: blur(8px);
+	filter: blur(8px);
+}
+.dropzone .dz-preview .dz-image {
+	border-radius: 20px;
+	overflow: hidden;
+	width: 120px;
+	height: 120px;
+	position: relative;
+	display: block;
+	z-index: 10;
+}
+.dropzone .dz-preview .dz-image img {
+	display: block;
+}
+.dropzone .dz-preview.dz-success .dz-success-mark {
+	-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+	-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+	-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+	-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+	animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+.dropzone .dz-preview.dz-error .dz-error-mark {
+	opacity: 1;
+	-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+	-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+	-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+	-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+	animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+.dropzone .dz-preview .dz-success-mark,
+.dropzone .dz-preview .dz-error-mark {
+	pointer-events: none;
+	opacity: 0;
+	z-index: 500;
+	position: absolute;
+	display: block;
+	top: 50%;
+	left: 50%;
+	margin-left: -27px;
+	margin-top: -27px;
+}
+.dropzone .dz-preview .dz-success-mark svg,
+.dropzone .dz-preview .dz-error-mark svg {
+	display: block;
+	width: 54px;
+	height: 54px;
+}
+.dropzone .dz-preview.dz-processing .dz-progress {
+	opacity: 1;
+	-webkit-transition: all 0.2s linear;
+	-moz-transition: all 0.2s linear;
+	-ms-transition: all 0.2s linear;
+	-o-transition: all 0.2s linear;
+	transition: all 0.2s linear;
+}
+.dropzone .dz-preview.dz-complete .dz-progress {
+	opacity: 0;
+	-webkit-transition: opacity 0.4s ease-in;
+	-moz-transition: opacity 0.4s ease-in;
+	-ms-transition: opacity 0.4s ease-in;
+	-o-transition: opacity 0.4s ease-in;
+	transition: opacity 0.4s ease-in;
+}
+.dropzone .dz-preview:not(.dz-processing) .dz-progress {
+	-webkit-animation: pulse 6s ease infinite;
+	-moz-animation: pulse 6s ease infinite;
+	-ms-animation: pulse 6s ease infinite;
+	-o-animation: pulse 6s ease infinite;
+	animation: pulse 6s ease infinite;
+}
+.dropzone .dz-preview .dz-progress {
+	opacity: 1;
+	z-index: 1000;
+	pointer-events: none;
+	position: absolute;
+	margin-top: -8px;
+	width: 80px;
+	margin-left: -40px;
+	background: rgba(255, 255, 255, 0.9);
+	-webkit-transform: scale(1);
+			transform: scale(1);
+	border-radius: 8px;
+	overflow: hidden;
+	right: 10px;
+	left: initial;
+	margin: 0px;
+	height: 5px;
+	top: 17px;
+}
+.dropzone .dz-preview .dz-progress .dz-upload {
+	// background: #333;
+	// background: linear-gradient(to bottom, #666, #444);
+	background: #0b6312;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 0;
+	-webkit-transition: width 300ms ease-in-out;
+	-moz-transition: width 300ms ease-in-out;
+	-ms-transition: width 300ms ease-in-out;
+	-o-transition: width 300ms ease-in-out;
+	transition: width 300ms ease-in-out;
+}
+.dropzone .dz-preview.dz-error .dz-error-message {
+	display: block;
+}
+.dropzone .dz-preview.dz-error:hover .dz-error-message {
+	opacity: 1;
+	pointer-events: auto;
+}
+.dropzone .dz-preview .dz-error-message {
+	pointer-events: none;
+	z-index: 1000;
+	position: absolute;
+	display: block;
+	display: none;
+	opacity: 0;
+	-webkit-transition: opacity 0.3s ease;
+	-moz-transition: opacity 0.3s ease;
+	-ms-transition: opacity 0.3s ease;
+	-o-transition: opacity 0.3s ease;
+	transition: opacity 0.3s ease;
+	border-radius: 8px;
+	font-size: 13px;
+	top: 130px;
+	left: -10px;
+	width: 140px;
+	background: #be2626;
+	background: linear-gradient(to bottom, #be2626, #a92222);
+	padding: 0.5em 1.2em;
+	color: white;
+}
+.dropzone .dz-preview .dz-error-message:after {
+	content: '';
+	position: absolute;
+	top: -6px;
+	left: 64px;
+	width: 0;
+	height: 0;
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	border-bottom: 6px solid #be2626;
+}
+/*
+.vue-dropzone {
+	border: 2px solid #E5E5E5;
+	font-family: 'Arial', sans-serif;
+	letter-spacing: 0.2px;
+	color: #777;
+	transition: background-color 0.2s linear;
+}
+.vue-dropzone:hover {
+	background-color: #F6F6F6;
+}
+*/
+.vue-dropzone i {
+	color: #CCC;
+}
+.vue-dropzone .dz-preview .dz-image {
+	border-radius: 0;
+	width: 100%;
+	height: 100%;
+}
+.vue-dropzone .dz-preview .dz-image img:not([src]) {
+	width: 200px;
+	height: 200px;
+}
+.vue-dropzone .dz-preview .dz-image:hover img {
+	transform: none;
+	-webkit-filter: none;
+}
+.vue-dropzone .dz-preview .dz-details {
+	bottom: 0;
+	top: 0;
+	color: white;
+	background-color: transparent;
+	// background-color: rgba(33, 150, 243, 0.8);
+	// transition: opacity .2s linear;
+	transition: background-color .2s linear;
+	text-align: left;
+	border-radius: .3em;
+	height: 40px;
+	padding-left: 15px;
+}
+
+.vue-dropzone .dz-preview.dz-success .dz-details {
+	background-color: #22a061;
+}
+
+.vue-dropzone .dz-preview.dz-error .dz-details {
+	background-color: #c44e47;
+}
+
+.vue-dropzone .dz-preview .dz-details .dz-filename {
+	overflow: hidden;
+}
+
+.vue-dropzone .dz-preview .dz-details .dz-filename span {
+	font-size: 1.25em;
+}
+.vue-dropzone .dz-preview .dz-details .dz-filename span,
+.vue-dropzone .dz-preview .dz-details .dz-size span {
+	background-color: transparent;
+	// font-size: .625em;
+	// opacity: .5;
+	opacity: 1;
+	transition: opacity .25s ease-in-out;
+	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+}
+
+.vue-dropzone .dz-preview .dz-details .dz-size span,
+.vue-dropzone .dz-preview .dz-details .dz-size span strong {
+	opacity: .75;
+	color: white;
+	font-size: .625em;
+}
+.vue-dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+	border: none;
+}
+.vue-dropzone .dz-preview .dz-details .dz-filename:hover span {
+	background-color: transparent;
+	border: none;
+}
+.vue-dropzone .dz-preview .dz-progress .dz-upload {
+	// background: #cccccc;
+	background: #8bc34a;
+}
+.vue-dropzone .dz-preview .dz-remove {
+	position: absolute;
+	z-index: 30;
+	color: white;
+	margin-left: 15px;
+	padding: 10px;
+	top: inherit;
+	bottom: 15px;
+	border: 2px white solid;
+	text-decoration: none;
+	text-transform: uppercase;
+	font-size: 0.8rem;
+	font-weight: 800;
+	letter-spacing: 1.1px;
+	opacity: 0;
+}
+.vue-dropzone .dz-preview:hover .dz-remove {
+	opacity: 1;
+}
+.vue-dropzone .dz-preview .dz-success-mark,
+.vue-dropzone .dz-preview .dz-error-mark {
+	margin-left: auto;
+	margin-top: auto;
+	width: 100%;
+	top: 35%;
+	left: 0;
+}
+.vue-dropzone .dz-preview .dz-success-mark svg,
+.vue-dropzone .dz-preview .dz-error-mark svg {
+	margin-left: auto;
+	margin-right: auto;
+}
+.vue-dropzone .dz-preview .dz-error-message {
+	top: calc(15%);
+	margin-left: auto;
+	margin-right: auto;
+	left: 0;
+	width: 100%;
+}
+.vue-dropzone .dz-preview .dz-error-message:after {
+	bottom: -6px;
+	top: initial;
+	border-top: 6px solid #a92222;
+	border-bottom: none;
+}
+
+.dz-size span, .dz-size span strong {
+	font-size: 0.9em !important;
+}
+
+.vue-dropzone .dz-preview .result,
+.vue-dropzone .dz-preview .error {
+	display: none;
+}
+.vue-dropzone .dz-preview.dz-success .result,
+.vue-dropzone .dz-preview.dz-error .error {
+	display: inline-block;
+	position: absolute;
+	z-index: 50;
+	right: 5px;
+	top: 6px;
+
+	-webkit-transition: display 0.2s linear;
+	-moz-transition: display 0.2s linear;
+	-ms-transition: display 0.2s linear;
+	-o-transition: display 0.2s linear;
+	transition: display 0.2s linear;
+
+	cursor: pointer;
+
+	> div {
+		margin-right: 5px;
+		display: inline-block;
+		cursor: pointer;
+		span {
+			width: 2em;
+			height: 2em;
+			color: #fff;
+			outline: none;
+			border-radius: 50%;
+			background-color: rgba(0,0,0,.5);
+			display: block;
+			cursor: pointer;
+			a { cursor: pointer; }
+			i {
+				color: white;
+				position: absolute;
+				top: 4px;
+				left: 4px;
+				cursor: pointer;
+			}
+		}
+	}
+}
+
+.vue-dropzone .dz-preview.dz-error .error {
+	span.error-message {
+		display: none;
+		width: 250px;
+		background-color: black;
+		color: #fff;
+		text-align: center;
+		padding: 5px 0;
+		border-radius: 6px;
+		top: -8px;
+		height: auto;
+		left: 60px;
+		position: absolute;
+
+		-webkit-transition: display 0.2s linear;
+		-moz-transition: display 0.2s linear;
+		-ms-transition: display 0.2s linear;
+		-o-transition: display 0.2s linear;
+		transition: display 0.2s linear;
+	}
+
+	> div > span {
+		position: relative;
+		&:hover {
+			span.error-message {
+				display: inline-table;
+			}
+		}
+	}
+	i {
+		top: 3px !important;
+		left: 5px !important;
+	}
+}

src/site/styles/style.scss

@@ -0,0 +1,141 @@
+// Let's first take care of having the customized colors ready.
+@import "./_colors.scss";
+
+// Loading screen is the first thing that shows up, let's put it at the top.
+div#loading {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 100;
+	height: 100%;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	div.background {
+		position: absolute;
+		z-index: -1;
+		height: 100%;
+		width: 100%;
+		top: 0px;
+		left: 0px;
+		background: $background;
+	}
+}
+
+// Bulma/Buefy customization
+@import "../../../node_modules/bulma/sass/utilities/_all.sass";
+
+$body-size: 14px !default;
+$family-primary: 'Nunito', BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$size-normal: 0.75rem;
+
+@import "../../../node_modules/bulma/bulma.sass";
+@import "../../../node_modules/buefy/src/scss/buefy.scss";
+
+/*
+.material-icons {
+	font-family: 'Material Icons';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	font-feature-settings: "liga";
+	-webkit-font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
+}
+*/
+
+/*
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	text-rendering: optimizeLegibility;
+}
+*/
+html {
+	// font-size: 100%;
+	font-size: 14px;
+	background-color: $background;
+}
+
+h4 {
+	font-size: 2em;
+	font-weight: 700;
+	line-height: 1.25em;
+}
+
+div.spacer {
+	&.mt1 { margin-top: 1em; }
+	&.mt2 { margin-top: 2em; }
+	&.mt3 { margin-top: 3em; }
+	&.mt4 { margin-top: 4em; }
+	&.mt5 { margin-top: 5em; }
+	&.mt6 { margin-top: 6em; }
+	&.mt7 { margin-top: 7em; }
+}
+
+// Bulma color changes.
+.tooltip.is-top.is-primary:before { border-top: 5px solid #20222b; }
+.tooltip.is-primary:after { background: #20222b; }
+
+div#drag-overlay {
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	z-index: 100;
+	div.background {
+		background: rgba(0, 0, 0, 0.9);
+		position: absolute;
+		top: 3%;
+		left: 3%;
+		width: 94%;
+		height: 94%;
+		border: 2px dashed #fff;
+		border-radius: 10px;
+		box-shadow: 0 0 0 4px #ffffff00, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
+	}
+
+	div.drop {
+		width: 100%;
+		color: white;
+		position: absolute;
+		height: 100%;
+		align-items: center;
+		display: flex;
+		justify-content: center;
+		font-size: 2em;
+	}
+}
+
+section input, section a.button {
+	font-size: 14px !important;
+}
+section input, section p.control a.button {
+	border-left: 0px !important;
+	border-top: 0px !important;
+	border-right: 0px !important;
+	border-radius: 0px !important;
+	box-shadow: 0 0 0 !important;
+}
+
+section p.control a.button { margin-left: 10px !important; }
+section p.control button {
+	height: 100%;
+	font-size: 12px;
+}
+
+.switch input[type=checkbox] + .check:before {
+	background: #fbfbfb;
+}

src/site/views/Auth/ChangePassword.vue

@@ -0,0 +1,178 @@
+<style lang="scss" scoped>
+	@import '../../styles/colors.scss';
+
+	a.is-themed {
+		background: $basePink;
+		color: #fafafa;
+		border: none;
+	}
+
+	a.is-themed:hover {
+		background: $basePinkHover;
+		border: none;
+	}
+
+	body.kpop a.is-themed { background: $baseBlue; }
+	body.kpop a.is-themed:hover { background: $baseBlueHover; }
+
+	a.is-text {
+		display: inline-flex;
+		padding-top: 4px;
+		color: #fafafa;
+	}
+
+	a.is-text:hover { color: $basePink; }
+	body.kpop a.is-text:hover { color: $baseBlue; }
+
+	a.text { color: white }
+	a.text:hover { color: #FF015B; }
+
+	input, p.control a.button {
+		border-left: 0px;
+			border-top: 0px;
+			border-right: 0px;
+			border-radius: 0px;
+			box-shadow: 0 0 0;
+	}
+
+	p.control a.button { margin-left: 10px; }
+	p.control a.button:hover { border-bottom: 1px solid #FF015B; }
+	p.control a#loginBtn { border-right: 0px; }
+	p.control a#registerBtn { border-left: 0px; }
+
+	span.errorMessage {
+		display: block;
+		padding-top: 50px;
+		color: #FF015B;
+	}
+
+	section.hero {
+		overflow: hidden;
+	}
+
+	section.hero, section.hero > * {
+		position: relative;
+	}
+
+	section.hero div.background {
+		content: '';
+		position: fixed;
+		top: -50px;
+		left: -50px;
+		background: no-repeat scroll 50% 50%;
+		background-size: cover;
+		background-image: url(../../../public/images/home-background.jpg);
+		filter: blur(25px);
+		-webkit-filter: blur(25px);
+		z-index: 0;
+		height: calc(100vh + 100px);
+		width: calc(100% + 100px);
+	}
+
+	h3 {
+		color: #c7c7c7;
+		margin-bottom: 10px;
+	}
+</style>
+
+<template>
+	<section class="hero is-fullheight has-text-centered">
+		<div class="background"/>
+
+		<div class="hero-body">
+			<div class="container">
+				<router-link to="/">
+					<div class="logo">
+						<Logo/>
+					</div>
+				</router-link>
+
+				<h3>Please choose a new password for your account.</h3>
+				<div class="columns">
+					<div class="column is-4 is-offset-4">
+						<b-field>
+							<b-input v-model="password"
+								type="password"
+								placeholder="Password"
+								password-reveal/>
+						</b-field>
+						<b-field>
+							<b-input v-model="rePassword"
+								type="password"
+								placeholder="Re-type Password"
+								password-reveal
+								@keyup.enter.native="change"/>
+						</b-field>
+
+						<p class="control has-addons is-pulled-right">
+							<a :class="{ 'is-loading': isLoading }"
+								class="button is-themed"
+								@click="change">Request Password Change</a>
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Logo from '../../components/logo/Logo.vue';
+
+export default {
+	components: { Logo },
+	props: {
+		key: {
+			type: String,
+			default: null
+		},
+		email: {
+			type: String,
+			default: null
+		}
+	},
+	data() {
+		return {
+			password: null,
+			rePassword: null,
+			isLoading: false
+		};
+	},
+	mounted() {
+		this.$ga.page({
+			page: '/login/change',
+			title: 'Change Password',
+			location: window.location.href
+		});
+
+		if (!this.key || !this.email) {
+			this.$showToast('Data is missing.', true);
+			this.$router.push('/');
+		}
+	},
+	methods: {
+		async change() {
+			if (this.isLoading) return;
+			if (this.password !== this.rePassword) {
+				this.$showToast('Passwords don\'t match', true);
+				return;
+			}
+			this.isLoading = true;
+
+			try {
+				const response = await this.axios.post(`${this.$config.baseURL}/password/verify`, {
+					password: this.password,
+					verificationKey: this.key,
+					email: this.email
+				});
+				this.$showToast(response.data.message);
+				this.isLoading = false;
+				this.$router.push('/login');
+			} catch (error) {
+				this.isLoading = false;
+				this.$onPromiseError(error);
+			}
+		}
+	}
+};
+</script>

src/site/views/Auth/ForgotPassword.vue

@@ -0,0 +1,152 @@
+<style lang="scss" scoped>
+	@import '../../styles/colors.scss';
+
+	a.is-themed {
+		background: $basePink;
+		color: #fafafa;
+		border: none;
+	}
+
+	a.is-themed:hover {
+		background: $basePinkHover;
+		border: none;
+	}
+
+	body.kpop a.is-themed { background: $baseBlue; }
+	body.kpop a.is-themed:hover { background: $baseBlueHover; }
+
+	a.is-text {
+		display: inline-flex;
+		padding-top: 4px;
+		color: #fafafa;
+	}
+
+	a.is-text:hover { color: $basePink; }
+	body.kpop a.is-text:hover { color: $baseBlue; }
+
+	a.text { color: white }
+	a.text:hover { color: #FF015B; }
+
+	input, p.control a.button {
+		border-left: 0px;
+			border-top: 0px;
+			border-right: 0px;
+			border-radius: 0px;
+			box-shadow: 0 0 0;
+	}
+
+	p.control a.button { margin-left: 10px; }
+	p.control a.button:hover { border-bottom: 1px solid #FF015B; }
+	p.control a#loginBtn { border-right: 0px; }
+	p.control a#registerBtn { border-left: 0px; }
+
+	span.errorMessage {
+		display: block;
+		padding-top: 50px;
+		color: #FF015B;
+	}
+
+	section.hero {
+		overflow: hidden;
+	}
+
+	section.hero, section.hero > * {
+		position: relative;
+	}
+
+	section.hero div.background {
+		content: '';
+		position: fixed;
+		top: -50px;
+		left: -50px;
+		background: no-repeat scroll 50% 50%;
+		background-size: cover;
+		background-image: url(../../../public/images/home-background.jpg);
+		filter: blur(25px);
+		-webkit-filter: blur(25px);
+		z-index: 0;
+		height: calc(100vh + 100px);
+		width: calc(100% + 100px);
+	}
+
+	h3 {
+		color: #c7c7c7;
+		margin-bottom: 10px;
+	}
+</style>
+
+<template>
+	<section class="hero is-fullheight has-text-centered">
+		<div class="background"/>
+
+		<div class="hero-body">
+			<div class="container">
+				<router-link to="/">
+					<div class="logo">
+						<Logo/>
+					</div>
+				</router-link>
+
+				<h3>To request a new password please enter your account email in the box below. <br>We will send you an email with further instructions.</h3>
+				<div class="columns">
+					<div class="column is-4 is-offset-4">
+						<b-field>
+							<b-input v-model="email"
+								type="text"
+								placeholder="Email"/>
+						</b-field>
+
+						<p class="control has-addons is-pulled-right">
+							<a :class="{ 'is-loading': isLoading }"
+								class="button is-themed"
+								@click="request">Request Password Change</a>
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Logo from '../../components/logo/Logo.vue';
+
+export default {
+	name: 'ForgotPassword',
+	components: { Logo },
+	data() {
+		return {
+			email: null,
+			isLoading: false
+		};
+	},
+	metaInfo() {
+		return { title: 'Forgot password' };
+	},
+	mounted() {
+		this.$ga.page({
+			page: '/login/forgot',
+			title: 'Forgot Password',
+			location: window.location.href
+		});
+	},
+	methods: {
+		request() {
+			if (this.isLoading) return;
+			if (!this.email || this.email === '') {
+				this.$showToast('Email can\'t be empty', true);
+				return;
+			}
+			this.isLoading = true;
+			this.axios.post(`${this.$config.baseURL}/password/forgot`, { email: this.email }).then(response => {
+				this.$showToast(response.data.message);
+				this.isLoading = false;
+				return this.$router.push('/login');
+			}).catch(err => {
+				this.isLoading = false;
+				this.$onPromiseError(err);
+			});
+		}
+	}
+};
+</script>

src/site/views/Auth/Login.vue

@@ -0,0 +1,178 @@
+<style lang="scss" scoped>
+	@import '../../styles/colors.scss';
+</style>
+<style lang="scss">
+	@import '../../styles/colors.scss';
+
+	section#login { background-color: $backgroundLight1 !important; }
+	section#login input, section#login a.button {
+		font-size: 14px !important;
+	}
+	section#login input, section#login p.control a.button {
+		border-left: 0px !important;
+		border-top: 0px !important;
+		border-right: 0px !important;
+		border-radius: 0px !important;
+		box-shadow: 0 0 0 !important;
+	}
+
+	section#login p.control a.button { margin-left: 10px !important; }
+	section#login p.control a#loginBtn { border-right: 0px !important; }
+	section#login p.control a#registerBtn { border-left: 0px !important; }
+</style>
+
+<template>
+	<section id="login"
+		class="hero is-fullheight">
+		<Navbar/>
+		<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">
+						<b-field>
+							<b-input v-model="username"
+								type="text"
+								placeholder="Username / Email"
+								@keyup.enter.native="login"/>
+						</b-field>
+						<b-field>
+							<b-input v-model="password"
+								type="password"
+								placeholder="Password"
+								password-reveal
+								@keyup.enter.native="login"/>
+						</b-field>
+
+						<p class="control has-addons is-pulled-right">
+							<router-link id="registerBtn"
+								to="/register"
+								class="button">Register</router-link>
+							<a id="loginBtn"
+								class="button"
+								@click="login">Log in</a>
+						</p>
+
+					</div>
+					<div class="column is-hidden-mobile"/>
+					<div class="column is-hidden-mobile"/>
+				</div>
+			</div>
+		</div>
+
+		<!--
+		<b-modal :active.sync="isMfaModalActive"
+			:canCancel="true"
+			has-modal-card>
+			<div class="card mfa">
+				<div class="card-content">
+					<div class="content">
+						<p>Enter your Two-Factor code to proceed.</p>
+						<b-field>
+							<b-input v-model="mfaCode"
+								placeholder="Your MFA Code"
+								type="text"
+								@keyup.enter.native="mfa"/>
+							<p class="control">
+								<button :class="{ 'is-loading': isLoading }"
+									class="button is-primary"
+									@click="mfa">Submit</button>
+							</p>
+						</b-field>
+					</div>
+				</div>
+			</div>
+		</b-modal>
+		-->
+	</section>
+</template>
+
+<script>
+import Navbar from '../../components/navbar/Navbar.vue';
+
+export default {
+	name: 'Login',
+	components: { Navbar },
+	data() {
+		return {
+			username: null,
+			password: null,
+			mfaCode: null,
+			isMfaModalActive: false,
+			isLoading: false
+		};
+	},
+	computed: {
+		config() {
+			return this.$store.state.config;
+		}
+	},
+	metaInfo() {
+		return { title: 'Login' };
+	},
+	mounted() {
+		this.$ga.page({
+			page: '/login',
+			title: 'Login',
+			location: window.location.href
+		});
+	},
+	methods: {
+		login() {
+			if (this.isLoading) return;
+			if (!this.username || !this.password) {
+				this.$showToast('Please fill both fields before attempting to log in.', true);
+				return;
+			}
+			this.isLoading = true;
+			this.axios.post(`${this.$config.baseURL}/auth/login`, {
+				username: this.username,
+				password: this.password
+			}).then(res => {
+				this.$store.commit('token', res.data.token);
+				this.$store.commit('user', res.data.user);
+				/*
+				if (res.data.mfa) {
+					this.isMfaModalActive = true;
+					this.isLoading = false;
+				} else {
+					this.getUserData();
+				}
+				*/
+				this.redirect();
+			}).catch(err => {
+				this.isLoading = false;
+				this.$onPromiseError(err);
+			});
+		},
+		/*
+		mfa() {
+			if (!this.mfaCode) return;
+			if (this.isLoading) return;
+			this.isLoading = true;
+			this.axios.post(`${this.$BASE_URL}/login/mfa`, { token: this.mfaCode })
+				.then(res => {
+					this.$store.commit('token', res.data.token);
+					this.redirect();
+				})
+				.catch(err => {
+					this.isLoading = false;
+					this.$onPromiseError(err);
+				});
+		},*/
+		redirect() {
+			this.$store.commit('loggedIn', true);
+			if (typeof this.$route.query.redirect !== 'undefined') {
+				this.$router.push(this.$route.query.redirect);
+				return;
+			}
+			this.$router.push('/dashboard');
+		}
+	}
+};
+</script>

src/site/views/Home.vue

@@ -0,0 +1,96 @@
+<style lang="scss" scoped>
+	@import "../styles/_colors.scss";
+	div.home {
+		color: $textColor;
+		// background-color: #1e2430;
+	}
+	.columns {
+		.column {
+			&.centered {
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+
+	h4 {
+		color: $textColorHighlight;
+		margin-bottom: 1em;
+	}
+
+	p {
+		font-size: 1.25em;
+		font-weight: 600;
+		line-height: 1.5;
+
+		strong {
+			color: $textColorHighlight;
+		}
+	}
+</style>
+
+<template>
+	<div class="home">
+		<section class="hero is-fullheight has-text-centered">
+			<Navbar :isWhite="true"/>
+			<div class="hero-body">
+				<div class="container">
+					<div class="columns">
+						<div class="column is-3 is-offset-2">
+							<div class="logo">
+								<Logo/>
+							</div>
+						</div>
+						<div class="column is-5 centered">
+							<div class="content-wrapper">
+								<h4>Blazing fast file uploader. For real.</h4>
+								<p>
+									A <strong>modern</strong> and <strong>self-hosted</strong> file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.
+								</p>
+							</div>
+						</div>
+					</div>
+					<div class="spacer mt7" />
+					<Uploader />
+				</div>
+			</div>
+			<div class="hero-foot">
+				<div class="container">
+					<Links />
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<script>
+import Navbar from '../components/navbar/Navbar.vue';
+import Logo from '../components/logo/Logo.vue';
+import Uploader from '../components/uploader/Uploader.vue';
+import Links from '../components/home/links/Links.vue';
+
+export default {
+	name: 'Home',
+	components: {
+		Navbar,
+		Logo,
+		Uploader,
+		Links
+	},
+	data() {
+		return { albums: [] };
+	},
+	computed: {
+		loggedIn() {
+			return this.$store.state.loggedIn;
+		}
+	},
+	mounted() {
+		this.$ga.page({
+			page: '/',
+			title: 'Home',
+			location: window.location.href
+		});
+	}
+};
+</script>

src/site/views/NotFound.vue

@@ -0,0 +1,35 @@
+<style lang="scss" scoped>
+@import "../styles/_colors.scss";
+	h2 {
+		font-weight: 100;
+		color: $textColor;
+		font-size: 4em;
+		text-align: center;
+	}
+</style>
+
+<template>
+	<section class="hero is-fullheight">
+		<Navbar/>
+		<div class="hero-body">
+			<div class="container">
+				<h2>404</h2>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Navbar from '../components/navbar/Navbar.vue';
+
+export default {
+	components: { Navbar },
+	mounted() {
+		this.$ga.page({
+			page: '/404',
+			title: 'Not Found',
+			location: window.location.href
+		});
+	}
+};
+</script>

src/site/views/dashboard/Album.vue

@@ -0,0 +1,172 @@
+<style lang="scss" scoped>
+	@import '../../styles/colors.scss';
+	section { background-color: $backgroundLight1 !important; }
+	section.hero div.hero-body {
+		align-items: baseline;
+	}
+
+	div.view-container {
+		padding: 2rem;
+	}
+
+	div.album {
+		display: flex;
+		margin-bottom: 10px;
+
+		div.thumb {
+			width: 64px;
+			height: 64px;
+			-webkit-box-shadow: $boxShadowLight;
+					box-shadow: $boxShadowLight;
+		}
+
+		div.info {
+			margin-left: 15px;
+			h4 {
+				font-size: 1.5rem;
+				a {
+					color: $defaultTextColor;
+					font-weight: 400;
+					&:hover { text-decoration: underline; }
+				}
+			}
+			span { display: block; }
+			span:nth-child(3) {
+				font-size: 0.9rem;
+			}
+		}
+
+		div.latest {
+			flex-grow: 1;
+			justify-content: flex-end;
+			display: flex;
+			margin-left: 15px;
+
+			div.more {
+				width: 64px;
+				height: 64px;
+				background: white;
+				display: flex;
+				align-items: center;
+				padding: 10px;
+				text-align: center;
+				a {
+					line-height: 1rem;
+					color: $defaultTextColor;
+					&:hover { text-decoration: underline; }
+				}
+			}
+		}
+	}
+</style>
+<style lang="scss">
+	@import '../../styles/colors.scss';
+</style>
+
+
+<template>
+	<section class="hero is-fullheight">
+		<div class="hero-body">
+			<div class="container">
+				<div class="columns">
+					<div class="column is-narrow">
+						<Sidebar/>
+					</div>
+					<div class="column">
+
+						<h1 class="title">{{ albumName }}</h1>
+						<hr>
+
+						<div class="view-container">
+							<div v-for="album in albums"
+								:key="album.id"
+								class="album">
+								<div class="thumb">
+									<figure class="image is-64x64 thumb">
+										<img src="../../assets/images/blank.png">
+									</figure>
+								</div>
+								<div class="info">
+									<h4>
+										<router-link :to="`/dashboard/albums/${album.id}`">{{ album.name }}</router-link>
+									</h4>
+									<span>Updated <timeago :since="album.editedAt" /></span>
+									<span>{{ album.fileCount || 0 }} files</span>
+								</div>
+								<div class="latest">
+									<div v-for="file of album.files"
+										:key="file.id"
+										class="thumb">
+										<figure class="image is-64x64">
+											<a :href="file.url"
+												target="_blank">
+												<img :src="file.thumbSquare">
+											</a>
+										</figure>
+									</div>
+									<div v-if="album.fileCount > 5"
+										class="thumb more no-background">
+										<router-link :to="`/dashboard/albums/${album.id}`">{{ album.fileCount - 5 }}+ more</router-link>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Sidebar from '../../components/sidebar/Sidebar.vue';
+import Grid from '../../components/grid/Grid.vue';
+
+export default {
+	components: {
+		Sidebar,
+		Grid
+	},
+	data() {
+		return {
+			albums: [],
+			newAlbumName: null
+		};
+	},
+	metaInfo() {
+		return { title: 'Uploads' };
+	},
+	mounted() {
+		this.getAlbums();
+		this.$ga.page({
+			page: '/dashboard/albums',
+			title: 'Albums',
+			location: window.location.href
+		});
+	},
+	methods: {
+		async createAlbum() {
+			if (!this.newAlbumName || this.newAlbumName === '') return;
+			try {
+				const response = await this.axios.post(`${this.$config.baseURL}/album/new`,
+					{ name: this.newAlbumName });
+				this.newAlbumName = null;
+				this.$toast.open(response.data.message);
+				this.getAlbums();
+				return;
+			} catch (error) {
+				this.$onPromiseError(error);
+			}
+		},
+		async getAlbums() {
+			try {
+				const response = await this.axios.get(`${this.$config.baseURL}/albums/mini`);
+				this.albums = response.data.albums;
+				console.log(this.albums);
+			} catch (error) {
+				console.error(error);
+			}
+		}
+	}
+};
+</script>

src/site/views/dashboard/Albums.vue

@@ -0,0 +1,342 @@
+<style lang="scss" scoped>
+	@import '../../styles/colors.scss';
+	section { background-color: $backgroundLight1 !important; }
+	section.hero div.hero-body {
+		align-items: baseline;
+	}
+	div.search-container {
+		display: flex;
+		justify-content: center;
+	}
+
+	div.view-container {
+		padding: 2rem;
+	}
+	div.album {
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: 10px;
+
+		div.arrow-container {
+			width: 2em;
+			height: 64px;
+			position: relative;
+			cursor: pointer;
+
+			i {
+				border: 2px solid $defaultTextColor;
+				border-right: 0;
+				border-top: 0;
+				display: block;
+				height: 1em;
+				position: absolute;
+				transform: rotate(-135deg);
+				transform-origin: center;
+				width: 1em;
+				z-index: 4;
+				top: 22px;
+
+				-webkit-transition: transform 0.1s linear;
+				-moz-transition: transform 0.1s linear;
+				-ms-transition: transform 0.1s linear;
+				-o-transition: transform 0.1s linear;
+				transition: transform 0.1s linear;
+
+				&.active {
+					transform: rotate(-45deg);
+				}
+			}
+		}
+		div.thumb {
+			width: 64px;
+			height: 64px;
+			-webkit-box-shadow: $boxShadowLight;
+					box-shadow: $boxShadowLight;
+		}
+
+		div.info {
+			margin-left: 15px;
+			h4 {
+				font-size: 1.5rem;
+				a {
+					color: $defaultTextColor;
+					font-weight: 400;
+					&:hover { text-decoration: underline; }
+				}
+			}
+			span { display: block; }
+			span:nth-child(3) {
+				font-size: 0.9rem;
+			}
+		}
+
+		div.latest {
+			flex-grow: 1;
+			justify-content: flex-end;
+			display: flex;
+			margin-left: 15px;
+
+			span.no-files {
+				font-size: 1.5em;
+				color: #b1b1b1;
+				padding-top: 17px;
+			}
+
+			div.more {
+				width: 64px;
+				height: 64px;
+				background: white;
+				display: flex;
+				align-items: center;
+				padding: 10px;
+				text-align: center;
+				a {
+					line-height: 1rem;
+					color: $defaultTextColor;
+					&:hover { text-decoration: underline; }
+				}
+			}
+		}
+
+		div.details {
+			flex: 0 1 100%;
+			padding-left: 2em;
+			padding-top: 1em;
+			min-height: 50px;
+
+			.b-table {
+				padding: 2em 0em;
+
+				.table-wrapper {
+					-webkit-box-shadow: $boxShadowLight;
+							box-shadow: $boxShadowLight;
+				}
+			}
+		}
+	}
+</style>
+<style lang="scss">
+	@import '../../styles/colors.scss';
+
+	.b-table {
+		.table-wrapper {
+			-webkit-box-shadow: $boxShadowLight;
+					box-shadow: $boxShadowLight;
+		}
+	}
+</style>
+
+
+<template>
+	<section class="hero is-fullheight">
+		<div class="hero-body">
+			<div class="container">
+				<div class="columns">
+					<div class="column is-narrow">
+						<Sidebar/>
+					</div>
+					<div class="column">
+						<!--
+						<h1 class="title">Uploads</h1>
+						<h2 class="subtitle">Keep track of all your uploads in here</h2>
+						<hr>
+						-->
+						<div class="search-container">
+							<b-field>
+								<b-input v-model="newAlbumName"
+									placeholder="Album name..."
+									type="text"
+									@keyup.enter.native="createAlbum"/>
+								<p class="control">
+									<button class="button is-primary"
+										@click="createAlbum">Create album</button>
+								</p>
+							</b-field>
+						</div>
+
+						<div class="view-container">
+							<div v-for="album in albums"
+								:key="album.id"
+								class="album">
+								<div class="arrow-container"
+									@click="album.isDetailsOpen = !album.isDetailsOpen">
+									<i :class="{ active: album.isDetailsOpen }"
+										class="icon-arrow" />
+								</div>
+								<div class="thumb">
+									<figure class="image is-64x64 thumb">
+										<img src="../../assets/images/blank.png">
+									</figure>
+								</div>
+								<div class="info">
+									<h4>
+										<router-link :to="`/dashboard/albums/${album.id}`">{{ album.name }}</router-link>
+									</h4>
+									<span>Updated <timeago :since="album.editedAt" /></span>
+									<span>{{ album.fileCount || 0 }} files</span>
+								</div>
+								<div class="latest is-hidden-mobile">
+									<template v-if="album.fileCount > 0">
+										<div v-for="file of album.files"
+											:key="file.id"
+											class="thumb">
+											<figure class="image is-64x64">
+												<a :href="file.url"
+													target="_blank">
+													<img :src="file.thumbSquare">
+												</a>
+											</figure>
+										</div>
+										<div v-if="album.fileCount > 5"
+											class="thumb more no-background">
+											<router-link :to="`/dashboard/albums/${album.id}`">{{ album.fileCount - 5 }}+ more</router-link>
+										</div>
+									</template>
+									<template v-else>
+										<span class="no-files">Nothing to show here</span>
+									</template>
+								</div>
+
+								<div v-if="album.isDetailsOpen"
+									class="details">
+
+									<b-tabs>
+										<b-tab-item label="Settings"/>
+										<b-tab-item label="Links"/>
+									</b-tabs>
+
+									<template v-if="album.links.length">
+										<h2>Public links for this album:</h2>
+
+										<b-table
+											:data="album.links"
+											:mobile-cards="true">
+											<template slot-scope="props">
+												<b-table-column field="identifier"
+													label="Link"
+													centered>
+													<a :href="props.row.identifier"
+														target="_blank">
+														{{ props.row.identifier }}
+													</a>
+												</b-table-column>
+
+												<b-table-column field="views"
+													label="Views"
+													centered>
+													{{ props.row.views }}
+												</b-table-column>
+
+												<b-table-column field="enableDownload"
+													label="Allow download"
+													centered>
+													<b-switch :value="props.row.enableDownload "/>
+												</b-table-column>
+
+												<b-table-column field="enabled"
+													label="Enabled"
+													centered>
+													<b-switch :value="props.row.enabled "/>
+												</b-table-column>
+
+												<b-table-column field="createdAt"
+													label="Created at"
+													centered>
+													{{ props.row.createdAt }}
+												</b-table-column>
+											</template>
+										</b-table>
+									</template>
+
+									<template v-else>
+										<h2>There are no public links to this album yet.</h2>
+									</template>
+
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Sidebar from '../../components/sidebar/Sidebar.vue';
+import Grid from '../../components/grid/Grid.vue';
+
+export default {
+	components: {
+		Sidebar,
+		Grid
+	},
+	data() {
+		return {
+			albums: [],
+			newAlbumName: null
+		};
+	},
+	metaInfo() {
+		return { title: 'Uploads' };
+	},
+	mounted() {
+		this.getAlbums();
+		this.$ga.page({
+			page: '/dashboard/albums',
+			title: 'Albums',
+			location: window.location.href
+		});
+	},
+	methods: {
+		async createAlbum() {
+			if (!this.newAlbumName || this.newAlbumName === '') return;
+			try {
+				const response = await this.axios.post(`${this.$config.baseURL}/album/new`,
+					{ name: this.newAlbumName });
+				this.newAlbumName = null;
+				this.$toast.open(response.data.message);
+				this.getAlbums();
+				return;
+			} catch (error) {
+				this.$onPromiseError(error);
+			}
+		},
+		async getAlbums() {
+			try {
+				const response = await this.axios.get(`${this.$config.baseURL}/albums/mini`);
+				for (const album of response.data.albums) {
+					album.isDetailsOpen = false;
+					album.links = [
+						{
+							identifier: 'fgjh90834',
+							views: 5,
+							enableDownload: true,
+							enabled: true,
+							createdAt: ''
+						},
+						{
+							identifier: 'awf564qwr',
+							views: 10,
+							enableDownload: false,
+							enabled: true,
+							createdAt: ''
+						},
+						{
+							identifier: 'ghjmk39fh',
+							views: 0,
+							enableDownload: true,
+							enabled: false,
+							createdAt: ''
+						}
+					];
+				}
+				this.albums = response.data.albums;
+				console.log(this.albums);
+			} catch (error) {
+				console.error(error);
+			}
+		}
+	}
+};
+</script>

src/site/views/dashboard/Settings.vue

@@ -0,0 +1,82 @@
+<style lang="scss" scoped>
+	@import '../../styles/colors.scss';
+	section { background-color: $backgroundLight1 !important; }
+	section.hero div.hero-body {
+		align-items: baseline;
+	}
+	div.search-container {
+		display: flex;
+		justify-content: center;
+	}
+</style>
+<style lang="scss">
+	@import '../../styles/colors.scss';
+</style>
+
+
+<template>
+	<section class="hero is-fullheight">
+		<div class="hero-body">
+			<div class="container">
+				<div class="columns">
+					<div class="column is-narrow">
+						<Sidebar/>
+					</div>
+					<div class="column">
+						<!--
+						<h1 class="title">Uploads</h1>
+						<h2 class="subtitle">Keep track of all your uploads in here</h2>
+						<hr>
+						-->
+
+						<div class="field">
+							<b-switch v-model="options.removeExif"
+								true-value="Remove exif data when uploading files"
+								false-value="Don't remove exif data when uploading files"
+								type="is-success">
+								{{ options.removeExif }}
+							</b-switch>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Sidebar from '../../components/sidebar/Sidebar.vue';
+import Grid from '../../components/grid/Grid.vue';
+// import Waterfall from '../../components/waterfall/Waterfall.vue';
+// import WaterfallItem from '../../components/waterfall/WaterfallItem.vue';
+
+export default {
+	components: {
+		Sidebar,
+		Grid
+		// Waterfall,
+		// WaterfallSlot
+		// WaterfallItem
+	},
+	data() {
+		return {
+			options: {
+				removeExif: false
+			}
+		};
+	},
+	metaInfo() {
+		return { title: 'Settings' };
+	},
+	mounted() {
+		this.$ga.page({
+			page: '/dashboard/settings',
+			title: 'Settings',
+			location: window.location.href
+		});
+	},
+	methods: {
+
+	}
+};
+</script>

src/site/views/dashboard/Uploads.vue

@@ -0,0 +1,76 @@
+<style lang="scss" scoped>
+	@import '../../styles/colors.scss';
+	section { background-color: $backgroundLight1 !important; }
+	section.hero div.hero-body {
+		align-items: baseline;
+	}
+</style>
+<style lang="scss">
+	@import '../../styles/colors.scss';
+</style>
+
+
+<template>
+	<section class="hero is-fullheight">
+		<div class="hero-body">
+			<div class="container">
+				<div class="columns">
+					<div class="column is-narrow">
+						<Sidebar/>
+					</div>
+					<div class="column">
+						<!--
+						<h1 class="title">Uploads</h1>
+						<h2 class="subtitle">Keep track of all your uploads in here</h2>
+						<hr>
+						-->
+						<Grid v-if="files.length"
+							:files="files"/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Sidebar from '../../components/sidebar/Sidebar.vue';
+import Grid from '../../components/grid/Grid.vue';
+// import Waterfall from '../../components/waterfall/Waterfall.vue';
+// import WaterfallItem from '../../components/waterfall/WaterfallItem.vue';
+
+export default {
+	components: {
+		Sidebar,
+		Grid
+		// Waterfall,
+		// WaterfallSlot
+		// WaterfallItem
+	},
+	data() {
+		return { files: [] };
+	},
+	metaInfo() {
+		return { title: 'Uploads' };
+	},
+	mounted() {
+		this.getFiles();
+		this.$ga.page({
+			page: '/dashboard',
+			title: 'Dashboard',
+			location: window.location.href
+		});
+	},
+	methods: {
+		async getFiles() {
+			try {
+				const response = await this.axios.get(`${this.$config.baseURL}/files`);
+				this.files = response.data.files;
+				console.log(this.files);
+			} catch (error) {
+				console.error(error);
+			}
+		}
+	}
+};
+</script>