@live-change/user-frontend 0.8.12 → 0.8.14

package/front/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Button: typeof import('primevue/button')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

package/front/src/Index.vue

@@ -2,11 +2,23 @@
   <div class="w-full lg:w-6 md:w-9">
     <div class="surface-card border-round shadow-2 p-4">
       <div class="text-900 font-medium mb-3 text-xl">Test Index</div>
+      <div>
+        <Button @click="testNotification" label="Add test notification" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
+
+  import { useApi } from '@live-change/vue3-ssr'
+
+  const api = useApi()
+
+  function testNotification() {
+    api.actions.notification.testNotification({ })
+  }
+
 </script>
 
 <style scoped>

package/front/src/NavBar.vue

@@ -52,13 +52,15 @@
 
 <script setup>
 
-  import { NotificationsIcon } from "@live-change/user-frontend"
+  import NotificationsIcon from './notifications/NotificationsIcon.vue'
+  import NotificationsList from './notifications/NotificationsList.vue'
 
   import { UserIcon } from "@live-change/user-frontend"
 
   import { useApi } from "@live-change/vue3-ssr"
   import { computed } from "vue"
 
+
   const api = useApi()
 
   const isMember = computed(() => api.client.value.roles.includes('member'))

package/front/src/connected/Connected.vue

@@ -9,25 +9,28 @@
 
       <ul class="list-none p-0 m-0 mt-5 mb-4">
 
-        <li v-for="connection in emails"
+        <li v-for="contact in contacts"
             class="flex flex-row align-items-center justify-content-between mb-2">
           <div class="flex flex-row align-items-center">
-            <i class="pi pi-envelope mr-2"></i>
-            <span class="block text-900 font-medium text-lg">{{ connection.email }}</span>
+            <i v-if="contact.contactType.contactType === 'email'" class="pi pi-envelope mr-2"></i>
+            <i v-if="contact.contactType.contactType === 'phone'" class="pi pi-mobile mr-2"></i>
+            <span class="block text-900 font-medium text-lg">{{ contact.id }}</span>
           </div>
           <Button class="p-button-text p-button-plain p-button-rounded mr-1" icon="pi pi-times"
                   v-if="canDelete"
-                  @click="event => disconnect(event, 'email', connection.email)" />
+                  @click="event => disconnect(event, contact.contactType, contact.id)" />
         </li>
 
+<!--        {{ contacts }}-->
+
       </ul>
 
-        <router-link :to="{ name: 'user:connect-email' }" class="mr-2 no-underline block mb-1">
-          <Button label="Add email" icon="pi pi-envelope" id="connect"></Button>
-        </router-link>
-        <router-link :to="{ name: 'user:connect-phone' }" class="mr-2 no-underline block mb-1">
-          <Button label="Add phone number" icon="pi pi-envelope" id="connect"></Button>
+      <div class="flex flex-row flex-wrap">
+        <router-link v-for="contactType in contactsTypes"
+                     :to="{ name: 'user:connect-'+contactType.contactType }" class="mr-2 no-underline block mb-1">
+          <Button :label="'Add '+contactType.contactType" icon="pi pi-envelope" id="connect"></Button>
         </router-link>
+      </div>
     </div>
 
   </div>
@@ -35,7 +38,6 @@
 
 <script setup>
   import Button from "primevue/button"
-  import SettingsTabs from "../SettingsTabs.vue"
 
   import { ref, onMounted, onUnmounted, inject, computed } from 'vue'
   import ConfirmPopup from 'primevue/confirmpopup'
@@ -48,22 +50,25 @@
   onMounted(() => isMounted.value = true)
   onUnmounted(() => isMounted.value = false)
 
-
   const workingZone = inject('workingZone')
 
