@live-change/user-frontend 0.9.32 → 0.9.34

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

@@ -1,37 +1,39 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card border-round shadow-2 p-4" v-if="authenticationData?.state === 'used' && !submitted">
-      <div class="text-900 font-medium mb-3 text-xl">Authentication done</div>
-      <p class="mt-0 mb-1 p-0 line-height-3">You authenticated in a different tab.</p>
+  <div class="w-full lg:w-6/12 md:w-9/12" 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>
-    <div class="surface-card border-round shadow-2 p-4" v-else>
-      <div class="text-900 font-medium mb-3 text-xl">Message sent</div>
-      <p class="mt-0 mb-1 p-0 line-height-3">We sent special secret message to the contact you already provided.</p>
-      <p class="mt-0 mb-4 p-0 line-height-3">Click on the link or enter the code you found in that message.</p>
+    <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">Message sent</div>
+      <p class="mt-0 mb-1 p-0 leading-normal">We sent special secret message to the contact you already provided.</p>
+      <p class="mt-0 mb-6 p-0 leading-normal">Click on the link or enter the code you found in that message.</p>
       <Secured :events="['wrong-secret-code']" :actions="['checkSecretCode']">
         <command-form service="messageAuthentication" action="finishMessageAuthentication"
                       :parameters="{ secretType: 'code', authentication }" :key="authentication"
                       ref="form"
                       @submit="handleSubmit" @done="handleAuthenticated" @error="handleError"
                       v-slot="{ data }">
-          <div class="flex justify-content-center flex-column align-items-center">
-            <div class="p-field mx-1 flex flex-column mb-3">
+          <div class="flex justify-center flex-col items-center">
+            <div class="p-field mx-1 flex flex-col mb-4">
               <label for="code" class="p-sr-only">Code</label>
               <InputOtp id="code"  :length="6" class="mb-2"
                          v-model="data.secret"
-                         aria-describedby="code-help" :class="{ 'p-invalid': data.secretError }" />
+                         aria-describedby="code-help" :invalid="!!data.secretError" />
 <!--              <InputMask id="code" class="p-inputtext-lg" mask="999999" slotChar="######" placeholder="Enter code"
                          v-model="data.secret"
-                         aria-describedby="code-help" :class="{ 'p-invalid': data.secretError }" />-->
-              <span v-if="data.secretError" id="code-help" class="p-error">{{ t(`errors.${data.secretError}`) }}</span>
+                         aria-describedby="code-help" :invalid="!!data.secretError" />-->
+              <Message v-if="data.secretError" severity="error" variant="simple">
+                {{ t(`errors.${data.secretError}`) }}
+              </Message>
             </div>
-            <div class="flex flex-column">
-              <Button label="OK" type="submit" class="p-button-lg flex-grow-0"
+            <div class="flex flex-col">
+              <Button label="OK" type="submit" class="p-button-lg grow-0"
                       :disableda="data.secret?.length < 6" />
             </div>
           </div>
-          <div v-if="data.secretError === 'codeExpired'" class="mt-3 text-center">
-            <p class="mt-0 mb-2 p-0 line-height-3">To send another code click button below.</p>
+          <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" />
           </div>
         </command-form>
@@ -44,6 +46,7 @@
   import InputMask from "primevue/inputmask"
   import InputOtp from "primevue/inputotp"
   import Button from "primevue/button"
+  import Message from "primevue/message"
 
   import { Secured } from "@live-change/security-frontend"
 

package/front/src/message-auth/email/ConnectEmail.vue

@@ -1,6 +1,6 @@
 <template>
   <pre data-headers>{{ JSON.stringify(metadata, null, '  ') }}</pre>
-  <div data-html class="message m-6">
+  <div data-html class="message m-12">
     <p class="text-lg">
       Hello!
     </p>

package/front/src/message-auth/email/ResetPasswordEmail.vue

@@ -1,6 +1,6 @@
 <template>
   <pre data-headers>{{ JSON.stringify(metadata, null, '  ') }}</pre>
