@live-change/user-frontend 0.9.131 → 0.9.133

package/front/src/identification/IdentificationSettings.vue

@@ -3,7 +3,7 @@
     <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
       <div class="text-center mb-8">
         <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
-          Profile
+          {{ t('settings.profile') }}
         </div>
       </div>
 
@@ -29,12 +29,12 @@
           <div class="p-field flex flex-col">
             <InputText type="text" v-model="data.name"
                        :invalid="!!data.nameError"
-                       class="p-inputtext-lg" placeholder="Your name" />
+                       class="p-inputtext-lg" :placeholder="t('settings.yourName')" />
             <Message v-if="data.nameError" severity="error" variant="simple" size="small">
               {{ t(`errors.${data.nameError}`) }}
             </Message>
           </div>
-          <Button type="submit" label="Save name" class="mt-4" icon="pi pi-save" />
+          <Button type="submit" :label="t('settings.saveName')" class="mt-4" icon="pi pi-save" />
         </command-form>
       </div>
 
@@ -83,7 +83,7 @@
   function openImageEditor() {
     dialog.open(ComponentDialog, {
       props: {
-        header: 'Image Editor',
+        header: t('settings.imageEditor'),
         style: {
           width: '50vw',
         },
@@ -107,14 +107,14 @@
         console.log("WZ", workingZone)
         workingZone.addPromise('update user image', (async () => {
           await api.command(['userIdentification', updateMethod.value], { image: data?.value })
-          toast.add({ severity:'info', summary: 'User image saved', life: 1500 })
+          toast.add({ severity:'info', summary: t('settings.userImageSaved'), life: 1500 })
         })())
       }
     })
   }
 
   function handleNameSaved() {
-    toast.add({ severity:'info', summary: 'User name saved', life: 1500 })
+    toast.add({ severity:'info', summary: t('settings.userNameSaved'), life: 1500 })
   }
 
 

package/front/src/locale/LocaleSettings.vue

@@ -2,7 +2,7 @@
   <div class="w-full lg:w-6/12 md:w-9/12">
 
     <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" v-if="localeSettings">
-      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">Locale settings</div>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">{{ t('settings.localeSettings') }}</div>
 
       <command-form service="localeSettings" action="setOrUpdateMyLocaleSettings"
                     :initialValues="{
@@ -17,19 +17,19 @@
 
         <div class="p-field mb-4">
           <label for="title" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
-            Language
+            {{ t('settings.language') }}
           </label>
           <Dropdown v-model="data.language" :options="availableLocales"
                     :optionLabel="languageLabel" showClear
                     :filter="availableLocales.length > 10"
-                    placeholder="Auto-detect"
+                    :placeholder="t('settings.autoDetect')"
                     class="w-full" />
           <Message v-if="data.languageError" severity="error" variant="simple" size="small">
             {{ t(`errors.${data.languageError}`) }}
           </Message>
         </div>
 
-        <Button type="submit" label="Apply" class="mt-1" icon="pi pi-save" />
+        <Button type="submit" :label="t('settings.apply')" class="mt-1" icon="pi pi-save" />
 
       </command-form>
 
@@ -57,8 +57,8 @@
   const { t, availableLocales, getLocaleMessage } = useI18n()
 
   function languageLabel(option) {
-    console.log("LANGUAGE LABEL", option)
-    if(!option) return `Auto-detect (${navigator.language})`
+    //console.log("LANGUAGE LABEL", option)
+    if(!option) return `${t('settings.autoDetect')} (${navigator.language})`
     return getLocaleMessage(option).languageName ?? option
   }
 
@@ -69,7 +69,7 @@
   const [localeSettings] = await Promise.all([live(localePath)])
 
   function handleSettingsUpdated({ parameters, result }) {
-    toast.add({ severity: 'success', summary: 'Settings updated', detail: 'Your locale settings have been saved' })
+    toast.add({ severity: 'success', summary: t('settings.settingsUpdated'), detail: t('settings.localeSettingsSaved') })
   }
 
 </script>

package/front/src/message-auth/MessageLink.vue

@@ -2,25 +2,25 @@
   <div class="w-full lg:w-6/12 md:w-9/12 max-w-[32rem]" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
 
     <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" v-if="isUnknown && !isRedirecting">
-      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">Unknown link</div>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">{{ t('auth.unknownLink') }}</div>
       <p class="mt-0 mb-2 p-0 leading-normal">
