Automatically correct invalid values for preferences

CHANGELOG.md

@@ -22,6 +22,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - The style has been entirely reworked using Bootstrap instead of Bulma
 - It is now impossible to include the separator in the dedicated name
 
+## Fixed
+- Invalid preferences are now automatically corrected
+
 
 ## [0.3.0] - 2023-08-25
 

src/const.js

@@ -0,0 +1,8 @@
+export const allowedColorModes = [
+	'light',
+	'dark',
+];
+export const allowedLocales = [
+	'en',
+	'fr',
+];

src/main.js

@@ -1,5 +1,6 @@
 import './assets/main.sass';
 
+import { allowedColorModes, allowedLocales } from './const';
 import { createApp } from 'vue';
 import { createI18n } from 'vue-i18n';
 import { useStorage } from '@vueuse/core';
@@ -7,19 +8,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', 'en', allowedLocales);
+const colorMode = setGlobalAttribute('data-bs-theme', 'sake-color-mode', 'light', allowedColorModes);
 
 const i18n = createI18n({
 	legacy: false,