rodolphe/sake-app
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity

Use Bootstrap's form validation style

Browse source
This commit is contained in:
Rodolphe Bréard 2023-09-26 11:58:33 +02:00
parent c59e56fba7
commit 43b73bbe5f
2 changed files with 36 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -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

46
src/views/AddAccountView.vue
View file

@ -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) {
try {
resetErrorMessage();
var hasError = false;
var key = null;
if (separator.value.length != 1) {
throw new Error('addAccount.error.invalidSeparator');
hasError = setErrorMessage('addAccount.error.invalidSeparator', separatorErrorMessageId);
}
if (localPart.value.includes(separator.value)) {
throw new Error('addAccount.error.localPartSeparator');
hasError = setErrorMessage('addAccount.error.localPartSeparator', localPartErrorMessageId);
}
const key = base64Decode(privateKey.value);
try {
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) => {
if (messageId.startsWith('addAccount.error.')) {
errorMessageId.value = messageId;
const setErrorMessage = (messageId, messageType) => {
const messageIdClean = messageId.startsWith('addAccount.error.') ? messageId : 'addAccount.error.unknown';
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>