@live-change/user-frontend 0.0.3

package/front/src/notifications/NotificationsIcon.vue

@@ -0,0 +1,75 @@
+<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
+            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">
+    <loading-zone suspense>
+      <template v-slot:loading>
+        <div class="flex align-items-center justify-content-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">
+              <ProgressSpinner animationDuration=".5s"/>
+            </div>
+          </template>
+          <template v-slot:default="{ isWorking }">
+            <div :style="(isWorking || isLoading) ? 'filter: blur(4px)' : ''" class="working-blur">
+              <NotificationsList />
+            </div>
+          </template>
+        </working-zone>
+      </template>
+    </loading-zone>
+  </OverlayPanel>
+</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)
+
+  function showNotifications(event) {
+    overlayPanel.value.toggle(event)
+  }
+
+  import { live, path } from '@live-change/vue3-ssr'
+
+  const unreadNotificationsCount = await live(path().notification.myUnreadCount({ }))
+
+</script>
+
+<style>
+  .notifications-panel .p-overlaypanel-content {
+    padding: 0px;
+    max-height: calc(90vh - 50px);
+    overflow-y: auto;
+  }
+  .notifications-panel {
+    width: 500px;
+    max-width: 80%;
+  }
+  .notifications-loading {
+    height: 300px;
+    max-height: 80%;
+  }
+</style>

package/front/src/notifications/NotificationsList.vue

@@ -0,0 +1,144 @@
+<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>
+      <Button @click="$refs.menu.toggle($event)"
+          icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" />
+      <Menu ref="menu" :popup="true" :model="menuItems"></Menu>
+    </div>
+  </div>
+  <ul class="list-none p-0 m-0 notifications">
+    <div v-for="(bucket, bucketIndex) in notificationsBuckets.buckets" :key="bucket.id"
+         :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="{ selected: selectedNotification == notification.to }">
+        <component :is="notificationComponent(notification)" :notification="notification" />
+        <Button @click="() => selectNotification(notification)"
+                icon="pi pi-ellipsis-h" class="p-button-rounded p-button-text notification-more-button" />
+        <NotificationButtons :notification="notification" />
+      </div>
+    </div>
+    <scroll-border placement="bottom"
+                   :load="notificationsBuckets.loadBottom"
+                   :canLoad="notificationsBuckets.canLoadBottom" />
+  </ul>
+</template>
+
+<script setup>
+  import Button from "primevue/button"
+  import Menu from "primevue/menu"
+
+  import ScrollBorder from 'vue3-scroll-border'
+
+  import { useToast } from 'primevue/usetoast'
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+  const toast = useToast()
+
+
+  import { ref, inject } from 'vue'
+
+  const workingZone = inject('workingZone')
+
+  import {notificationTypes} from "./notificationTypes.js"
+
+  import NotificationButtons from "./NotificationButtons.vue"
+
+  import { path, live, actions, api, rangeBuckets, reverseRange } from '@live-change/vue3-ssr'
+
+  const notificationApi = actions().notification
+
+  function notificationComponent(notification) {
+    const known = notificationTypes[notification.notificationType]
+    if(known) return known.component
+    return notificationTypes.unknown.component
+  }
+
+  const selectedNotification = ref(null)
+  function selectNotification(notification) {
+    console.log("SELECT NOTIFICATION", notification)
+    selectedNotification.value = notification.to
+  }
+
+  const menuItems = [
+    {
+      label: 'Mark all as read',
+      icon: 'pi pi-check',
+      command: () => {
+        workingZone.addPromise('markNotification', (async () => {
+          await notificationApi.markAllAsRead({ })
+          toast.add({
+            severity: 'success', summary:' Notifications read',
+            detail:'all notifications have been marked as read', life: 3000
+          })
+        })())
+      }
+    },
+    {
+      label: 'Delete all',
+      icon: 'pi pi-times',
+      command: () => {
+        workingZone.addPromise('markNotification', (async () => {
+          await notificationApi.deleteAll({ })
+          toast.add({
+            severity: 'warn', summary: 'Notifications deleted',
+            detail: 'All notifications have been deleted', life: 3000
+          })
+        })())
+      }
+    },
+  ]
+
+  const wait = new Promise(r => setTimeout(r, 100))
+
+  const [ notificationsBuckets ] = await Promise.all([
+    rangeBuckets(
+        (range, p) => p.notification.myNotifications(reverseRange(range)),
+        { bucketSize: 10 }
+    )
+  ])
+
+  await wait
+
+</script>
+
+<style lang="scss">
+  .notifications {
+    .notification:last-child {
+      border-bottom: none;
+    }
+    .notification {
+      position: relative;
+      .notification-buttons {
+        visibility: hidden;
+        position: absolute;
+        right: 40px;
+        top: 5px;
+        //transform: translate(0, -50%);
+      }
+      .notification-more-button {
+        position: absolute;
+        right: 5px;
+        top: 2%;
+      }
+    }
+    .notification.selected {
+      .notification-buttons {
+        visibility: visible;
+      }
+      .notification-more-button {
+        visibility: hidden;
+      }
+    }
+    .notification:hover {
+      .notification-buttons {
+        visibility: visible;
+      }
+      .notification-more-button {
+        visibility: hidden;
+      }
+    }
+    
+  }
+</style>

