Change password and api keys

1 files changed, 153 insertions, 0 deletions

diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
new file mode 100644
index 0000000..e3570c7
--- /dev/null
+++ b/src/site/pages/dashboard/account.vue
@@ -0,0 +1,153 @@
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	section { background-color: $backgroundLight1 !important; }
+	section.hero div.hero-body {
+		align-items: baseline;
+	}
+	div.search-container {
+		display: flex;
+		justify-content: center;
+	}
+</style>
+<style lang="scss">
+	@import '~/assets/styles/_colors.scss';
+</style>
+
+
+<template>
+	<section class="hero is-fullheight">
+		<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>
+
+						<b-field label="Username"
+							message="Nothing to do here"
+							horizontal>
+							<b-input v-model="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="New password"
+							message="Your new password"
+							horizontal>
+							<b-input v-model="user.newPassword"
+								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>
+
+						<div class="mb2 mt2 text-center">
+							<button class="button is-primary"
+								@click="changePassword">Change password</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"
+								expanded />
+						</b-field>
+
+						<div class="mb2 mt2 text-center">
+							<button class="button is-primary"
+								@click="promptNewAPIKey">Request new API key</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Sidebar from '~/components/sidebar/Sidebar.vue';
+
+export default {
+	components: {
+		Sidebar
+	},
+	data() {
+		return {
+			user: {}
+		};
+	},
+	computed: {
+		config() {
+			return this.$store.state.config;
+		}
+	},
+	metaInfo() {
+		return { title: 'Account' };
+	},
+	mounted() {
+		this.$ga.page({
+			page: '/dashboard/account',
+			title: 'Settings',
+			location: window.location.href
+		});
+		this.getUserSetttings();
+	},
+	methods: {
+		async getUserSetttings() {
+			try {
+				const response = await this.axios.get(`${this.config.baseURL}/users/me`);
+				this.user = response.data.user;
+			} catch (error) {
+				this.$onPromiseError(error);
+			}
+		},
+		async changePassword() {
+			if (!this.user.password || !this.user.newPassword || !this.user.reNewPassword) return;
+			if (this.user.newPassword !== this.user.reNewPassword) return;
+
+			try {
+				const response = await this.axios.post(`${this.config.baseURL}/user/password/change`,
+					{
+						password: this.user.password,
+						newPassword: this.user.newPassword
+					});
+				this.$toast.open(response.data.message);
+			} catch (error) {
+				this.$onPromiseError(error);
+			}
+		},
+		promptNewAPIKey() {
+			this.$dialog.confirm({
+				message: 'Are you sure you want to regenerate your API key?',
+				onConfirm: () => this.requestNewAPIKey()
+			});
+		},
+		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);
+			} catch (error) {
+				this.$onPromiseError(error);
+			}
+		}
+	}
+};
+</script>