@live-change/user-frontend 0.8.6 → 0.8.7

package/front/src/delete/Delete.vue

@@ -6,7 +6,7 @@
         <div class="text-900 text-3xl font-medium mb-3">Delete account</div>
       </div>
 
-      <div>
+      <div v-if="client.user">
         <p>
           Account deletion is irreversible, check the box below only if you are
           100% sure that you want to delete your account.
@@ -19,6 +19,9 @@
         <Button id="delete" label="Delete account" icon="pi pi-user-minus" class="p-button-lg"
                 :disabled="!wantDelete" @click="deleteUser" />
       </div>
+      <div v-else>
+        Account already deleted.
+      </div>
     </div>
   </div>
 </template>
@@ -31,6 +34,8 @@
   import { inject, ref } from 'vue'
   import { useRouter } from 'vue-router'
   const router = useRouter()
+  import { useClient } from '@live-change/vue3-ssr'
+  const client = useClient()
 
   const workingZone = inject('workingZone')
 

package/front/src/nav/UserIcon.vue

@@ -1,10 +1,10 @@
 <template>
   <a v-ripple
-     @click="showUserMenu"
-     class="static w-auto w-full surface-overlay left-0 top-100 z-1 shadow-none p-ripple">
+     v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }"
+     class="relative w-auto left-0 top-100 z-1 shadow-none p-ripple border-circle">
     <ul class="list-none p-0 m-0 flex align-items-center select-none flex-row border-top-none">
       <li class="border-top-none">
-        <span class="flex p-0 px-3 align-items-center hover:surface-100 font-medium border-round
+        <span class="flex p-0 align-items-center hover:surface-100 font-medium border-round
            cursor-pointer transition-colors transition-duration-150 p-ripple">
           <Image v-if="myIdentification?.image" :image="myIdentification.image"
                  class="mr-0 border-circle border-1 surface-border" style="width: 38px; height: 38px" />
@@ -16,7 +16,9 @@
       </li>
     </ul>
   </a>
-  <OverlayPanel v-if="isMounted" ref="overlayPanel" class="notifications-panel">
+  <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">
+<!--  <OverlayPanel v-if="isMounted" ref="overlayPanel" class="notifications-panel">-->
     <loading-zone suspense>
       <template v-slot:loading>
         <div class="flex align-items-center justify-content-center top-0 left-0 notifications-loading">
@@ -38,17 +40,16 @@
         </working-zone>
       </template>
     </loading-zone>
-  </OverlayPanel>
+<!--  </OverlayPanel>-->
+  </div>
 </template>
 
 <script setup>
   import { Image } from "@live-change/image-frontend"
-  import OverlayPanel from 'primevue/overlaypanel'
   import ProgressSpinner from "primevue/progressspinner"
   import UserMenu from "./UserMenu.vue"
 
   import { ref, computed, onMounted } from 'vue'
-  const overlayPanel = ref()
 
   const isMounted = ref(false)
   onMounted(() => isMounted.value = true)

package/front/src/nav/UserMenu.vue

@@ -1,9 +1,9 @@
 <template>
-  <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column flex-row">
+  <ul class="list-none p-0 m-0 flex select-none flex-column flex-row">
     <li>
       <router-link :to="{ name: 'user:identification' }"
                    v-ripple
-                   class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100
+                   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"
       >
         <i class="pi pi-user mr-2"></i>
@@ -13,7 +13,7 @@
     <li v-if="!client.user">
       <router-link :to="{ name: 'user:signUp' }"
                    v-ripple
-                   class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100
+                   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"
       >
         <i class="pi pi-user-plus mr-2"></i>
@@ -23,7 +23,7 @@
     <li v-if="!client.user">
       <router-link :to="{ name: 'user:signIn' }"
                    v-ripple
-                   class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100
+                   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"
       >
         <i class="pi pi-key mr-2"></i>
@@ -33,7 +33,7 @@
     <li v-if="client.user">
       <router-link :to="{ name: 'user:settings' }"
                    v-ripple
-                   class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100
+                   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"
       >
         <i class="pi pi-cog mr-2"></i>