package/front/src/notifications/NotificationsSettings.vue

@@ -0,0 +1,117 @@
+<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>
+        <h1>Notifications settings</h1>
+      </div>
+      <div v-for="notificationType in settings">
+        <div>
+          <h2>{{ notificationType.type }}</h2>
+        </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">
+              <i class="pi" :class="contactTypesIcons[contact.contactType]"></i>
+              <span class="ml-2">{{ contactText(contact.contact, contact.contactType) }}</span>
+            </div>
+            <div class="">
+              <InputSwitch v-model="contact.setting.value.active"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import InputSwitch from 'primevue/inputswitch'
+
+  import pluralize from 'pluralize'
+  import { synchronized } from "@live-change/vue3-components"
+  import { computed, ref } from 'vue'
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+
+  const checked = ref()
+
+  import { api as useApi, live, path, actions } from '@live-change/vue3-ssr'
+  const api = useApi()
+
+  const clientConfig = api.getServiceDefinition('notification')?.clientConfig
+
+  const notificationApi = actions().notification
+
+
+  const contactTypesIcons = {
+    email: 'pi-at',
+    web: 'pi-globe',
+    phone: 'pi-phone'
+  }
+  function contactText(contact, type) {
+    if(type == 'web') return 'Web'
+    return contact
+  }
+
+  const allContacts = await Promise.all(clientConfig.contactTypes.map(async contactType => {
+    const contactTypeUpper = contactType[0].toUpperCase() + contactType.slice(1)
+    const contactTypeLong = contactType + '_' + contactTypeUpper
+    let p = path()[contactType]['myUser' + pluralize(contactTypeUpper)]({})
+    p = p.with(contact =>
+        path().notification.contactOwnedNotificationSettings({
+          contactType: contactTypeLong, contact: contact[contactType]
+        }).bind('settings')
+    )
+    /*for(const notificationType of clientConfig.notificationTypes) {
+      p = p.with(contact => path().notification.contactAndNotificationOwnedNotificationSetting({
+        contactType, contact: contact[contactType], notificationType, notification: ''
+      }).bind(notificationType))
+    }*/
+    return {
+      type: contactType,
+      contactType,
+      contactTypeUpper,
+      contactTypeLong,
+      list: await live(p)
+    }
+  }))
+
+  const contacts = computed(() => {
+    const obj = {}
+    for(const type of allContacts) {
+      obj[type.type] = type.list.value
+    }
+    return obj
+  })
+
+  const settings = computed(() => clientConfig.notificationTypes.map(notificationType => {
+    const contacts = allContacts.map(contactsData => contactsData.list.value.map(contact => {
+      const contactType = contactsData.type
+      const settingSource = computed(() => contact.settings.find(s => s.notificationType == notificationType))
+      const setting = synchronized({
+        source: settingSource,
+        update: notificationApi.setOrUpdateContactAndNotificationOwnedNotificationSetting,
+        identifiers: {
+          contact: contact[contactType], contactType: contactsData.contactTypeLong,
+          notificationType, notification: notificationType
+        },
+        recursive: true,
+        onSave: () => toast.add({ severity: 'info', summary: 'Notification settings saved', life: 1500 })
+      }).value
+      return {
+        contactType,
+        contact: contact[contactType],
+        settingSource,
+        setting
+      }
+    })).flat()
+    return {
+      type: notificationType,
+      contacts
+    }
+  }))
+
+
+</script>