-  <div data-html class="message m-6">
+  <div data-html class="message m-12">
     <p class="text-lg">
       Hello!
     </p>

package/front/src/message-auth/email/SignInEmail.vue

@@ -1,6 +1,6 @@
 <template>
   <pre data-headers>{{ JSON.stringify(metadata, null, '  ') }}</pre>
-  <div data-html class="message m-6">
+  <div data-html class="message m-12">
     <p class="text-lg">
       Hello!
     </p>

package/front/src/message-auth/email/SignUpEmail.vue

@@ -1,6 +1,6 @@
 <template>
   <pre data-headers>{{ JSON.stringify(metadata, null, '  ') }}</pre>
-  <div data-html class="message m-6">
+  <div data-html class="message m-12">
     <p class="text-lg">
       Hello!
     </p>

package/front/src/nav/UserIcon.vue

@@ -1,30 +1,29 @@
 <template>
   <a v-ripple
-     v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }"
-     class="relative shadow-none">
-      <span class="flex mx-0 px-3 align-items-center font-medium
+     v-styleclass="{ selector: '@next', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }"
+     class="relative shadow-none b shrink-0">
+      <span class="flex mx-0 px-3 align-items-center font-medium justify-content-center
          cursor-pointer transition-colors transition-duration-150 border-round">
-        <Image v-if="myIdentification?.image" :image="myIdentification.image"
-               class="mr-0 border-circle border-1 surface-border" style="width: 3rem; " />
+        <Image v-if="myIdentification?.image" :image="myIdentification.image" width="56" height="56"
+               class="mr-0 rounded-full border-1 border-surface-400 dark:border-surface-600 object-cover w-12 max-w-none" />
         <img v-else-if="ownerData[0] === 'session_Session'" src="/images/empty-user-photo.svg"
-             class="mr-0 border-circle" style="width: 3rem;" />
+             class="mr-0 rounded-full border-1 border-surface-400 dark:border-surface-600 w-12 max-w-none" />
         <img v-else :src="identiconUrl"
-             class="mr-0 border-circle border-1 surface-border" style="width: 3rem;" />
+             class="mr-0 rounded-full border-1 border-surface-400 dark:border-surface-600 w-12 max-w-none" />
       </span>
-
   </a>
-  <div class="align-items-center flex-grow-1 justify-content-between hidden absolute w-full md:w-auto surface-overlay
-       right-0 top-100 z-5 shadow-2">
+  <div class="align-items-center flex-grow-1 justify-content-between hidden absolute w-full md:w-auto bg-surface-0
+       right-0 top-full z-5 shadow">
     <loading-zone suspense>
       <template v-slot:loading>
-        <div class="flex align-items-center justify-content-center top-0 left-0 notifications-loading">
+        <div class="flex items-center justify-center top-0 left-0 notifications-loading">
           <ProgressSpinner animationDuration=".5s"/>
         </div>
       </template>
       <template v-slot:default="{ isLoading }">
         <working-zone>
           <template v-slot:working>
-            <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
+            <div class="fixed w-full h-full flex items-center justify-center top-0 left-0">
               <ProgressSpinner animationDuration=".5s"/>
             </div>
           </template>

package/front/src/nav/UserMenu.vue

@@ -1,52 +1,57 @@
 <template>
-  <ul class="list-none p-0 m-0 flex select-none flex-column flex-row">
+  <ul class="list-none p-0 m-0 flex select-none flex-col">
     <li>
       <router-link :to="{ name: 'user:identification' }"
                    v-ripple
-                   class="flex px-6 py-2 align-items-center text-600 hover:text-900 hover:surface-100
+                   class="flex px-6 py-2 items-center text-surface-600 hover:text-surface-900
+                   hover:bg-surface-100
                font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple no-underline"
       >
-        <i class="pi pi-user mr-2"></i>
+        <i class="pi pi-user mr-3"></i>
         <span>Profile</span>
       </router-link>
     </li>
     <li v-if="!client.user">
       <router-link :to="{ name: 'user:signUpEmail' }"
                    v-ripple