@@ -43,7 +43,7 @@
     <li v-if="client.user">
       <router-link :to="{ name: 'user:signOut' }"
                    v-ripple
-                   class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100
+                   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"
       >
         <i class="pi pi-power-off mr-2"></i>

package/front/src/notifications/NotificationButtons.vue

@@ -11,7 +11,6 @@
 
 <script setup>
   import Button from "primevue/button"
-  import Menu from "primevue/menu"
 
   import { useToast } from 'primevue/usetoast'
   import { useConfirm } from 'primevue/useconfirm'
@@ -20,6 +19,8 @@
 
   import { actions } from "@live-change/vue3-ssr"
 
+  import { inject, defineProps, defineExpose } from "vue"
+
   const { notification } = defineProps({
     notification: {
       type: Object,
@@ -27,8 +28,6 @@
     }
   })
 
-  import { inject } from "vue"
-
   const workingZone = inject('workingZone')
 
   const notificationApi = actions().notification
@@ -63,6 +62,10 @@
     })())
   }
 
+  defineExpose({
+    markRead, markUnread, deleteNotification
+  })
+
 </script>
 
 <style scoped>

package/front/src/notifications/NotificationsIcon.vue

@@ -1,14 +1,15 @@
 <template>
   <a v-if="unreadNotificationsCount"
      v-ripple
-     @click="showNotifications"
-     class="flex mx-2 px-3 p-3 py-3 align-items-center text-600 hover:text-900 hover:surface-100
+     v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }"
+     class="flex mx-0 px-3 p-3 py-3 align-items-center text-600 hover:text-900 hover: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>
   </a>
-  <OverlayPanel v-if="isMounted" ref="overlayPanel" class="notifications-panel">
+  <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" 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">
@@ -30,21 +31,18 @@
         </working-zone>
       </template>
     </loading-zone>
-  </OverlayPanel>
+  </div>
 </template>
 
 <script setup>
 
   import Badge from "primevue/badge"
-  import OverlayPanel from 'primevue/overlaypanel'
   import ProgressSpinner from "primevue/progressspinner"
 
   import NotificationsList from "./NotificationsList.vue"
 
   import { ref, onMounted } from 'vue'
 
-  const overlayPanel = ref()
-
   const isMounted = ref(false)
   onMounted(() => isMounted.value = true)
 

package/front/src/notifications/NotificationsList.vue

@@ -41,7 +41,7 @@
 
   const workingZone = inject('workingZone')
 
-  import {notificationTypes} from "./notificationTypes.js"
+  import { notificationTypes } from "./notificationTypes.js"
 
   import NotificationButtons from "./NotificationButtons.vue"
 

package/front/src/notifications/SimpleNotification.vue

@@ -1,6 +1,6 @@
 <template>
-  <li class="px-3 py-2 flex align-items-start
-             justify-content-between flex-column hover:surface-100">
+  <li :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'] ">
       <slot></slot>
     <span class="block text-500 font-medium mt-2">
       {{ DateTime.fromISO(notification.time).toRelative({ base: DateTime.fromMillis(now) })  }}

package/front/src/notifications/notificationTypes.js

@@ -8,4 +8,4 @@ export const notificationTypes = {
   example_TestNotification: {
     component: TestNotification
   }
-}
+}

package/front/src/password/ChangePassword.vue

@@ -17,7 +17,7 @@
           <div class="p-field mb-3" v-if="passwordExists">
             <label for="currentPassword" class="block text-900 font-medium mb-2">Current password</label>
             <Password id="currentPassword" class="w-full" inputClass="w-full"
-                      v-model:masked="masked"
+                      toggle-mask v-model:masked="masked"
                       :class="{ 'p-invalid': data.currentPasswordHashError }"
                       v-model="data.currentPasswordHash" />
             <small id="currentPassword-help" class="p-error">{{ data.currentPasswordHashError }}</small>
@@ -26,7 +26,7 @@
           <div class="p-field mb-3">
             <label for="newPassword" class="block text-900 font-medium mb-2">New password</label>
             <Password id="newPassword" class="w-full" inputClass="w-full"
