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

Handle invalid input in the new account form

Browse source
This commit is contained in:
Rodolphe Bréard 2023-07-30 19:39:37 +02:00
parent 20dbbda08b
commit 22b5527fde
2 changed files with 27 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/assets/main.sass
View file

@ -9,7 +9,9 @@
// Elements // Elements
@import "node_modules/bulma/sass/elements/button" @import "node_modules/bulma/sass/elements/button"
@import "node_modules/bulma/sass/elements/container" @import "node_modules/bulma/sass/elements/container"
@import "node_modules/bulma/sass/elements/notification"
@import "node_modules/bulma/sass/elements/title" @import "node_modules/bulma/sass/elements/title"
@import "node_modules/bulma/sass/elements/other"
// Form // Form
@import "node_modules/bulma/sass/form/shared" @import "node_modules/bulma/sass/form/shared"

33
src/views/AddAccountView.vue
View file

@ -11,22 +11,27 @@ const localPart = ref('');
const separator = ref('+'); const separator = ref('+');
const domainName = ref(''); const domainName = ref('');
const privateKey = ref(''); const privateKey = ref('');
const errorMessage = ref('');
const base64Decode = (str_b64) => { const base64Decode = (str_b64) => {
const raw_str = atob(str_b64); try {
const length = raw_str.length; const raw_str = atob(str_b64);
var b = []; const length = raw_str.length;
for (var i = 0; i < length; i++) { var b = [];
b.push(raw_str.charCodeAt(i)); for (var i = 0; i < length; i++) {
b.push(raw_str.charCodeAt(i));
}
return b;
} catch (e) {
throw new Error('The key must be a valid base64 string.');
} }
return b;
}; };
// Add account button // Add account button
const addDisabled = computed(() => { const addDisabled = computed(() => {
const params = [ const params = [
localPart.value, localPart.value,
separator.value.length == 1, separator.value,
domainName.value, domainName.value,
privateKey.value privateKey.value
]; ];
@ -35,6 +40,9 @@ const addDisabled = computed(() => {
const addAccount = () => { const addAccount = () => {
if (!addDisabled.value) { if (!addDisabled.value) {
try { try {
if (separator.value.length != 1) {
throw new Error('The separator must be a single character.');
}
const key = base64Decode(privateKey.value); const key = base64Decode(privateKey.value);
const hash = sha256(`${localPart.value}@${domainName.value}`); const hash = sha256(`${localPart.value}@${domainName.value}`);
const newAccount = { const newAccount = {
@ -47,7 +55,7 @@ const addAccount = () => {
accounts.value.push(newAccount); accounts.value.push(newAccount);
return toMainView(); return toMainView();
} catch (e) { } catch (e) {
console.log(e); errorMessage.value = e.message;
} }
} }
}; };
@ -59,10 +67,19 @@ const cancellDisabled = computed(() => {
const toMainView = () => { const toMainView = () => {
return router.push('/'); return router.push('/');
}; };
// Error message
const resetErrorMessage = () => {
errorMessage.value = '';
};
</script> </script>
<template> <template>
<h1 class="title is-1">Add a new account</h1> <h1 class="title is-1">Add a new account</h1>
<div class="notification is-danger is-light" v-if="errorMessage">
<button class="delete" @click="resetErrorMessage"></button>
{{ errorMessage }}
</div>
<div class="container" id="new-account-error-msg-container"></div> <div class="container" id="new-account-error-msg-container"></div>
<div class="field"> <div class="field">
<label class="label" for="new-addr-local-part">Local part</label> <label class="label" for="new-addr-local-part">Local part</label>