-  import { path, live, actions } from '@live-change/vue3-ssr'
-  const messageAuthenticationApi = actions().messageAuthentication
+  import { useApi, live, usePath, useActions } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const path = usePath()
+  const clientConfig = api.getServiceDefinition('messageAuthentication')?.clientConfig
+
+  const messageAuthenticationApi = useActions().messageAuthentication
 
   function disconnect(event, contactType, contact) {
     confirm.require({
       target: event.currentTarget,
-      message: `Do you want to disconnect ${contactType} account ${contact}?`,
+      message: `Do you want to disconnect ${contactType.contactType} account ${contact}?`,
       icon: 'pi pi-info-circle',
       acceptClass: 'p-button-danger',
       accept: async () => {
-        const upperCaseType = contactType[0].toUpperCase() + contactType.slice(1)
+        const upperCaseType = contactType.contactType[0].toUpperCase() + contactType.contactType.slice(1)
         workingZone.addPromise('disconnectContact', (async () => {
-          await messageAuthenticationApi['disconnect'+upperCaseType]({ [contactType]: contact })
+          await messageAuthenticationApi['disconnect'+upperCaseType]({ [contactType.contactType]: contact })
           toast.add({ severity: 'info', summary: 'Account disconnected', life: 1500 })
         })())
       },
@@ -73,9 +78,41 @@
     })
   }
 
-  const emails = await live(path().email.myUserEmails({}))
+  const contactTypesAvailable = clientConfig.contactTypes
+
+  const contactsTypes = contactTypesAvailable.map(contactType => {
+    const contactTypeUpper = contactType[0].toUpperCase() + contactType.slice(1)
 
-  const allAccountsCount = computed(() => emails.value?.length )
+    let serviceName = 'myUser'+contactTypeUpper+'s'
+    let viewName = 'myUser'+contactTypeUpper+'s'
+    if(!path[serviceName]) { // find service by viewName
+      for(const s in path) {
+        if(path[s][viewName]) {
+          serviceName = s
+          break
+        }
+      }
+    }
+    console.log('contactType', contactType, 'serviceName', serviceName, 'viewName', viewName)
+    return {
+      contactType,
+      serviceName,
+      viewName,
+      path: path[serviceName][viewName]({}),
+      contacts: null
+    }
+  })
+
+  await Promise.all(contactsTypes.map(async contactType => {
+    contactType.contacts = await live(contactType.path)
+  }))
+
+  const contacts = computed(() => contactsTypes.map((c,i) => c.contacts.value.map(v => ({
+    contactType: c,
+    ...(v)
+  }))).flat())
+
+  const allAccountsCount = computed(() => contacts.value?.length )
   const canDelete = computed(() => allAccountsCount.value > 1 )
 
 </script>

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

@@ -10,7 +10,7 @@
       <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>
       <Secured :events="['wrong-secret-code']" :actions="['checkSecretCode']">
         <command-form service="messageAuthentication" action="finishMessageAuthentication"
-                      :parameters="{ secretType: 'code', authentication }"
+                      :parameters="{ secretType: 'code', authentication }" :key="authentication"
                       @submit="handleSubmit" @done="handleAuthenticated" @error="handleError"
                       v-slot="{ data }">
           <div class="flex justify-content-center">

package/front/src/message-auth/routes.js

