Listen for login event before calling postSubmit

frontend/controller/actions/identity.js

@@ -9,7 +9,7 @@ import { difference, omit, pickWhere, uniq } from '@model/contracts/shared/giLod
 import sbp from '@sbp/sbp'
 import { imageUpload } from '@utils/image.js'
 import { SETTING_CURRENT_USER } from '~/frontend/model/database.js'
-import { LOGIN, LOGOUT } from '~/frontend/utils/events.js'
+import { LOGIN, LOGIN_ERROR, LOGOUT } from '~/frontend/utils/events.js'
 import { GIMessage } from '~/shared/domains/chelonia/GIMessage.js'
 import { boxKeyPair, buildRegisterSaltRequest, computeCAndHc, decryptContractSalt, hash, hashPassword, randomNonce } from '~/shared/zkpp.js'
 import { findKeyIdByName } from '~/shared/domains/chelonia/utils.js'
@@ -455,6 +455,7 @@ export default (sbp('sbp/selectors/register', {
 
         sbp('okTurtles.events/emit', LOGIN, { username, identityContractID })
       }).catch((err) => {
+        sbp('okTurtles.events/emit', LOGIN_ERROR, { username, identityContractID, error: err })
         const errMessage = err?.message || String(err)
         console.error('Error during login contract sync', errMessage)
 

frontend/utils/events.js

@@ -6,6 +6,7 @@
 //       This file is primarily for frontend UI related events.
 
 export const LOGIN = 'login'
+export const LOGIN_ERROR = 'login-error'
 export const LOGOUT = 'logout'
 
 export const REPLACED_STATE = 'replaced-state'

frontend/views/containers/access/LoginForm.vue

@@ -32,6 +32,7 @@ import sbp from '@sbp/sbp'
 import { validationMixin } from 'vuelidate'
 import { required } from 'vuelidate/lib/validators'
 import { L } from '@common/common.js'
+import { LOGIN, LOGIN_ERROR } from '~/frontend/utils/events.js'
 import BannerScoped from '@components/banners/BannerScoped.vue'
 import ButtonSubmit from '@components/ButtonSubmit.vue'
 import PasswordForm from '@containers/access/PasswordForm.vue'
@@ -85,14 +86,35 @@ export default ({
       try {
         this.$refs.formMsg.clean()
 
+        const username = this.form.username
+
+        // 'gi.actions/identity/login' syncs the identity contract without
+        // awaiting on it, which can cause issues because this.postSubmit()
+        // can get called before the state for the identity contract is complete.
+        // To avoid these issues, we set up an event handler (on LOGIN) to call
+        // this.postSubmit() once the identity contract has finished syncing
+        // If an error occurred during login, we set up an event handler (on
+        // LOGIN_ERROR) to remove the login event handler.
+        const loginEventHandler = async ({ username: user }) => {
+          if (user !== username) return
+          sbp('okTurtles.events/off', LOGIN_ERROR, loginErrorEventHandler)
+          await this.postSubmit()
+          this.$emit('submit-succeeded')
+
+          requestNotificationPermission()
+        }
+        const loginErrorEventHandler = ({ username: user, error }) => {
+          if (user !== username) return
+          sbp('okTurtles.events/off', LOGIN, loginEventHandler)
+          this.$refs.formMsg.danger(error.message)
+        }
+        sbp('okTurtles.events/once', LOGIN, loginEventHandler)
+        sbp('okTurtles.events/once', LOGIN_ERROR, loginErrorEventHandler)
+
         await sbp('gi.actions/identity/login', {
-          username: this.form.username,
+          username,
           passwordFn: wrapValueInFunction(this.form.password)
         })
-        await this.postSubmit()
-        this.$emit('submit-succeeded')
-
-        requestNotificationPermission()
       } catch (e) {
         console.error('FormLogin.vue login() error:', e)
         this.$refs.formMsg.danger(e.message)