-                      v-model:masked="masked"
+                      toggle-mask v-model:masked="masked"
                       :class="{ 'p-invalid': data.passwordHashError }"
                       v-model="data.passwordHash">
               <template #footer>
@@ -46,7 +46,7 @@
           <div class="p-field mb-3">
             <label for="reenterPassword" class="block text-900 font-medium mb-2">Re-enter password</label>
             <Password id="reenterPassword" class="w-full" inputClass="w-full"
-                      v-model:masked="masked"
+                      toggle-mask v-model:masked="masked"
                       v-model="secondPassword"
                       :feedback="false" />
           </div>
@@ -65,12 +65,9 @@
 
 <script setup>
 
-  import InputText from "primevue/inputtext"
-  import Checkbox from "primevue/checkbox"
   import Button from "primevue/button"
   import Divider from "primevue/divider"
-  import Password from "primevue/password"
-  import SettingsTabs from "../SettingsTabs.vue"
+  import Password from "./Password.vue"
 
   import { live, path } from '@live-change/vue3-ssr'
   import { computed, ref, onMounted } from 'vue'

package/front/src/password/Password.vue

@@ -26,8 +26,17 @@
             {{ infoText }}
         </span>
     <Portal :appendTo="appendTo">
-      <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-        <div v-if="overlayVisible" :ref="overlayRef" :id="panelId || panelUniqueId" :class="panelStyleClass" :style="panelStyle" @click="onOverlayClick" v-bind="panelProps">
+      <transition name="p-connected-overlay"
+                  @enter="onOverlayEnter"
+                  @leave="onOverlayLeave"
+                  @after-leave="onOverlayAfterLeave">
+        <div v-if="overlayVisible"
+             :ref="overlayRef"
+             :id="panelId || panelUniqueId"
+             :class="panelStyleClass"
+             :style="panelStyle"
+             @click="onOverlayClick"
+             v-bind="panelProps">
           <slot name="header"></slot>
           <slot name="content">
             <div class="p-password-meter">