@@ -11,13 +11,28 @@ export function routes(config = {}) {
       component: () => import("./MessageLink.vue") }),
 
     route({ name: 'user:email:signUpWithMessage', path: '/_email/signUpWithMessage/:contact/:json', props: true,
-      meta: { raw: true }, component: () => import("./SignUpEmail.vue") }),
+      meta: { raw: true }, component: () => import("./email/SignUpEmail.vue") }),
     route({ name: 'user:email:signInWithMessage', path: '/_email/signInWithMessage/:contact/:json', props: true,
-      meta: { raw: true }, component: () => import("./SignInEmail.vue") }),
+      meta: { raw: true }, component: () => import("./email/SignInEmail.vue") }),
     route({ name: 'user:email:connectWithMessage', path: '/_email/connectWithMessage/:contact/:json', props: true,
-      meta: { raw: true }, component: () => import("./ConnectEmail.vue") }),
-    route({ name: 'user:email:startResetPasswordWithMessage', path: '/_email/startResetPasswordWithMessage/:contact/:json',
-      props: true, meta: { raw: true }, component: () => import("./ResetPasswordEmail.vue") }),
+      meta: { raw: true }, component: () => import("./email/ConnectEmail.vue") }),
+    route({
+      name: 'user:email:startResetPasswordWithMessage',
+      path: '/_email/startResetPasswordWithMessage/:contact/:json',
+      props: true, meta: { raw: true }, component: () => import("./email/ResetPasswordEmail.vue")
+    }),
+
+    route({ name: 'user:sms:signUpWithMessage', path: '/_sms/signUpWithMessage/:contact/:json', props: true,
+      meta: { raw: true }, component: () => import("./sms/SignUpSms.vue") }),
+    route({ name: 'user:sms:signInWithMessage', path: '/_sms/signInWithMessage/:contact/:json', props: true,
+      meta: { raw: true }, component: () => import("./sms/SignInSms.vue") }),
+    route({ name: 'user:sms:connectWithMessage', path: '/_sms/connectWithMessage/:contact/:json', props: true,
+      meta: { raw: true }, component: () => import("./sms/ConnectSms.vue") }),
+    route({
+      name: 'user:sms:startResetPasswordWithMessage',
+      path: '/_sms/startResetPasswordWithMessage/:contact/:json',
+      props: true, meta: { raw: true }, component: () => import("./sms/ResetPasswordSms.vue")
+    }),
 
   ]
 }

package/front/src/message-auth/sms/ConnectSms.vue