-        We can't find your secret link. Check if you copied the address correctly.
+        {{ t('auth.unknownLinkDesc') }}
       </p>
     </div>
 
     <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" v-if="isUsed && !isRedirecting">
-      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">Link used</div>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">{{ t('auth.linkUsed') }}</div>
       <p class="mt-0 mb-2 p-0 leading-normal">
-        This link was already used.
+        {{ t('auth.linkUsedDesc') }}
       </p>
     </div>
 
     <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" v-if="isExpired && !isUsed && !isRedirecting">
-      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">Link expired</div>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">{{ t('auth.linkExpired') }}</div>
       <p class="mt-0 mb-6 p-0 leading-normal">
-        Your secret link already expired. To send another link click button below.
+        {{ t('messageAuth.linkExpiredDesc') }}
       </p>
-      <Button label="Resend" class="p-button-lg" @click="resend"></Button>
+      <Button :label="t('messageAuth.resend')" class="p-button-lg" @click="resend"></Button>
     </div>
 
     <div v-if="isReady || isRedirecting" 
@@ -39,6 +39,9 @@
   import { useNow } from '@vueuse/core'
   import { path, live, actions } from '@live-change/vue3-ssr'
 
+  import { useI18n } from 'vue-i18n'
+  const { t } = useI18n()
+
   const { secretCode } = defineProps({
     secretCode: {
       type: String,

package/front/src/message-auth/MessageSent.vue

@@ -2,13 +2,13 @@
   <div class="w-full lg:w-6/12 md:w-9/12 max-w-[32rem]" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
     <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" 
          v-if="authenticationData?.state === 'used' && !submitted">
-      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">Authentication done</div>
-      <p class="mt-0 mb-1 p-0 leading-normal">You authenticated in a different tab.</p>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">{{ t('messageAuth.authenticationDone') }}</div>
+      <p class="mt-0 mb-1 p-0 leading-normal">{{ t('messageAuth.authenticatedInDifferentTab') }}</p>
     </div>
     <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" v-else>
-      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">{{ title }}</div>
-      <p class="mt-0 mb-1 p-0 leading-normal">{{ description }}</p>
-      <p class="mt-0 mb-6 p-0 leading-normal">{{ callToAction }}</p>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">{{ localizedTitle }}</div>
+      <p class="mt-0 mb-1 p-0 leading-normal">{{ localizedDescription }}</p>
+      <p class="mt-0 mb-6 p-0 leading-normal">{{ localizedCallToAction }}</p>
       <Secured :events="['wrong-secret-code']" :actions="['checkSecretCode']">
         <command-form service="messageAuthentication" action="finishMessageAuthentication"
                       :parameters="{ secretType: 'code', authentication }" :key="authentication"
@@ -17,11 +17,11 @@
                       v-slot="{ data }">
           <div class="flex justify-center flex-col items-center">
             <div class="p-field mx-1 flex flex-col items-center mb-4">
-              <label for="code" class="sr-only">Code</label>
+              <label for="code" class="sr-only">{{ t('messageAuth.code') }}</label>
               <!-- <InputOtp id="code"  :length="6" class="mb-2"
                          v-model="data.secret"
                          aria-describedby="code-help" :invalid="!!data.secretError" /> -->
-              <InputMask id="code" class="p-inputtext-lg w-[7rem] text-center" mask="999999" slotChar="######" placeholder="Code"
+              <InputMask id="code" class="p-inputtext-lg w-[7rem] text-center" mask="999999" slotChar="######" :placeholder="t('messageAuth.code')"
                          v-model="data.secret"
                          aria-describedby="code-help" :invalid="!!data.secretError" />
               <Message v-if="data.secretError" severity="error" variant="simple">
@@ -29,13 +29,13 @@
               </Message>
             </div>
             <div class="flex flex-col">
-              <Button label="OK" type="submit" class="p-button-lg grow-0"
+              <Button :label="t('common.ok')" type="submit" class="p-button-lg grow-0"
                       :disableda="data.secret?.length < 6" />
             </div>
           </div>
           <div v-if="data.secretError === 'codeExpired'" class="mt-4 text-center">
-            <p class="mt-0 mb-2 p-0 leading-normal">To send another code click button below.</p>
-            <Button label="Resend secret code" class="p-button-lg" @click="resend" />
+            <p class="mt-0 mb-2 p-0 leading-normal">{{ t('messageAuth.toSendAnotherCode') }}</p>
+            <Button :label="t('messageAuth.resendSecretCode')" class="p-button-lg" @click="resend" />
           </div>
         </command-form>
       </Secured>
@@ -52,7 +52,7 @@
 
   import { useRouter } from 'vue-router'
   const router = useRouter()
-  import { ref } from 'vue'
+  import { ref, computed } from 'vue'
 
   import { useToast } from 'primevue/usetoast'
   const toast = useToast()
@@ -60,25 +60,32 @@
   import { useI18n } from 'vue-i18n'
   const { t } = useI18n()
 
-  const { authentication } = defineProps({
+  const props = defineProps({
     authentication: {
       type: String,
       required: true
     },
     title: {
       type: String,
-      default: 'Message sent',      
+      default: null,      
     },
     description: {
       type: String,
-      default: 'We sent special secret message to the contact you already provided.',
+      default: null,
     },
     callToAction: {
       type: String,
-      default: 'Click on the link or enter the code you found in that message.',
+      default: null,
     },
   })
 
+  const { authentication } = props
+
+  // Computed properties for localized texts
+  const localizedTitle = computed(() => props.title || t('messageAuth.messageSent'))
+  const localizedDescription = computed(() => props.description || t('messageAuth.messageSentDescription'))
+  const localizedCallToAction = computed(() => props.callToAction || t('messageAuth.callToAction'))
+
   function handleAuthenticated({ parameters, result }) {
     const { targetPage } = result
     console.log("TARGET ROUTE", targetPage)
@@ -107,7 +114,7 @@
         authentication
       })
       if(form.value) form.value.reset()
-      toast.add({ severity: 'success', summary: 'Code sent', detail: 'New code sent to you' })
+      toast.add({ severity: 'success', summary: t('messageAuth.codeSent'), detail: t('messageAuth.newCodeSent') })
 
       router.push({
         name: 'user:sent',

package/front/src/password/ChangePassword.vue

@@ -4,7 +4,7 @@
     <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
       <div class="text-center mb-8">
         <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
-          {{ passwordExists ? 'Change password' : 'Set password' }}
+          {{ passwordExists ? t('auth.changePassword') : t('auth.setPassword') }}
         </div>
       </div>
 
@@ -15,7 +15,7 @@
         <template v-if="isMounted">
 
           <div class="p-field mb-4" v-if="passwordExists">
-            <label for="currentPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Current password</label>
+            <label for="currentPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">{{ t('auth.currentPassword') }}</label>
             <Password id="currentPassword" class="w-full" inputClass="w-full"
                       toggle-mask v-model:masked="masked"
                       :invalid="!!data.currentPasswordHashError"
@@ -26,19 +26,19 @@
           </div>
 
           <div class="p-field mb-4">
-            <label for="newPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">New password</label>
+            <label for="newPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">{{ t('auth.newPassword') }}</label>
             <Password id="newPassword" class="w-full" inputClass="w-full"
                       toggle-mask v-model:masked="masked"
                       :invalid="!!data.passwordHashError"
                       v-model="data.passwordHash">
               <template #footer>
                 <Divider />
-                <p class="p-mt-2">Suggestions</p>
+                <p class="p-mt-2">{{ t('auth.passwordSuggestions') }}</p>
                 <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
-                  <li>At least one lowercase</li>
-                  <li>At least one uppercase</li>
-                  <li>At least one numeric</li>
-                  <li>Minimum 8 characters</li>
+                  <li>{{ t('auth.suggestionLowercase') }}</li>
+                  <li>{{ t('auth.suggestionUppercase') }}</li>
+                  <li>{{ t('auth.suggestionNumeric') }}</li>
+                  <li>{{ t('auth.suggestionMinLength') }}</li>
                 </ul>
               </template>
             </Password>
@@ -48,7 +48,7 @@
           </div>
 
           <div class="p-field mb-4">
-            <label for="reenterPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Re-enter password</label>
+            <label for="reenterPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">{{ t('auth.reenterPassword') }}</label>
             <Password id="reenterPassword" class="w-full" inputClass="w-full"
                       toggle-mask v-model:masked="masked"
                       v-model="secondPassword"
@@ -57,7 +57,7 @@
 
         </template>
 
-        <Button :label="passwordExists ? 'Change password' : 'Set password'"
+        <Button :label="passwordExists ? t('auth.changePassword') : t('auth.setPassword')"
                 type="submit"
                 icon="pi pi-key" class="w-full"></Button>
 

package/front/src/password/ChangePasswordFinished.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="w-full lg:w-6/12 md:w-9/12 max-w-[32rem]" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
     <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6">
-      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl mb-6">Password changed</div>
-      <p class="mt-0 p-0 leading-normal">You have successfully set your password.</p>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl mb-6">{{ t('auth.passwordChanged') }}</div>
+      <p class="mt-0 p-0 leading-normal">{{ t('auth.passwordChangedSuccess') }}</p>
     </div>
   </div>
 </template>
 
 <script setup>
-
+  import { useI18n } from 'vue-i18n'
+  const { t } = useI18n()
 </script>
 
 <style>

package/front/src/password/ResetPassword.vue

@@ -2,7 +2,7 @@
   <div class="w-full lg:w-6/12 md:w-9/12 max-w-[32rem]" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
     <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
       <div class="text-center mb-8">
-        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Reset password</div>
+        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">{{ t('auth.resetPassword') }}</div>
       </div>
 
       <command-form service="passwordAuthentication" action="resetPasswordEmail" v-slot="{ data }"
@@ -20,7 +20,7 @@
           </Message>
         </div>
 
-        <Button type="submit" label="Reset password" icon="pi pi-key" class="w-full"></Button>
+        <Button type="submit" :label="t('auth.resetPassword')" icon="pi pi-key" class="w-full"></Button>
 
       </command-form>
     </div>

package/front/src/password/ResetPasswordFinished.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="w-full lg:w-6/12 md:w-9/12 max-w-[32rem]" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
     <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6">
-      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl mb-6">Password changed</div>
-      <p class="mt-0 p-0 leading-normal">You have successfully changed your password.</p>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl mb-6">{{ t('auth.passwordChanged') }}</div>
+      <p class="mt-0 p-0 leading-normal">{{ t('auth.passwordResetSuccess') }}</p>
     </div>
   </div>
 </template>
 
 <script setup>
-
+  import { useI18n } from 'vue-i18n'
+  const { t } = useI18n()
 </script>
 
 <style>

package/front/src/password/ResetPasswordForm.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="w-full lg:w-6/12 md:w-9/12 max-w-[32rem]" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
     <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" v-if="isUnknown">
-      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">Unknown link</div>
-      <p class="mt-0 mb-2 p-0 leading-normal">We can't find your secret link. Check if you copied the address correctly.</p>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">{{ t('auth.unknownLink') }}</div>
+      <p class="mt-0 mb-2 p-0 leading-normal">{{ t('auth.unknownLinkDesc') }}</p>
     </div>
 
     <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" v-if="isUsed">
-      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">Link used</div>
-      <p class="mt-0 mb-2 p-0 leading-normal">This link was already used.</p>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">{{ t('auth.linkUsed') }}</div>
+      <p class="mt-0 mb-2 p-0 leading-normal">{{ t('auth.linkUsedDesc') }}</p>
     </div>
 
     <div class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6" v-if="isExpired && !isUsed">
-      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">Link expired</div>
-      <p class="mt-0 mb-6 p-0 leading-normal">Your password reset authentication already expired.</p>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">{{ t('auth.linkExpired') }}</div>
+      <p class="mt-0 mb-6 p-0 leading-normal">{{ t('auth.linkExpiredDesc') }}</p>
     </div>
 
     <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border" v-if="isReady || working">
       <div class="text-center mb-8">
-        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Reset password</div>
+        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">{{ t('auth.resetPassword') }}</div>
       </div>
 
       <command-form service="passwordAuthentication" action="finishResetPassword" v-slot="{ data }"
@@ -27,7 +27,7 @@
 
         <template v-if="isMounted">
           <div class="p-field mb-4">
-            <label for="newPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">New password</label>
+            <label for="newPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">{{ t('auth.newPassword') }}</label>
             <Password id="newPassword" class="w-full" inputClass="w-full" toggleMask
                       :invalid="!!data.passwordHashError"
                       v-model="data.passwordHash">
@@ -48,7 +48,7 @@
           </div>
 
           <div class="p-field mb-4">
-            <label for="reenterPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Re-enter password</label>
+            <label for="reenterPassword" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">{{ t('auth.reenterPassword') }}</label>
             <Password id="reenterPassword" class="w-full" inputClass="w-full"
                       v-model="secondPassword"
                       :feedback="false" toggleMask />

package/front/src/settings/Settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex relative lg:static bg-surface-50 dark:bg-surface-950" 
-       style="height: calc(100vh - 88px)">
+       style="min-height: calc(100vh - 88px)">
     <div id="settings-menu" 
          class="bg-surface-0 dark:bg-surface-950 flex-shrink-0 absolute left-0 h-full
                 top-0 z-1 border-r-1 border-r-surface-300 dark:border-r-surface-700 select-none

package/front/src/settings/SettingsMenu.vue

@@ -3,36 +3,36 @@
     <div class="overflow-y-auto">
       <ul class="list-none p-2 m-0">
         <li>
-          <div class="p-4 text-surface-500 dark:text-surface-300 font-medium">SETTINGS</div>
+          <div class="p-4 text-surface-500 dark:text-surface-300 font-medium">{{ t('settings.settings') }}</div>
         </li>
 
-        <SettingsMenuItem name="user:identification" icon="id-card" label="Identification" class="hidden md:block" />
+        <SettingsMenuItem name="user:identification" icon="id-card" :label="t('settings.identification')" class="hidden md:block" />
 
         <SettingsMenuItem v-if="client.user"
-                          name="user:settings" icon="cog" label="General Settings" class="hidden md:block" />
+                          name="user:settings" icon="cog" :label="t('settings.generalSettings')" class="hidden md:block" />
 
         <SettingsMenuItem v-if="(availableLocales?.length ?? 0) > 1"
-                          name="user:locale" icon="language" label="Language and Locale" class="hidden md:block" />
+                          name="user:locale" icon="language" :label="t('settings.languageAndLocale')" class="hidden md:block" />
 
         <SettingsMenuItem v-if="clientConfig.notifications?.length"
-                          name="user:notificationsSettings" icon="exclamation-circle" label="Notifications" />
+                          name="user:notificationsSettings" icon="exclamation-circle" :label="t('settings.notifications')" />
 
       </ul>
 
       <ul v-if="client.user" class="list-none p-2 m-0 border-t border-surface">
         <li>
-          <div class="p-4 text-surface-500 dark:text-surface-300 font-medium">AUTHORIZATION</div>
+          <div class="p-4 text-surface-500 dark:text-surface-300 font-medium">{{ t('settings.authorization') }}</div>
         </li>
 
-        <SettingsMenuItem v-if="client.user" name="user:connected" icon="users" label="Connected Accounts" />
+        <SettingsMenuItem v-if="client.user" name="user:connected" icon="users" :label="t('settings.connectedAccounts')" />
 
-        <SettingsMenuItem v-if="client.user" name="user:changePassword" icon="key" label="Change Password" />
+        <SettingsMenuItem v-if="client.user" name="user:changePassword" icon="key" :label="t('settings.changePassword')" />
 
       </ul>
 
       <ul v-if="client.user" class="list-none p-2 m-0 border-t border-surface">
 
-        <SettingsMenuItem v-if="client.user" name="user:delete" icon="trash" label="Delete Account" />
+        <SettingsMenuItem v-if="client.user" name="user:delete" icon="trash" :label="t('settings.deleteAccount')" />
 
       </ul>
     </div>

package/front/src/sign/SignInEmail.vue

@@ -3,11 +3,11 @@
     <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
 
       <div class="text-center mb-8">
-        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome Back</div>
-        <span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Don't have an account?</span>
+        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">{{ t('auth.welcomeBack') }}</div>
+        <span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">{{ t('auth.dontHaveAccount') }}</span>
         <router-link :to="{ name: 'user:signUpEmail' }"
                      class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">
-          Create today!</router-link>
+          {{ t('auth.createToday') }}</router-link>
       </div>
 
       <command-form service="passwordAuthentication" action="signInEmail" v-slot="{ data }"
@@ -15,7 +15,7 @@
 
         <div class="p-field mb-4">
           <label for="email" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
-            Email address
+            {{ t('auth.emailAddress') }}
           </label>
           <InputText id="email" type="text" class="w-full"
                      aria-describedby="email-help" :invalid="data.emailError" 
@@ -26,7 +26,7 @@
         </div>
 
         <div class="p-field mb-4">
-          <label for="password" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Password (optional)</label>
+          <label for="password" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">{{ t('auth.passwordOptional') }}</label>
           <Password id="password" class="w-full" inputClass="w-full" toggleMask :feedback="false"
                     aria-describedby="password-help" :invalid="data.passwordHashError" 
                     v-model="data.passwordHash" />        
@@ -43,23 +43,23 @@
           </div>-->
           <router-link :to="{ name: 'user:resetPassword' }"
                        class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">
-            Forgot password?
+            {{ t('auth.forgotPassword') }}
           </router-link>
         </div>
 
-        <Button label="Sign In" icon="pi pi-user" class="w-full" type="submit"></Button>
+        <Button :label="t('auth.signIn')" icon="pi pi-user" class="w-full" type="submit"></Button>
 
       </command-form>
 
       <Divider v-if="availableAccountTypes.length > 0" align="center" class="my-6">
-        <span class="text-surface-600 dark:text-surface-200 font-normal text-sm">OR</span>
+        <span class="text-surface-600 dark:text-surface-200 font-normal text-sm">{{ t('common.or') }}</span>
       </Divider>
 
       <router-link v-for="accountType in availableAccountTypes"
                    :to="accountType.connectRoute"
                    class="no-underline">
         <Button
-          :label="`Sign In with ${accountType.accountType[0].toUpperCase()}${accountType.accountType.slice(1)}`"
+          :label="t('auth.signInWith', { provider: accountType.accountType[0].toUpperCase() + accountType.accountType.slice(1) })"
           :icon="`pi pi-${accountType.accountType}`"
           class="w-full p-button-secondary mb-1"
         />

package/front/src/sign/SignUpEmail.vue

@@ -2,11 +2,11 @@
   <div class="w-full lg:w-6/12 md:w-9/12 max-w-[32rem]" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
     <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
       <div class="text-center mb-8">
-        <div class="text-surface-900 dark:text-surface-200 text-3xl font-medium mb-4">Sign Up</div>
-        <span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">Already have an account?</span>
+        <div class="text-surface-900 dark:text-surface-200 text-3xl font-medium mb-4">{{ t('auth.signUp') }}</div>
+        <span class="text-surface-600 dark:text-surface-200 font-medium leading-normal">{{ t('auth.alreadyHaveAccount') }}</span>
         <router-link :to="{ name: 'user:signInEmail' }"
                      class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">
-          Sign in</router-link>
+          {{ t('auth.signInToday') }}</router-link>
       </div>
 
       <command-form service="messageAuthentication" action="signUpEmail" v-slot="{ data, submit }"
@@ -14,7 +14,7 @@
 
         <div class="p-field mb-4">
           <label for="email" class="block text-surface-900 dark:text-surface-200 font-medium mb-2">
-            Email address
+            {{ t('auth.emailAddress') }}
           </label>
           <InputText id="email" type="text" class="w-full"
                      aria-describedby="email-help" :invalid="!!data.emailError"
@@ -24,27 +24,26 @@
           </Message>
         </div>
 
-        <Button label="Sign Up with email" icon="pi pi-user" class="w-full" type="submit" />
+        <Button :label="t('auth.signUpWithEmail')" icon="pi pi-user" class="w-full" type="submit" />
       </command-form>
 
       <Divider v-if="availableAccountTypes.length > 0" align="center" class="my-6">
-        <b>OR</b>
+        <b>{{ t('common.or') }}</b>
       </Divider>
 
       <router-link v-for="accountType in availableAccountTypes"
                    :to="accountType.connectRoute"
                    class="no-underline">
         <Button
-          :label="`Sign Up with ${accountType.accountType[0].toUpperCase()}${accountType.accountType.slice(1)}`"
+          :label="t('auth.signUpWith', { provider: accountType.accountType[0].toUpperCase() + accountType.accountType.slice(1) })"
           :icon="`pi pi-${accountType.accountType}`"
           class="w-full p-button-secondary mb-1"
         />
       </router-link>
 
       <div class="mt-4 text-surface-600 dark:text-surface-200">
-        By providing your email address or google account, you consent to its processing solely
-        for registration and account verification purposes, in accordance with our
-        <router-link to="/privacy-policy">Privacy Policy</router-link>.
+        {{ t('auth.privacyConsent') }}
+        <router-link to="/privacy-policy">{{ t('auth.privacyPolicy') }}</router-link>.
       </div>
 
     </div>

package/index.js

@@ -30,6 +30,12 @@ export * from './front/src/connected/connected.js'
 export * from "./front/src/router.js"
 
 import en from "./front/locales/en.json"
-const locales = { en }
-export { locales }
+import pl from "./front/locales/pl.json"
+const locales = { en, pl }
+
+import * as enLocale from "./front/locales/en.js"
+import * as plLocale from "./front/locales/pl.js"
+const localeStructures = { en: enLocale, pl: plLocale }
+
+export { locales, localeStructures }