@live-change/user-frontend 0.8.63 → 0.8.65

package/.nx/cache/file-map.json

@@ -2,29 +2,29 @@
   "version": "6.0",
   "nxVersion": "18.0.6",
   "deps": {
-    "@live-change/cli": "0.8.33",
-    "@live-change/dao": "0.8.33",
-    "@live-change/dao-vue3": "0.8.33",
-    "@live-change/dao-websocket": "0.8.33",
-    "@live-change/email-service": "0.8.33",
-    "@live-change/framework": "0.8.33",
-    "@live-change/identicon-service": "0.8.33",
-    "@live-change/image-frontend": "0.8.33",
-    "@live-change/message-authentication-service": "0.8.33",
-    "@live-change/notification-service": "0.8.33",
-    "@live-change/password-authentication-service": "0.8.33",
-    "@live-change/pattern": "0.8.33",
-    "@live-change/secret-code-service": "0.8.33",
-    "@live-change/secret-link-service": "0.8.33",
-    "@live-change/security-frontend": "0.8.33",
-    "@live-change/security-service": "0.8.33",
-    "@live-change/session-service": "0.8.33",
-    "@live-change/timer-service": "0.8.33",
-    "@live-change/upload-service": "0.8.33",
-    "@live-change/user-identification-service": "0.8.33",
-    "@live-change/user-service": "0.8.33",
-    "@live-change/vue3-components": "0.8.33",
-    "@live-change/vue3-ssr": "0.8.33",
+    "@live-change/cli": "0.8.64",
+    "@live-change/dao": "0.8.64",
+    "@live-change/dao-vue3": "0.8.64",
+    "@live-change/dao-websocket": "0.8.64",
+    "@live-change/email-service": "0.8.64",
+    "@live-change/framework": "0.8.64",
+    "@live-change/identicon-service": "0.8.64",
+    "@live-change/image-frontend": "0.8.64",
+    "@live-change/message-authentication-service": "0.8.64",
+    "@live-change/notification-service": "0.8.64",
+    "@live-change/password-authentication-service": "0.8.64",
+    "@live-change/pattern": "0.8.64",
+    "@live-change/secret-code-service": "0.8.64",
+    "@live-change/secret-link-service": "0.8.64",
+    "@live-change/security-frontend": "0.8.64",
+    "@live-change/security-service": "0.8.64",
+    "@live-change/session-service": "0.8.64",
+    "@live-change/timer-service": "0.8.64",
+    "@live-change/upload-service": "0.8.64",
+    "@live-change/user-identification-service": "0.8.64",
+    "@live-change/user-service": "0.8.64",
+    "@live-change/vue3-components": "0.8.64",
+    "@live-change/vue3-ssr": "0.8.64",
     "@vueuse/core": "^10.11.0",
     "codeceptjs-assert": "^0.0.5",
     "codeceptjs-video-helper": "0.1.3",
@@ -43,13 +43,13 @@
     "vue-router": "^4.3.3",
     "vue3-scroll-border": "0.1.6",
     "wtfnode": "^0.9.1",
-    "@live-change/codeceptjs-helper": "0.8.33",
-    "codeceptjs": "^3.5.12",
+    "@live-change/codeceptjs-helper": "0.8.64",
+    "codeceptjs": "^3.6.5",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
     "random-profile-generator": "^2.3.0",
     "txtgen": "^3.0.6",
-    "webdriverio": "^8.31.1"
+    "webdriverio": "^8.40.2"
   },
   "pathMappings": {},
   "nxJsonPlugins": [],
@@ -60,9 +60,13 @@
         "file": ".gitignore",
         "hash": "16223102139109646162"
       },