-                   class="flex px-6 py-2 align-items-center text-600 hover:text-900 hover:surface-100
-               font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple no-underline"
+                   class="flex px-6 py-2 items-center text-surface-600 hover:text-surface-900 hover:bg-surface-100
+                          font-medium border-round cursor-pointer p-ripple no-underline
+                          transition-colors duration-300 ease-in-out"
       >
-        <i class="pi pi-user-plus mr-2"></i>
+        <i class="pi pi-user-plus mr-3"></i>
         <span>Sign Up</span>
       </router-link>
     </li>
     <li v-if="!client.user">
       <router-link :to="{ name: 'user:signInEmail' }"
                    v-ripple
-                   class="flex px-6 py-2 align-items-center text-600 hover:text-900 hover:surface-100
-               font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple no-underline"
+                   class="flex px-6 py-2 items-center text-surface-600 hover:text-surface-900 hover:bg-surface-100
+                          font-medium border-round cursor-pointer p-ripple no-underline
+                          transition-colors duration-300 ease-in-out"
       >
-        <i class="pi pi-key mr-2"></i>
+        <i class="pi pi-key mr-3"></i>
         <span>Sign In</span>
       </router-link>
     </li>
     <li v-if="client.user">
       <router-link :to="{ name: 'user:settings' }"
                    v-ripple
-                   class="flex px-6 py-2 align-items-center text-600 hover:text-900 hover:surface-100
-               font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple no-underline"
+                   class="flex px-6 py-2 items-center text-surface-600 hover:text-surface-900 hover:bg-surface-100
+                          font-medium border-round cursor-pointer p-ripple no-underline
+                          transition-colors duration-300 ease-in-out"
       >
-        <i class="pi pi-cog mr-2"></i>
+        <i class="pi pi-cog mr-3"></i>
         <span>Settings</span>
       </router-link>
     </li>
     <li v-if="client.user">
       <router-link :to="{ name: 'user:signOut' }"
                    v-ripple
-                   class="flex px-6 py-2 align-items-center text-600 hover:text-900 hover:surface-100
-             font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple no-underline"
+                   class="flex px-6 py-2 items-center text-surface-600 hover:text-surface-900 hover:bg-surface-100
+                          font-medium border-round cursor-pointer p-ripple no-underline
+                          transition-colors duration-300 ease-in-out"
       >
-        <i class="pi pi-power-off mr-2"></i>
+        <i class="pi pi-power-off mr-3"></i>
         <span>Sign Out</span>
       </router-link>
     </li>

package/front/src/notifications/NotificationButtons.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="notification-buttons">
     <Button v-if="notification.readState === 'new'" @click="markRead()"
-            icon="pi pi-eye" class="p-button-rounded p-button-outlined surface-0 " />
+            icon="pi pi-eye" class="p-button-rounded p-button-outlined bg-surface-0 dark:bg-surface-900 " />
     <Button v-if="notification.readState === 'read'" @click="markUnread()"
-            icon="pi pi-eye-slash" class="p-button-rounded p-button-outlined surface-0" />
+            icon="pi pi-eye-slash" class="p-button-rounded p-button-outlined bg-surface-0 dark:bg-surface-900" />
     <Button @click="deleteNotification()"
-            icon="pi pi-trash" class="p-button-rounded p-button-outlined ml-1 surface-0" />
+            icon="pi pi-trash" class="p-button-rounded p-button-outlined ml-1 bg-surface-0 dark:bg-surface-900" />
   </div>
 </template>
 

package/front/src/notifications/NotificationListPage.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9">
-    <div v-if="isMounted" class="surface-card border-round shadow-2 p-4">
+  <div class="w-full lg:w-6/12 md:w-9/12">
+    <div v-if="isMounted" class="bg-surface-0 dark:bg-surface-900 rounded-border shadow p-6">
       <NotificationsList />
     </div>
   </div>

package/front/src/notifications/NotificationsIcon.vue

@@ -1,27 +1,29 @@
 <template>
   <a v-if="unreadNotificationsCount"
      v-ripple
