@live-change/user-frontend 0.9.128 → 0.9.130

package/front/src/connected/Connected.vue

@@ -25,17 +25,10 @@
         </li>
         <li v-for="account in accounts"
             class="flex flex-row items-center justify-between mb-2">
-          <div v-if="account.accountType.accountType === 'google'"
-               class="flex flex-row items-center">
-            <i  class="pi pi-google mr-2"></i>
-            <span class="block text-surface-900 dark:text-surface-0 font-medium text-lg">{{ account.email }}</span>
-          </div>
-          <div v-else-if="account.accountType.accountType === 'linkedin'"
-               class="flex flex-row items-center">
-            <i  class="pi pi-linkedin mr-2"></i>
-            <span class="block text-surface-900 dark:text-surface-0 font-medium text-lg">{{ account.name }}</span>
-          </div>
-          <pre v-else>{{ account }}</pre>
+          <InjectComponent 
+            :request="{ name: 'connectedAccountItem', accountType: account.accountType.accountType }"
+            :defaultComponent="UnknownAccountItem"
+            :props="{ account }" />
           <Button class="p-button-text p-button-plain p-button-rounded mr-1" icon="pi pi-times"
                   v-if="canDelete"
                   @click="event => disconnectAccount(event, account, account.email)" />
@@ -43,7 +36,7 @@
 
       </ul>
 
-      <div class="flex flex-row flex-wrap">
+      <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 v-if="contactType.contactType === 'email'"
@@ -52,10 +45,12 @@
                   :label="'Add '+contactType.contactType" icon="pi pi-phone" id="connect" />
           <Button v-else :label="'Add '+contactType.contactType" icon="pi pi-envelope" id="connect" />
         </router-link>
-        <router-link v-for="accountType in accountTypes"
-                     :to="{ name: 'user:connect-'+accountType.accountType }" class="mr-2 no-underline block mb-1">
-          <Button v :label="'Add '+accountType.accountType" icon="pi pi-google" id="connect" />
-        </router-link>
+        <template v-for="accountType in accountTypes">
+          <router-link v-if="connectAccountRoute(accountType)"
+                      :to="connectAccountRoute(accountType)" class="mr-2 no-underline block mb-1">
+            <Button v :label="'Add '+accountType.accountType" icon="pi pi-google" id="connect" />
+          </router-link>
+        </template>
 
       </div>
     </div>
@@ -66,6 +61,15 @@
 <script setup>
   import Button from "primevue/button"
 
+  import { provideComponent, InjectComponent } from '@live-change/vue3-components'
+  import GoogleAccountItem from './accountTypes/GoogleAccountItem.vue'
+  import LinkedinAccountItem from './accountTypes/LinkedinAccountItem.vue'
+
+  provideComponent({ name: 'connectedAccountItem', accountType: 'google' }, GoogleAccountItem)
+  provideComponent({ name: 'connectedAccountItem', accountType: 'linkedin' }, LinkedinAccountItem)
+  import UnknownAccountItem from './accountTypes/UnknownAccountItem.vue'
+
+
   import { ref, onMounted, onUnmounted, inject, computed } from 'vue'
   import ConfirmPopup from 'primevue/confirmpopup'
   import Toast from 'primevue/toast'
@@ -77,6 +81,9 @@
   onMounted(() => isMounted.value = true)
   onUnmounted(() => isMounted.value = false)
 
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
   import { formatPhoneNumber } from '../phone/phoneNumber.js'
 
   const workingZone = inject('workingZone')
@@ -155,6 +162,13 @@
   const allAccountsCount = computed(() => contacts.value?.length + accounts.value?.length )
   const canDelete = computed(() => allAccountsCount.value > 1 )
 
+  function connectAccountRoute(accountType) {
+    const route = { name: 'user:connect-'+accountType.accountType }
+    /// Check if the route is registered in the router
+    const routeExists = router.getRoutes().find(r => r.name === route.name)
+    return routeExists ? route : null
+  }
+
 </script>
 
 <style>