+      {
+        "file": "LICENSE",
+        "hash": "10221119794387200971"
+      },
       {
         "file": "e2e/codecept.conf.js",
-        "hash": "928331161337695761"
+        "hash": "13791327886840311692"
       },
       {
         "file": "e2e/connectEmailCode.test.js",
@@ -178,11 +182,15 @@
       },
       {
         "file": "front/src/connected/Connected.vue",
-        "hash": "9003743983857262137"
+        "hash": "11506706671292138762"
+      },
+      {
+        "file": "front/src/connected/connected.js",
+        "hash": "17119205448655692635"
       },
       {
         "file": "front/src/connected/routes.js",
-        "hash": "3520804499341680062"
+        "hash": "2551528109489035833"
       },
       {
         "file": "front/src/delete/Delete.vue",
@@ -208,6 +216,18 @@
         "file": "front/src/entry-server.js",
         "hash": "3852150522654880349"
       },
+      {
+        "file": "front/src/google-access/GoogleAccess.vue",
+        "hash": "9529831848748475095"
+      },
+      {
+        "file": "front/src/google-access/GoogleAccessGained.vue",
+        "hash": "4309063406044103630"
+      },
+      {
+        "file": "front/src/google-access/routes.js",
+        "hash": "6244550399322220890"
+      },
       {
         "file": "front/src/identification/IdentificationSettings.vue",
         "hash": "15002414951607988030"
@@ -218,7 +238,7 @@
       },
       {
         "file": "front/src/identification/UserIdentification.vue",
-        "hash": "315380535873476393"
+        "hash": "12949250406055003638"
       },
       {
         "file": "front/src/identification/routes.js",
@@ -278,7 +298,7 @@
       },
       {
         "file": "front/src/nav/UserIcon.vue",
-        "hash": "1814392438544680556"
+        "hash": "3324270693059299280"
       },
       {
         "file": "front/src/nav/UserMenu.vue",
@@ -354,7 +374,7 @@
       },
       {
         "file": "front/src/router.js",
-        "hash": "4992800822957455657"
+        "hash": "6232756401755977821"
       },
       {
         "file": "front/src/settings/Settings.vue",
@@ -374,19 +394,27 @@
       },
       {
         "file": "front/src/sign/GoogleAuth.vue",
-        "hash": "5043472338996276712"
+        "hash": "17904987660087619857"
       },
       {
         "file": "front/src/sign/GoogleAuthReturn.vue",
-        "hash": "11578892278379018497"
+        "hash": "11166765015834314072"
+      },
+      {
+        "file": "front/src/sign/LinkedinAuth.vue",
+        "hash": "9567465782490495596"
+      },
+      {
+        "file": "front/src/sign/LinkedinAuthReturn.vue",
+        "hash": "9428875039032707697"
       },
       {
         "file": "front/src/sign/SignInEmail.vue",
-        "hash": "1815095713448644951"
+        "hash": "15480628897033099010"
       },
       {
         "file": "front/src/sign/SignInFinished.vue",
-        "hash": "844919637394202510"
+        "hash": "11444495191715209127"
       },
       {
         "file": "front/src/sign/SignOut.vue",
@@ -402,11 +430,11 @@
       },
       {
         "file": "front/src/sign/SignUpFinished.vue",
-        "hash": "15083286059095236347"
+        "hash": "4534581805740174218"
       },
       {
         "file": "front/src/sign/routes.js",
-        "hash": "731553876160166852"
+        "hash": "1023097621604756838"
       },
       {
         "file": "front/src/utils/countries.js",
@@ -416,21 +444,25 @@
         "file": "front/src/utils/googleAuth.js",
         "hash": "10682927559112869908"
       },
