feat: try fixing THE SHITTY WATERFALL

7 files changed, 305 insertions, 231 deletions

diff --git a/src/site/pages/a/_identifier.vue b/src/site/pages/a/_identifier.vue
index 24d172b..3746cc6 100644
--- a/src/site/pages/a/_identifier.vue
+++ b/src/site/pages/a/_identifier.vue
@@ -20,15 +20,21 @@
 		<template v-if="files && files.length">
 			<div class="align-top">
 				<div class="container">
-					<h1 class="title">{{ name }}</h1>
-					<h2 class="subtitle">Serving {{ files ? files.length : 0 }} files</h2>
-					<a v-if="downloadLink"
+					<h1 class="title">
+						{{ name }}
+					</h1>
+					<h2 class="subtitle">
+						Serving {{ files ? files.length : 0 }} files
+					</h2>
+					<a
+						v-if="downloadLink"
 						:href="downloadLink">Download Album</a>
 					<hr>
 				</div>
 			</div>
 			<div class="container">
-				<Grid v-if="files && files.length"
+				<Grid
+					v-if="files && files.length"
 					:files="files"
 					:isPublic="true"
 					:width="200"
@@ -38,16 +44,20 @@
 		</template>
 		<template v-else>
 			<div class="container">
-				<h1 class="title">:(</h1>
-				<h2 class="subtitle">This album seems to be empty</h2>
+				<h1 class="title">
+					:(
+				</h1>
+				<h2 class="subtitle">
+					This album seems to be empty
+				</h2>
 			</div>
 		</template>
 	</section>
 </template>
 
 <script>
-import Grid from '~/components/grid/Grid.vue';
 import axios from 'axios';
+import Grid from '~/components/grid/Grid.vue';
 
 export default {
 	components: { Grid },
@@ -57,7 +67,7 @@ export default {
 	computed: {
 		config() {
 			return this.$store.state.config;
-		}
+		},
 	},
 	async asyncData({ app, params, error }) {
 		try {
@@ -67,7 +77,7 @@ export default {
 				name: data.name,
 				downloadEnabled: data.downloadEnabled,
 				files: data.files,
-				downloadLink
+				downloadLink,
 			};
 		} catch (err) {
 			console.log('Error when retrieving album', err);
@@ -90,8 +100,8 @@ export default {
 					{ vmid: 'og:title', property: 'og:title', content: `Album: ${this.name} | Files: ${this.files.length}` },
 					{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted 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.' },
 					{ vmid: 'og:image', property: 'og:image', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
-					{ vmid: 'og:image:secure_url', property: 'og:image:secure_url', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` }
-				]
+					{ vmid: 'og:image:secure_url', property: 'og:image:secure_url', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
+				],
 			};
 		}
 		return {
@@ -103,9 +113,9 @@ export default {
 				{ vmid: 'twitter:description', name: 'twitter:description', content: 'A modern and self-hosted 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.' },
 				{ vmid: 'og:url', property: 'og:url', content: `${this.config.URL}/a/${this.$route.params.identifier}` },
 				{ vmid: 'og:title', property: 'og:title', content: 'lolisafe' },
-				{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted 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.' }
-			]
+				{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted 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.' },
+			],
 		};
-	}
+	},
 };
 </script>
diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
index 1c335e8..fb8b273 100644
--- a/src/site/pages/dashboard/account.vue
+++ b/src/site/pages/dashboard/account.vue
@@ -6,62 +6,82 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">Account settings</h2>
+					<h2 class="subtitle">
+						Account settings
+					</h2>
 					<hr>
 
-					<b-field label="Username"
+					<b-field
+						label="Username"
 						message="Nothing to do here"
 						horizontal>
-						<b-input :value="user.username"
+						<b-input
+							:value="user.username"
 							expanded
 							disabled />
 					</b-field>
 
-					<b-field label="Current password"
+					<b-field
+						label="Current password"
 						message="If you want to change your password input the current one here"
 						horizontal>
-						<b-input v-model="password"
+						<b-input
+							v-model="password"
 							type="password"
 							expanded />
 					</b-field>
 
-					<b-field label="New password"
+					<b-field
+						label="New password"
 						message="Your new password"
 						horizontal>
-						<b-input v-model="newPassword"
+						<b-input
+							v-model="newPassword"
 							type="password"
 							expanded />
 					</b-field>
 
-					<b-field label="New password again"
+					<b-field
+						label="New password again"
 						message="Your new password once again"
 						horizontal>
-						<b-input v-model="reNewPassword"
+						<b-input
+							v-model="reNewPassword"
 							type="password"
 							expanded />
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
-						<button class="button is-primary"
-							@click="changePassword">Change password</button>
+						<button
+							class="button is-primary"
+							@click="changePassword">
+							Change password
+						</button>
 					</div>
 
-					<b-field label="API key"
+					<b-field
+						label="API key"
 						message="This API key lets you use the service from other apps"
 						horizontal>
 						<b-field expanded>
-							<b-input :value="apiKey"
+							<b-input
+								:value="apiKey"
 								expanded
 								disabled />
 							<p class="control">
-								<button class="button is-primary">Copy</button>
+								<button class="button is-primary">
+									Copy
+								</button>
 							</p>
 						</b-field>
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
-						<button class="button is-primary"
-							@click="promptNewAPIKey">Request new API key</button>
+						<button
+							class="button is-primary"
+							@click="promptNewAPIKey">
+							Request new API key
+						</button>
 					</div>
 				</div>
 			</div>
@@ -75,7 +95,7 @@ import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
-		Sidebar
+		Sidebar,
 	},
 	middleware: ['auth', ({ store }) => {
 		store.dispatch('auth/fetchCurrentUser');
@@ -84,21 +104,21 @@ export default {
 		return {
 			password: '',
 			newPassword: '',
-			reNewPassword: ''
+			reNewPassword: '',
 		};
-	}, 
+	},
 	computed: {
 		...mapGetters({ 'apiKey': 'auth/getApiKey' }),
 		...mapState({
-			user: state => state.auth.user
-		})
+			user: (state) => state.auth.user,
+		}),
 	},
 	metaInfo() {
 		return { title: 'Account' };
 	},
 	methods: {
 		...mapActions({
-			getUserSetttings: 'auth/fetchCurrentUser'
+			getUserSetttings: 'auth/fetchCurrentUser',
 		}),
 		async changePassword() {
 			const { password, newPassword, reNewPassword } = this;
@@ -106,21 +126,21 @@ export default {
 			if (!password || !newPassword || !reNewPassword) {
 				this.$store.dispatch('alert/set', {
 					text: 'One or more fields are missing',
-					error: true
+					error: true,
 				});
 				return;
 			}
 			if (newPassword !== reNewPassword) {
 				this.$store.dispatch('alert/set', {
 					text: 'Passwords don\'t match',
-					error: true
+					error: true,
 				});
 				return;
 			}
 
 			const response = await this.$store.dispatch('auth/changePassword', {
 				password,
-				newPassword
+				newPassword,
 			});
 
 			if (response) {
@@ -131,13 +151,13 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to regenerate your API key? Previously generated API keys will stop working. Make sure to write the new key down as this is the only time it will be displayed to you.',
-				onConfirm: () => this.requestNewAPIKey()
+				onConfirm: () => this.requestNewAPIKey(),
 			});
 		},
 		async requestNewAPIKey() {
-			const response = await this.$store.dispatch('auth/requestAPIKey');		
+			const response = await this.$store.dispatch('auth/requestAPIKey');
 			this.$buefy.toast.open(response.message);
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/pages/dashboard/admin/user/_id.vue b/src/site/pages/dashboard/admin/user/_id.vue
index 8c73037..1755b89 100644
--- a/src/site/pages/dashboard/admin/user/_id.vue
+++ b/src/site/pages/dashboard/admin/user/_id.vue
@@ -9,40 +9,51 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">User details</h2>
+					<h2 class="subtitle">
+						User details
+					</h2>
 					<hr>
 
-					<b-field label="User Id"
+					<b-field
+						label="User Id"
 						horizontal>
 						<span>{{ user.id }}</span>
 					</b-field>
 
-					<b-field label="Username"
+					<b-field
+						label="Username"
 						horizontal>
 						<span>{{ user.username }}</span>
 					</b-field>
 
-					<b-field label="Enabled"
+					<b-field
+						label="Enabled"
 						horizontal>
 						<span>{{ user.enabled }}</span>
 					</b-field>
 
-					<b-field label="Registered"
+					<b-field
+						label="Registered"
 						horizontal>
 						<span><timeago :since="user.createdAt" /></span>
 					</b-field>
 
-					<b-field label="Files"
+					<b-field
+						label="Files"
 						horizontal>
 						<span>{{ files.length }}</span>
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
-						<button class="button is-danger"
-							@click="promptDisableUser">Disable user</button>
+						<button
+							class="button is-danger"
+							@click="promptDisableUser">
+							Disable user
+						</button>
 					</div>
 
-					<Grid v-if="files.length"
+					<Grid
+						v-if="files.length"
 						:files="files" />
 				</div>
 			</div>
@@ -57,14 +68,14 @@ import Grid from '~/components/grid/Grid.vue';
 export default {
 	components: {
 		Sidebar,
-		Grid
+		Grid,
 	},
 	middleware: ['auth', 'admin'],
 	data() {
 		return {
 			options: {},
 			files: null,
-			user: null
+			user: null,
 		};
 	},
 	async asyncData({ $axios, route }) {
@@ -72,13 +83,13 @@ export default {
 			const response = await $axios.$get(`/admin/users/${route.params.id}`);
 			return {
 				files: response.files ? response.files : null,
-				user: response.user ? response.user : null
+				user: response.user ? response.user : null,
 			};
 		} catch (error) {
 			console.error(error);
 			return {
 				files: null,
-				user: null
+				user: null,
 			};
 		}
 	},
@@ -87,15 +98,15 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to disable the account of the user that uploaded this file?',
-				onConfirm: () => this.disableUser()
+				onConfirm: () => this.disableUser(),
 			});
 		},
 		async disableUser() {
 			const response = await this.$axios.$post('admin/users/disable', {
-				id: this.user.id
+				id: this.user.id,
 			});
 			this.$buefy.toast.open(response.message);
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/pages/dashboard/admin/users.vue b/src/site/pages/dashboard/admin/users.vue
index 695cf0b..269946c 100644
--- a/src/site/pages/dashboard/admin/users.vue
+++ b/src/site/pages/dashboard/admin/users.vue
@@ -1,3 +1,143 @@
+<template>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">
+						Manage your users
+					</h2>
+					<hr>
+
+					<div class="view-container">
+						<b-table
+							:data="users || []"
+							:mobile-cards="true">
+							<template slot-scope="props">
+								<b-table-column
+									field="id"
+									label="Id"
+									centered>
+									{{ props.row.id }}
+								</b-table-column>
+
+								<b-table-column
+									field="username"
+									label="Username"
+									centered>
+									<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">
+										{{ props.row.username }}
+									</nuxt-link>
+								</b-table-column>
+
+								<b-table-column
+									field="enabled"
+									label="Enabled"
+									centered>
+									<b-switch
+										v-model="props.row.enabled"
+										@input="changeEnabledStatus(props.row)" />
+								</b-table-column>
+
+								<b-table-column
+									field="isAdmin"
+									label="Admin"
+									centered>
+									<b-switch
+										v-model="props.row.isAdmin"
+										@input="changeIsAdmin(props.row)" />
+								</b-table-column>
+
+								<b-table-column
+									field="purge"
+									centered>
+									<button
+										class="button is-primary"
+										@click="promptPurgeFiles(props.row)">
+										Purge files
+									</button>
+								</b-table-column>
+							</template>
+							<template slot="empty">
+								<div class="has-text-centered">
+									<i class="icon-misc-mood-sad" />
+								</div>
+								<div class="has-text-centered">
+									Nothing here
+								</div>
+							</template>
+							<template slot="footer">
+								<div class="has-text-right">
+									{{ users.length }} users
+								</div>
+							</template>
+						</b-table>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Sidebar from '~/components/sidebar/Sidebar.vue';
+
+export default {
+	components: {
+		Sidebar,
+	},
+	middleware: ['auth', 'admin'],
+	data() {
+		return {
+			users: [],
+		};
+	},
+	computed: {
+		config() {
+			return this.$store.state.config;
+		},
+	},
+	metaInfo() {
+		return { title: 'Uploads' };
+	},
+	mounted() {
+		this.getUsers();
+	},
+	methods: {
+		async getUsers() {
+			const response = await this.$axios.$get('admin/users');
+			this.users = response.users;
+		},
+		async changeEnabledStatus(row) {
+			const response = await this.$axios.$post(`admin/users/${row.enabled ? 'enable' : 'disable'}`, {
+				id: row.id,
+			});
+			this.$buefy.toast.open(response.message);
+		},
+		async changeIsAdmin(row) {
+			const response = await this.$axios.$post(`admin/users/${row.isAdmin ? 'promote' : 'demote'}`, {
+				id: row.id,
+			});
+			this.$buefy.toast.open(response.message);
+		},
+		promptPurgeFiles(row) {
+			this.$buefy.dialog.confirm({
+				message: 'Are you sure you want to delete this user\'s files?',
+				onConfirm: () => this.purgeFiles(row),
+			});
+		},
+		async purgeFiles(row) {
+			const response = await this.$axios.$post('admin/users/purge', {
+				id: row.id,
+			});
+			this.$buefy.toast.open(response.message);
+		},
+	},
+};
+</script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	div.view-container {
@@ -107,9 +247,6 @@
 	}
 
 	div.column > h2.subtitle { padding-top: 1px; }
-</style>
-<style lang="scss">
-	@import '~/assets/styles/_colors.scss';
 
 	.b-table {
 		.table-wrapper {
@@ -118,130 +255,3 @@
 		}
 	}
 </style>
-
-
-<template>
-	<section class="section is-fullheight dashboard">
-		<div class="container">
-			<div class="columns">
-				<div class="column is-narrow">
-					<Sidebar />
-				</div>
-				<div class="column">
-					<h2 class="subtitle">Manage your users</h2>
-					<hr>
-
-					<div class="view-container">
-						<b-table
-							:data="users || []"
-							:mobile-cards="true">
-							<template slot-scope="props">
-								<b-table-column field="id"
-									label="Id"
-									centered>
-									{{ props.row.id }}
-								</b-table-column>
-
-								<b-table-column field="username"
-									label="Username"
-									centered>
-									<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">{{ props.row.username }}</nuxt-link>
-								</b-table-column>
-
-								<b-table-column field="enabled"
-									label="Enabled"
-									centered>
-									<b-switch v-model="props.row.enabled"
-										@input="changeEnabledStatus(props.row)" />
-								</b-table-column>
-
-								<b-table-column field="isAdmin"
-									label="Admin"
-									centered>
-									<b-switch v-model="props.row.isAdmin"
-										@input="changeIsAdmin(props.row)" />
-								</b-table-column>
-
-								<b-table-column field="purge"
-									centered>
-									<button class="button is-primary"
-										@click="promptPurgeFiles(props.row)">Purge files</button>
-								</b-table-column>
-							</template>
-							<template slot="empty">
-								<div class="has-text-centered">
-									<i class="icon-misc-mood-sad" />
-								</div>
-								<div class="has-text-centered">
-									Nothing here
-								</div>
-							</template>
-							<template slot="footer">
-								<div class="has-text-right">
-									{{ users.length }} users
-								</div>
-							</template>
-						</b-table>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>
-
-<script>
-import Sidebar from '~/components/sidebar/Sidebar.vue';
-
-export default {
-	components: {
-		Sidebar
-	},
-	middleware: ['auth', 'admin'],
-	data() {
-		return {
-			users: []
-		};
-	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
-	metaInfo() {
-		return { title: 'Uploads' };
-	},
-	mounted() {
-		this.getUsers();
-	},
-	methods: {
-		async getUsers() {
-			const response = await this.$axios.$get(`admin/users`);
-			this.users = response.users;
-		},
-		async changeEnabledStatus(row) {
-			const response = await this.$axios.$post(`admin/users/${row.enabled ? 'enable' : 'disable'}`, {
-				id: row.id
-			});
-			this.$buefy.toast.open(response.message);
-		},
-		async changeIsAdmin(row) {
-			const response = await this.$axios.$post(`admin/users/${row.isAdmin ? 'promote' : 'demote'}`, {
-				id: row.id
-			});
-			this.$buefy.toast.open(response.message);
-		},
-		promptPurgeFiles(row) {
-			this.$buefy.dialog.confirm({
-				message: 'Are you sure you want to delete this user\'s files?',
-				onConfirm: () => this.purgeFiles(row)
-			});
-		},
-		async purgeFiles(row) {
-			const response = await this.$axios.$post(`admin/users/purge`, {
-				id: row.id
-			});
-			this.$buefy.toast.open(response.message);
-		}
-	}
-};
-</script>
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index 0d3bd68..33b0319 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -14,7 +14,7 @@
 						<div class="level-left">
 							<div class="level-item">
 								<h1 class="title is-3">
-									{{ name }}
+									{{ images.name }}
 								</h1>
 							</div>
 							<div class="level-item">
@@ -45,7 +45,7 @@
 
 					<Grid
 						v-if="totalFiles"
-						:files="album.files"
+						:files="images.files"
 						:total="totalFiles">
 						<template v-slot:pagination>
 							<b-pagination
@@ -83,7 +83,7 @@ export default {
 		Grid,
 	},
 	middleware: ['auth', ({ route, store }) => {
-		store.dispatch('album/fetchById', { id: route.params.id });
+		store.dispatch('images/fetchByAlbumId', { id: route.params.id });
 	}],
 	data() {
 		return {
@@ -92,12 +92,11 @@ export default {
 	},
 	computed: {
 		...mapGetters({
-			totalFiles: 'album/getTotalFiles',
-			shouldPaginate: 'album/shouldPaginate',
-			limit: 'album/getLimit',
-			name: 'album/getName',
+			totalFiles: 'images/getTotalFiles',
+			shouldPaginate: 'images/shouldPaginate',
+			limit: 'images/getLimit',
 		}),
-		...mapState(['album']),
+		...mapState(['images']),
 		id() {
 			return this.$route.params.id;
 		},
@@ -110,7 +109,7 @@ export default {
 	},
 	methods: {
 		...mapActions({
-			fetch: 'album/fetchById',
+			fetch: 'images/fetchByAlbumId',
 		}),
 		fetchPaginate() {
 			this.fetch({ id: this.id, page: this.current });
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 89f0fac..71df7eb 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -9,7 +9,9 @@
 					<nav class="level">
 						<div class="level-left">
 							<div class="level-item">
-								<h2 class="subtitle">Your uploaded files</h2>
+								<h2 class="subtitle">
+									Your uploaded files
+								</h2>
 							</div>
 						</div>
 						<div class="level-right">
@@ -17,7 +19,7 @@
 								<b-field>
 									<b-input
 										placeholder="Search"
-										type="search"/>
+										type="search" />
 									<p class="control">
 										<button
 											outlined
@@ -28,15 +30,17 @@
 								</b-field>
 							</div>
 						</div>
-					</nav>					
+					</nav>
 					<hr>
 
 					<b-loading :active="images.isLoading" />
 
-					<Grid v-if="totalFiles"
+					<Grid
+						v-if="totalFiles && !isLoading"
 						:files="images.files"
 						:enableSearch="false"
-						class="grid">
+						class="grid"
+						@delete="handleFileDelete">
 						<template v-slot:pagination>
 							<b-pagination
 								v-if="shouldPaginate"
@@ -70,38 +74,44 @@ import Grid from '~/components/grid/Grid.vue';
 export default {
 	components: {
 		Sidebar,
-		Grid
+		Grid,
 	},
 	middleware: ['auth', ({ store }) => {
 		store.dispatch('images/fetch');
 	}],
 	data() {
 		return {
-			current: 1
+			current: 1,
+			isLoading: false,
 		};
 	},
 	computed: {
-		...mapGetters({ 
+		...mapGetters({
 			totalFiles: 'images/getTotalFiles',
 			shouldPaginate: 'images/shouldPaginate',
-			limit: 'images/getLimit'
+			limit: 'images/getLimit',
 		}),
-		...mapState(['images'])
+		...mapState(['images']),
 	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
 	watch: {
-		current: 'fetchPaginate'
+		current: 'fetchPaginate',
 	},
 	methods: {
 		...mapActions({
-			fetch: 'images/fetch'
+			fetch: 'images/fetch',
 		}),
-		fetchPaginate() {
-			this.fetch(this.current);
-		}
-	}
+		async fetchPaginate() {
+			this.isLoading = true;
+			await this.fetch(this.current);
+			this.isLoading = false;
+		},
+		handleFileDelete(file) {
+			console.log('yep!', file.id);
+		},
+	},
 };
 </script>
 
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index cef0868..9e5658d 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -10,13 +10,15 @@
 			<div class="columns">
 				<div class="column is-4 is-offset-4">
 					<b-field>
-						<b-input v-model="username"
+						<b-input
+							v-model="username"
 							type="text"
 							placeholder="Username"
 							@keyup.enter.native="login" />
 					</b-field>
 					<b-field>
-						<b-input v-model="password"
+						<b-input
+							v-model="password"
 							type="password"
 							placeholder="Password"
 							password-reveal
@@ -24,12 +26,18 @@
 					</b-field>
 
 					<p class="control has-addons is-pulled-right">
-						<router-link v-if="config.userAccounts"
+						<router-link
+							v-if="config.userAccounts"
 							to="/register"
-							class="is-text">Don't have an account?</router-link>
+							class="is-text">
+							Don't have an account?
+						</router-link>
 						<span v-else>Registration is closed at the moment</span>
-						<button class="button is-primary big ml1"
-							@click="login">login</button>
+						<button
+							class="button is-primary big ml1"
+							@click="login">
+							login
+						</button>
 					</p>
 				</div>
 			</div>
@@ -73,7 +81,7 @@ export default {
 			password: null,
 			mfaCode: null,
 			isMfaModalActive: false,
-			isLoading: false
+			isLoading: false,
 		};
 	},
 	computed: mapState(['config', 'auth']),
@@ -87,21 +95,27 @@ export default {
 	},
 	methods: {
 		async login() {
-			if (this.auth.isLoading) return;
+			if (this.isLoading) return;
 
 			const { username, password } = this;
 			if (!username || !password) {
 				this.$store.dispatch('alert/set', {
 					text: 'Please fill both fields before attempting to log in.',
-					error: true
+					error: true,
 				});
 				return;
 			}
 
-			await this.$store.dispatch('auth/login', { username, password });
-
-			if (this.auth.loggedIn) {
-				this.redirect();
+			try {
+				this.isLoading = true;
+				await this.$store.dispatch('auth/login', { username, password });
+				if (this.auth.loggedIn) {
+					this.redirect();
+				}
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			} finally {
+				this.isLoading = false;
 			}
 		},
 		/*
@@ -118,14 +132,14 @@ export default {
 					this.isLoading = false;
 					this.$onPromiseError(err);
 				});
-		},*/
+		}, */
 		redirect() {
 			if (typeof this.$route.query.redirect !== 'undefined') {
 				this.$router.push(this.$route.query.redirect);
 				return;
 			}
 			this.$router.push('/dashboard');
-		}
-	}
+		},
+	},
 };
 </script>