@live-change/user-frontend 0.9.203 → 0.9.205

package/e2e/signInEmailPassword.test.ts

@@ -1,11 +1,11 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import crypto from 'crypto'
 import passwordGenerator from 'generate-password'
 import { withBrowser } from './withBrowser.js'
-import { e2eSuite } from './e2eSuite.js'
 
 const app = App.app()
 const randomUserData = randomProfile.profile()
@@ -30,6 +30,7 @@ e2eSuite('signInEmailPassword', () => {
     await PasswordAuthentication.create({ id: user, user, passwordHash })
 
     await page.goto(env.url + '/user/sign-in-email', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.fill('input#email', email)
     await page.fill('input[type="password"]', password)
     await page.click('button[type=submit]')

package/e2e/signOut.test.ts

@@ -1,9 +1,9 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import { withBrowser } from './withBrowser.js'
-import { e2eSuite } from './e2eSuite.js'
 
 const app = App.app()
 const name = randomProfile.profile().firstName.toLowerCase()
@@ -20,18 +20,21 @@ e2eSuite('signOut', () => {
     await User.create({ id: user, roles: [] })
     await Email.create({ id: email, email, user })
     await page.goto(env.url + '/', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     const session = await page.evaluate(
       () => (window as unknown as { api: { client: { value: { session: string } } } }).api.client.value.session
     )
     await AuthenticatedUser.create({ id: session, user, session })
 
     await page.reload({ waitUntil: 'networkidle' })
+    await waitForHydration(page)
     const clientUser = await page.evaluate(
       () => (window as unknown as { api: { client: { value: { user: string } } } }).api.client.value.user
     )
     assert.strictEqual(user, clientUser, 'client logged in')
 
     await page.goto(env.url + '/user/sign-out', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.waitForURL('**/sign-out-finished', { timeout: 10000 })
     assert.ok(page.url().includes('/user/sign-out-finished'))
 

package/e2e/signUpEmailCode.test.ts

@@ -1,9 +1,9 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import randomProfile from 'random-profile-generator'
 import { withBrowser } from './withBrowser.js'
 import { useSecretCode } from './steps.js'
-import { e2eSuite } from './e2eSuite.js'
 
 const user = randomProfile.profile()
 ;(user as { email?: string }).email =
@@ -14,6 +14,7 @@ e2eSuite('signUpEmailCode', () => {
   test('sign up with email code', async () => {
   await withBrowser(async (page, env) => {
     await page.goto(env.url + '/user/sign-up-email', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.fill('input#email', (user as { email: string }).email)
     await page.click('button[type=submit]')
     await page.waitForURL('**/sent/*', { timeout: 10000 })
@@ -42,6 +43,8 @@ e2eSuite('signUpEmailCode', () => {
 
     if (!happyPath) {
       await page.goto(url, { waitUntil: 'networkidle' })
+      await waitForHydration(page)
+      await page.waitForURL('**/sign-up-finished', { timeout: 15000 })
       assert.ok(page.url().includes('/user/sign-up-finished'))
     }
   })

package/e2e/signUpEmailLink.test.ts

@@ -1,9 +1,9 @@
-import test from 'node:test'
+import { e2eSuite, test } from './e2eSuite.js'
+import { waitForHydration } from '@live-change/e2e-test'
 import assert from 'node:assert'
 import randomProfile from 'random-profile-generator'
 import { withBrowser } from './withBrowser.js'
 import { useSecretLink } from './steps.js'
-import { e2eSuite } from './e2eSuite.js'
 
 const user = randomProfile.profile()
 ;(user as { email?: string }).email =
@@ -14,6 +14,7 @@ e2eSuite('signUpEmailLink', () => {
   test('sign up with email link', async () => {
   await withBrowser(async (page, env) => {
     await page.goto(env.url + '/user/sign-up-email', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.fill('input#email', (user as { email: string }).email)
     await page.click('button[type=submit]')
     await page.waitForURL('**/sent/*', { timeout: 10000 })
@@ -26,7 +27,7 @@ e2eSuite('signUpEmailLink', () => {
     assert.ok(authenticationData, 'authentication created')
 
     const linkData = await useSecretLink(page, env, authentication, happyPath)
-    await page.waitForURL('**/sign-up-finished', { timeout: 10000 })
+    await page.waitForURL('**/sign-up-finished', { timeout: 30000 })
 
     assert.ok(page.url().includes('/user/sign-up-finished'))
     const clientSession = await page.evaluate(
@@ -42,6 +43,7 @@ e2eSuite('signUpEmailLink', () => {
 
     if (!happyPath) {
       await page.goto(env.url + '/user/link/' + linkData.secretCode, { waitUntil: 'networkidle' })
+      await waitForHydration(page)
       await page.getByText('Link used').waitFor({ state: 'visible' })
     }
   })

package/e2e/steps.ts

@@ -1,5 +1,14 @@
 import assert from 'node:assert'
 import type { Page } from 'playwright'
+import { waitForHydration } from '@live-change/e2e-test'
+
+/** PrimeVue Password: overlay blocks pointer clicks; set value + input so command-form validators see it. */
+export async function setPrimePasswordFieldValue(page: Page, rootSelector: string, value: string) {
+  await page.locator(`${rootSelector} input`).evaluate((el: HTMLInputElement, v: string) => {
+    el.value = v
+    el.dispatchEvent(new Event('input', { bubbles: true }))
+  }, value)
+}
 import App from '@live-change/framework'
 import randomProfile from 'random-profile-generator'
 import passwordGenerator from 'generate-password'
@@ -58,6 +67,7 @@ export async function useEmailLink(
   }
   const link = await Link.indexObjectGet('byAuthentication', authentication)
   await page.goto(env.url + prefix + link.secretCode, { waitUntil: 'networkidle' })
+  await waitForHydration(page)
   await new Promise((r) => setTimeout(r, 100))
   return { authentication, link }
 }
@@ -74,6 +84,11 @@ export async function amLoggedOut(page: Page, env: TestEnv): Promise<void> {
   await AuthenticatedUser.delete(session)
 }
 
+function newestByExpire<T extends { expire: Date }>(rows: T[]): T | undefined {
+  if (!rows?.length) return undefined
+  return [...rows].sort((a, b) => new Date(b.expire).getTime() - new Date(a.expire).getTime())[0]
+}
+
 export async function useSecretCode(
   page: Page,
   env: TestEnv,
@@ -81,11 +96,11 @@ export async function useSecretCode(
   happyPath: boolean
 ): Promise<void> {
   const Code = env.haveModel('secretCode', 'Code') as {
-    indexObjectGet: (index: string, key: unknown) => Promise<{ id: string; secretCode: string; expire: Date }>
     indexRangeGet: (index: string, key: unknown) => Promise<{ id: string; secretCode: string; expire: Date }[]>
     update: (id: string, data: { expire: Date }) => Promise<unknown>
   }
-  let codeData = await Code.indexObjectGet('byAuthentication', authentication)
+  const initialRows = await Code.indexRangeGet('byAuthentication', authentication)
+  let codeData = newestByExpire(initialRows || [])
   assert.ok(codeData, 'code created')
 
   if (!happyPath) {
@@ -108,26 +123,42 @@ export async function useSecretCode(
     await page.click('button[type=submit]')
     await page.getByRole('alert').waitFor({ state: 'visible' })
 
-    await page.click('text=Resend')
+    await page.getByTestId('message-auth-resend-code').click()
     assert.ok(page.url().includes('/sent/'))
-
-    await new Promise((r) => setTimeout(r, 200))
-    const newCodeData = await Code.indexRangeGet('byAuthentication', authentication)
-    newCodeData.sort((a, b) => new Date(b.expire).getTime() - new Date(a.expire).getTime())
+    // Resend runs async (workingZone); wait for toast so form.reset() and router.push complete before polling/submit.
+    await page.getByText(/New code sent to you|Nowy kod został|Code sent|Kod wysłany/i).first()
+      .waitFor({ state: 'visible', timeout: 20000 })
+    await sleep(300)
+
+    // resendMessageAuthentication keeps the same authentication id; new Code row appears asynchronously.
+    const oldCodeId = codeData!.id
+    let newCodeData: { id: string; secretCode: string; expire: Date }[] = []
+    const deadline = Date.now() + 12000
+    while (Date.now() < deadline) {
+      await new Promise((r) => setTimeout(r, 250))
+      newCodeData = await Code.indexRangeGet('byAuthentication', authentication)
+      const newest = newestByExpire(newCodeData)
+      if (newest && newest.id !== oldCodeId) {
+        newCodeData = [newest]
+        break
+      }
+    }
     const oldCodeData = codeData
-    codeData = newCodeData[0]
-    assert.ok(codeData, 'code exists')
+    codeData = newestByExpire(newCodeData) || newCodeData[0]
+    assert.ok(codeData, 'code exists after resend')
     assert.notStrictEqual(oldCodeData!.id, codeData!.id, 'code is different from previous code')
   }
 
-  await page.waitForFunction(() => {
-    const input = document.querySelector('input#code') as HTMLInputElement
-    if(!input) return false
-    return input.value === ''
-  })
-  await page.fill('input#code', codeData!.secretCode)
-  await page.fill('input#code', codeData!.secretCode)
-  await page.click('button[type=submit]')
+  const codeInput = page.locator('input#code')
+  await codeInput.waitFor({ state: 'visible', timeout: 15000 })
+  await sleep(200)
+  const finalSecret = codeData!.secretCode
+  await codeInput.evaluate((el: HTMLInputElement, v: string) => {
+    el.value = v
+    el.dispatchEvent(new Event('input', { bubbles: true }))
+  }, finalSecret)
+  await page.locator('input#code').click()
+  await page.getByRole('button', { name: /^ok$/i }).click({ force: true })
   await new Promise((r) => setTimeout(r, 100))
 }
 
@@ -139,25 +170,30 @@ export async function useSecretLink(
   prefix = '/user'
 ): Promise<{ secretCode: string }> {
   const Link = env.haveModel('secretLink', 'Link') as {
-    indexObjectGet: (index: string, key: unknown) => Promise<{ id: string; secretCode: string; expire: Date }>
     indexRangeGet: (index: string, key: unknown) => Promise<{ id: string; secretCode: string; expire: Date }[]>
     update: (id: string, data: { expire: Date }) => Promise<unknown>
   }
-  let linkData = await Link.indexObjectGet('byAuthentication', authentication)
+  const linkRows = await Link.indexRangeGet('byAuthentication', authentication)
+  let linkData = newestByExpire(linkRows || [])
   assert.ok(linkData, 'link created')
 
   if (!happyPath) {
     await page.goto(env.url + prefix + '/link/[badSecret]', { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.getByText('Unknown link').waitFor({ state: 'visible' })
   }
 
   if (!happyPath) {
     await new Promise((r) => setTimeout(r, 200))
-    await Link.update(linkData!.id, { expire: new Date() })
+    await Link.update(linkData!.id, { expire: new Date(Date.now() - 1000) })
     await page.goto(env.url + prefix + '/link/' + linkData!.secretCode, { waitUntil: 'networkidle' })
+    await waitForHydration(page)
     await page.getByText('Link expired').waitFor({ state: 'visible' })
 
-    await page.click('text=Resend')
+    await page.getByTestId('message-auth-resend-link').click()
+
+    await page.waitForURL('**/sent/*', { timeout: 10000 })
+
     assert.ok(page.url().includes(prefix + '/sent/'))
 
     await new Promise((r) => setTimeout(r, 200))

package/e2e/withBrowser.ts

@@ -1,19 +1,5 @@
-import { chromium } from 'playwright'
+import { createWithBrowser } from '@live-change/e2e-test'
 import { getTestEnv } from './env.js'
 import type { TestEnv } from './env.js'
-import type { Page } from 'playwright'
 
-export async function withBrowser(
-  fn: (page: Page, env: TestEnv) => Promise<void>
-): Promise<void> {
-  const env = await getTestEnv()
-  const browser = await chromium.launch({ headless: process.env.SHOW_BROWSER ? false : true })
-  const context = await browser.newContext()
-  const page = await context.newPage()
-  try {
-    await fn(page, env)
-  } finally {
-    await context.close()
-    await browser.close()
-  }
-}
+export const withBrowser = createWithBrowser<TestEnv>(getTestEnv)

package/front/src/NavBar.vue

@@ -40,7 +40,7 @@
 
     <NotificationsIcon />
 
-    <UserIcon />
+    <UserIcon :menuStyle="{ right: '5px' }" />
 
     <a v-ripple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple ml-2 hover:bg-surface-100 dark:hover:bg-surface-700 p-2"
        v-styleclass="{ selector: '.top-menu', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">

package/front/src/connected/Connected.vue

@@ -38,7 +38,8 @@
 
       <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">
+                     :to="{ name: 'user:connect-'+contactType.contactType }" class="mr-2 no-underline block mb-1"
+                     :data-testid="contactType.contactType === 'email' ? 'connect-email' : null">
           <Button v-if="contactType.contactType === 'email'"
                   :label="t('connected.addEmail')" icon="pi pi-envelope" id="connect" />
           <Button v-else-if="contactType.contactType === 'phone'"

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

@@ -20,7 +20,7 @@
       <p class="mt-0 mb-6 p-0 leading-normal">
         {{ t('messageAuth.linkExpiredDesc') }}
       </p>
-      <Button :label="t('messageAuth.resend')" class="p-button-lg" @click="resend"></Button>
+      <Button :label="t('messageAuth.resend')" class="p-button-lg" data-testid="message-auth-resend-link" @click="resend"></Button>
     </div>
 
     <div v-if="isReady || isRedirecting" 
@@ -83,7 +83,10 @@
   const authenticationState = computed(() => link?.value?.authenticationData?.state)
 
   const isUnknown = computed(() => link.value === null)
-  const isExpired = computed(() => link.value ? (now.value.toISOString() > link.value.expire) : false )
+  const isExpired = computed(() => {
+    if (!link.value?.expire) return false
+    return now.value.getTime() > new Date(link.value.expire).getTime()
+  })
   const isUsed = computed(() => authenticationState.value && authenticationState.value === 'used')
   const isReady = computed(() => !(isUnknown.value || isExpired.value || isUsed.value))  
 

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

@@ -29,13 +29,12 @@
               </Message>
             </div>
             <div class="flex flex-col">
-              <Button :label="t('common.ok')" type="submit" class="p-button-lg grow-0"
-                      :disableda="data.secret?.length < 6" />
+              <Button :label="t('common.ok')" type="submit" class="p-button-lg grow-0" />
             </div>
           </div>
           <div v-if="data.secretError === 'codeExpired'" class="mt-4 text-center">
             <p class="mt-0 mb-2 p-0 leading-normal">{{ t('messageAuth.toSendAnotherCode') }}</p>
-            <Button :label="t('messageAuth.resendSecretCode')" class="p-button-lg" @click="resend" />
+            <Button :label="t('messageAuth.resendSecretCode')" class="p-button-lg" data-testid="message-auth-resend-code" @click="resend" />
           </div>
         </command-form>
       </Secured>

package/front/src/message-auth/email/ConnectEmail.vue

@@ -51,11 +51,7 @@
 <script setup>
   import Button from "primevue/button"
 
-  const { action, contact, json } = defineProps({
-    action: {
-      type: String,
-      required: true
-    },
+  const { contact, json } = defineProps({
     contact: {
       type: String,
       required: true

package/front/src/message-auth/email/ResetPasswordEmail.vue

@@ -51,11 +51,7 @@
 <script setup>
   import Button from "primevue/button"
 
-  const { action, contact, json } = defineProps({
-    action: {
-      type: String,
-      required: true
-    },
+  const { contact, json } = defineProps({
     contact: {
       type: String,
       required: true

package/front/src/message-auth/email/SignInEmail.vue

@@ -51,11 +51,7 @@
 <script setup>
   import Button from "primevue/button"
 
-  const { action, contact, json } = defineProps({
-    action: {
-      type: String,
-      required: true
-    },
+  const { contact, json } = defineProps({
     contact: {
       type: String,
       required: true

package/front/src/message-auth/sms/ResetPasswordSms.vue

@@ -9,11 +9,7 @@
 </template>
 
 <script setup>
-  const { action, contact, json } = defineProps({
-    action: {
-      type: String,
-      required: true
-    },
+  const { contact, json } = defineProps({
     contact: {
       type: String,
       required: true

package/front/src/message-auth/sms/SignInSms.vue

@@ -9,11 +9,7 @@
 </template>
 
 <script setup>
-  const { action, contact, json } = defineProps({
-    action: {
-      type: String,
-      required: true
-    },
+  const { contact, json } = defineProps({
     contact: {
       type: String,
       required: true

package/front/src/message-auth/sms/SignUpSms.vue

@@ -9,11 +9,7 @@
 </template>
 
 <script setup>
-  const { action, contact, json } = defineProps({
-    action: {
-      type: String,
-      required: true
-    },
+  const { contact, json } = defineProps({
     contact: {
       type: String,
       required: true

package/front/src/password/ResetPasswordForm.vue

@@ -115,7 +115,9 @@
 
   const isUnknown = computed(() => authentication.value === null)
   const isExpired = computed(() =>
-      authentication.value ? (now.value.toISOString() > authentication.value.expire) : false )
+    authentication.value?.expire
+      ? now.value.getTime() > new Date(authentication.value.expire).getTime()
+      : false)
   const isUsed = computed(() => !working.value && !redirecting.value && authentication.value && authentication.value.state === 'used')
   const isReady = computed(() => !(isUnknown.value || isExpired.value || isUsed.value))  
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/user-frontend",
-  "version": "0.9.203",
+  "version": "0.9.205",
   "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",
@@ -33,33 +33,37 @@
     "debug": "tsx --inspect-brk server",
     "describe": "tsx server/start.js describe",
     "changes": "tsx server/start.js changes",
-    "e2e": "node --import tsx --test --test-concurrency=1 e2e/*.test.ts"
+    "e2e": "fnm exec -- node --import tsx e2e/runner.ts",
+    "e2e:time": "fnm exec -- node --import tsx e2e/execution-time-report.ts",
+    "e2e:time:log": "bash -c 'set -o pipefail && fnm exec -- node --import tsx e2e/execution-time-report.ts 2>&1 | tee e2e/last-e2e-time-debug.log'",
+    "e2e:file": "fnm exec -- node --import tsx e2e/runner.ts"
   },
   "type": "module",
   "dependencies": {
-    "@live-change/cli": "^0.9.203",
-    "@live-change/dao": "^0.9.203",
-    "@live-change/dao-vue3": "^0.9.203",
-    "@live-change/dao-websocket": "^0.9.203",
-    "@live-change/email-service": "^0.9.203",
-    "@live-change/framework": "^0.9.203",
-    "@live-change/identicon-service": "^0.9.203",
-    "@live-change/image-frontend": "^0.9.203",
-    "@live-change/message-authentication-service": "^0.9.203",
-    "@live-change/notification-service": "^0.9.203",
-    "@live-change/password-authentication-service": "^0.9.203",
-    "@live-change/pattern": "^0.9.203",
-    "@live-change/secret-code-service": "^0.9.203",
-    "@live-change/secret-link-service": "^0.9.203",
-    "@live-change/security-frontend": "^0.9.203",
-    "@live-change/security-service": "^0.9.203",
-    "@live-change/session-service": "^0.9.203",
-    "@live-change/timer-service": "^0.9.203",
-    "@live-change/upload-service": "^0.9.203",
-    "@live-change/user-identification-service": "^0.9.203",
-    "@live-change/user-service": "^0.9.203",
-    "@live-change/vue3-components": "^0.9.203",
-    "@live-change/vue3-ssr": "^0.9.203",
+    "@live-change/cli": "^0.9.205",
+    "@live-change/dao": "^0.9.205",
+    "@live-change/dao-vue3": "^0.9.205",
+    "@live-change/dao-websocket": "^0.9.205",
+    "@live-change/e2e-test": "^0.9.205",
+    "@live-change/email-service": "^0.9.205",
+    "@live-change/framework": "^0.9.205",
+    "@live-change/identicon-service": "^0.9.205",
+    "@live-change/image-frontend": "^0.9.205",
+    "@live-change/message-authentication-service": "^0.9.205",
+    "@live-change/notification-service": "^0.9.205",
+    "@live-change/password-authentication-service": "^0.9.205",
+    "@live-change/pattern": "^0.9.205",
+    "@live-change/secret-code-service": "^0.9.205",
+    "@live-change/secret-link-service": "^0.9.205",
+    "@live-change/security-frontend": "^0.9.205",
+    "@live-change/security-service": "^0.9.205",
+    "@live-change/session-service": "^0.9.205",
+    "@live-change/timer-service": "^0.9.205",
+    "@live-change/upload-service": "^0.9.205",
+    "@live-change/user-identification-service": "^0.9.205",
+    "@live-change/user-service": "^0.9.205",
+    "@live-change/vue3-components": "^0.9.205",
+    "@live-change/vue3-ssr": "^0.9.205",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "codeceptjs-video-helper": "0.1.3",
@@ -80,16 +84,20 @@
     "wtfnode": "^0.9.1"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.203",
+    "@live-change/codeceptjs-helper": "^0.9.205",
     "codeceptjs": "^3.7.6",
-    "generate-password": "1.7.1",
-    "playwright": "1.49.1",
+    "generate-password": "^1.7.1",
+    "playwright": "^1.49.1",
     "random-profile-generator": "^2.3.0",
+    "tsx": "^4.21.0",
     "txtgen": "^3.0.7",
     "webdriverio": "^9.5.1"
   },
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "4d4ce413fe747da2c398eb4ad378e37cc81874b3"
+  "gitHead": "ef195e51ea283e56d891b11da5d5f586691507db",
+  "engines": {
+    "node": "20.20.2"
+  }
 }