-     v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }"
-     class="flex mx-0 pl-3 pr-5 p-3 py-3 align-items-center text-600 hover:text-900 overflow-visible
+     v-styleclass="{ selector: '@next', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }"
+     class="flex mx-0 pl-4 pr-6  pt-3 pb-2 items-center text-surface-500 dark:text-surface-400
+            hover:text-surface-900 hover:dark:text-surface-100 overflow-visible
             font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
-    <i class="pi pi-bell text-base text-2xl p-overlay-badge">
-      <Badge v-if="unreadNotificationsCount?.count" :value="unreadNotificationsCount?.count ?? 0"></Badge>
-    </i>
+    <OverlayBadge v-if="unreadNotificationsCount?.count" :value="unreadNotificationsCount?.count ?? 0" size="small">
+      <i class="pi pi-bell" style="font-size: 1.5rem" />
+    </OverlayBadge>
   </a>
   <div
-       class="align-items-center flex-grow-1 justify-content-between hidden absolute w-full md:w-auto surface-overlay
-         right-0 top-100 z-1 shadow-2 overflow-x-hidden overflow-y-auto"
+       class="align-items-center flex-grow-1 justify-content-between hidden absolute w-full md:w-auto
+         bg-surface-0 dark:bg-surface-950
+         right-0 top-full z-1 shadow overflow-x-hidden overflow-y-auto"
        style="max-height: calc(100vh - 8rem)">
     <loading-zone suspense>
       <template v-slot:loading>
-        <div class="flex align-items-center justify-content-center top-0 left-0 notifications-loading">
+        <div class="flex items-center justify-center top-0 left-0 notifications-loading">
           <ProgressSpinner animationDuration=".5s"/>
         </div>
       </template>
       <template v-slot:default="{ isLoading }">
         <working-zone>
           <template v-slot:working>
-            <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
+            <div class="fixed w-full h-full flex items-center justify-center top-0 left-0">
               <ProgressSpinner animationDuration=".5s"/>
             </div>
           </template>
@@ -38,7 +40,7 @@
 
 <script setup>
 
-  import Badge from "primevue/badge"
+  import OverlayBadge from "primevue/overlaybadge"
   import ProgressSpinner from "primevue/progressspinner"
 
   import NotificationsList from "./NotificationsList.vue"

package/front/src/notifications/NotificationsList.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex align-items-center justify-content-between mb-1 px-3 pt-1">
-    <div class="text-900 font-medium text-xl">Notifications</div>
+  <div class="flex items-center justify-between mb-1 px-4 pt-1">
+    <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">Notifications</div>
     <div>
       <Button @click="$refs.menu.toggle($event)"
           icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" />
@@ -12,10 +12,10 @@
          :style="{ backgroundz: `hsl(${bucket.id * 11}, 100%, 80%)` }">
       <div v-for="(notification, index) in bucket.data" :key="notification.id"
            :ref="el => bucket.domElements[index] = el"
-           class="notification border-bottom-1 surface-border"
+           class="notification border-b border-surface"
            :class="{ selected: selectedNotification === notification.to }">
         <component :is="notificationComponent(notification)" :notification="notification" />
-        <div class="notification-more-button flex align-items-end justify-content-center">
+        <div class="notification-more-button flex items-end justify-center">
           <Button @click="() => selectNotification(notification)"
                   icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text " />
         </div>

package/front/src/notifications/NotificationsSettings.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card p-4 shadow-2 border-round">
+  <div class="w-full lg:w-6/12 md:w-9/12" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
       <div>
         <h1>Notifications settings</h1>
       </div>
@@ -12,8 +12,8 @@
         </div>
         <div>
           <div v-for="contact in notificationType.contacts"
-               class="flex flex-row align-items-center mb-3">
-            <div class="flex-grow-1 md:mb-2">
+               class="flex flex-row items-center mb-4">
+            <div class="grow md:mb-2">
               <i class="pi" :class="contactTypesIcons[contact.contactType]"></i>
               <span class="ml-2">{{ contactText(contact.contact, contact.contactType) }}</span>
             </div>

