Added middleware for pages and switched to $axios

src/site/components/grid/Grid.vue

@@ -170,13 +170,13 @@ export default {
 				hasIcon: true,
 				onConfirm: async () => {
 					try {
-						const response = await this.axios.delete(`${this.config.baseURL}/file/${file.id}`);
+						const response = await this.$axios.$delete(`file/${file.id}`);
 						this.showWaterfall = false;
 						this.files.splice(index, 1);
 						this.$nextTick(() => {
 							this.showWaterfall = true;
 						});
-						return this.$toast.open(response.data.message);
+						return this.$toast.open(response.message);
 					} catch (error) {
 						return this.$onPromiseError(error);
 					}

src/site/components/sidebar/Sidebar.vue

@@ -42,7 +42,7 @@
 		<router-link to="/dashboard/account">
 			<i class="icon-ecommerce-tag-c" />Account
 		</router-link>
-		<template v-if="user.isAdmin">
+		<template v-if="user && user.isAdmin">
 			<hr>
 			<router-link to="/dashboard/users">
 				<i class="icon-setting-gear-a" />Users
@@ -62,6 +62,6 @@ export default {
 		user() {
 			return this.$store.state.user;
 		}
-	},
+	}
 };
 </script>

src/site/components/uploader/Uploader.vue