@@ -495,4 +504,11 @@ export default {
 .p-password-input::-ms-clear {
   display: none;
 }
+
+.p-password i {
+  position: absolute;
+  top: 0.69em;
+  top: calc(50% - 0.5em);
+  right: 1em
+}
 </style>

package/front/src/settings/SettingsMenu.vue

@@ -8,7 +8,7 @@
 
         <SettingsMenuItem name="user:identification" icon="id-card" label="Identification" class="hidden md:block" />
 
-        <SettingsMenuItem name="user:settings" icon="id-card" label="General Settings" class="hidden md:block" />
+        <SettingsMenuItem v-if="client.user" name="user:settings" icon="id-card" label="General Settings" class="hidden md:block" />
 
 <!--        <SettingsMenuItem name="user:notificationsSettings" icon="exclamation-circle" label="Notifications" />-->
 
@@ -19,15 +19,15 @@
           <div class="p-3 text-500 font-medium">AUTHORIZATION</div>
         </li>
 
-        <SettingsMenuItem name="user:connected" icon="users" label="Connected Accounts" />
+        <SettingsMenuItem v-if="client.user" name="user:connected" icon="users" label="Connected Accounts" />
 
-        <SettingsMenuItem name="user:changePassword" icon="key" label="Change Password" />
+        <SettingsMenuItem v-if="client.user" name="user:changePassword" icon="key" label="Change Password" />
 
       </ul>
 
       <ul class="list-none p-2 m-0 border-top-1 surface-border">
 
-        <SettingsMenuItem name="user:delete" icon="trash" label="Delete Account" />
+        <SettingsMenuItem v-if="client.user" name="user:delete" icon="trash" label="Delete Account" />
 
       </ul>
     </div>
@@ -74,6 +74,10 @@
   import { useRoute } from 'vue-router'
   const route = useRoute()
 
+  import { client as useClient } from '@live-change/vue3-ssr'
+
+  const client = useClient()
+
 </script>
 
 <style scoped>

package/front/src/sign/SignIn.vue

@@ -61,7 +61,7 @@
   import Checkbox from "primevue/checkbox"
   import Button from "primevue/button"
   import Divider from "primevue/divider"
-  import Password from "primevue/password"
+  import Password from "../password/Password.vue"
 
   import { onMounted, ref } from 'vue'
   const isMounted = ref(false)

package/front/src/sign/SignUpFinished.vue

@@ -75,12 +75,9 @@
 
 <script setup>
 
-  import InputText from "primevue/inputtext"
-  import Checkbox from "primevue/checkbox"
   import Button from "primevue/button"
   import Divider from "primevue/divider"
   import Password from "../password/Password.vue"
-  import SettingsTabs from "../SettingsTabs.vue"
 
   import { live, path } from '@live-change/vue3-ssr'
   import { computed, ref, onMounted } from 'vue'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/user-frontend",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "scripts": {
     "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -21,29 +21,29 @@
   },
   "type": "module",
   "dependencies": {
-    "@live-change/cli": "^0.8.6",
-    "@live-change/dao": "^0.8.6",
-    "@live-change/dao-vue3": "^0.8.6",
-    "@live-change/dao-websocket": "^0.8.6",
-    "@live-change/email-service": "^0.8.6",
-    "@live-change/framework": "^0.8.6",
-    "@live-change/identicon-service": "^0.8.6",
-    "@live-change/image-frontend": "^0.8.6",
-    "@live-change/message-authentication-service": "^0.8.6",
-    "@live-change/notification-service": "^0.8.6",
-    "@live-change/password-authentication-service": "^0.8.6",
-    "@live-change/pattern": "^0.8.6",
-    "@live-change/secret-code-service": "^0.8.6",
-    "@live-change/secret-link-service": "^0.8.6",
-    "@live-change/security-frontend": "^0.8.6",
-    "@live-change/security-service": "^0.8.6",
-    "@live-change/session-service": "^0.8.6",
-    "@live-change/timer-service": "^0.8.6",
-    "@live-change/upload-service": "^0.8.6",
-    "@live-change/user-identification-service": "^0.8.6",
-    "@live-change/user-service": "^0.8.6",
-    "@live-change/vue3-components": "^0.8.6",
-    "@live-change/vue3-ssr": "^0.8.6",
+    "@live-change/cli": "^0.8.7",
+    "@live-change/dao": "^0.8.7",
+    "@live-change/dao-vue3": "^0.8.7",
+    "@live-change/dao-websocket": "^0.8.7",
+    "@live-change/email-service": "^0.8.7",
+    "@live-change/framework": "^0.8.7",
+    "@live-change/identicon-service": "^0.8.7",
+    "@live-change/image-frontend": "^0.8.7",
+    "@live-change/message-authentication-service": "^0.8.7",
+    "@live-change/notification-service": "^0.8.7",
+    "@live-change/password-authentication-service": "^0.8.7",
+    "@live-change/pattern": "^0.8.7",
+    "@live-change/secret-code-service": "^0.8.7",
+    "@live-change/secret-link-service": "^0.8.7",
+    "@live-change/security-frontend": "^0.8.7",
+    "@live-change/security-service": "^0.8.7",
+    "@live-change/session-service": "^0.8.7",
+    "@live-change/timer-service": "^0.8.7",
+    "@live-change/upload-service": "^0.8.7",
+    "@live-change/user-identification-service": "^0.8.7",
+    "@live-change/user-service": "^0.8.7",
+    "@live-change/vue3-components": "^0.8.7",
+    "@live-change/vue3-ssr": "^0.8.7",
     "@vueuse/core": "^10.7.2",
     "codeceptjs-assert": "^0.0.5",
     "codeceptjs-video-helper": "0.1.3",
@@ -64,7 +64,7 @@
     "wtfnode": "^0.9.1"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.8.6",
+    "@live-change/codeceptjs-helper": "^0.8.7",
     "codeceptjs": "^3.5.12",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -75,5 +75,5 @@
   "author": "",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "9964e05eb01bfbaf0436249e97745cb2b29c96b3"
+  "gitHead": "b00392ddc91b273e8e7b6d2bdf543f8fe0aec0ca"
 }