@live-change/user-frontend 0.8.64 → 0.8.66

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"

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/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>

package/front/src/sign/LinkedinAuthReturn.vue

@@ -0,0 +1,105 @@
+<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-2 text-red-500">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" />
+        </div>
+      </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 { useApi } from "@live-change/vue3-ssr"
+  const api = useApi()
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+
+  const workingZone = inject('workingZone')
+
+  import { useRouter, useRoute } from 'vue-router'
+  const router = useRouter()
+  const route = useRoute()
+
+  const props = defineProps({
+    action: {
+      type: String,
+      default: 'signInOrSignUp'
+    }
+  })
+
+  const { action } = toRefs(props)
+  const state = ref('waiting')
+  const error = ref(null)
+
+  onMounted(async () => {
+    const query = route.query
+    console.log("QUERY", query)
+
+    if(!query.code) {
+      state.value = 'canceled'
+      return
+    }
+    try {
+      const result = await workingZone.addPromise(`linkedin ${action.value}`,
+        api.command(['linkedinAuthentication', action.value], {
+          redirectUri: document.location.protocol + '//' + document.location.host
+            + router.resolve({ name: 'user:linkedinAuthReturn', params: { action: action.value } }).href,
+          ...query
+        })
+      )
+      console.log("LINKEDIN AUTH RESULT", result)
+      const { action: actionDone, user } = result
+      while(user && api.client.value.user !== user) {
+        await new Promise(resolve => setTimeout(resolve, 100))
+      }
+      if(actionDone === 'signIn') {
+        router.push({ name: 'user:signInFinished' })
+      } else if(actionDone === 'signUp') {
+        router.push({ name: 'user:signUpFinished' })
+      } else if(actionDone === 'connectLinkedin') {
+        router.push({ name: 'user:connected' })
+      } else if(actionDone === 'addOfflineAccessToken') {
+        router.push({ name: 'user:linkedin-access-gained' })
+      } else {
+        console.error("Unknown action", actionDone)
+      }
+    } catch(error) {
+      console.error("Linkedin auth error", error)
+      toast.add({ severity: 'error', summary: 'Error', detail: 'Error during linkedin authentication', life: 3000 })
+      state.value = 'error'
+      error.value = error
+    }
+  })
+
+  async function back() {
+    router.go(-1)
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/sign/SignInEmail.vue

@@ -59,6 +59,14 @@
         />
       </router-link>
 
+      <router-link :to="{ name: 'user:linkedinAuth', params: { action: 'signInOrSignUp' } }" class="no-underline">
+        <Button
+          label="Sign In with Linkedin"
+          icon="pi pi-linkedin"
+          class="w-full p-button-secondary mb-1"
+        />
+      </router-link>
+
     </div>
   </div>
 </template>

package/front/src/sign/routes.js

@@ -10,6 +10,14 @@ export function routes(config = {}) {
     route({ name: 'user:googleAuthReturn', path: prefix + 'google-auth-return/:action',
       component: () => import("./GoogleAuthReturn.vue"), props: true }),
 
+    route({ name: 'user:linkedinAuth', path: prefix + 'linkedin-auth/:action',
+      component: () => import("./LinkedinAuth.vue"), props: true, meta: { } }),
+    route({ name: 'user:linkedinAuthScopes', path: prefix + 'linkedin-auth/:action/:scopes*',
+      component: () => import("./LinkedinAuth.vue"), props: true, meta: { } }),
+    route({ name: 'user:linkedinAuthReturn', path: prefix + 'linkedin-auth-return/:action',
+      component: () => import("./LinkedinAuthReturn.vue"), props: true }),
+
+
     route({ name: 'user:signInEmail', path: prefix + 'sign-in-email',
       component: () => import("./SignInEmail.vue"), meta: { signedOut: true } }),
     route({ name: 'user:signInFinished', path: prefix + 'sign-in-finished',