Allow to set the prefered locale

src/components/NavBarComponent.vue

@@ -24,6 +24,7 @@ const toggleBurger = () => {
 						<div class="navbar-end">
 							<RouterLink to="/add-account" class="navbar-item">{{ $t("navbar.addAccount") }}</RouterLink>
 							<RouterLink to="/manage-accounts" class="navbar-item">{{ $t("navbar.manageAccounts") }}</RouterLink>
+							<RouterLink to="/config" class="navbar-item">{{ $t("navbar.config") }}</RouterLink>
 							<RouterLink to="/about" class="navbar-item">{{ $t("navbar.about") }}</RouterLink>
 						</div>
 					</div>

src/locales/en.json

@@ -1,4 +1,5 @@
 {
+	"locale_name": "English",
 	"invariants": {
 		"controls": {
 			"cancel": "Cancel",
@@ -10,6 +11,7 @@
 	"navbar": {
 		"addAccount": "New account",
 		"manageAccounts": "Accounts",
+		"config": "Preferences",
 		"about": "About"
 	},
 	"about": {
@@ -41,6 +43,11 @@
 			"unknown": "Unknown error."
 		}
 	},
+	"config": {
+		"title": "Preferences",
+		"language": "Language",
+		"close": "@:invariants.controls.close"
+	},
 	"deleteAccount": {
 		"title": "Delete account",
 		"account": "You are about to delete the following account:",

src/main.js

@@ -2,17 +2,24 @@ import './assets/main.sass';
 
 import { createApp } from 'vue';
 import { createI18n } from 'vue-i18n'
+import { useStorage } from '@vueuse/core'
 import App from './App.vue';
 import router from './router';
 
 import msg_en from './locales/en.json';
 
+const default_locale = 'en'
+const stored_locale = useStorage('sake-locale', '');
+if (!stored_locale.value) {
+	stored_locale.value = default_locale
+}
+
 const messages = {
 	en: msg_en,
 };
 const i18n = createI18n({
-	locale: 'en',
-	fallbackLocale: 'en',
+	locale: stored_locale.value,
+	fallbackLocale: default_locale,
 	messages,
 });
 

src/router/index.js

@@ -4,6 +4,7 @@ import { useStorage } from '@vueuse/core'
 import MainView from '../views/MainView.vue';
 import AboutView from '../views/AboutView.vue';
 import AddAccountView from '../views/AddAccountView.vue';
+import ConfigView from '../views/ConfigView.vue';
 import DeleteAccountView from '../views/DeleteAccountView.vue';
 import ManageAccountsView from '../views/ManageAccountsView.vue';
 
@@ -32,6 +33,11 @@ const router = createRouter({
 			name: 'add-account',
 			component: AddAccountView
 		},
+		{
+			path: '/config',
+			name: 'config',
+			component: ConfigView,
+		},
 		{
 			path: '/delete-account/:id',
 			name: 'delete-account',

src/views/ConfigView.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStorage } from '@vueuse/core'
+import LayoutComponent from '../components/LayoutComponent.vue';
+
+const router = useRouter();
+const stored_locale = useStorage('sake-locale', '');
+const { t, locale } = useI18n({ useScope: 'global' });
+
+const toMainView = () => {
+	return router.push('/');
+};
+
+watch(locale, async (newLocale) => {
+	stored_locale.value = newLocale;
+});
+</script>
+
+<template>
+	<LayoutComponent>
+		<h1 class="title is-1">{{ $t("config.title") }}</h1>
+		<div class="field">
+			<label class="label" for="app-language">{{ $t("config.language") }}</label>
+			<div class="control">
+				<div class="select is-fullwidth">
+					<select id="app-language" v-model="$i18n.locale">
+						<option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ $t("locale_name", locale) }}</option>
+					</select>
+				</div>
+			</div>
+		</div>
+		<div class="buttons is-centered">
+			<button class="button is-light" @click="toMainView">{{ $t("config.close") }}</button>
+		</div>
+	</LayoutComponent>
+</template>