feat: show validation errors from joi on the frontend

4 files changed, 41 insertions, 17 deletions

diff --git a/src/site/components/settings/JoiObject.vue b/src/site/components/settings/JoiObject.vue
index f77b249..8d3a803 100644
--- a/src/site/components/settings/JoiObject.vue
+++ b/src/site/components/settings/JoiObject.vue
@@ -3,7 +3,8 @@
 		<div v-for="[key, field] in Object.entries(settings)" :key="key">
 			<b-field
 				:label="field.flags.label"
-				:message="field.flags.description"
+				:message="getErrorMessage(key) || field.flags.description"
+				:type="getValidationType(key)"
 				class="field"
 				horizontal>
 				<b-input
@@ -43,7 +44,6 @@
 			</b-field>
 			<!--
 				TODO: Add asterisk to required fields
-				TODO: Implement showing errors returned by backend/joi
 			-->
 		</div>
 	</div>
@@ -108,6 +108,14 @@ export default {
 				return [...acc, ...item.allow];
 			}, []);
 		},
+		getValidationType(fieldName) {
+			if (Array.isArray(this.errors[fieldName])) return 'is-danger';
+			return null;
+		},
+		getErrorMessage(fieldName) {
+			if (Array.isArray(this.errors[fieldName])) return this.errors[fieldName].join('\n');
+			return null;
+		},
 		getValues() {
 			return this.values;
 		}
@@ -119,6 +127,10 @@ export default {
 
 	.field {
 		margin-bottom: 1em;
+
+		::v-deep .help.is-danger {
+			white-space: pre-line;
+		}
 	}
 
 	.taginp {
diff --git a/src/site/pages/dashboard/admin/settings.vue b/src/site/pages/dashboard/admin/settings.vue
index 7346729..51e5ea8 100644
--- a/src/site/pages/dashboard/admin/settings.vue
+++ b/src/site/pages/dashboard/admin/settings.vue
@@ -15,7 +15,7 @@
 						<h5 class="title is-5 has-text-grey-lighter">
 							{{ sectionName }}
 						</h5>
-						<JoiObject ref="jois" :settings="fields" />
+						<JoiObject ref="jois" :settings="fields" :errors="validationErrors" />
 					</div>
 
 					<div class="mb2 mt2 text-center">
@@ -42,6 +42,11 @@ export default {
 		JoiObject
 	},
 	middleware: ['auth', 'admin'],
+	data() {
+		return {
+			validationErrors: {}
+		};
+	},
 	computed: {
 		...mapState({
 			settings: state => state.admin.settings,
@@ -74,16 +79,24 @@ export default {
 				onConfirm: () => this.saveSettings()
 			});
 		},
-		saveSettings() {
+		async saveSettings() {
 			// handle refs
 			let settings = {};
 			for (const joiComponent of this.$refs.jois) {
 				settings = { ...settings, ...joiComponent.getValues() };
 			}
 
-			this.$handler.executeAction('admin/saveSettings', settings);
-			// restart service
-			// this.$handler.executeAction('admin/restartService');
+			try {
+				await this.$store.dispatch('admin/saveSettings', settings);
+				this.$set(this, 'validationErrors', {});
+
+				await this.$store.dispatch('config/fetchSettings');
+				this.$handler.executeAction('admin/restartService');
+			} catch (e) {
+				if (e.response?.data?.errors) {
+					this.$set(this, 'validationErrors', e.response.data.errors);
+				}
+			}
 		}
 	},
 	head() {
diff --git a/src/site/store/admin.js b/src/site/store/admin.js
index 0f946e9..9b1d591 100644
--- a/src/site/store/admin.js
+++ b/src/site/store/admin.js
@@ -28,7 +28,6 @@ export const actions = {
 	},
 	async saveSettings({ commit }, settings) {
 		const response = await this.$axios.$post('service/config', { settings });
-		commit('setSettings', response);
 
 		return response;
 	},
diff --git a/src/site/store/config.js b/src/site/store/config.js
index 7f6bcae..124b778 100644
--- a/src/site/store/config.js
+++ b/src/site/store/config.js
@@ -10,6 +10,15 @@ export const state = () => ({
 	userAccounts: false
 });
 
+export const actions = {
+	async fetchSettings({ commit }) {
+		const response = await this.$axios.$get('service/config');
+		commit('setSettings', response);
+
+		return response;
+	}
+};
+
 export const mutations = {
 	setSettings(state, { config }) {
 		state.version = `v${config.version}`;
@@ -22,12 +31,3 @@ export const mutations = {
 		state.userAccounts = config.userAccounts;
 	}
 };
-
-export const actions = {
-	async fetchSettings({ commit }) {
-		const response = await this.$axios.$get('service/config');
-		commit('setSettings', response);
-
-		return response;
-	}
-};