package/front/src/notifications/SimpleNotification.vue

@@ -0,0 +1,34 @@
+<template>
+  <li class="px-3 py-2 flex align-items-start
+             justify-content-between flex-column hover:surface-100">
+      <slot></slot>
+    <span class="block text-500 font-medium mt-2">
+      {{ DateTime.fromISO(notification.time).toRelative({ base: DateTime.fromMillis(now) })  }}
+    </span>
+  </li>
+</template>
+
+<script setup>
+
+  const props = defineProps({
+    notification: {
+      type: Object,
+      required: true
+    },
+    image: {
+      type: String
+    }
+  })
+
+  import { useTimestamp, toRefs } from '@vueuse/core'
+
+  const { notification, image } = toRefs(props)
+
+  const now = useTimestamp({ interval: 1000 })
+  import { DateTime } from 'luxon'
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/notifications/TestNotification.vue

@@ -0,0 +1,25 @@
+<template>
+  <SimpleNotification :notification="notification">
+    Test Notification
+  </SimpleNotification>
+</template>
+
+<script setup>
+
+  import SimpleNotification from "./SimpleNotification.vue"
+  import { toRefs } from "@vueuse/core"
+
+  const props = defineProps({
+    notification: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { notification } = toRefs(props)
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/notifications/UnknownNotification.vue

@@ -0,0 +1,25 @@
+<template>
+  <SimpleNotification :notification="notification">
+    <div class="text-orange-600 text-2xl">
+      Unknown notification!
+    </div>
+    <pre class="w-full overflow-hidden">{{ notification }}</pre>
+  </SimpleNotification>
+</template>
+
+<script setup>
+
+  import SimpleNotification from "./SimpleNotification.vue"
+
+  const { notification } = defineProps({
+    notification: {
+      type: Object,
+      required: true
+    }
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/notifications/notificationTypes.js

@@ -0,0 +1,11 @@
+import UnknownNotification from "./UnknownNotification.vue"
+import TestNotification from "./TestNotification.vue"
+
+export const notificationTypes = {
+  unknown: {
+    component: UnknownNotification
+  },
+  example_TestNotification: {
+    component: TestNotification
+  }
+}

package/front/src/notifications/routes.js

@@ -0,0 +1,37 @@
+
+
+export function notificationsSettingsRoutes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+    route({ name: 'user:notificationsSettings', path: prefix + 'notifications-settings', props: true,
+      component: () => import("./NotificationsSettings.vue"), meta: { signedIn: true } }),
+
+  ]
+}
+
+
+export function notificationsRoutes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+    route({ name: 'user:notificationsList', path: prefix + 'notifications', props: true,
+      component: () => import("./NotificationListPage.vue"), meta: { signedIn: true } }),
+
+  ]
+}
+
+export function routes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+    ...notificationsRoutes(config),
+    ...notificationsRoutes(config)
+
+  ]
+}
+
+export default routes

