@live-change/user-frontend 0.8.14 → 0.8.15

package/front/components.d.ts

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

package/front/src/connected/Connected.vue

@@ -18,10 +18,20 @@
           </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, contact.contactType, contact.id)" />
+                  @click="event => disconnectContact(event, contact)" />
+        </li>
+        <li v-for="account in accounts"
+            class="flex flex-row align-items-center justify-content-between mb-2">
+          <div v-if="account.accountType.accountType === 'google'"
+               class="flex flex-row align-items-center">
+            <i  class="pi pi-google mr-2"></i>
+            <span class="block text-900 font-medium text-lg">{{ account.email }}</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"
+                  @click="event => disconnectAccount(event, account, account.email)" />
         </li>
-
-<!--        {{ contacts }}-->
 
       </ul>
 
@@ -55,11 +65,16 @@
   import { useApi, live, usePath, useActions } from '@live-change/vue3-ssr'
   const api = useApi()
   const path = usePath()
-  const clientConfig = api.getServiceDefinition('messageAuthentication')?.clientConfig
+  const messageAuthenticationClientConfig = api.getServiceDefinition('messageAuthentication')?.clientConfig
+  const contactTypesAvailable = messageAuthenticationClientConfig?.contactTypes || []
+
+  const userClientConfig = api.getServiceDefinition('user')?.clientConfig
+  const accountTypesAvailable = userClientConfig?.remoteAccountTypes || []
 
   const messageAuthenticationApi = useActions().messageAuthentication
 
