From af437963bb002d10315aeeca88489f12c174e054 Mon Sep 17 00:00:00 2001
From: igor <mino@tpsoft.org>
Date: Sun, 15 Feb 2026 18:16:01 +0100
Subject: [PATCH] added change language into settings

---
 frontend/src/locales/cs.json        |  1 +
 frontend/src/locales/de.json        |  1 +
 frontend/src/locales/en.json        |  1 +
 frontend/src/locales/es.json        |  1 +
 frontend/src/locales/sk.json        |  1 +
 frontend/src/views/SettingsView.vue | 43 +++++++++++++++++++++++++++--
 6 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/frontend/src/locales/cs.json b/frontend/src/locales/cs.json
index 5e4276b..e8af0d9 100644
--- a/frontend/src/locales/cs.json
+++ b/frontend/src/locales/cs.json
@@ -167,6 +167,7 @@
 		"accountTitle": "Nastavení účtu",
 		"loggedInAs": "Přihlášený uživatel",
 		"themeTitle": "Vzhled",
+		"languageTitle": "Jazyk",
 		"logout": "Odhlásit se"
 	}
 }
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 74dc676..4ad3770 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -167,6 +167,7 @@
 		"accountTitle": "Kontoeinstellungen",
 		"loggedInAs": "Angemeldet als",
 		"themeTitle": "Darstellung",
+		"languageTitle": "Sprache",
 		"logout": "Abmelden"
 	}
 }
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 3194d00..5107d1e 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -167,6 +167,7 @@
 		"accountTitle": "Account settings",
 		"loggedInAs": "Logged in as",
 		"themeTitle": "Appearance",
+		"languageTitle": "Language",
 		"logout": "Log out"
 	}
 }
diff --git a/frontend/src/locales/es.json b/frontend/src/locales/es.json
index ebd0f9e..94a1098 100644
--- a/frontend/src/locales/es.json
+++ b/frontend/src/locales/es.json
@@ -167,6 +167,7 @@
 		"accountTitle": "Ajustes de cuenta",
 		"loggedInAs": "Sesión iniciada como",
 		"themeTitle": "Apariencia",
+		"languageTitle": "Idioma",
 		"logout": "Cerrar sesión"
 	}
 }
diff --git a/frontend/src/locales/sk.json b/frontend/src/locales/sk.json
index 0d488af..bf924eb 100644
--- a/frontend/src/locales/sk.json
+++ b/frontend/src/locales/sk.json
@@ -167,6 +167,7 @@
 		"accountTitle": "Nastavenia účtu",
 		"loggedInAs": "Prihlásený používateľ",
 		"themeTitle": "Vzhľad",
+		"languageTitle": "Jazyk",
 		"logout": "Odhlásiť sa"
 	}
 }
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 8899c9a..bd26211 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -1,12 +1,41 @@
-<script setup lang="ts">
+<script setup lang="ts">
+import { computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import ThemeToggle from '@/components/common/ThemeToggle.vue'
+import i18n from '@/i18n'
+import { SUPPORTED_LOCALES, type AppLocale } from '@/i18n'
 import { useAuthStore } from '@/stores/auth'
 
 const router = useRouter()
 const auth = useAuthStore()
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
+
+const isSupportedLocale = (value: string): value is AppLocale => {
+	return SUPPORTED_LOCALES.includes(value as AppLocale)
+}
+
+const setLocale = (value: string) => {
+	if (!isSupportedLocale(value)) {
+		return
+	}
+	i18n.global.locale.value = value
+	document.documentElement.setAttribute('lang', value)
+	localStorage.setItem('locale', value)
+}
+
+const localeValue = computed({
+	get: () => i18n.global.locale.value as AppLocale,
+	set: (value: string) => setLocale(value),
+})
+
+watch(
+	() => i18n.global.locale.value,
+	(nextLocale) => {
+		document.documentElement.setAttribute('lang', nextLocale)
+	},
+	{ immediate: true },
+)
 
 const onLogout = async () => {
 	await auth.logout()
@@ -25,6 +54,16 @@ const onLogout = async () => {
 				<span>{{ t('settings.themeTitle') }}</span>
 				<ThemeToggle />
 			</div>
+			<div class="settings-card__theme">
+				<span>{{ t('settings.languageTitle') }}</span>
+				<label class="locale-control" :aria-label="t('settings.languageTitle')">
+					<select v-model="localeValue">
+						<option v-for="lang in SUPPORTED_LOCALES" :key="lang" :value="lang">
+							{{ t(`locale.${lang}`) }}
+						</option>
+					</select>
+				</label>
+			</div>
 			<button class="btn btn-danger" type="button" @click="onLogout">{{ t('settings.logout') }}</button>
 		</section>
 	</section>