@live-change/user-frontend 0.9.61 → 0.9.63

package/front/src/connected/ConnectEmail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">Add email</div>

package/front/src/connected/ConnectFinished.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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-6 text-xl">Account connected</div>
       <div class="mt-0 p-0 leading-normal">Congratulations! You have successfully connected accounts.</div>

package/front/src/connected/ConnectPhone.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">Add phone number</div>

package/front/src/connected/Connected.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12">
+  <div class="w-full lg:w-6/12 md:w-9/12 max-w-[32rem]">
 
     <ConfirmPopup v-if="isMounted" />
     <Toast v-if="isMounted" />

package/front/src/delete/Delete.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">

package/front/src/delete/DeleteFeedbackSent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">Feedback sent</div>
       <p class="mt-0 p-0 leading-normal">Thank you for your feedback.</p>

package/front/src/delete/DeleteFinished.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">Account deleted</div>

package/front/src/google-access/GoogleAccessGained.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">Signed In</div>
       <p class="mt-0 p-0 leading-normal">

package/front/src/identification/IdentificationSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12">
+  <div class="w-full lg:w-6/12 md:w-9/12 max-w-[32rem]">
     <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">

package/front/src/locale/LocaleSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <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">
+    <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>
 
       <command-form service="localeSettings" action="setOrUpdateMyLocaleSettings"
@@ -54,7 +54,7 @@
   const toast = useToast()
 
   import { useI18n } from 'vue-i18n'