@@ -135,8 +135,8 @@ export default {
 		*/
 		async getAlbums() {
 			try {
-				const response = await this.axios.get(`${this.config.baseURL}/albums/dropdown`);
-				this.albums = response.data.albums;
+				const response = await this.$axios.$get(`albums/dropdown`);
+				this.albums = response.albums;
 				this.updateDropzoneConfig();
 			} catch (error) {
 				this.$onPromiseError(error);

src/site/layouts/default.vue

@@ -3,14 +3,6 @@
 </template>
 <script>
 import Vue from 'vue';
-import Fuse from 'fuse.js';
-
-const protectedRoutes = [
-	'/dashboard',
-	'/dashboard/albums',
-	'/dashboard/settings'
-];
-
 export default {
 	computed: {
 		config() {
@@ -41,12 +33,14 @@ export default {
 		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 (error.response.data.message === 'Token expired') {
 					this.$logOut();
 					setTimeout(() => this.$router.push('/'), 3000);
 				}
+				*/
 			} else {
 				console.error(error);
 				this.showToast('Something went wrong, please check the console :(', true, 5000);

src/site/middleware/admin.js

@@ -0,0 +1,5 @@
+export default function({ store, redirect }) {
+	// If the user is not authenticated
+	if (!store.state.user) return redirect('/login');
+	if (!store.state.user.isAdmin) return redirect('/dashboard');
+}

src/site/middleware/auth.js

@@ -0,0 +1,6 @@
+export default function({ store, redirect }) {
+	// If the user is not authenticated
+	if (!store.state.loggedIn) {
+		return redirect('/login');
+	}
+}

src/site/pages/a/_identifier.vue

@@ -51,19 +51,26 @@
 
 <script>
 import Grid from '~/components/grid/Grid.vue';
-import Loading from '~/components/loading/CubeShadow.vue';
 import axios from 'axios';
 
 export default {
-	components: { Grid, Loading },
+	components: { Grid },
+	data() {
+		return {};
+	},
+	computed: {
+		config() {
+			return this.$store.state.config;
+		}
+	},
 	async asyncData({ app, params, error }) {
 		try {
-			const res = await axios.get(`${app.store.state.config.baseURL}/album/${params.identifier}`);
-			const downloadLink = res.data.downloadEnabled ? `${app.store.state.config.baseURL}/album/${params.identifier}/zip` : null;
+			const data = await axios.get(`${app.store.state.config.baseURL}/album/${params.identifier}`);
+			const downloadLink = data.downloadEnabled ? `${app.store.state.config.baseURL}/album/${params.identifier}/zip` : null;
 			return {
-				name: res.data.name,
-				downloadEnabled: res.data.downloadEnabled,
-				files: res.data.files,
+				name: data.name,
+				downloadEnabled: data.downloadEnabled,
+				files: data.files,
 				downloadLink
 			};
 		} catch (err) {
@@ -79,14 +86,6 @@ export default {
 			error({ statusCode: 404, message: 'Post not found' });
 		}
 	},
-	data() {
-		return {};
-	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
 	metaInfo() {
 		if (this.files) {
 			return {

src/site/pages/dashboard/account.vue

@@ -67,7 +67,8 @@
 							message="This API key lets you use the service from other apps"
 							horizontal>
 							<b-input v-model="user.apiKey"
-								expanded />
+								expanded
+								disabled />
 						</b-field>
 
 						<div class="mb2 mt2 text-center">
@@ -88,6 +89,7 @@ export default {
 	components: {
 		Sidebar
 	},
+	middleware: 'auth',
 	data() {
 		return {
 			user: {}
@@ -107,8 +109,8 @@ export default {
 	methods: {
 		async getUserSetttings() {
 			try {
-				const response = await this.axios.get(`${this.config.baseURL}/users/me`);
-				this.user = response.data.user;
+				const response = await this.$axios.$get(`users/me`);
+				this.user = response.user;
 			} catch (error) {
 				this.$onPromiseError(error);
 			}
@@ -118,12 +120,12 @@ export default {
 			if (this.user.newPassword !== this.user.reNewPassword) return this.$showToast('Passwords don\'t match', true);
 
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/user/password/change`,
+				const response = await this.$axios.$post(`user/password/change`,
 					{
 						password: this.user.password,
 						newPassword: this.user.newPassword
 					});
-				this.$toast.open(response.data.message);
+				this.$toast.open(response.message);
 			} catch (error) {
 				this.$onPromiseError(error);
 			}
@@ -136,9 +138,10 @@ export default {
 		},
 		async requestNewAPIKey() {
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/user/apikey/change`);
-				this.user.apiKey = response.data.apiKey;
-				this.$toast.open(response.data.message);
+				const response = await this.$axios.$post(`user/apikey/change`);
+				this.user.apiKey = response.apiKey;
+				this.$forceUpdate();
+				this.$toast.open(response.message);
 			} catch (error) {
 				this.$onPromiseError(error);
 			}

src/site/pages/dashboard/albums/_id.vue

@@ -61,6 +61,7 @@ export default {
 		Sidebar,
 		Grid
 	},
+	middleware: 'auth',
 	data() {
 		return {
 			name: null,
@@ -94,11 +95,11 @@ export default {
 		},
 		async albumCheckboxClicked(value, id) {
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/file/album/${value ? 'add' : 'del'}`, {
+				const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
 					albumId: id,
 					fileId: this.showingModalForFile.id
 				});
-				this.$toast.open(response.data.message);
+				this.$toast.open(response.message);
 				this.getFiles();
 			} catch (error) {
 				this.$onPromiseError(error);
@@ -107,16 +108,16 @@ export default {
 		async getFiles() {
 			// TODO: Make this think SSR with AsyncData
 			try {
-				const response = await this.axios.get(`${this.config.baseURL}/album/${this.$route.params.id}/full`);
-				this.files = response.data.files;
+				const response = await this.$axios.$get(`album/${this.$route.params.id}/full`);
+				this.files = response.files;
 			} catch (error) {
 				console.error(error);
 			}
 		},
 		async getAlbums() {
 			try {
-				const response = await this.axios.get(`${this.config.baseURL}/albums/dropdown`);
-				this.albums = response.data.albums;
+				const response = await this.$axios.$get(`albums/dropdown`);
+				this.albums = response.albums;
 			} catch (error) {
 				this.$onPromiseError(error);
 			}

src/site/pages/dashboard/albums/index.vue

@@ -275,6 +275,7 @@ export default {
 	components: {
 		Sidebar
 	},
+	middleware: 'auth',
 	data() {
 		return {
 			albums: [],
@@ -310,9 +311,9 @@ export default {
 		},
 		async deleteAlbum(id, purge) {
 			try {
-				const response = await this.axios.delete(`${this.config.baseURL}/album/${id}/${purge ? true : ''}`);
+				const response = await this.$axios.$delete(`album/${id}/${purge ? true : ''}`);
 				this.getAlbums();
-				return this.$toast.open(response.data.message);
+				return this.$toast.open(response.message);
 			} catch (error) {
 				return this.$onPromiseError(error);
 			}
@@ -326,21 +327,21 @@ export default {
 		async deleteAlbumLink(identifier) {
 			console.log('> deleteAlbumLink', identifier);
 			try {
-				const response = await this.axios.delete(`${this.config.baseURL}/album/link/delete/${identifier}`);
-				return this.$toast.open(response.data.message);
+				const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
+				return this.$toast.open(response.message);
 			} catch (error) {
 				return this.$onPromiseError(error);
 			}
 		},
 		async linkOptionsChanged(link) {
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/album/link/edit`,
+				const response = await this.$axios.$post(`album/link/edit`,
 					{
 						identifier: link.identifier,
 						enableDownload: link.enableDownload,
 						enabled: link.enabled
 					});
-				this.$toast.open(response.data.message);
+				this.$toast.open(response.message);
 			} catch (error) {
 				this.$onPromiseError(error);
 			}
@@ -348,11 +349,11 @@ export default {
 		async createLink(album) {
 			album.isCreatingLink = true;
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/album/link/new`,
+				const response = await this.$axios.$post(`album/link/new`,
 					{ albumId: album.id });
-				this.$toast.open(response.data.message);
+				this.$toast.open(response.message);
 				album.links.push({
-					identifier: response.data.identifier,
+					identifier: response.identifier,
 					views: 0,
 					enabled: true,
 					enableDownload: true,
@@ -367,10 +368,10 @@ export default {
 		async createAlbum() {
 			if (!this.newAlbumName || this.newAlbumName === '') return;
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/album/new`,
+				const response = await this.$axios.$post(`album/new`,
 					{ name: this.newAlbumName });
 				this.newAlbumName = null;
-				this.$toast.open(response.data.message);
+				this.$toast.open(response.message);
 				this.getAlbums();
 			} catch (error) {
 				this.$onPromiseError(error);
@@ -378,11 +379,11 @@ export default {
 		},
 		async getAlbums() {
 			try {
-				const response = await this.axios.get(`${this.config.baseURL}/albums/mini`);
-				for (const album of response.data.albums) {
+				const response = await this.$axios.$get(`albums/mini`);
+				for (const album of response.albums) {
 					album.isDetailsOpen = false;
 				}
-				this.albums = response.data.albums;
+				this.albums = response.albums;
 			} catch (error) {
 				this.$onPromiseError(error);
 			}

src/site/pages/dashboard/index.vue

@@ -61,6 +61,7 @@ export default {
 		Sidebar,
 		Grid
 	},
+	middleware: 'auth',
 	data() {
 		return {
 			files: [],
@@ -93,11 +94,11 @@ export default {
 		},
 		async albumCheckboxClicked(value, id) {
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/file/album/${value ? 'add' : 'del'}`, {
+				const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
 					albumId: id,
 					fileId: this.showingModalForFile.id
 				});
-				this.$toast.open(response.data.message);
+				this.$toast.open(response.message);
 
 				// Not the prettiest solution to refetch on each click but it'll do for now
 				this.getFiles();
@@ -107,16 +108,16 @@ export default {
 		},
 		async getFiles() {
 			try {
-				const response = await this.axios.get(`${this.config.baseURL}/files`);
-				this.files = response.data.files;
+				const response = await this.$axios.$get(`files`);
+				this.files = response.files;
 			} catch (error) {
 				console.error(error);
 			}
 		},
 		async getAlbums() {
 			try {
-				const response = await this.axios.get(`${this.config.baseURL}/albums/dropdown`);
-				this.albums = response.data.albums;
+				const response = await this.$axios.$get(`albums/dropdown`);
+				this.albums = response.albums;
 			} catch (error) {
 				this.$onPromiseError(error);
 			}

src/site/pages/dashboard/settings.vue

@@ -132,6 +132,7 @@ export default {
 	components: {
 		Sidebar
 	},
+	middleware: 'auth',
 	data() {
 		return {
 			options: {}
@@ -151,8 +152,8 @@ export default {
 	methods: {
 		async getSettings() {
 			try {
-				const response = await this.axios.get(`${this.config.baseURL}/service/config`);
-				this.options = response.data.config;
+				const response = await this.$axios.$get(`service/config`);
+				this.options = response.config;
 				console.log(this.options);
 			} catch (error) {
 				this.$onPromiseError(error);
@@ -166,8 +167,8 @@ export default {
 		},
 		async restartService() {
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/service/restart`);
-				this.$toast.open(response.data.message);
+				const response = await this.$axios.$post(`service/restart`);
+				this.$toast.open(response.message);
 				return;
 			} catch (error) {
 				this.$onPromiseError(error);

src/site/pages/dashboard/tags/index.vue

@@ -214,6 +214,7 @@ export default {
 	components: {
 		Sidebar
 	},
+	middleware: 'auth',
 	data() {
 		return {
 			tags: [],
@@ -249,9 +250,9 @@ export default {
 		},
 		async deleteTag(id, purge) {
 			try {
-				const response = await this.axios.delete(`${this.config.baseURL}/tags/${id}/${purge ? true : ''}`);
+				const response = await this.$axios.$delete(`tags/${id}/${purge ? true : ''}`);
 				this.getTags();
-				return this.$toast.open(response.data.message);
+				return this.$toast.open(response.message);
 			} catch (error) {
 				return this.$onPromiseError(error);
 			}
@@ -259,10 +260,10 @@ export default {
 		async createTag() {
 			if (!this.newTagName || this.newTagName === '') return;
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/tag/new`,
+				const response = await this.$axios.$post(`tag/new`,
 					{ name: this.newTagName });
 				this.newTagName = null;
-				this.$toast.open(response.data.message);
+				this.$toast.open(response.message);
 				this.getTags();
 			} catch (error) {
 				this.$onPromiseError(error);
@@ -270,11 +271,11 @@ export default {
 		},
 		async getTags() {
 			try {
-				const response = await this.axios.get(`${this.config.baseURL}/tags`);
-				for (const tag of response.data.tags) {
+				const response = await this.$axios.$get(`tags`);
+				for (const tag of response.tags) {
 					tag.isDetailsOpen = false;
 				}
-				this.tags = response.data.tags;
+				this.tags = response.tags;
 			} catch (error) {
 				this.$onPromiseError(error);
 			}

src/site/pages/dashboard/users.vue

@@ -207,6 +207,7 @@ export default {
 	components: {
 		Sidebar
 	},
+	middleware: ['auth', 'admin'],
 	data() {
 		return {
 			users: []
@@ -226,8 +227,8 @@ export default {
 	methods: {
 		async getUsers() {
 			try {
-				const response = await this.axios.get(`${this.config.baseURL}/admin/users`);
-				this.users = response.data.users;
+				const response = await this.$axios.$get(`admin/users`);
+				this.users = response.users;
 				console.log(this.users);
 			} catch (error) {
 				this.$onPromiseError(error);
@@ -235,20 +236,20 @@ export default {
 		},
 		async changeEnabledStatus(row) {
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/admin/users/${row.enabled ? 'enable' : 'disable'}`, {
+				const response = await this.$axios.$post(`admin/users/${row.enabled ? 'enable' : 'disable'}`, {
 					id: row.id
 				});
-				this.$toast.open(response.data.message);
+				this.$toast.open(response.message);
 			} catch (error) {
 				this.$onPromiseError(error);
 			}
 		},
 		async changeIsAdmin(row) {
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/admin/users/${row.isAdmin ? 'promote' : 'demote'}`, {
+				const response = await this.$axios.$post(`admin/users/${row.isAdmin ? 'promote' : 'demote'}`, {
 					id: row.id
 				});
-				this.$toast.open(response.data.message);
+				this.$toast.open(response.message);
 			} catch (error) {
 				this.$onPromiseError(error);
 			}
@@ -261,10 +262,10 @@ export default {
 		},
 		async purgeFiles(row) {
 			try {
-				const response = await this.axios.post(`${this.config.baseURL}/admin/users/purge`, {
+				const response = await this.$axios.$post(`admin/users/purge`, {
 					id: row.id
 				});
-				this.$toast.open(response.data.message);
+				this.$toast.open(response.message);
 			} catch (error) {
 				this.$onPromiseError(error);
 			}

src/site/pages/faq.vue

@@ -43,34 +43,8 @@
 						There are too many file upload services out there, and a lot of them rely on the foundations of pomf which is ancient. In a desperate and unsuccessful attempt of finding a good file uploader that's easily extendable, lolisafe was born. We give you control over your files, we give you a way to sort your uploads into albums for ease of access and we give you an api to use with ShareX or any other thing that let's you make POST requests.
 					</div>
 				</article>
-
 			</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>
 
@@ -78,76 +52,13 @@
 import Navbar from '~/components/navbar/Navbar.vue';
 
 export default {
-	name: 'Login',
+	name: 'Faq',
 	components: { Navbar },
 	data() {
-		return {
-			username: null,
-			password: null,
-			mfaCode: null,
-			isMfaModalActive: false,
-			isLoading: false
-		};
-	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
+		return {};
 	},
 	metaInfo() {
-		return { title: 'Login' };
-	},
-	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');
-		}
+		return { title: 'Faq' };
 	}
 };
 </script>

src/site/pages/login.vue

@@ -95,32 +95,27 @@ export default {
 		return { title: 'Login' };
 	},
 	methods: {
-		login() {
+		async 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();
-				}
-				*/
+
+			try {
+				const data = await this.$axios.$post(`auth/login`, {
+					username: this.username,
+					password: this.password
+				});
+				this.$axios.setToken(data.token, 'Bearer');
+				this.$store.dispatch('login', { token: data.token, user: data.user });
 				this.redirect();
-			}).catch(err => {
+			} catch (error) {
+				this.$onPromiseError(error);
+			} finally {
 				this.isLoading = false;
-				this.$onPromiseError(err);
-			});
+			}
 		},
 		/*
 		mfa() {

src/site/pages/register.vue

@@ -72,24 +72,26 @@ export default {
 		return { title: 'Register' };
 	},
 	methods: {
-		register() {
+		async register() {
 			if (this.isLoading) return;
 			if (this.password !== this.rePassword) {
 				this.$showToast('Passwords don\'t match', true);
 				return;
 			}
 			this.isLoading = true;
-			this.axios.post(`${this.config.baseURL}/auth/register`, {
-				username: this.username,
-				password: this.password
-			}).then(response => {
-				this.$showToast(response.data.message);
-				this.isLoading = false;
+
+			try {
+				const response = await this.$axios.$post(`auth/register`, {
+					username: this.username,
+					password: this.password
+				});
+				this.$showToast(response.message);
 				return this.$router.push('/login');
-			}).catch(err => {
+			} catch (error) {
+				this.$onPromiseError(error);
+			} finally {
 				this.isLoading = false;
-				this.$onPromiseError(err);
-			});
+			}
 		}
 	}
 };