+      {
+        "file": "front/src/utils/linkedinAuth.js",
+        "hash": "16435105867959168771"
+      },
       {
         "file": "front/vite.config.js",
         "hash": "4207480426880236517"
       },
       {
         "file": "index.js",
-        "hash": "6259321642807355421"
+        "hash": "16467025442967385199"
       },
       {
         "file": "package.json",
-        "hash": "12911801514831005291"
+        "hash": "4875568356135693252"
       },
       {
         "file": "server/app.config.js",
-        "hash": "18401554844996247569"
+        "hash": "14052619601583710778"
       },
       {
         "file": "server/init-functions.js",
@@ -446,7 +478,7 @@
       },
       {
         "file": "server/services.list.js",
-        "hash": "16537572580698486843"
+        "hash": "2018796374883415113"
       },
       {
         "file": "server/start.js",

package/front/src/connected/ConnectEmail.vue

@@ -25,7 +25,7 @@
         </Divider>
 
         <router-link :to="{ name: 'user:connect-phone' }">
-          <Button label="Add Phone" icon="pi pi-github" class="w-full p-button-secondary mb-2" />
+          <Button label="Add Phone" icon="pi pi-mobile" class="w-full p-button-secondary mb-2" />
         </router-link>
 
 <!--        <Button label="Connect GitHub account" icon="pi pi-github" class="w-full p-button-secondary mb-2"></Button>

package/front/src/connected/ConnectPhone.vue

@@ -12,10 +12,10 @@
           <label for="email" class="block text-900 font-medium mb-2">
             Phone number
           </label>
-          <InputText id="email" type="text" class="w-full"
-                     aria-describedby="email-help" :class="{ 'p-invalid': data.phoneError}"
+          <PhoneInput id="phone" class="w-full"
+                     aria-describedby="phone-help" :class="{ 'p-invalid': data.phoneError }"
                      v-model="data.phone" />
-          <small v-if="data.phoneError" id="email-help" class="p-error">{{ data.phoneError }}</small>
+          <small v-if="data.phoneError" id="phone-help" class="p-error">{{ data.phoneError }}</small>
         </div>
 
         <Button label="Add Phone" icon="pi pi-mobile" class="w-full" type="submit" />
@@ -25,7 +25,7 @@
         </Divider>
 
         <router-link :to="{ name: 'user:connect-email' }">
-          <Button label="Add Email" icon="pi pi-github" class="w-full p-button-secondary mb-2" />
+          <Button label="Add Email" icon="pi pi-envelope" class="w-full p-button-secondary mb-2" />
         </router-link>
 
 <!--        <Button label="Connect GitHub account" icon="pi pi-github" class="w-full p-button-secondary mb-2"></Button>-->
@@ -41,6 +41,7 @@
   import Checkbox from "primevue/checkbox"
   import Button from "primevue/button"
   import Divider from "primevue/divider"
+  import PhoneInput from "../phone/PhoneInput.vue"
 
   import { useRouter } from 'vue-router'
   const router = useRouter()

package/front/src/connected/Connected.vue

@@ -27,6 +27,11 @@
             <i  class="pi pi-google mr-2"></i>
             <span class="block text-900 font-medium text-lg">{{ account.email }}</span>
           </div>
+          <div v-if="account.accountType.accountType === 'linkedin'"
+               class="flex flex-row align-items-center">
+            <i  class="pi pi-linkedin mr-2"></i>
+            <span class="block text-900 font-medium text-lg">{{ account.name }}</span>
+          </div>
           <pre v-else>{{ account }}</pre>
           <Button class="p-button-text p-button-plain p-button-rounded mr-1" icon="pi pi-times"
                   v-if="canDelete"
@@ -70,11 +75,6 @@
   import { useApi, live, usePath, useActions } from '@live-change/vue3-ssr'
   const api = useApi()
   const path = usePath()
-  const messageAuthenticationClientConfig = api.getServiceDefinition('messageAuthentication')?.clientConfig
-  const contactTypesAvailable = messageAuthenticationClientConfig?.contactTypes || []
-
-  const userClientConfig = api.getServiceDefinition('user')?.clientConfig
-  const accountTypesAvailable = userClientConfig?.remoteAccountTypes || []
 
   const messageAuthenticationApi = useActions().messageAuthentication
 
@@ -118,43 +118,10 @@
     })
   }
 