-  function disconnect(event, contactType, contact) {
+  function disconnectContact(event, contactData) {
+    const { contactType, id: contact } = contactData
     confirm.require({
       target: event.currentTarget,
       message: `Do you want to disconnect ${contactType.contactType} account ${contact}?`,
@@ -78,12 +93,30 @@
     })
   }
 
-  const contactTypesAvailable = clientConfig.contactTypes
+  function disconnectAccount(event, contactData, name) {
+    const { accountType, id: account } = contactData
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you want to disconnect ${accountType.accountType} account ${name || account}?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        const upperCaseType = accountType.accountType[0].toUpperCase() + accountType.accountType.slice(1)
+        workingZone.addPromise('disconnectAccount', (async () => {
+          await api.actions[accountType.accountType+'Authentication']['disconnect'+upperCaseType]({ account })
+          toast.add({ severity: 'info', summary: 'Account disconnected', life: 1500 })
+        })())
+      },
+      reject: () => {
+        toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
 
   const contactsTypes = contactTypesAvailable.map(contactType => {
     const contactTypeUpper = contactType[0].toUpperCase() + contactType.slice(1)
 
-    let serviceName = 'myUser'+contactTypeUpper+'s'
+    let serviceName = contactType
     let viewName = 'myUser'+contactTypeUpper+'s'
     if(!path[serviceName]) { // find service by viewName
       for(const s in path) {
@@ -93,7 +126,8 @@
         }
       }
     }
-    console.log('contactType', contactType, 'serviceName', serviceName, 'viewName', viewName)
+    //console.log('contactType', contactType, 'serviceName', serviceName, 'viewName', viewName)
+    console.log(`path[${serviceName}][${viewName}] =`, path[serviceName][viewName])
     return {
       contactType,
       serviceName,
@@ -103,16 +137,41 @@
     }
   })
 
-  await Promise.all(contactsTypes.map(async contactType => {
+  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 contactPromises = contactsTypes.map(async contactType => {
     contactType.contacts = await live(contactType.path)
-  }))
+  })
+
+  const accountPromises = accountTypes.map(async accountType => {
+    accountType.accounts = await live(accountType.path)
+  })
+
+  await Promise.all([ ...contactPromises, ...accountPromises ])
 
   const contacts = computed(() => contactsTypes.map((c,i) => c.contacts.value.map(v => ({
     contactType: c,
     ...(v)
   }))).flat())
 
-  const allAccountsCount = computed(() => contacts.value?.length )
+  const accounts = computed(() => accountTypes.map((c,i) => c.accounts.value.map(v => ({
+    accountType: c,
+    ...(v)
+  }))).flat())
+
+  const allAccountsCount = computed(() => contacts.value?.length + accounts.value?.length )
   const canDelete = computed(() => allAccountsCount.value > 1 )
 
 </script>

package/front/src/connected/routes.js

@@ -4,7 +4,7 @@ export function routes(config = {}) {
   return [
 
     route({ name: 'user:connected', path: prefix + 'connected',
-      component: () => import("./Connected.vue") }),
+      component: () => import("./Connected.vue"), meta: { signedIn: true } }),
 
     route({ name: 'user:connect-email', path: prefix + 'connect-email',
       component: () => import("./ConnectEmail.vue") }),

package/front/src/nav/UserMenu.vue

@@ -11,7 +11,7 @@
       </router-link>
     </li>
     <li v-if="!client.user">
-      <router-link :to="{ name: 'user:signUp' }"
+      <router-link :to="{ name: 'user:signUpEmail' }"
                    v-ripple
                    class="flex px-6 py-2 align-items-center text-600 hover:text-900 hover:surface-100
                font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple no-underline"
@@ -21,7 +21,7 @@
       </router-link>
     </li>
     <li v-if="!client.user">
-      <router-link :to="{ name: 'user:signIn' }"
+      <router-link :to="{ name: 'user:signInEmail' }"
                    v-ripple
                    class="flex px-6 py-2 align-items-center text-600 hover:text-900 hover:surface-100
                font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple no-underline"

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 va-if="isMounted">
+    <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"/>

package/front/src/router.js

@@ -61,7 +61,7 @@ export function installUserRedirects(router, app, config) {
       if(!client.value.user) {
         console.log("REDIRECT TO LOGIN BECAUSE PAGE REQUIRES LOGIN!")
         router.redirectAfterSignIn = to.fullPath
-        return { name: 'user:signIn' }
+        return { name: 'user:signInEmail' }
       }
     }
     if(to?.matched.find(m => m?.meta.signedOut)) {
@@ -70,7 +70,7 @@ export function installUserRedirects(router, app, config) {
         return { name: 'user:settings' }
       }
     }
-    if(to && to.name == 'user:signIn' && from?.matched.find(m => m?.meta.saveForSignIn)) {
+    if(to && to.name === 'user:signInEmail' && from?.matched.find(m => m?.meta.saveForSignIn)) {
       console.log("SAVE FOR LOGIN", from.fullPath)
       localStorage.redirectAfterLogin = from.fullPath
     }

package/front/src/settings/Settings.vue

@@ -6,10 +6,10 @@
     </div>
 
     <div class="flex flex-column relative flex-auto">
-      <div v-if="viewType == 'simple'" class="p-5 flex flex-column flex-auto align-items-center">
+      <div v-if="viewType === 'simple'" class="p-5 flex flex-column flex-auto align-items-center">
         <router-view></router-view>
       </div>
-      <template v-if="viewType == 'wide'">
+      <template v-if="viewType === 'wide'">
         <router-view></router-view>
       </template>
     </div>
@@ -17,14 +17,15 @@
 </template>
 
 <script setup>
-import SettingsMenu from "./SettingsMenu.vue"
 
-import { computed } from 'vue'
+  import SettingsMenu from "./SettingsMenu.vue"
 
-import { useRoute } from 'vue-router'
-const route = useRoute()
+  import { computed } from 'vue'
 
-const viewType = computed(() => route.meta.viewType ?? 'simple' )
+  import { useRoute } from 'vue-router'
+  const route = useRoute()
+
+  const viewType = computed(() => route.meta.viewType ?? 'simple' )
 
 </script>
 

package/front/src/sign/GoogleAuth.vue

@@ -0,0 +1,122 @@
+<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">Google authentication</div>
+      </div>
+
+      <div v-if="state === 'canceled'" class="text-center">
+        <div>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="googleAuth" label="Try again" icon="pi pi-google" class="w-full p-button-secondary mb-1" />
+        </div>
+      </div>
+      <div v-else-if="state === 'waiting'" class="text-center">
+        Authentication will open in a new 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 { loadGoogleAuth2 } from "../utils/googleApi.js"
+  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 } from 'vue-router'
+  const router = useRouter()
+
+  const props = defineProps({
+    action: {
+      type: String,
+      default: 'signInOrSignUp'
+    }
+  })
+
+  const { action } = toRefs(props)
+  const state = ref('waiting')
+  const error = ref(null)
+
+  async function googleAuth() {
+    state.value = 'waiting'
+    const auth = await loadGoogleAuth2()
+    const googleRedirectUri = document.location.protocol + '//' + document.location.host
+      + router.resolve({ name: 'user:googleAuthReturn', params: { action: action.value } }).href
+    const response = await (auth.signIn({
+      scope: 'profile email'
+    }).catch(error => {
+      if(error.error === 'popup_blocked_by_browser') {
+        return auth.signIn({
+          scope: 'profile email',
+          ux_mode: 'redirect',
+          redirect_uri: googleRedirectUri
+        })
+      }
+      if(error.error === 'popup_closed_by_user') {
+        toast.add({ severity: 'warning', summary: 'Canceled', detail: 'You closed login window', life: 3000 })
+        state.value = 'canceled'
+        return
+      }
+      throw error
+    }))
+
+    state.value = 'working'
+    try {
+      const result = await workingZone.addPromise(`google ${action.value}`,
+        api.command(['googleAuthentication', action.value], {
+         accessToken: response.getAuthResponse().id_token
+        })
+      )
+      //console.log("GAUTH RESULT", result)
+      const { action: actionDone, user } = result
+      while(api.client.value.user !== result.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 {
+        console.error("Unknown action", actionDone)
+      }
+    } catch(error) {
+      console.error("Google auth error", error)
+      toast.add({ severity: 'error', summary: 'Error', detail: 'Error during google authentication', life: 3000 })
+      state.value = 'error'
+      error.value = error
+    }
+  }
+
+  async function back() {
+    router.go(-1)
+  }
+
+  onMounted(() => {
+    googleAuth()
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/sign/GoogleAuthReturn.vue

@@ -0,0 +1,104 @@
+<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">Google authentication</div>
+      </div>
+
+      <div v-if="state === 'canceled'" class="text-center">
+        <div>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 { loadGoogleAuth2 } from "../utils/googleApi.js"
+  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 } from 'vue-router'
+  const router = useRouter()
+
+  const props = defineProps({
+    action: {
+      type: String,
+      default: 'signInOrSignUp'
+    }
+  })
+
+  const { action } = toRefs(props)
+  const state = ref('waiting')
+  const error = ref(null)
+
+
+  onMounted(async () => {
+    const id_token = decodeURIComponent(
+      document.location.hash
+        .slice(1)
+        .split('&')
+        .map(p => p.split('='))
+        .find(a => a[0] === 'id_token')
+        [1]
+    )
+    if(!id_token) {
+      state.value = 'canceled'
+      return
+    }
+    try {
+      const result = await workingZone.addPromise(`google ${action.value}`,
+        api.command(['googleAuthentication', action.value], {
+          accessToken: id_token
+        })
+      )
+      console.log("GAUTH RESULT", result)
+      const { action: actionDone, user } = result
+      while(api.client.value.user !== result.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 {
+        console.error("Unknown action", actionDone)
+      }
+    } catch(error) {
+      console.error("Google auth error", error)
+      toast.add({ severity: 'error', summary: 'Error', detail: 'Error during google authentication', life: 3000 })
+      state.value = 'error'
+      error.value = error
+    }
+  })
+
+  async function back() {
+    router.go(-1)
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/sign/{SignIn.vue → SignInEmail.vue}

@@ -1,10 +1,11 @@
 <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">Welcome Back</div>
         <span class="text-600 font-medium line-height-3">Don't have an account?</span>
-        <router-link :to="{ name: 'user:signUp' }"
+        <router-link :to="{ name: 'user:signUpEmail' }"
                      class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">
           Create today!</router-link>
       </div>
@@ -32,7 +33,7 @@
 
         <div class="flex align-items-center justify-content-between mb-6">
           <div class="flex align-items-center">
-            <Checkbox id="rememberme" :binary="true" class="mr-2"></Checkbox>
+            <Checkbox id="rememberme" :binary="true" class="mr-2" />
             <label for="rememberme">Remember me</label>
           </div>
           <router-link :to="{ name: 'user:resetPassword' }"
@@ -43,14 +44,21 @@
 
         <Button label="Sign In" icon="pi pi-user" class="w-full" type="submit"></Button>
 
-        <Divider align="center" class="my-4">
-          <span class="text-600 font-normal text-sm">OR</span>
-        </Divider>
+      </command-form>
+
+      <Divider align="center" class="my-4">
+        <span class="text-600 font-normal text-sm">OR</span>
+      </Divider>
 
-        <Button label="Sign In with GitHub" icon="pi pi-github" class="w-full p-button-secondary mb-2"></Button>
-        <Button label="Sign In with Google" icon="pi pi-google" class="w-full p-button-secondary mb-1"></Button>
+      <!--        <Button label="Sign In with GitHub" icon="pi pi-github" class="w-full p-button-secondary mb-2" />-->
+      <router-link :to="{ name: 'user:googleAuth', params: { action: 'signInOrSignUp' } }" class="no-underline">
+        <Button
+          label="Sign In with Google"
+          icon="pi pi-google"
+          class="w-full p-button-secondary mb-1"
+        />
+      </router-link>
 
-      </command-form>
     </div>
   </div>
 </template>
@@ -72,7 +80,7 @@
 
   function handleDone({ parameters, result }) {
     console.log("DONE RESULT", result)
-    if(result.type == 'sent') {
+    if(result.type === 'sent') {
       const { authentication } = result
       router.push({
         name: 'user:sent',

package/front/src/sign/SignOut.vue

@@ -15,7 +15,9 @@
   const isMounted = ref(false)
   onMounted(() => isMounted.value = true)
 
-  import { actions } from '@live-change/vue3-ssr'
+  import { actions, useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+
   import { inject } from 'vue'
   import { useRouter } from 'vue-router'
   const router = useRouter()
@@ -27,7 +29,10 @@
   if(typeof window != 'undefined') {
     workingZone.addPromise('signOut', (async () => {
       await signOut({})
-      router.push({name: 'user:signOutFinished'})
+      while(api.client.value.user) {
+        await new Promise(resolve => setTimeout(resolve, 100))
+      }
+      router.push({ name: 'user:signOutFinished' })
     })())
   }
 </script>

package/front/src/sign/{SignUp.vue → SignUpEmail.vue}

@@ -4,7 +4,7 @@
       <div class="text-center mb-5">
         <div class="text-900 text-3xl font-medium mb-3">Sign Up</div>
         <span class="text-600 font-medium line-height-3">Already have an account?</span>
-        <router-link :to="{ name: 'user:signUp' }"
+        <router-link :to="{ name: 'user:signUpEmail' }"
                      class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">
           Sign in</router-link>
       </div>
@@ -22,18 +22,30 @@
           <small v-if="data.emailError" id="email-help" class="p-error">{{ data.emailError }}</small>
         </div>
 
-        <Button label="Sign Up with email" icon="pi pi-user" class="w-full" type="submit"></Button>
+        <Button label="Sign Up with email" icon="pi pi-user" class="w-full" type="submit" />
 
       </command-form>
+
+      <Divider align="center" class="my-4">
+        <span class="text-600 font-normal text-sm">OR</span>
+      </Divider>
+
+      <!--        <Button label="Sign In with GitHub" icon="pi pi-github" class="w-full p-button-secondary mb-2" />-->
+      <router-link :to="{ name: 'user:googleAuth', params: { action: 'signInOrSignUp' } }" class="no-underline">
+        <Button
+          label="Sign Up with Google"
+          icon="pi pi-google"
+          class="w-full p-button-secondary mb-1"
+        />
+      </router-link>
+
     </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 { useRouter } from 'vue-router'
   const router = useRouter()

package/front/src/sign/SignUpFinished.vue

@@ -97,16 +97,19 @@
     form.value.addValidator('passwordHash', () => {
       const value = form.value.getFieldValue('passwordHash')
       console.log("PASSWORDS MATCH?", secondPassword.value, value)
-      if(value != secondPassword.value) return "passwordsNotMatch"
+      if(value !== secondPassword.value) return "passwordsNotMatch"
     })
   })
 
-  const [passwordExists, emails] = await Promise.all([
+  const [passwordExists, emails, phones] = await Promise.all([
     live(path().passwordAuthentication.myUserPasswordAuthenticationExists()),
-    live(path().email.myUserEmails())
+    live(path().email?.myUserEmails()),
+    live(path().phone?.myUserPhones())
   ])
 
-  const needPassword = computed(() => (!passwordExists.value && emails.value?.length > 0))
+  const needPassword = computed(() => (!passwordExists.value
+    && (emails.value?.length > 0 || phones.value?.length > 0)
+  ))
 
   function handleDone({ parameters, result }) {
     console.log("FORM DONE", parameters, result)

package/front/src/sign/routes.js

@@ -3,20 +3,25 @@ export function routes(config = {}) {
 
   return [
 
-    route({ name: 'user:signIn', path: prefix + 'sign-in',
-      component: () => import("./SignIn.vue") }),
+    route({ name: 'user:googleAuth', path: prefix + 'google-auth/:action',
+      component: () => import("./GoogleAuth.vue"), props: true, meta: { signedOut: true } }),
+    route({ name: 'user:googleAuthReturn', path: prefix + 'google-auth-return/:action',
+      component: () => import("./GoogleAuthReturn.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',
       component: () => import("./SignInFinished.vue"), meta: { signedIn: true } }),
 
-    route({ name: 'user:signUp', path: prefix + 'sign-up',
-      component: () => import("./SignUp.vue") }),
+    route({ name: 'user:signUpEmail', path: prefix + 'sign-up-email',
+      component: () => import("./SignUpEmail.vue"), meta: { signedOut: true } }),
     route({ name: 'user:signUpFinished', path: prefix + 'sign-up-finished',
       component: () => import("./SignUpFinished.vue"), meta: { signedIn: true } }),
 
     route({ name: 'user:signOut', path: prefix + 'sign-out',
       component: () => import("./SignOut.vue") }),
     route({ name: 'user:signOutFinished', path: prefix + 'sign-out-finished',
-      component: () => import("./SignOutFinished.vue") }),
+      component: () => import("./SignOutFinished.vue"), meta: { signedOut: true } }),
 
   ]
 }

package/front/src/utils/googleApi.js

@@ -0,0 +1,50 @@
+let googPromise
+
+function loadGoogle() {
+  if(googPromise) return googPromise
+  let resolved = false
+  googPromise = new Promise((resolve, reject) => {
+    if (typeof window != 'undefined') {
+      window.googAsyncInit = function () {
+        if(resolved) return
+        resolved = true
+        resolve(gapi)
+      }
+
+      ;(function (d, s, id) {
+        const fjs = d.getElementsByTagName(s)[0]
+        if (d.getElementById(id)) return
+        const js = d.createElement(s)
+        js.id = id
+        js.src = "https://apis.google.com/js/platform.js?onload=googAsyncInit"
+        fjs.parentNode.insertBefore(js, fjs)
+      }(document, 'script', 'google-jssdk'))
+    } else {
+      reject('unavailable')
+    }
+  })
+  return googPromise
+}
+
+let googAuth2Promise
+
+async function loadGoogleAuth2() {
+  if(googAuth2Promise) return googAuth2Promise
+  let gapi = await loadGoogle()
+  let resolved = false
+  googAuth2Promise = new Promise((resolve, reject) => {
+    gapi.load('auth2', function() {
+      if(resolved) return
+      resolved = true
+      let client_id = ENV_GOOGLE_CLIENT_ID
+      resolve(gapi.auth2.init({
+        client_id
+      }))
+    })
+  })
+  return googAuth2Promise
+}
+
+
+
+export { loadGoogle, loadGoogleAuth2 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/user-frontend",
-  "version": "0.8.14",
+  "version": "0.8.15",
   "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",
@@ -17,33 +17,34 @@
     "build:client": "cd front; vite build --ssrManifest --outDir dist/client",
     "build:server": "cd front; vite build --ssr src/entry-server.js --outDir dist/server",
     "generate": "vite build --ssrManifest --outDir dist/static && yarn build:server && node prerender",
-    "debug": "node --inspect-brk server"
+    "debug": "node --inspect-brk server",
+    "describe": "node server/start.js describe"
   },
   "type": "module",
   "dependencies": {
-    "@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",
+    "@live-change/cli": "^0.8.15",
+    "@live-change/dao": "^0.8.15",
+    "@live-change/dao-vue3": "^0.8.15",
+    "@live-change/dao-websocket": "^0.8.15",
+    "@live-change/email-service": "^0.8.15",
+    "@live-change/framework": "^0.8.15",
+    "@live-change/identicon-service": "^0.8.15",
+    "@live-change/image-frontend": "^0.8.15",
+    "@live-change/message-authentication-service": "^0.8.15",
+    "@live-change/notification-service": "^0.8.15",
+    "@live-change/password-authentication-service": "^0.8.15",
+    "@live-change/pattern": "^0.8.15",
+    "@live-change/secret-code-service": "^0.8.15",
+    "@live-change/secret-link-service": "^0.8.15",
+    "@live-change/security-frontend": "^0.8.15",
+    "@live-change/security-service": "^0.8.15",
+    "@live-change/session-service": "^0.8.15",
+    "@live-change/timer-service": "^0.8.15",
+    "@live-change/upload-service": "^0.8.15",
+    "@live-change/user-identification-service": "^0.8.15",
+    "@live-change/user-service": "^0.8.15",
+    "@live-change/vue3-components": "^0.8.15",
+    "@live-change/vue3-ssr": "^0.8.15",
     "@vueuse/core": "^10.7.2",
     "codeceptjs-assert": "^0.0.5",
     "codeceptjs-video-helper": "0.1.3",
@@ -64,7 +65,7 @@
     "wtfnode": "^0.9.1"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.8.14",
+    "@live-change/codeceptjs-helper": "^0.8.15",
     "codeceptjs": "^3.5.12",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -75,5 +76,5 @@
   "author": "",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "d81b573fb8891746ae1c67f4f68558123c9f85f7"
+  "gitHead": "4897eefbf3ce9ace57630127da89503c71114563"
 }

package/server/app.config.js

@@ -2,6 +2,7 @@ import App from "@live-change/framework"
 const app = App.app()
 
 const contactTypes = ['email', 'phone']
+const remoteAccountTypes = ['google']
 
 import securityConfig from './security.config.js'
 
@@ -18,7 +19,8 @@ app.config = {
     },
     {
       name: 'user',
-      path: '@live-change/user-service'
+      path: '@live-change/user-service',
+      remoteAccountTypes
     },
     {
       name: 'email',
@@ -50,6 +52,10 @@ app.config = {
       contactTypes,
       signInWithoutPassword: true
     },
+    {
+      name: 'googleAuthentication',
+      path: '@live-change/google-authentication-service',
+    },
     {
       name: 'security',
       path: '@live-change/security-service',

package/server/services.list.js

@@ -13,6 +13,7 @@ import image from '@live-change/image-service'
 import secretCode from '@live-change/secret-code-service'
 import secretLink from '@live-change/secret-link-service'
 import messageAuthentication from '@live-change/message-authentication-service'
+import googleAuthentication from '@live-change/google-authentication-service'
 
 import backup from '@live-change/backup-service'
 import init from './init.js'
@@ -32,6 +33,7 @@ export {
   secretCode,
   secretLink,
   messageAuthentication,
+  googleAuthentication,
   localeSettings,
   backup,
   init