Site

9 files changed, 1311 insertions, 0 deletions

diff --git a/src/site/views/Auth/ChangePassword.vue b/src/site/views/Auth/ChangePassword.vue
new file mode 100644
index 0000000..6854fad
--- /dev/null
+++ b/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>
diff --git a/src/site/views/Auth/ForgotPassword.vue b/src/site/views/Auth/ForgotPassword.vue
new file mode 100644
index 0000000..5442d16
--- /dev/null
+++ b/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>
diff --git a/src/site/views/Auth/Login.vue b/src/site/views/Auth/Login.vue
new file mode 100644
index 0000000..f5d386d
--- /dev/null
+++ b/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>
diff --git a/src/site/views/Home.vue b/src/site/views/Home.vue
new file mode 100644
index 0000000..4158f0e
--- /dev/null
+++ b/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>
diff --git a/src/site/views/NotFound.vue b/src/site/views/NotFound.vue
new file mode 100644
index 0000000..17d07d2
--- /dev/null
+++ b/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>
diff --git a/src/site/views/dashboard/Album.vue b/src/site/views/dashboard/Album.vue
new file mode 100644
index 0000000..f067e4d
--- /dev/null
+++ b/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>
diff --git a/src/site/views/dashboard/Albums.vue b/src/site/views/dashboard/Albums.vue
new file mode 100644
index 0000000..8746148
--- /dev/null
+++ b/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>
diff --git a/src/site/views/dashboard/Settings.vue b/src/site/views/dashboard/Settings.vue
new file mode 100644
index 0000000..1a3ab68
--- /dev/null
+++ b/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>
diff --git a/src/site/views/dashboard/Uploads.vue b/src/site/views/dashboard/Uploads.vue
new file mode 100644
index 0000000..52c3274
--- /dev/null
+++ b/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>