package/front/src/password/ChangePassword.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="w-full lg:w-6 md:w-9">
+
+    <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">
+          {{ passwordExists ? 'Change password' : 'Set password' }}
+        </div>
+      </div>
+
+      <command-form service="passwordAuthentication"
+                    :action="passwordExists ? 'changePassword' : 'setPassword'"
+                    v-slot="{ data }" ref="form" @done="handleDone">
+
+        <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>
+            <Password id="currentPassword" class="w-full" inputClass="w-full" toggleMask
+                      :class="{ 'p-invalid': data.currentPasswordHashError }"
+                      v-model="data.currentPasswordHash" />
+            <small id="currentPassword-help" class="p-error">{{ data.currentPasswordHashError }}</small>
+          </div>
+
+          <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" toggleMask
+                      :class="{ 'p-invalid': data.passwordHashError }"
+                      v-model="data.passwordHash">
+              <template #footer>
+                <Divider />
+                <p class="p-mt-2">Suggestions</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>
+                </ul>
+              </template>
+            </Password>
+            <small id="newPassword-help" class="p-error">{{ data.passwordHashError }}</small>
+          </div>
+
+          <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="secondPassword"
+                      :feedback="false" toggleMask />
+          </div>
+
+        </template>
+
+        <Button :label="passwordExists ? 'Change password' : 'Set password'"
+                type="submit"
+                icon="pi pi-key" class="w-full"></Button>
+
+      </command-form>
+    </div>
+
+  </div>
+</template>
+
+<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 { live, path } from '@live-change/vue3-ssr'
+import { computed, ref, onMounted } from 'vue'
+
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const isMounted = ref(false)
+onMounted(() => isMounted.value = true)
+
+const secondPassword = ref('')
+const form = ref()
+
+onMounted(() => {
+  form.value.addValidator('passwordHash', () => {
+    const value = form.value.getFieldValue('passwordHash')
+    console.log("PASSWORDS MATCH?", secondPassword.value, value)
+    if(value != secondPassword.value) return "passwordsNotMatch"
+  })
+})
+
+
+const passwordExists = await live(path().passwordAuthentication.myUserPasswordAuthenticationExists())
+
+function handleDone({ parameters, result }) {
+  console.log("FORM DONE", parameters, result)
+  router.push({
+    name: 'user:changePasswordFinished',
+  })
+}
+
+</script>
+
+<style>
+
+</style>

package/front/src/password/ChangePasswordFinished.vue

@@ -0,0 +1,16 @@
+<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>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>

package/front/src/password/ResetPassword.vue

@@ -0,0 +1,56 @@
+<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="text-center mb-5">
+        <div class="text-900 text-3xl font-medium mb-3">Reset password</div>
+      </div>
+
+      <command-form service="passwordAuthentication" action="resetPasswordEmail" v-slot="{ data }"
+                    @done="handleDone" keepOnDone v-if="isMounted">
+
+        <div class="p-field mb-3">
+          <label for="email" class="block text-900 font-medium mb-2">
+            Email address
+          </label>
+          <InputText id="email" type="text" class="w-full"
+                     v-model="data.email" :class="{ 'p-invalid': data.emailError }"
+                     aria-describedby="email-help" />
+          <small id="email-help" class="p-error">{{ data.emailError }}</small>
+        </div>
+
+        <Button type="submit" label="Reset password" icon="pi pi-key" class="w-full"></Button>
+
+      </command-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import InputText from "primevue/inputtext"
+  import Button from "primevue/button"
+
+  import { onMounted, ref } from "vue"
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  function handleDone({ parameters, result }) {
+    console.log("DONE RESULT", result)
+    const { authentication } = result
+    router.push({
+      name: 'user:sent',
+      params: {
+        authentication
+      }
+    })
+  }
+
+  await new Promise(r=>setTimeout(r, 800))
+
+</script>
+
+<style>
+
+</style>

package/front/src/password/ResetPasswordFinished.vue

@@ -0,0 +1,16 @@
+<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 changed your password.</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>