-  const contactsTypes = contactTypesAvailable.map(contactType => {
-    const contactTypeUpper = contactType[0].toUpperCase() + contactType.slice(1)
-
-    let serviceName = contactType
-    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)
-    console.log(`path[${serviceName}][${viewName}] =`, path[serviceName][viewName])
-    return {
-      contactType,
-      serviceName,
-      viewName,
-      path: path[serviceName][viewName]({}),
-      contacts: null
-    }
-  })
+  import { getContactTypes, getAccountTypes} from './connected.js'
 
-  const accountTypes = accountTypesAvailable.map(accountType => {
-    let serviceName = accountType+'Authentication'
-    let viewName = 'myUserAccounts'
-    console.log('remoteAccountType', accountType, 'serviceName', serviceName, 'viewName', viewName)
-    console.log(`path[${serviceName}][${viewName}] =`, path[serviceName][viewName])
-    return {
-      accountType,
-      serviceName,
-      viewName,
-      path: path[serviceName][viewName]({}),
-      accounts: null
-    }
-  })
+  const contactsTypes = getContactTypes()
+  const accountTypes = getAccountTypes()
 
   const contactPromises = contactsTypes.map(async contactType => {
     contactType.contacts = await live(contactType.path)

package/front/src/connected/connected.js

@@ -0,0 +1,89 @@
+import { useApi, live } from '@live-change/vue3-ssr'
+import { computed } from 'vue'
+
+export function getContactTypes(api = useApi()) {
+  const path = api.fetch
+  const messageAuthenticationClientConfig = api.getServiceDefinition('messageAuthentication')?.clientConfig
+  const contactTypesAvailable = messageAuthenticationClientConfig?.contactTypes || []
+  const contactsTypes = contactTypesAvailable.map(contactType => {
+    const contactTypeUpper = contactType[0].toUpperCase() + contactType.slice(1)
+
+    let serviceName = contactType
+    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)
+    console.log(`path[${serviceName}][${viewName}] =`, path[serviceName][viewName])
+    return {
+      contactType,
+      serviceName,
+      viewName,
+      path: path[serviceName][viewName]({}),
+      contacts: null,
+      async fetchContacts(context, onUnmountedCb){
+        const contacts = await live(path[serviceName][viewName]({}), context, onUnmountedCb)
+        this.contacts = contacts
+        return contacts
+      }
+    }
+  })
+  return contactsTypes
+
+}
+
+export function getAccountTypes(api = useApi()) {
+  const userClientConfig = api.getServiceDefinition('user')?.clientConfig
+  const accountTypesAvailable = userClientConfig?.remoteAccountTypes || []
+  const path = api.fetch
+  const accountTypes = accountTypesAvailable.map(accountType => {
+    let serviceName = accountType+'Authentication'
+    let viewName = 'myUserAccounts'
+    console.log('remoteAccountType', accountType, 'serviceName', serviceName, 'viewName', viewName)
+    console.log(`path[${serviceName}][${viewName}] =`, path[serviceName][viewName])
+    return {
+      accountType,
+      serviceName,
+      viewName,
+      path: path[serviceName][viewName]({}),
+      accounts: null,
+      async fetchAccounts(context, onUnmountedCb){
+        const accounts = await live(path[serviceName][viewName]({}), context, onUnmountedCb)
+        this.accounts = accounts
+        return accounts
+      }
+    }
+  })
+  return accountTypes
+}
+
+export async function getContacts(api = useApi()) {
+  const contactsTypes = getContactTypes(api)
+  for(const contactType of contactsTypes) {
+    await contactType.fetchContacts()
+  }
+  const contacts = computed(() => contactsTypes.map((c,i) => c.contacts.value.map(v => ({
+    contactType: c.contactType,
+    serviceName: c.serviceName,
+    ...(v)
+  }))).flat())
+  return contacts
+}
+
+export async function getAccounts(api = useApi()) {
+  const accountTypes = getAccountTypes(api)
+  for(const accountType of accountTypes) {
+    await accountType.fetchAccounts()
+  }
+  const accounts = computed(() => accountTypes.map((c,i) => c.accounts.value.map(v => ({
+    accountType: c.contactType,
+    serviceName: c.serviceName,
+    ...(v)
+  }))).flat())
+  return accounts
+}

package/front/src/connected/routes.js

@@ -15,6 +15,9 @@ export function routes(config = {}) {
     route({ name: 'user:connect-google', path: prefix + 'connect-google',
       redirect: { name: 'user:googleAuth', params: { action: 'connectGoogle' } } }),
 
+    route({ name: 'user:connect-linkedin', path: prefix + 'connect-linkedin',
+      redirect: { name: 'user:linkedinAuth', params: { action: 'connectLinkedin' } } }),
+
     route({ name: 'user:connectFinished', path: prefix + 'connect-finished',
       component: () => import("./ConnectFinished.vue") }),
 

package/front/src/identification/UserIdentification.vue

@@ -100,6 +100,9 @@
   }
 
   const name = computed(() => userData.value?.name
+    || (userData.value.firstName && userData.value.lastName
+      ? userData.value.firstName + ' ' + userData.value.lastName
+      : userData.value.firstName)
     || props.anonymous
     || uniqueNamesGenerator(nameGeneratorConfig))
 

package/front/src/nav/UserIcon.vue

@@ -14,7 +14,7 @@
 
   </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">
+       right-0 top-100 z-5 shadow-2">
     <loading-zone suspense>
       <template v-slot:loading>
         <div class="flex align-items-center justify-content-center top-0 left-0 notifications-loading">

package/front/src/phone/PhoneInput.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="flex flex-row align-items-center">
+    <AutoComplete v-model="selectedCountry" dropdown optionLabel="dial_code" placeholder="+XX" forceSelection
+                  :suggestions="filteredCountries" @complete="searchCountry"
+                  class="mr-2 w-14rem">
+      <template #option="slotProps">
+        <div class="flex align-items-center">
+          <img :alt="slotProps.option.name"
+               src="../../public/images/flag_placeholder.png"
+               :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`"
+               style="width: 18px; height: 12.27px" />
+          <div>{{ slotProps.option.name }}</div>
+        </div>
+      </template>}}
+    </AutoComplete>
+    <InputText v-model="rest" :disabled="!selectedCountry" class="w-full"
+               pattern="[0-9 ]*" inputmode="numeric" ref="phoneInput"
+               @keyup="e => e.target.value = e.target.value.replace(/[^0-9 ]/g, '')"/>
+  </div>
+</template>
+
+<script setup>
+
+  import AutoComplete from 'primevue/autocomplete'
+  import InputText from 'primevue/inputtext'
+
+  import countries from '../utils/countries.js'
+
+  import { defineProps, defineModel, toRefs, ref, computed, watch } from 'vue'
+
+  const phoneInput = ref()
+
+  const value = defineModel({
+    type: String,
+    required: true
+  })
+
+  const props = defineProps({
+    id: {
+      type: String,
+      required: true
+    },
+  })
+
+  const selectedCountry = ref()
+  watch(value, (newValue) => {
+    if(!newValue) return
+    const found = countries.find((country) => newValue.startsWith(country.dial_code))
+    if(found) {
+      selectedCountry.value = found
+      if(phoneInput.value?.$el) {
+        const el = phoneInput.value.$el
+        //console.log("PHONE INPUT", el)
+        setTimeout(() => {
+          el.focus()
+        }, 100)
+      }
+    }
+  })
+  watch(selectedCountry, (country) => {
+    if(!country) return
+    const currentCountry = value.value && countries.find((country) => value.value.startsWith(country.dial_code))
+    const code = typeof country === 'object' ? country.dial_code : country.replace(/[^\d]/g, '')
+    if(currentCountry) {
+      value.value = value.value.replace(currentCountry.dial_code, code)
+    } else {
+      value.value = code
+    }
+  })
+
+  const rest = computed({
+    get: () => value.value && (value.value
+      .replace(selectedCountry.value?.dial_code, '')
+      .replace(/[^\d ]/g, '')),
+    set: (rest) => value.value = selectedCountry.value?.dial_code + rest.replace(/[^\d ]/g, '')
+  })
+
+  const filteredCountries = ref(countries)
+
+  function searchCountry(event) {
+    const numbers = event.query.replace(/[^\d]/g, '')
+    console.log("Search country", event.query, numbers, selectedCountry.value)
+    if(selectedCountry.value !== null && typeof selectedCountry.value === 'object') selectedCountry.value = null
+    filteredCountries.value = countries.filter((country) =>
+      country.name.toLowerCase().startsWith(event.query.toLowerCase())
+        || country.code.toLowerCase().startsWith(event.query.toLowerCase())
+        || (numbers.length > 0 && country.dial_code.replace(/[^\d]/g, '').startsWith(numbers))
+    )
+    console.log("Found", filteredCountries.value)
+  }
+
+  import { usePath, live } from '@live-change/vue3-ssr'
+  const path = usePath()
+  const geoIpPath = path.geoIp.myCountry({})
+
+  const myCountry = await live(geoIpPath)
+
+  if(selectedCountry.value == null) {
+    selectedCountry.value = countries.find(c => c.code.toLowerCase() === myCountry.value.toLowerCase())
+  }
+
+</script>
+
+
+<style scoped lang="scss">
+  @import "../utils/flags.scss";
+</style>

package/front/src/sign/LinkedinAuth.vue

@@ -0,0 +1,96 @@
+<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">Linkedin authentication</div>
+      </div>
+
+      <div v-if="state === 'canceled'" class="text-center">
+        <div class="mb-1">Authentication canceled by user</div>
+        <div class="flex flex-row">
+          <Button @click="back" label="Go back" icon="pi pi-arrow-left" class="w-full p-button-secondary mb-1" />
+          <Button @click="linkedinAuth" label="Try again" icon="pi pi-linkedin" class="w-full p-button-secondary mb-1" />
+        </div>
+      </div>
+      <div v-else-if="state === 'waiting'" class="text-center">
+        Authentication will open in this window.
+      </div>
+      <div v-else-if="state === 'working'" class="text-center">
+        Waiting for server...
+      </div>
+      <div v-else-if="state === 'error'" class="text-center">
+        <div>Error during authentication:</div>
+        <div>{{ error }}</div>
+      </div>
+      <div v-else>
+        Unknown authentication state: {{ state }}
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { defineProps, toRefs, ref, onMounted, inject } from 'vue'
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  const workingZone = inject('workingZone')
+
+  import { linkedinAuthRedirect } from '../utils/linkedinAuth.js'
+
+  const props = defineProps({
+    action: {
+      type: String,
+      default: 'signInOrSignUp'
+    },
+    accessType: {
+      type: String,
+      default: 'offline', //'online'
+    },
+    scopes: {
+      type: Array,
+      default: () => ['profile', 'email', 'openid']
+    }
+  })
+
+  const { action, accessType, scopes } = toRefs(props)
+  const state = ref('waiting')
+  const error = ref(null)
+
+  function linkedinAuth() {
+    state.value = 'waiting'
+
+    workingZone.addPromise('linkedin auth', new Promise((resolve, reject) => {
+      setTimeout(() => {
+        state.value = 'error'
+        error.value = 'redirect_timeout'
+        // return reject('redirect timeout?!')
+        return resolve()
+      }, 4000)
+    }))
+
+    linkedinAuthRedirect({
+      scope: (scopes.value ?? []).join(' '),
+      redirectUri: document.location.protocol + '//' + document.location.host
+        + router.resolve({ name: 'user:linkedinAuthReturn', params: { action: action.value } }).href,
+      accessType: accessType.value
+    })
+
+  }
+
+  async function back() {
+    router.go(-1)
+  }
+
+  onMounted(() => {
+    linkedinAuth()
+  })
+
+</script>
+
+<style scoped>
+
+</style>