diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc2e3d0..5b0c522 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,10 +17,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
- Possibility to set a default account
- Dark mode
+- Use the browser's preferred language if available
### 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
+- It is now impossible to add the same account twice
## [0.3.0] - 2023-08-25
diff --git a/src/const.js b/src/const.js
new file mode 100644
index 0000000..f8ed9a5
--- /dev/null
+++ b/src/const.js
@@ -0,0 +1,8 @@
+export const allowedColorModes = [
+ 'light',
+ 'dark',
+];
+export const allowedLocales = [
+ 'en',
+ 'fr',
+];
diff --git a/src/locales/en.json b/src/locales/en.json
index 7c13534..802096b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -35,6 +35,7 @@
"addAccount": "Add account",
"cancel": "@:invariants.controls.cancel",
"error": {
+ "accountAlreadyExists": "You already have an account on this domain that uses this local part.",
"invalidBase64": "The key must be a valid base64 string.",
"invalidKeyLength": "The key's length must be either 128 bits (16 bytes) or 256 bits (32 bytes).",
"invalidSeparator": "The separator must be a single character.",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 168ccf0..b796013 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -35,9 +35,10 @@
"addAccount": "Ajouter",
"cancel": "@:invariants.controls.cancel",
"error": {
+ "accountAlreadyExists": "Vous avez déjà un compte sur ce nom de domaine qui utilise cette partie locale.",
"invalidBase64": "La clé doit être une chaîne de caractère en base64.",
"invalidKeyLength": "La longueur de la clé doit être de 128 bits (16 bytes) ou de 256 bits (32 bytes).",
- "invalidSeparator": "La séparateur doit être un unique caractère.",
+ "invalidSeparator": "Le séparateur doit être un unique caractère.",
"cameraNotAllowed": "L'accès à la caméra n'a pas été autorisé.",
"cameraNotFound": "Aucune caméra détectée.",
"cameraInsecureContext": "Impossible d'accéder à la caméra depuis une liaison non-sécurisée.",
diff --git a/src/locales_utils.js b/src/locales_utils.js
new file mode 100644
index 0000000..eead437
--- /dev/null
+++ b/src/locales_utils.js
@@ -0,0 +1,19 @@
+import { allowedLocales } from './const';
+
+const fallBackValue = 'en';
+
+const getShortLanguageCode = (language) => {
+ language = language.split('-')[0];
+ language = language.split('_')[0];
+ return language;
+};
+
+export const getDefaultLocale = () => {
+ for (const lang of navigator.languages) {
+ const lang_short = getShortLanguageCode(lang);
+ if (allowedLocales.includes(lang_short)) {
+ return lang_short;
+ }
+ }
+ return fallBackValue;
+};
diff --git a/src/main.js b/src/main.js
index 04f0db4..489809b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,7 @@
import './assets/main.sass';
+import { allowedColorModes, allowedLocales } from './const';
+import { getDefaultLocale } from './locales_utils';
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import { useStorage } from '@vueuse/core';
@@ -7,19 +9,22 @@ import App from './App.vue';
import router from './router';
import messages from '@intlify/unplugin-vue-i18n/messages';
-const setGlobalAttribute = (attrName, storageName, defaultValue) => {
+const setGlobalAttribute = (attrName, storageName, defaultValue, allowedValues) => {
const stored_value = useStorage(storageName, '');
if (!stored_value.value) {
stored_value.value = defaultValue;
}
document.documentElement.setAttribute(attrName, stored_value.value);
+ if (!allowedValues.includes(stored_value.value)) {
+ stored_value.value = defaultValue;
+ }
return {
'stored': stored_value,
'defaultValue': defaultValue,
};
};
-const locale = setGlobalAttribute('lang', 'sake-locale', 'en');
-const colorMode = setGlobalAttribute('data-bs-theme', 'sake-color-mode', 'light');
+const locale = setGlobalAttribute('lang', 'sake-locale', getDefaultLocale(), allowedLocales);
+const colorMode = setGlobalAttribute('data-bs-theme', 'sake-color-mode', 'light', allowedColorModes);
const i18n = createI18n({
legacy: false,
diff --git a/src/views/AddAccountView.vue b/src/views/AddAccountView.vue
index 7bc3531..9570c01 100644
--- a/src/views/AddAccountView.vue
+++ b/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,18 +48,38 @@ const addDisabled = computed(() => {
});
const addAccount = () => {
if (!addDisabled.value) {
+ resetErrorMessage();
+ var hasError = false;
+ var key = null;
+ var accountId = null;
+ if (separator.value.length != 1) {
+ hasError = setErrorMessage('addAccount.error.invalidSeparator', separatorErrorMessageId);
+ }
try {
- if (separator.value.length != 1) {
- throw new Error('addAccount.error.invalidSeparator');
- }
if (localPart.value.includes(separator.value)) {
throw new Error('addAccount.error.localPartSeparator');
}
- const key = base64Decode(privateKey.value);
+ accountId = `${localPart.value}@${domainName.value}`;
+ for (const acc of accounts.value) {
+ const comp = `${acc.localPart}@${acc.domain}`;
+ if (accountId == comp) {
+ throw new Error('addAccount.error.accountAlreadyExists');
+ }
+ }
+ } catch (e) {
+ console.log(e);
+ hasError = setErrorMessage(e.message, localPartErrorMessageId);
+ }
+ try {
+ key = base64Decode(privateKey.value);
if (!authorizedKeyLengths.includes(key.length)) {
throw new Error('addAccount.error.invalidKeyLength');
}
- const hash = sha256(`${localPart.value}@${domainName.value}`);
+ } catch (e) {
+ hasError = setErrorMessage(e.message, addrKeyErrorMessageId);
+ }
+ if (!hasError && key && accountId) {
+ const hash = sha256(accountId);
const newAccount = {
id: base32Encode(hash, 'RFC4648', { padding: false }).toLowerCase(),
localPart: localPart.value,
@@ -66,8 +90,6 @@ const addAccount = () => {
};
accounts.value.push(newAccount);
return toMainView();
- } catch (e) {
- errorMessageId.value = e.message;
}
}
};
@@ -119,15 +141,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 = '';
};
@@ -142,11 +170,13 @@ const resetErrorMessage = () => {
@@ -155,8 +185,9 @@ const resetErrorMessage = () => {