Merge pull request #228 from Zephyrrus/begone_trailing_commas

Merge own dev branch into main dev branch

1 files changed, 115 insertions, 72 deletions

diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
index 6ecc885..5610495 100644
--- a/src/site/pages/dashboard/account.vue
+++ b/src/site/pages/dashboard/account.vue
@@ -1,64 +1,94 @@
 <template>
-	<section class="hero is-fullheight dashboard">
-		<div class="hero-body">
-			<div class="container">
-				<div class="columns">
-					<div class="column is-narrow">
-						<Sidebar />
-					</div>
-					<div class="column">
-						<h2 class="subtitle">Account settings</h2>
-						<hr>
+	<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">
+						Account settings
+					</h2>
+					<hr>
 
-						<b-field label="Username"
-							message="Nothing to do here"
-							horizontal>
-							<b-input v-model="user.username"
-								expanded
-								disabled />
-						</b-field>
+					<b-field
+						label="Username"
+						message="Nothing to do here"
+						horizontal>
+						<b-input
+							class="lolisafe-input"
+							:value="user.username"
+							expanded
+							disabled />
+					</b-field>
 
-						<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"
-								type="password"
-								expanded />
-						</b-field>
+					<b-field
+						label="Current password"
+						message="If you want to change your password input the current one here"
+						horizontal>
+						<b-input
+							v-model="password"
+							class="lolisafe-input"
+							type="password"
+							expanded />
+					</b-field>
 
-						<b-field label="New password"
-							message="Your new password"
-							horizontal>
-							<b-input v-model="user.newPassword"
-								type="password"
-								expanded />
-						</b-field>
+					<b-field
+						label="New password"
+						message="Your new password"
+						horizontal>
+						<b-input
+							v-model="newPassword"
+							class="lolisafe-input"
+							type="password"
+							expanded />
+					</b-field>
 
-						<b-field label="New password again"
-							message="Your new password once again"
-							horizontal>
-							<b-input v-model="user.reNewPassword"
-								type="password"
-								expanded />
-						</b-field>
+					<b-field
+						label="New password again"
+						message="Your new password once again"
+						horizontal>
+						<b-input
+							v-model="reNewPassword"
+							class="lolisafe-input"
+							type="password"
+							expanded />
+					</b-field>
 
-						<div class="mb2 mt2 text-center">
-							<button class="button is-primary"
-								@click="changePassword">Change password</button>
-						</div>
+					<div class="mb2 mt2 text-center">
+						<b-button
+							type="is-lolisafe"
+							@click="changePassword">
+							Change password
+						</b-button>
+					</div>
 
-						<b-field label="Api key"
-							message="This API key lets you use the service from other apps"
-							horizontal>
-							<b-input v-model="user.apiKey"
+					<b-field
+						label="API key"
+						message="This API key lets you use the service from other apps"
+						horizontal>
+						<b-field expanded>
+							<b-input
+								class="lolisafe-input"
+								:value="apiKey"
 								expanded
 								disabled />
+							<p class="control">
+								<b-button
+									type="is-lolisafe"
+									@click="copyKey">
+									Copy
+								</b-button>
+							</p>
 						</b-field>
+					</b-field>
 
-						<div class="mb2 mt2 text-center">
-							<button class="button is-primary"
-								@click="promptNewAPIKey">Request new API key</button>
-						</div>
+					<div class="mb2 mt2 text-center">
+						<b-button
+							type="is-lolisafe"
+							@click="promptNewAPIKey">
+							Request new API key
+						</b-button>
 					</div>
 				</div>
 			</div>
@@ -67,51 +97,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({
@@ -120,10 +161,12 @@ export default {
 				onConfirm: () => this.requestNewAPIKey()
 			});
 		},
+		copyKey() {
+			this.$clipboard(this.apiKey);
+			this.$notifier.success('API key copied to clipboard');
+		},
 		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);
 		}
 	}