Use Bootstrap's form validation style

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - The style has been entirely reworked using Bootstrap instead of Bulma
 - It is now impossible to include the separator in the dedicated name
+- When adding a new account, error messages are displayed alongside each affected elements whenever possible
 
 ## Fixed
 - Invalid preferences are now automatically corrected

src/views/AddAccountView.vue

@@ -15,9 +15,13 @@ const localPart = ref('');
 const separator = ref('+');
 const domainName = ref('');
 const privateKey = ref('');
-const errorMessageId = ref('');
 const authorizedKeyLengths = [16, 32];
 
+const errorMessageId = ref('');
+const separatorErrorMessageId = ref('');
+const localPartErrorMessageId = ref('');
+const addrKeyErrorMessageId = ref('');
+
 const base64Decode = (str_b64) => {
 	try {
 		const raw_str = atob(str_b64);
@@ -44,17 +48,24 @@ const addDisabled = computed(() => {
 });
 const addAccount = () => {
 	if (!addDisabled.value) {
+		resetErrorMessage();
+		var hasError = false;
+		var key = null;
+		if (separator.value.length != 1) {
+			hasError = setErrorMessage('addAccount.error.invalidSeparator', separatorErrorMessageId);
+		}
+		if (localPart.value.includes(separator.value)) {
+			hasError = setErrorMessage('addAccount.error.localPartSeparator', localPartErrorMessageId);
+		}
 		try {
-			if (separator.value.length != 1) {
+			key = base64Decode(privateKey.value);
-				throw new Error('addAccount.error.invalidSeparator');
-			}
-			if (localPart.value.includes(separator.value)) {
-				throw new Error('addAccount.error.localPartSeparator');
-			}
-			const key = base64Decode(privateKey.value);
 			if (!authorizedKeyLengths.includes(key.length)) {
 				throw new Error('addAccount.error.invalidKeyLength');
 			}
+		} catch (e) {
+			hasError = setErrorMessage(e.message, addrKeyErrorMessageId);
+		}
+		if (!hasError) {
 			const hash = sha256(`${localPart.value}@${domainName.value}`);
 			const newAccount = {
 				id: base32Encode(hash, 'RFC4648', { padding: false }).toLowerCase(),
@@ -66,8 +77,6 @@ const addAccount = () => {
 			};
 			accounts.value.push(newAccount);
 			return toMainView();
-		} catch (e) {
-			errorMessageId.value = e.message;
 		}
 	}
 };
@@ -119,15 +128,21 @@ const toMainView = () => {
 };
 
 // Error message
-const setErrorMessage = (messageId) => {
+const setErrorMessage = (messageId, messageType) => {
-	if (messageId.startsWith('addAccount.error.')) {
+	const messageIdClean = messageId.startsWith('addAccount.error.') ? messageId : 'addAccount.error.unknown';
-		errorMessageId.value = messageId;
+	if (messageType) {
+		messageType.value = messageIdClean;
 	} else {
-		errorMessageId.value = 'addAccount.error.unknown';
+		errorMessageId.value = messageIdClean;
 	}
+	return true;
 };
 const resetErrorMessage = () => {
 	errorMessageId.value = '';
+
+	separatorErrorMessageId.value = '';
+	localPartErrorMessageId.value = '';
+	addrKeyErrorMessageId.value = '';
 };
 </script>
 
@@ -142,11 +157,13 @@ const resetErrorMessage = () => {
 
 		<div class="mb-3">
 			<label class="form-label" for="new-addr-local-part">{{ $t("addAccount.localPart") }}</label>
-			<input class="form-control" type="text" id="new-addr-local-part" v-model="localPart">
+			<input :class="{ 'form-control': true, 'is-invalid': localPartErrorMessageId}" type="text" id="new-addr-local-part" v-model="localPart">
+			<div class="invalid-feedback" v-if="localPartErrorMessageId">{{ $t(localPartErrorMessageId) }}</div>
 		</div>
 		<div class="mb-3">
 			<label class="form-label" for="new-addr-separator">{{ $t("addAccount.separator") }}</label>
-			<input class="form-control" type="text" id="new-addr-separator" v-model="separator">
+			<input :class="{ 'form-control': true, 'is-invalid': separatorErrorMessageId}" type="text" id="new-addr-separator" v-model="separator">
+			<div class="invalid-feedback" v-if="separatorErrorMessageId">{{ $t(separatorErrorMessageId) }}</div>
 		</div>
 		<div class="mb-3">
 			<label class="form-label" for="new-addr-domain">{{ $t("addAccount.domainName") }}</label>
@@ -155,8 +172,9 @@ const resetErrorMessage = () => {
 		<div class="mb-3">
 			<label class="form-label" for="new-addr-key">{{ $t("addAccount.privateKey") }}</label>
 			<div class="input-group">
-				<input class="form-control" type="text" id="new-addr-key" v-model="privateKey">
+				<input :class="{ 'form-control': true, 'is-invalid': addrKeyErrorMessageId}" type="text" id="new-addr-key" v-model="privateKey">
 				<button class="btn btn-primary" type="button" @click="showQrCodeScanner">{{ $t("addAccount.scan") }}</button>
+				<div class="invalid-feedback" v-if="addrKeyErrorMessageId">{{ $t(addrKeyErrorMessageId) }}</div>
 			</div>
 		</div>