-  const { t, availableLocales, locale, getLocaleMessage } = useI18n()
+  const { t, availableLocales, getLocaleMessage } = useI18n()
 
   function languageLabel(option) {
     console.log("LANGUAGE LABEL", option)

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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>

package/front/src/notifications/NotificationsSettings.vue

@@ -4,8 +4,8 @@
       <div>
         <h1>Notifications settings</h1>
       </div>
-      <pre>{{ settings }}</pre>
-      <pre>{{ clientConfig }}</pre>
+<!--       <pre>{{ settings }}</pre>
+      <pre>{{ clientConfig }}</pre> -->
       <div v-for="notificationType in settings">
         <div>
           <h2>{{ t(`notifications.types.${notificationType.type}.name`) }}</h2>

package/front/src/password/ChangePassword.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12">
+  <div class="w-full lg:w-6/12 md:w-9/12 max-w-[32rem]">
 
     <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
       <div class="text-center mb-8">

package/front/src/password/ChangePasswordFinished.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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>

package/front/src/password/ResetPassword.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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>

package/front/src/password/ResetPasswordFinished.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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>

package/front/src/password/ResetPasswordForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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>

package/front/src/settings/SettingsMenu.vue

@@ -8,15 +8,18 @@
 
         <SettingsMenuItem name="user:identification" icon="id-card" label="Identification" class="hidden md:block" />
 
-        <SettingsMenuItem v-if="client.user" name="user:settings" icon="cog" label="General Settings" class="hidden md:block" />
+        <SettingsMenuItem v-if="client.user"
+                          name="user:settings" icon="cog" label="General Settings" class="hidden md:block" />
 
-        <SettingsMenuItem name="user:locale" icon="language" label="Language and Locale" class="hidden md:block" />
+        <SettingsMenuItem v-if="(availableLocales?.length ?? 0) > 1"
+                          name="user:locale" icon="language" label="Language and Locale" class="hidden md:block" />
 
-        <SettingsMenuItem name="user:notificationsSettings" icon="exclamation-circle" label="Notifications" />
+        <SettingsMenuItem v-if="clientConfig.notifications?.length"
+                          name="user:notificationsSettings" icon="exclamation-circle" label="Notifications" />
 
       </ul>
 
-      <ul v-if="client.user"  class="list-none p-2 m-0 border-t border-surface">
+      <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>
         </li>
@@ -34,39 +37,6 @@
       </ul>
     </div>
 
-    <!--        <div class="p-2 mt-auto border-t border-surface">
-              <ul class="list-none p-2 m-0 hidden origin-bottom animate-duration-150">
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 text-700 hover:surface-100
-                      border-round transition-colors transition-duration-150 p-ripple">
-                    <i class="pi pi-user mr-2"></i>
-                    <span class="font-medium">Profile</span>
-                  </a>
-                </li>
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 text-700 hover:surface-100
-                      border-round transition-colors transition-duration-150 p-ripple">
-                    <i class="pi pi-cog mr-2"></i>
-                    <span class="font-medium">Settings</span>
-                  </a>
-                </li>
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 text-700 hover:surface-100
-                      border-round transition-colors transition-duration-150 p-ripple">
-                    <i class="pi pi-sign-out mr-2"></i>
-                    <span class="font-medium">Sign Out</span>
-                  </a>
-                </li>
-              </ul>
-              <a v-ripple class="p-3 flex align-items-center cursor-pointer text-700 hover:surface-100
-                  border-round transition-colors transition-duration-150 p-ripple"
-                 v-styleclass="{ selector: '@prev', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein',
-                   leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout' }">
-                <img src="/images/empty-user-photo.svg" class="mr-2 rounded-full" style="width: 28px; height: 28px"/>
-                <span class="font-medium">Amy Elsner</span>
-                <i class="pi pi-chevron-up ml-auto"></i>
-              </a>
-            </div>-->
   </div>
 </template>
 
@@ -76,10 +46,16 @@
   import { useRoute } from 'vue-router'
   const route = useRoute()
 
-  import { client as useClient } from '@live-change/vue3-ssr'
+  import { useApi, useClient } from '@live-change/vue3-ssr'
 
+  const api = useApi()
   const client = useClient()
 
+  const clientConfig = api.getServiceDefinition('notification')?.clientConfig
+
+  import { useI18n } from 'vue-i18n'
+  const { t, availableLocales } = useI18n()
+
 </script>
 
 <style scoped>

package/front/src/sign/GoogleAuth.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">

package/front/src/sign/GoogleAuthReturn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">

package/front/src/sign/LinkedinAuth.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">

package/front/src/sign/LinkedinAuthReturn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">

package/front/src/sign/SignInEmail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">

package/front/src/sign/SignInFinished.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">Signed In</div>
       <p class="mt-0 p-0 leading-normal">Congratulations! You have successfully logged in to your account.</p>

package/front/src/sign/SignOut.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">Sign Out</div>
       <p class="mt-0 p-0 leading-normal">Signing out</p>

package/front/src/sign/SignOutFinished.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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">Signed Out</div>
       <p class="mt-0 p-0 leading-normal">You have successfully signed out from your account.</p>

package/front/src/sign/SignUpEmail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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>

package/front/src/sign/SignUpFinished.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+  <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-center mb-8">
         <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/user-frontend",
-  "version": "0.9.61",
+  "version": "0.9.63",
   "scripts": {
     "memDev": "node --inspect --expose-gc server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; node server/start.js localDev --enableSessions --initScript ./init.js",
@@ -22,29 +22,29 @@
   },
   "type": "module",
   "dependencies": {
-    "@live-change/cli": "^0.9.61",
-    "@live-change/dao": "^0.9.61",
-    "@live-change/dao-vue3": "^0.9.61",
-    "@live-change/dao-websocket": "^0.9.61",
-    "@live-change/email-service": "^0.9.61",
-    "@live-change/framework": "^0.9.61",
-    "@live-change/identicon-service": "^0.9.61",
-    "@live-change/image-frontend": "^0.9.61",
-    "@live-change/message-authentication-service": "^0.9.61",
-    "@live-change/notification-service": "^0.9.61",
-    "@live-change/password-authentication-service": "^0.9.61",
-    "@live-change/pattern": "^0.9.61",
-    "@live-change/secret-code-service": "^0.9.61",
-    "@live-change/secret-link-service": "^0.9.61",
-    "@live-change/security-frontend": "^0.9.61",
-    "@live-change/security-service": "^0.9.61",
-    "@live-change/session-service": "^0.9.61",
-    "@live-change/timer-service": "^0.9.61",
-    "@live-change/upload-service": "^0.9.61",
-    "@live-change/user-identification-service": "^0.9.61",
-    "@live-change/user-service": "^0.9.61",
-    "@live-change/vue3-components": "^0.9.61",
-    "@live-change/vue3-ssr": "^0.9.61",
+    "@live-change/cli": "^0.9.63",
+    "@live-change/dao": "^0.9.63",
+    "@live-change/dao-vue3": "^0.9.63",
+    "@live-change/dao-websocket": "^0.9.63",
+    "@live-change/email-service": "^0.9.63",
+    "@live-change/framework": "^0.9.63",
+    "@live-change/identicon-service": "^0.9.63",
+    "@live-change/image-frontend": "^0.9.63",
+    "@live-change/message-authentication-service": "^0.9.63",
+    "@live-change/notification-service": "^0.9.63",
+    "@live-change/password-authentication-service": "^0.9.63",
+    "@live-change/pattern": "^0.9.63",
+    "@live-change/secret-code-service": "^0.9.63",
+    "@live-change/secret-link-service": "^0.9.63",
+    "@live-change/security-frontend": "^0.9.63",
+    "@live-change/security-service": "^0.9.63",
+    "@live-change/session-service": "^0.9.63",
+    "@live-change/timer-service": "^0.9.63",
+    "@live-change/upload-service": "^0.9.63",
+    "@live-change/user-identification-service": "^0.9.63",
+    "@live-change/user-service": "^0.9.63",
+    "@live-change/vue3-components": "^0.9.63",
+    "@live-change/vue3-ssr": "^0.9.63",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "codeceptjs-video-helper": "0.1.3",
@@ -65,7 +65,7 @@
     "wtfnode": "^0.9.1"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.61",
+    "@live-change/codeceptjs-helper": "^0.9.63",
     "codeceptjs": "^3.6.10",
     "generate-password": "1.7.1",
     "playwright": "1.49.1",
@@ -76,5 +76,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "f750f29f912b9a76b5ffa2bdf5c46954cc7e7a67"
+  "gitHead": "89b9647aeaff9fc66add1f07d225fe4f44d91a39"
 }