@@ -0,0 +1,69 @@
+<template>
+  <pre data-headers>{{ JSON.stringify(metadata, null, '  ') }}</pre>
+  <pre class="message" data-text>
+    Hello! Enter authentication code: {{ code }}
+    Or open authentication link: {{ linkAddress }}
+    See you soon
+    {{ brandName }} Team
+  </pre>
+</template>
+
+<script setup>
+  import Button from "primevue/button"
+
+  const { action, contact, json } = defineProps({
+    action: {
+      type: String,
+      required: true
+    },
+    contact: {
+      type: String,
+      required: true
+    },
+    json: {
+      type: String,
+      required: true
+    }
+  })
+
+  const data = JSON.parse(json)
+  const secrets = data.secrets
+
+  const secretLink = secrets.find(secret => secret.type == 'link')
+
+  const secretCode = secrets.find(secret => secret.type == 'code')
+
+  const brandName = ENV_BRAND_NAME
+  const metadata = {
+    from: ENV_BRAND_SMS_FROM,
+    to: contact
+  }
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const linkAddress = ENV_BASE_HREF + router.resolve({
+    name: 'user:link',
+    params: {
+      secretCode: secretLink.secret.secretCode
+    }
+  }).href
+
+  const code = secretCode.secret.secretCode
+
+</script>
+
+<style scoped>
+  img {
+    width: 100%;
+    max-width: 100px;
+  }
+  .message {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    color: #495057;
+    font-weight: 400;
+  }
+  pre {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+</style>

package/front/src/message-auth/sms/ResetPasswordSms.vue

@@ -0,0 +1,67 @@
+<template>
+  <pre data-headers>{{ JSON.stringify(metadata, null, '  ') }}</pre>
+  <pre class="message" data-text>
+    Hello! Enter authentication code: {{ code }}
+    Or open authentication link: {{ linkAddress }}
+    See you soon
+    {{ brandName }} Team
+  </pre>
+</template>
+
+<script setup>
+  const { action, contact, json } = defineProps({
+    action: {
+      type: String,
+      required: true
+    },
+    contact: {
+      type: String,
+      required: true
+    },
+    json: {
+      type: String,
+      required: true
+    }
+  })
+
+  const data = JSON.parse(json)
+  const secrets = data.secrets
+
+  const secretLink = secrets.find(secret => secret.type == 'link')
+
+  const secretCode = secrets.find(secret => secret.type == 'code')
+
+  const brandName = ENV_BRAND_NAME
+  const metadata = {
+    from: ENV_BRAND_SMS_FROM,
+    to: contact
+  }
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const linkAddress = ENV_BASE_HREF + router.resolve({
+    name: 'user:link',
+    params: {
+      secretCode: secretLink.secret.secretCode
+    }
+  }).href
+
+  const code = secretCode.secret.secretCode
+
+</script>
+
+<style scoped>
+  img {
+    width: 100%;
+    max-width: 100px;
+  }
+  .message {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    color: #495057;
+    font-weight: 400;
+  }
+  pre {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+</style>

package/front/src/message-auth/sms/SignInSms.vue

@@ -0,0 +1,68 @@
+<template>
+  <pre data-headers>{{ JSON.stringify(metadata, null, '  ') }}</pre>
+  <pre class="message" data-text>
+    Hello! Enter authentication code: {{ code }}
+    Or open authentication link: {{ linkAddress }}
+    See you soon
+    {{ brandName }} Team
+  </pre>
+</template>
+
+<script setup>
+  const { action, contact, json } = defineProps({
+    action: {
+      type: String,
+      required: true
+    },
+    contact: {
+      type: String,
+      required: true
+    },
+    json: {
+      type: String,
+      required: true
+    }
+  })
+
+  const data = JSON.parse(json)
+  const secrets = data.secrets
+
+  const secretLink = secrets.find(secret => secret.type == 'link')
+
+  const secretCode = secrets.find(secret => secret.type == 'code')
+
+
+  const brandName = ENV_BRAND_NAME
+  const metadata = {
+    from: ENV_BRAND_SMS_FROM,
+    to: contact
+  }
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const linkAddress = ENV_BASE_HREF + router.resolve({
+    name: 'user:link',
+    params: {
+      secretCode: secretLink.secret.secretCode
+    }
+  }).href
+
+  const code = secretCode.secret.secretCode
+
+</script>
+
+<style scoped>
+  img {
+    width: 100%;
+    max-width: 100px;
+  }
+  .message {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    color: #495057;
+    font-weight: 400;
+  }
+  pre {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+</style>

package/front/src/message-auth/sms/SignUpSms.vue

@@ -0,0 +1,66 @@
+<template>
+  <pre data-headers>{{ JSON.stringify(metadata, null, '  ') }}</pre>
+  <pre class="message" data-text>
+    Hello! Enter authentication code: {{ code }}
+    Or open authentication link: {{ linkAddress }}
+    See you soon
+    {{ brandName }} Team
+  </pre>
+</template>
+
+<script setup>
+  const { action, contact, json } = defineProps({
+    action: {
+      type: String,
+      required: true
+    },
+    contact: {
+      type: String,
+      required: true
+    },
+    json: {
+      type: String,
+      required: true
+    }
+  })
+
+  const data = JSON.parse(json)
+  const secrets = data.secrets
+
+  const secretLink = secrets.find(secret => secret.type === 'link')
+  const secretCode = secrets.find(secret => secret.type === 'code')
+
+  const brandName = ENV_BRAND_NAME
+  const metadata = {
+    from: ENV_BRAND_SMS_FROM,
+    to: contact
+  }
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const linkAddress = ENV_BASE_HREF + router.resolve({
+    name: 'user:link',
+    params: {
+      secretCode: secretLink.secret.secretCode
+    }
+  }).href
+
+  const code = secretCode.secret.secretCode
+
+</script>
+
+<style scoped>
+  img {
+    width: 100%;
+    max-width: 100px;
+  }
+  .message {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    color: #495057;
+    font-weight: 400;
+  }
+  pre {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+</style>

package/front/src/nav/UserIcon.vue

@@ -6,7 +6,7 @@
          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; " />
-        <img v-else-if="ownerType == 'session_Session'" src="/images/empty-user-photo.svg"
+        <img v-else-if="ownerData[0] === 'session_Session'" src="/images/empty-user-photo.svg"
              class="mr-0 border-circle" style="width: 3rem;" />
         <img v-else :src="identiconUrl"
              class="mr-0 border-circle border-1 surface-border" style="width: 3rem;" />

package/front/src/notifications/NotificationsIcon.vue

@@ -12,7 +12,7 @@
        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  v-if="isMounted">
+    <loading-zone suspense va-if="isMounted">
       <template v-slot:loading>
         <div class="flex align-items-center justify-content-center top-0 left-0 notifications-loading">
           <ProgressSpinner animationDuration=".5s"/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/user-frontend",
-  "version": "0.8.12",
+  "version": "0.8.14",
   "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",
@@ -21,29 +21,29 @@
   },
   "type": "module",
   "dependencies": {
-    "@live-change/cli": "^0.8.12",
-    "@live-change/dao": "^0.8.12",
-    "@live-change/dao-vue3": "^0.8.12",
-    "@live-change/dao-websocket": "^0.8.12",
-    "@live-change/email-service": "^0.8.12",
-    "@live-change/framework": "^0.8.12",
-    "@live-change/identicon-service": "^0.8.12",
-    "@live-change/image-frontend": "^0.8.12",
-    "@live-change/message-authentication-service": "^0.8.12",
-    "@live-change/notification-service": "^0.8.12",
-    "@live-change/password-authentication-service": "^0.8.12",
-    "@live-change/pattern": "^0.8.12",
-    "@live-change/secret-code-service": "^0.8.12",
-    "@live-change/secret-link-service": "^0.8.12",
-    "@live-change/security-frontend": "^0.8.12",
-    "@live-change/security-service": "^0.8.12",
-    "@live-change/session-service": "^0.8.12",
-    "@live-change/timer-service": "^0.8.12",
-    "@live-change/upload-service": "^0.8.12",
-    "@live-change/user-identification-service": "^0.8.12",
-    "@live-change/user-service": "^0.8.12",
-    "@live-change/vue3-components": "^0.8.12",
-    "@live-change/vue3-ssr": "^0.8.12",
+    "@live-change/cli": "^0.8.14",
+    "@live-change/dao": "^0.8.14",
+    "@live-change/dao-vue3": "^0.8.14",
+    "@live-change/dao-websocket": "^0.8.14",
+    "@live-change/email-service": "^0.8.14",
+    "@live-change/framework": "^0.8.14",
+    "@live-change/identicon-service": "^0.8.14",
+    "@live-change/image-frontend": "^0.8.14",
+    "@live-change/message-authentication-service": "^0.8.14",
+    "@live-change/notification-service": "^0.8.14",
+    "@live-change/password-authentication-service": "^0.8.14",
+    "@live-change/pattern": "^0.8.14",
+    "@live-change/secret-code-service": "^0.8.14",
+    "@live-change/secret-link-service": "^0.8.14",
+    "@live-change/security-frontend": "^0.8.14",
+    "@live-change/security-service": "^0.8.14",
+    "@live-change/session-service": "^0.8.14",
+    "@live-change/timer-service": "^0.8.14",
+    "@live-change/upload-service": "^0.8.14",
+    "@live-change/user-identification-service": "^0.8.14",
+    "@live-change/user-service": "^0.8.14",
+    "@live-change/vue3-components": "^0.8.14",
+    "@live-change/vue3-ssr": "^0.8.14",
     "@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.12",
+    "@live-change/codeceptjs-helper": "^0.8.14",
     "codeceptjs": "^3.5.12",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -75,5 +75,5 @@
   "author": "",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "5c93162184742550bf6a5e7b37a5537c69f8a3c4"
+  "gitHead": "d81b573fb8891746ae1c67f4f68558123c9f85f7"
 }

package/server/app.config.js

@@ -25,8 +25,8 @@ app.config = {
       path: '@live-change/email-service'
     },
     {
-      name: 'smsapi',
-      path: '@live-change/email-service'
+      name: 'phone',
+      path: '@live-change/phone-service'
     },
     {
       name: 'secretLink',

package/server/services.list.js

@@ -1,7 +1,7 @@
 import session from '@live-change/session-service'
 import user from '@live-change/user-service'
 import email from '@live-change/email-service'
-import smsapi from '@live-change/smsapi-service'
+import phone from '@live-change/phone-service'
 import passwordAuthentication from '@live-change/password-authentication-service'
 import userIdentification from '@live-change/user-identification-service'
 import identicon from '@live-change/identicon-service'
@@ -21,7 +21,7 @@ export {
   session,
   user,
   email,
-  smsapi,
+  phone,
   passwordAuthentication,
   userIdentification,
   identicon,