4 files changed, 101 insertions, 82 deletions

diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 0eb9532..6c1b99b 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -6,27 +6,55 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">Your uploaded files</h2>
+					<nav class="level">
+						<div class="level-left">
+							<div class="level-item">
+								<h2 class="subtitle">Your uploaded files</h2>
+							</div>
+						</div>
+						<div class="level-right">
+							<div class="level-item">
+								<b-field>
+									<b-input
+										placeholder="Search"
+										type="search"/>
+									<p class="control">
+										<button
+											outlined
+											class="button is-primary">
+											Search
+										</button>
+									</p>
+								</b-field>
+							</div>
+						</div>
+					</nav>					
 					<hr>
 
-					<Grid v-if="count"
-						:files="files"
-						:enableSearch="false"
-						class="grid" />
+					<b-loading :active="images.isLoading" />
 
-					<b-pagination
-						v-if="count > perPage"
-						:total="count"
-						:per-page="perPage"
-						:current.sync="current"
-						class="pagination"
-						icon-prev="icon-interface-arrow-left"
-						icon-next="icon-interface-arrow-right"
-						icon-pack="icon"
-						aria-next-label="Next page"
-						aria-previous-label="Previous page"
-						aria-page-label="Page"
-						aria-current-label="Current page" />
+					<Grid v-if="totalFiles"
+						:files="images.files"
+						:enableSearch="false"
+						class="grid">
+						<template v-slot:pagination>
+							<b-pagination
+								v-if="shouldPaginate"
+								:total="totalFiles"
+								:per-page="limit"
+								:current.sync="current"
+								range-before="2"
+								range-after="2"
+								class="pagination-slot"
+								icon-prev="icon-interface-arrow-left"
+								icon-next="icon-interface-arrow-right"
+								icon-pack="icon"
+								aria-next-label="Next page"
+								aria-previous-label="Previous page"
+								aria-page-label="Page"
+								aria-current-label="Current page" />
+						</template>
+					</Grid>
 				</div>
 			</div>
 		</div>
@@ -34,6 +62,8 @@
 </template>
 
 <script>
+import { mapState, mapGetters, mapActions } from 'vuex';
+
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import Grid from '~/components/grid/Grid.vue';
 
@@ -42,44 +72,34 @@ export default {
 		Sidebar,
 		Grid
 	},
-	middleware: 'auth',
+	middleware: ['auth', ({ store }) => {
+		store.dispatch('images/fetch');
+	}],
 	data() {
 		return {
-			files: [],
-			count: 0,
-			current: 1,
-			perPage: 30
+			current: 1
 		};
 	},
+	computed: {
+		...mapGetters({ 
+			totalFiles: 'images/getTotalFiles',
+			shouldPaginate: 'images/shouldPaginate',
+			limit: 'images/getLimit'
+		}),
+		...mapState(['images'])
+	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
 	watch: {
-		current: 'getFiles'
-	},
-	async asyncData({ $axios, route }) {
-		const perPage = 30;
-		const current = 1; // current page
-
-		try {
-			const response = await $axios.$get(`files`, { params: { page: current, limit: perPage }});
-			return {
-				files: response.files || [],
-				count: response.count || 0,
-				current,
-				perPage
-			};
-		} catch (error) {
-			console.error(error);
-			return { files: [] };
-		}
+		current: 'fetchPaginate'
 	},
 	methods: {
-		async getFiles() {
-			// TODO: Cache a few pages once fetched
-			const response = await this.$axios.$get(`files`, { params: { page: this.current, limit: this.perPage }});
-			this.files = response.files;
-			this.count = response.count;
+		...mapActions({
+			fetch: 'images/fetch'
+		}),
+		fetchPaginate() {
+			this.fetch(this.current)
 		}
 	}
 };
@@ -89,4 +109,14 @@ export default {
 	div.grid {
 		margin-bottom: 1rem;
 	}
-</style>
\ No newline at end of file
+
+	.pagination-slot {
+		padding: 1rem 0;
+	}
+</style>
+
+<style lang="scss">
+	.pagination-slot > .pagination-previous, .pagination-slot > .pagination-next {
+		display: none !important;
+	}
+</style>
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index 707ae67..bb35be3 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -28,6 +28,8 @@
 	</div>
 </template>
 <script>
+import { mapState, mapGetters } from 'vuex';
+
 import Logo from '~/components/logo/Logo.vue';
 import Uploader from '~/components/uploader/Uploader.vue';
 import Links from '~/components/home/links/Links.vue';
@@ -43,12 +45,8 @@ export default {
 		return { albums: [] };
 	},
 	computed: {
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		},
-		config() {
-			return this.$store.state.config;
-		}
+		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
+		...mapState(['config'])
 	}
 };
 </script>
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index 514cbc5..3c43755 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -63,6 +63,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
 	name: 'Login',
 	data() {
@@ -74,40 +76,31 @@ export default {
 			isLoading: false
 		};
 	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
+	computed: mapState(['config', 'auth']),
 	metaInfo() {
 		return { title: 'Login' };
 	},
+	created() {
+		if (this.auth.loggedIn) {
+			this.redirect();
+		}
+	},
 	methods: {
 		async login() {
-			if (this.isLoading) return;
-			if (!this.username || !this.password) {
-				this.$store.dispatch('alert', {
+			if (this.auth.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
 				});
 				return;
 			}
-			this.isLoading = true;
-
-			try {
-				const data = await this.$axios.$post(`auth/login`, {
-					username: this.username,
-					password: this.password
-				});
-				this.$axios.setToken(data.token, 'Bearer');
-				document.cookie = `token=${encodeURIComponent(data.token)}`;
-				this.$store.dispatch('login', { token: data.token, user: data.user });
 
+			await this.$store.dispatch('auth/login', { username, password });
+			if (this.auth.loggedIn) {
 				this.redirect();
-			} catch (error) {
-				//
-			} finally {
-				this.isLoading = false;
 			}
 		},
 		/*
@@ -126,7 +119,7 @@ export default {
 				});
 		},*/
 		redirect() {
-			this.$store.commit('loggedIn', true);
+			console.log('redirect');
 			if (typeof this.$route.query.redirect !== 'undefined') {
 				this.$router.push(this.$route.query.redirect);
 				return;
diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue
index c102abd..92eb35a 100644
--- a/src/site/pages/register.vue
+++ b/src/site/pages/register.vue
@@ -42,6 +42,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
 	name: 'Register',
 	data() {
@@ -52,11 +54,7 @@ export default {
 			isLoading: false
 		};
 	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
+	computed: mapState(['config', 'auth']),
 	metaInfo() {
 		return { title: 'Register' };
 	},
@@ -72,7 +70,7 @@ export default {
 			}
 			if (this.password !== this.rePassword) {
 				this.$store.dispatch('alert', {
-					text: 'Passwords don\'t match',
+					text: "Passwords don't match",
 					error: true
 				});
 				return;