edit: add language selector + theme selector

app.vue

@@ -33,7 +33,8 @@ body {
 
 /* GLOBAL */
 .btn,
-.select {
+.select,
+.input {
   min-height: 2.5rem;
   height: 2.5rem;
 }

locales/en.json

@@ -13,6 +13,8 @@
     "change_password": "Change password",
     "confirm_new_password": "Confirm new password",
     "current_password": "Current password",
+    "edit_browser_settings": "Edit browser only settings",
+    "edit_personal_settings": "Edit personal information",
     "footerlink_administration": "Administration",
     "footerlink_documentation": "Documentation",
     "footerlink_edit": "Edit my profile",
@@ -20,6 +22,7 @@
     "form_has_errors": "The form contains some errors",
     "fullname": "Full name",
     "good_practices_about_user_password": "Pick a user password of at least 8 characters - though it is good practice to use longer ones (i.e. a passphrase) and/or use various kind of characters (uppercase, lowercase, digits and special characters).",
+    "language": "Language",
     "logged_out": "Logged out",
     "login": "Log in",
     "logout": "Log out",
@@ -37,6 +40,7 @@
     "remove": "Remove",
     "save": "Save",
     "skip_to_main_content": "Skip to main content",
+    "theme": "Theme",
     "username": "Username",
     "v": {
         "email": "Invalid email: must be alphanumeric and '_.' characters only (e.g. someone{'@'}example.com, s0me-1{'@'}example.com)",

nuxt.config.ts

@@ -39,7 +39,6 @@ export default defineNuxtConfig({
     strategy: 'no_prefix',
     lazy: true,
     langDir: 'locales',
-    defaultLocale: 'en',
     locales: locales as LocaleObject[],
   },
   colorMode: {

pages/edit.vue

@@ -5,7 +5,7 @@ import * as yup from 'yup'
 import { pick, exclude } from '@/utils/common'
 import type { User } from '@/composables/states'
 
-const { t } = useI18n()
+const { t, locale, locales } = useI18n()
 
 useHead({
   title: t('footerlink_edit'),
@@ -13,6 +13,54 @@ useHead({
 
 const user = await useUser()
 
+// Browser
+const localesAsOptions = computed(() => {
+  return locales.value.map((locale) => ({
+    text: locale.name,
+    value: locale.code,
+  }))
+})
+
+const colorMode = useColorMode()
+const themesAsOptions = [
+  'system',
+  'light',
+  'dark',
+  'cupcake',
+  'bumblebee',
+  'emerald',
+  'corporate',
+  'synthwave',
+  'retro',
+  'cyberpunk',
+  'valentine',
+  'halloween',
+  'garden',
+  'forest',
+  'aqua',
+  'lofi',
+  'pastel',
+  'fantasy',
+  'wireframe',
+  'black',
+  'luxury',
+  'dracula',
+  'cmyk',
+  'autumn',
+  'business',
+  'acid',
+  'lemonade',
+  'night',
+  'coffee',
+  'winter',
+  'dim',
+  'nord',
+  'sunset',
+].map((theme) => ({
+  text: theme.charAt(0).toUpperCase() + theme.slice(1),
+  value: theme,
+}))
+// Server
 const loading: Ref<boolean | null> = ref(false)
 const feedback: Ref<{
   variant: 'success' | 'warning' | 'error'
@@ -121,6 +169,49 @@ const onSubmit = handleSubmit(async (form) => {
   <div>
     <PageTitle :text="$t('footerlink_edit')" />
 
+    <section class="mt-5">
+      <h2 class="text-3xl">{{ t('edit_browser_settings') }}</h2>
+
+      <form novalidate class="my-10" @submit.prevent>
+        <div role="group" class="flex align mb-3">
+          <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+          <label for="language" class="label me-3">{{ t('language') }}</label>
+          <select id="language" v-model="locale" class="select select-bordered">
+            <option disabled selected>{{ t('language') }}</option>
+            <option
+              v-for="option in localesAsOptions"
+              :key="option.value"
+              :value="option.value"
+            >
+              {{ option.text }}
+            </option>
+          </select>
+        </div>
+
+        <div role="group" class="flex align">
+          <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+          <label for="theme" class="label me-3">{{ t('theme') }}</label>
+          <select
+            id="theme"
+            v-model="colorMode.preference"
+            class="select select-bordered"
+          >
+            <option disabled selected>{{ t('theme') }}</option>
+            <option
+              v-for="option in themesAsOptions"
+              :key="option.value"
+              :value="option.value"
+            >
+              {{ option.text }}
+            </option>
+          </select>
+        </div>
+      </form>
+    </section>
+
+    <section>
+      <h2 class="text-3xl">{{ t('edit_personal_settings') }}</h2>
+
       <form novalidate class="my-10" @submit="onSubmit">
         <div class="lg:flex lg:justify-between">
           <div class="lg:w-1/2 lg:me-20">
@@ -194,8 +285,15 @@ const onSubmit = handleSubmit(async (form) => {
               />
             </FormField>
 
-          <FormField name="confirmpassword" :label="$t('confirm_new_password')">
-            <TextInput name="confirmpassword" type="password" class="w-full" />
+            <FormField
+              name="confirmpassword"
+              :label="$t('confirm_new_password')"
+            >
+              <TextInput
+                name="confirmpassword"
+                type="password"
+                class="w-full"
+              />
             </FormField>
           </fieldset>
         </div>
@@ -211,11 +309,12 @@ const onSubmit = handleSubmit(async (form) => {
         />
 
         <div class="flex mt-10">
-        <NuxtLink to="/" class="btn ml-auto me-2">
+          <NuxtLink to="/" class="btn ms-auto me-2">
             {{ $t('cancel') }}
           </NuxtLink>
           <SubmitButton :loading="loading" variant="success" />
         </div>
       </form>
+    </section>
   </div>
 </template>