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

2 files changed, 40 insertions, 3 deletions

diff --git a/src/site/store/auth.js b/src/site/store/auth.js
index a62a6ec..73976d6 100644
--- a/src/site/store/auth.js
+++ b/src/site/store/auth.js
@@ -10,7 +10,8 @@ const getDefaultState = () => ({
 export const state = getDefaultState;
 
 export const getters = {
-	isLoggedIn: state => state.loggedIn
+	isLoggedIn: state => state.loggedIn,
+	getApiKey: state => state.user?.apiKey
 };
 
 export const actions = {
@@ -35,6 +36,36 @@ export const actions = {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
 		}
 	},
+	async fetchCurrentUser({ commit, dispatch }) {
+		try {
+			const data = await this.$axios.$get(`users/me`);
+			commit('setUser', data.user);
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	},
+	async changePassword({ dispatch }, { password, newPassword }) {
+		try {
+			const response = await this.$axios.$post(`user/password/change`, {
+				password,
+				newPassword
+			});
+
+			return response;
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	},
+	async requestAPIKey({ commit, dispatch }) {
+		try {
+			const response = await this.$axios.$post(`user/apikey/change`);
+			commit('setApiKey', response.apiKey);
+
+			return response;
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	},
 	logout({ commit }) {
 		commit('logout');
 	}
@@ -44,6 +75,12 @@ export const mutations = {
 	setToken(state, token) {
 		state.token = token;
 	},
+	setApiKey(state, apiKey) {
+		state.user.apiKey = apiKey;
+	},
+	setUser(state, user) {
+		state.user = user;
+	},
 	loginRequest(state) {
 		state.isLoading = true;
 	},
diff --git a/src/site/store/images.js b/src/site/store/images.js
index e87dac1..f6dae1b 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -10,8 +10,8 @@ export const state = () => ({
 });
 
 export const getters = {
-	getTotalFiles: state => state.pagination.totalFiles,
-	getFetchedCount: state => state.files.length,
+	getTotalFiles: ({ pagination }) => pagination.totalFiles,
+	getFetchedCount: ({ files }) => files.length,
 	shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit,
 	getLimit: ({ pagination }) => pagination.limit
 };