feat: refactor account to use vuex, fix small presentational components

2 files changed, 45 insertions, 31 deletions

diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
index 121b2b3..1c335e8 100644
--- a/src/site/pages/dashboard/account.vue
+++ b/src/site/pages/dashboard/account.vue
@@ -12,7 +12,7 @@
 					<b-field label="Username"
 						message="Nothing to do here"
 						horizontal>
-						<b-input v-model="user.username"
+						<b-input :value="user.username"
 							expanded
 							disabled />
 					</b-field>
@@ -20,7 +20,7 @@
 					<b-field label="Current password"
 						message="If you want to change your password input the current one here"
 						horizontal>
-						<b-input v-model="user.password"
+						<b-input v-model="password"
 							type="password"
 							expanded />
 					</b-field>
@@ -28,7 +28,7 @@
 					<b-field label="New password"
 						message="Your new password"
 						horizontal>
-						<b-input v-model="user.newPassword"
+						<b-input v-model="newPassword"
 							type="password"
 							expanded />
 					</b-field>
@@ -36,7 +36,7 @@
 					<b-field label="New password again"
 						message="Your new password once again"
 						horizontal>
-						<b-input v-model="user.reNewPassword"
+						<b-input v-model="reNewPassword"
 							type="password"
 							expanded />
 					</b-field>
@@ -46,12 +46,17 @@
 							@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-input v-model="user.apiKey"
-							expanded
-							disabled />
+						<b-field expanded>
+							<b-input :value="apiKey"
+								expanded
+								disabled />
+							<p class="control">
+								<button class="button is-primary">Copy</button>
+							</p>
+						</b-field>
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
@@ -65,51 +70,62 @@
 </template>
 
 <script>
+import { mapState, mapActions, mapGetters } from 'vuex';
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
 		Sidebar
 	},
-	middleware: 'auth',
+	middleware: ['auth', ({ store }) => {
+		store.dispatch('auth/fetchCurrentUser');
+	}],
 	data() {
 		return {
-			user: {}
+			password: '',
+			newPassword: '',
+			reNewPassword: ''
 		};
+	}, 
+	computed: {
+		...mapGetters({ 'apiKey': 'auth/getApiKey' }),
+		...mapState({
+			user: state => state.auth.user
+		})
 	},
 	metaInfo() {
 		return { title: 'Account' };
 	},
-	mounted() {
-		this.getUserSetttings();
-	},
 	methods: {
-		async getUserSetttings() {
-			const response = await this.$axios.$get(`users/me`);
-			this.user = response.user;
-		},
+		...mapActions({
+			getUserSetttings: 'auth/fetchCurrentUser'
+		}),
 		async changePassword() {
-			if (!this.user.password || !this.user.newPassword || !this.user.reNewPassword) {
-				this.$store.dispatch('alert', {
+			const { password, newPassword, reNewPassword } = this;
+
+			if (!password || !newPassword || !reNewPassword) {
+				this.$store.dispatch('alert/set', {
 					text: 'One or more fields are missing',
 					error: true
 				});
 				return;
 			}
-			if (this.user.newPassword !== this.user.reNewPassword) {
-				this.$store.dispatch('alert', {
+			if (newPassword !== reNewPassword) {
+				this.$store.dispatch('alert/set', {
 					text: 'Passwords don\'t match',
 					error: true
 				});
 				return;
 			}
 
-			const response = await this.$axios.$post(`user/password/change`,
-				{
-					password: this.user.password,
-					newPassword: this.user.newPassword
-				});
-			this.$buefy.toast.open(response.message);
+			const response = await this.$store.dispatch('auth/changePassword', {
+				password,
+				newPassword
+			});
+
+			if (response) {
+				this.$buefy.toast.open(response.message);
+			}
 		},
 		promptNewAPIKey() {
 			this.$buefy.dialog.confirm({
@@ -119,9 +135,7 @@ export default {
 			});
 		},
 		async requestNewAPIKey() {
-			const response = await this.$axios.$post(`user/apikey/change`);
-			this.user.apiKey = response.apiKey;
-			this.$forceUpdate();
+			const response = await this.$store.dispatch('auth/requestAPIKey');		
 			this.$buefy.toast.open(response.message);
 		}
 	}
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 6c1b99b..89f0fac 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -99,7 +99,7 @@ export default {
 			fetch: 'images/fetch'
 		}),
 		fetchPaginate() {
-			this.fetch(this.current)
+			this.fetch(this.current);
 		}
 	}
 };