package/front/src/connected/accountTypes/GoogleAccountItem.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex flex-row items-center">
+    <i  class="pi pi-google mr-2"></i>
+    <span class="block text-surface-900 dark:text-surface-0 font-medium text-lg">{{ account.email }}</span>
+  </div>
+</template>
+
+<script setup>  
+  import { toRefs, computed, defineProps } from 'vue'
+
+  const props = defineProps({
+    account: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { account } = toRefs(props)
+  
+</script>

package/front/src/connected/accountTypes/LinkedinAccountItem.vue

@@ -0,0 +1,19 @@
+<template>  
+  <div class="flex flex-row items-center">
+    <i  class="pi pi-linkedin mr-2"></i>
+    <span class="block text-surface-900 dark:text-surface-0 font-medium text-lg">{{ account.name }}</span>
+  </div>
+</template>
+
+<script setup>  
+  import { toRefs, computed, defineProps } from 'vue'
+
+  const props = defineProps({
+    account: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { account } = toRefs(props)
+</script>

package/front/src/connected/accountTypes/UnknownAccountItem.vue

@@ -0,0 +1,25 @@
+<template>  
+  <div class="flex flex-row items-center">
+    <i  class="pi pi-question-circle mr-2"></i>
+    <span class="block text-surface-900 dark:text-surface-0 font-medium text-lg">{{ cleanAccountInfo }}</span>
+  </div>
+</template>
+
+<script setup>  
+  import { toRefs, computed, defineProps } from 'vue'
+
+  const props = defineProps({
+    account: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { account } = toRefs(props)
+
+  const cleanAccountInfo = computed(() => {
+    if(!account.value) return "Unknown account"
+    const { accountType, ...rest } = account.value
+    return { ...rest, accountType: accountType.accountType }
+  })
+</script>

package/front/src/connected/connected.js

@@ -55,7 +55,7 @@ export function getAccountTypes(api = useApi()) {
       path: accountsPath,
       accounts: null,
       async fetchAccounts(context, onUnmountedCb){
-        const accounts = await live(path[serviceName][viewName]({}), context, onUnmountedCb)
+        const accounts = await live(accountsPath, context, onUnmountedCb)
         this.accounts = accounts
         return accounts
       }
@@ -88,7 +88,7 @@ export async function getAccounts(context, onUnmountedCb) {
   for(const accountType of accountTypes) {
     await accountType.fetchAccounts(context, onUnmountedCb)
   }
-  const accounts = computed(() => accountTypes.map((c,i) => c.accounts.value.map(v => ({
+  const accounts = computed(() => accountTypes.map((c,i) => (c.accounts.value ?? []).map(v => ({
     accountType: c.contactType,
     serviceName: c.serviceName,
     ...(v)

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

@@ -6,9 +6,9 @@
       <p class="mt-0 mb-1 p-0 leading-normal">You authenticated in a different tab.</p>
     </div>
     <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>
+      <div class="text-surface-900 dark:text-surface-0 font-medium mb-4 text-xl">{{ title }}</div>
+      <p class="mt-0 mb-1 p-0 leading-normal">{{ description }}</p>
+      <p class="mt-0 mb-6 p-0 leading-normal">{{ callToAction }}</p>
       <Secured :events="['wrong-secret-code']" :actions="['checkSecretCode']">
         <command-form service="messageAuthentication" action="finishMessageAuthentication"
                       :parameters="{ secretType: 'code', authentication }" :key="authentication"
@@ -64,7 +64,19 @@
     authentication: {
       type: String,
       required: true
-    }
+    },
+    title: {
+      type: String,
+      default: 'Message sent',      
+    },
+    description: {
+      type: String,
+      default: 'We sent special secret message to the contact you already provided.',
+    },
+    callToAction: {
+      type: String,
+      default: 'Click on the link or enter the code you found in that message.',
+    },
   })
 
   function handleAuthenticated({ parameters, result }) {

package/front/src/sign/SignInEmail.vue

@@ -51,12 +51,12 @@
 
       </command-form>
 
-      <Divider v-if="accountTypes.length > 0" align="center" class="my-6">
+      <Divider v-if="availableAccountTypes.length > 0" align="center" class="my-6">
         <span class="text-surface-600 dark:text-surface-200 font-normal text-sm">OR</span>
       </Divider>
 
-      <router-link v-for="accountType in accountTypes"
-                   :to="{ name: `user:${accountType.accountType}Auth`, params: { action: 'signInOrSignUp' } }"
+      <router-link v-for="accountType in availableAccountTypes"
+                   :to="accountType.connectRoute"
                    class="no-underline">
         <Button
           :label="`Sign In with ${accountType.accountType[0].toUpperCase()}${accountType.accountType.slice(1)}`"
@@ -78,7 +78,7 @@
   import Password from "../password/Password.vue"
   import Message from "primevue/message"
 
-  import { onMounted, ref } from 'vue'
+  import { onMounted, ref, computed } from 'vue'
   const isMounted = ref(false)
   onMounted(() => isMounted.value = true)
 
@@ -92,6 +92,18 @@
   const contactsTypes = getContactTypes()
   const accountTypes = getAccountTypes()
 
+  const availableAccountTypes = computed(() => accountTypes.map(accountType => {
+    const route = { name: `user:${accountType.accountType}Auth`, params: { action: 'signInOrSignUp' } }
+    const routeExists = router.getRoutes().find(r => r.name === route.name)
+    if(routeExists) {
+      return {
+        ...accountType,
+        connectRoute: route
+      }
+    }
+    return null
+  }).filter(accountType => !!accountType))
+
   function handleDone({ parameters, result }) {
     console.log("DONE RESULT", result)
     if(result.type === 'sent') {

package/front/src/sign/SignUpEmail.vue

@@ -27,12 +27,12 @@
         <Button label="Sign Up with email" icon="pi pi-user" class="w-full" type="submit" />
       </command-form>
 
-      <Divider v-if="accountTypes.length > 0" align="center" class="my-6">
+      <Divider v-if="availableAccountTypes.length > 0" align="center" class="my-6">
         <b>OR</b>
       </Divider>
 
-      <router-link v-for="accountType in accountTypes"
-                   :to="{ name: `user:${accountType.accountType}Auth`, params: { action: 'signInOrSignUp' } }"
+      <router-link v-for="accountType in availableAccountTypes"
+                   :to="accountType.connectRoute"
                    class="no-underline">
         <Button
           :label="`Sign Up with ${accountType.accountType[0].toUpperCase()}${accountType.accountType.slice(1)}`"
@@ -60,13 +60,27 @@
   import { useRouter } from 'vue-router'
   const router = useRouter()
 
+  import { computed } from 'vue'
+
   import { useI18n } from 'vue-i18n'
   const { t } = useI18n()
 
-  import { getContactTypes, getAccountTypes} from '../connected/connected.js'
+  import { getContactTypes, getAccountTypes } from '../connected/connected.js'
   const contactsTypes = getContactTypes()
   const accountTypes = getAccountTypes()
 
+  const availableAccountTypes = computed(() => accountTypes.map(accountType => {
+    const route = { name: `user:${accountType.accountType}Auth`, params: { action: 'signInOrSignUp' } }
+    const routeExists = router.getRoutes().find(r => r.name === route.name)
+    if(routeExists) {
+      return {
+        ...accountType,
+        connectRoute: route
+      }
+    }
+    return null
+  }).filter(accountType => !!accountType))
+
   function handleSent({ parameters, result }) {
     const { authentication } = result
     router.push({

package/index.js

@@ -22,6 +22,9 @@ import PhoneInput from "./front/src/phone/PhoneInput.vue"
 import CountryInput from './front/src/phone/CountryInput.vue'
 export { PhoneInput, CountryInput }
 
+import MessageSent from "./front/src/message-auth/MessageSent.vue"
+export { MessageSent }
+
 export * from './front/src/connected/connected.js'
 
 export * from "./front/src/router.js"

package/package.json

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