package/front/src/notifications/SimpleNotification.vue

@@ -1,8 +1,8 @@
 <template>
-  <div :class="['px-3 py-2 flex align-items-start justify-content-between flex-column',
-               notification.readState === 'new' ? 'surface-0 hover:surface-100' : 'surface-100 hover:surface-200'] ">
+  <div :class="['px-4 py-2 flex items-start justify-between flex-col',
+               notification.readState === 'new' ? 'bg-surface-0 dark:bg-surface-900 hover:bg-surface-100 dark:hover:bg-surface-700' : 'bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600'] ">
       <slot></slot>
-    <span class="block text-500 font-medium mt-2">
+    <span class="block text-surface-500 dark:text-surface-300 font-medium mt-2">
       {{ DateTime.fromISO(notification.time).toRelative({ base: DateTime.fromMillis(now) })  }}
     </span>
   </div>

package/front/src/password/ChangePassword.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9">
+  <div class="w-full lg:w-6/12 md:w-9/12">
 
-    <div class="surface-card p-4 shadow-2 border-round">
-      <div class="text-center mb-5">
-        <div class="text-900 text-3xl font-medium mb-3">
+    <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' }}
         </div>
       </div>
@@ -14,20 +14,22 @@
 
         <template v-if="isMounted">
 
-          <div class="p-field mb-3" v-if="passwordExists">
-            <label for="currentPassword" class="block text-900 font-medium mb-2">Current password</label>
+          <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>
             <Password id="currentPassword" class="w-full" inputClass="w-full"
                       toggle-mask v-model:masked="masked"
-                      :class="{ 'p-invalid': data.currentPasswordHashError }"
+                      :invalid="!!data.currentPasswordHashError"
                       v-model="data.currentPasswordHash" />
-            <small v-if="data.currentPasswordHashError" id="currentPassword-help" class="p-error">{{ t(`errors.${data.currentPasswordHashError}`) }}</small>
+            <Message v-if="data.currentPasswordHashError" severity="error" variant="simple" size="small">
+              {{ t(`errors.${data.currentPasswordHashError}`) }}
+            </Message>
           </div>
 
-          <div class="p-field mb-3">
-            <label for="newPassword" class="block text-900 font-medium mb-2">New password</label>
+          <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>
             <Password id="newPassword" class="w-full" inputClass="w-full"
                       toggle-mask v-model:masked="masked"
-                      :class="{ 'p-invalid': data.passwordHashError }"
+                      :invalid="!!data.passwordHashError"
                       v-model="data.passwordHash">
               <template #footer>
                 <Divider />
@@ -40,11 +42,13 @@
                 </ul>
               </template>
             </Password>
-            <small v-if="data.passwordHashError" id="newPassword-help" class="p-error">{{ t(`errors.${data.passwordHashError}`) }}</small>
+            <Message v-if="data.passwordHashError" severity="error" variant="simple" size="small">
+              {{ t(`errors.${data.passwordHashError}`) }}
+            </Message>
           </div>
 
-          <div class="p-field mb-3">
-            <label for="reenterPassword" class="block text-900 font-medium mb-2">Re-enter password</label>
+          <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>
             <Password id="reenterPassword" class="w-full" inputClass="w-full"
                       toggle-mask v-model:masked="masked"
                       v-model="secondPassword"
@@ -67,6 +71,7 @@
 
   import Button from "primevue/button"
   import Divider from "primevue/divider"
+  import Message from "primevue/message"
   import Password from "./Password.vue"
 
   import { live, path } from '@live-change/vue3-ssr'

package/front/src/password/ChangePasswordFinished.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
-    <div class="surface-card border-round shadow-2 p-4">
-      <div class="text-900 font-medium mb-3 text-xl mb-4">Password changed</div>
-      <p class="mt-0 p-0 line-height-3">You have successfully set your password.</p>
+  <div class="w-full lg:w-6/12 md:w-9/12" 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>
   </div>
 </template>