@csntgao/uni-base 0.1.0

package/packages/web-components/tests/user-login.test.ts

@@ -0,0 +1,626 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+  USER_LOGIN_TAG,
+  UniplatUserLogin,
+  UserLoginTransportError,
+  type UserLoginErrorDetail,
+  type UserLoginTransport,
+} from '../src'
+
+async function settle(login: UniplatUserLogin): Promise<void> {
+  await Promise.resolve()
+  await login.updateComplete
+  await Promise.resolve()
+}
+
+function updateInput(login: UniplatUserLogin, selector: string, value: string): void {
+  const input = login.shadowRoot?.querySelector<HTMLInputElement>(selector)
+  if (!input) throw new Error(`Missing input: ${selector}`)
+  input.value = value
+  input.dispatchEvent(new InputEvent('input', { bubbles: true }))
+}
+
+function updateCheckbox(login: UniplatUserLogin, selector: string, checked: boolean): void {
+  const input = login.shadowRoot?.querySelector<HTMLInputElement>(selector)
+  if (!input) throw new Error(`Missing checkbox: ${selector}`)
+  input.checked = checked
+  input.dispatchEvent(new Event('change', { bubbles: true }))
+}
+
+function blur(login: UniplatUserLogin, selector: string): void {
+  const element = login.shadowRoot?.querySelector<HTMLElement>(selector)
+  if (!element) throw new Error(`Missing element: ${selector}`)
+  element.dispatchEvent(new FocusEvent('blur', { bubbles: true }))
+}
+
+function createTransport(overrides: Partial<UserLoginTransport> = {}): UserLoginTransport {
+  return {
+    sendSmsCode: vi.fn(async () => undefined),
+    login: vi.fn(async () => ({ applicationName: 'HrSaas' })),
+    ...overrides,
+  }
+}
+
+describe('<uniplat-user-login>', () => {
+  afterEach(() => {
+    document.body.replaceChildren()
+    vi.useRealTimers()
+  })
+
+  it('registers, renders the verification login form and completes a safe login flow', async () => {
+    expect(customElements.get(USER_LOGIN_TAG)).toBe(UniplatUserLogin)
+    const transport = createTransport()
+    const login = document.createElement(USER_LOGIN_TAG)
+    const loginEvents: unknown[] = []
+    const smsEvents: unknown[] = []
+    login.addEventListener('login-success', (event) => {
+      loginEvents.push((event as CustomEvent).detail)
+    })
+    login.addEventListener('sms-sent', (event) => {
+      smsEvents.push((event as CustomEvent).detail)
+    })
+    login.configure({
+      transport,
+      applicationName: 'HrSaas',
+      countdownSeconds: 60,
+      headerTitle: '登录企业工作台',
+      headerSubtitle: '手机号验证后进入企业服务平台',
+      headerIconUrl: 'https://assets.example.com/login-shield.svg',
+      securityHint: '登录凭证仅用于企业工作台认证，请勿向他人透露验证码',
+    })
+    document.body.append(login)
+    await settle(login)
+
+    expect(login.shadowRoot?.querySelector('.shell')?.getAttribute('part')).toBe('shell')
+    expect(login.shadowRoot?.querySelector('.header-title')?.textContent).toContain(
+      '登录企业工作台',
+    )
+    expect(login.shadowRoot?.querySelector('.header-subtitle')?.textContent).toContain(
+      '手机号验证后进入企业服务平台',
+    )
+    expect(login.shadowRoot?.querySelector<HTMLImageElement>('.header-icon')?.src).toBe(
+      'https://assets.example.com/login-shield.svg',
+    )
+    expect(login.shadowRoot?.querySelector('.security-footer')?.textContent).toContain(
+      '登录凭证仅用于企业工作台认证，请勿向他人透露验证码',
+    )
+    expect(login.shadowRoot?.textContent).toContain('验证码登录')
+    expect(login.shadowRoot?.querySelectorAll('[role="tab"]')).toHaveLength(3)
+    expect(
+      login.shadowRoot?.querySelector<HTMLButtonElement>('[role="tab"]:first-child')?.disabled,
+    ).toBe(true)
+    expect(
+      login.shadowRoot?.querySelector<HTMLButtonElement>('[role="tab"]:last-child')?.disabled,
+    ).toBe(true)
+    expect(login.shadowRoot?.querySelector('#uniplat-login-image-code')).toBeNull()
+    expect(login.shadowRoot?.querySelector('.captcha-image')).toBeNull()
+    expect(login.shadowRoot?.textContent).not.toContain('图形验证码')
+    expect(login.shadowRoot?.querySelector('.sms-row')).not.toBeNull()
+    expect(login.shadowRoot?.querySelector('.sms-action')).not.toBeNull()
+    expect(
+      login.shadowRoot?.querySelector('#uniplat-login-sms-code')?.getAttribute('aria-label'),
+    ).toBe('手机验证码')
+    updateInput(login, '#uniplat-login-mobile', '13800138000')
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.send-button')?.click()
+    await vi.waitFor(() => expect(transport.sendSmsCode).toHaveBeenCalledTimes(1))
+    expect(transport.sendSmsCode).toHaveBeenCalledWith({
+      mobile: '13800138000',
+    })
+    expect(smsEvents).toEqual([{}])
+
+    updateInput(login, '#uniplat-login-sms-code', '123456')
+    updateCheckbox(login, '.agreement .checkbox', true)
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.submit')?.click()
+    await vi.waitFor(() => expect(transport.login).toHaveBeenCalledTimes(1))
+    await settle(login)
+
+    expect(transport.login).toHaveBeenCalledWith({
+      mobile: '13800138000',
+      smsCode: '123456',
+      applicationName: 'HrSaas',
+    })
+    expect(loginEvents).toEqual([{ applicationName: 'HrSaas' }])
+    expect(JSON.stringify(loginEvents)).not.toContain('13800138000')
+    expect(login.shadowRoot?.innerHTML).not.toContain('HrSaas')
+    expect(login.shadowRoot?.textContent).toContain('登录成功')
+  })
+
+  it('does not call a legacy image-captcha provider', async () => {
+    const createCaptcha = vi.fn(async () => ({
+      seed: 'legacy-seed',
+      imageUrl: 'https://api.example.com/general/imageToVerify/legacy-seed',
+    }))
+    const login = document.createElement(USER_LOGIN_TAG)
+    login.configure({
+      transport: createTransport({ createCaptcha }),
+      applicationName: 'HrSaas',
+    })
+    document.body.append(login)
+    await settle(login)
+
+    expect(createCaptcha).not.toHaveBeenCalled()
+    expect(login.shadowRoot?.textContent).not.toContain('图形验证码')
+    expect(login.shadowRoot?.innerHTML).not.toContain('legacy-seed')
+  })
+
+  it('renders prototype field and agreement validation errors beside their controls', async () => {
+    const login = document.createElement(USER_LOGIN_TAG)
+    login.configure({ transport: createTransport(), applicationName: 'HrSaas' })
+    document.body.append(login)
+    await settle(login)
+
+    updateInput(login, '#uniplat-login-mobile', '1380013')
+    updateInput(login, '#uniplat-login-sms-code', '12093')
+    blur(login, '#uniplat-login-mobile')
+    blur(login, '#uniplat-login-sms-code')
+    blur(login, '.agreement .checkbox')
+    await settle(login)
+
+    expect(login.shadowRoot?.textContent).toContain('请输入正确的 11 位手机号')
+    expect(login.shadowRoot?.textContent).toContain('请输入正确的手机验证码')
+    expect(login.shadowRoot?.textContent).toContain('请先阅读并同意服务协议')
+    expect(
+      login.shadowRoot?.querySelector('#uniplat-login-mobile')?.getAttribute('aria-invalid'),
+    ).toBe('true')
+    expect(
+      login.shadowRoot?.querySelector('#uniplat-login-sms-code')?.getAttribute('aria-invalid'),
+    ).toBe('true')
+    expect(
+      login.shadowRoot?.querySelector('.agreement .checkbox')?.getAttribute('aria-invalid'),
+    ).toBe('true')
+    expect(login.shadowRoot?.querySelector('.agreement .checkbox.error')).not.toBeNull()
+    expect(login.shadowRoot?.querySelector<HTMLButtonElement>('.submit')?.disabled).toBe(true)
+    expect(login.shadowRoot?.querySelector<HTMLButtonElement>('.send-button')?.disabled).toBe(true)
+    expect(login.shadowRoot?.querySelector('.helper')).toBeNull()
+  })
+
+  it('places a stable expired-code error below the SMS field without exposing backend text', async () => {
+    const login = document.createElement(USER_LOGIN_TAG)
+    const errors: UserLoginErrorDetail[] = []
+    login.addEventListener('error', (event) => {
+      errors.push((event as unknown as CustomEvent<UserLoginErrorDetail>).detail)
+    })
+    login.configure({
+      transport: createTransport({
+        login: vi.fn(async () => {
+          throw new UserLoginTransportError('SMS_CODE_INVALID_OR_EXPIRED')
+        }),
+      }),
+      applicationName: 'HrSaas',
+      initiallyAgreed: true,
+    })
+    document.body.append(login)
+    await settle(login)
+
+    updateInput(login, '#uniplat-login-mobile', '13800138000')
+    updateInput(login, '#uniplat-login-sms-code', '120933')
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.submit')?.click()
+    await vi.waitFor(() => expect(errors).toHaveLength(1))
+    await settle(login)
+
+    expect(login.shadowRoot?.textContent).toContain('验证码错误或已失效，请重新获取')
+    expect(
+      login.shadowRoot?.querySelector('#uniplat-login-sms-code')?.getAttribute('aria-invalid'),
+    ).toBe('true')
+    expect(login.shadowRoot?.querySelector<HTMLButtonElement>('.send-button')).not.toBeNull()
+    expect(login.shadowRoot?.querySelector<HTMLButtonElement>('.send-button')?.disabled).toBe(false)
+    expect(login.shadowRoot?.querySelector('.helper')).toBeNull()
+    expect(errors).toEqual([
+      {
+        code: 'SMS_CODE_INVALID_OR_EXPIRED',
+        message: '验证码错误或已失效，请重新获取',
+        recoverable: true,
+      },
+    ])
+  })
+
+  it('requires the Host to provide a non-empty applicationName', () => {
+    const login = document.createElement(USER_LOGIN_TAG)
+
+    expect(() => login.configure({ transport: createTransport(), applicationName: '   ' })).toThrow(
+      TypeError,
+    )
+  })
+
+  it('updates Host-provided header and security content when reconfigured', async () => {
+    const transport = createTransport()
+    const login = document.createElement(USER_LOGIN_TAG)
+    login.configure({
+      transport,
+      applicationName: 'HrSaas',
+      headerTitle: '登录企业工作台',
+      headerSubtitle: '原副标题',
+      headerIconUrl: 'https://assets.example.com/original.svg',
+      securityHint: '原安全提示',
+    })
+    document.body.append(login)
+    await settle(login)
+
+    login.configure({
+      transport,
+      applicationName: 'NewWorkspace',
+      headerTitle: '登录新的工作台',
+      securityHint: '新的安全提示',
+    })
+    await settle(login)
+
+    expect(login.shadowRoot?.querySelector('.header-title')?.textContent).toContain(
+      '登录新的工作台',
+    )
+    expect(login.shadowRoot?.querySelector('.header-subtitle')).toBeNull()
+    expect(login.shadowRoot?.querySelector('.header-icon')).toBeNull()
+    expect(login.shadowRoot?.querySelector('.security-footer')?.textContent).toContain(
+      '新的安全提示',
+    )
+    expect(login.shadowRoot?.textContent).not.toContain('原安全提示')
+  })
+
+  it('rejects a Host icon URL carrying authentication parameters', () => {
+    const login = document.createElement(USER_LOGIN_TAG)
+
+    expect(() =>
+      login.configure({
+        transport: createTransport(),
+        applicationName: 'HrSaas',
+        headerIconUrl: 'https://assets.example.com/login.svg?token=secret',
+      }),
+    ).toThrow(TypeError)
+  })
+
+  it('maps transport failures to stable errors without exposing the original exception', async () => {
+    const sensitiveText = 'backend stack with jwt=should-never-render'
+    const transport = createTransport({
+      login: vi.fn(async () => {
+        throw new Error(sensitiveText)
+      }),
+    })
+    const login = document.createElement(USER_LOGIN_TAG)
+    const errors: UserLoginErrorDetail[] = []
+    login.addEventListener('error', (event) => {
+      errors.push((event as unknown as CustomEvent<UserLoginErrorDetail>).detail)
+    })
+    login.configure({ transport, applicationName: 'HrSaas', initiallyAgreed: true })
+    document.body.append(login)
+    await settle(login)
+
+    updateInput(login, '#uniplat-login-mobile', '13800138000')
+    updateInput(login, '#uniplat-login-sms-code', '123456')
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.submit')?.click()
+    await vi.waitFor(() => expect(errors).toHaveLength(1))
+    await settle(login)
+
+    expect(errors).toEqual([
+      {
+        code: 'LOGIN_FAILED',
+        message: '登录失败，请检查手机验证码后重试。',
+        recoverable: true,
+      },
+    ])
+    expect(login.shadowRoot?.innerHTML).not.toContain(sensitiveText)
+    expect(JSON.stringify(errors)).not.toContain(sensitiveText)
+  })
+
+  it('renders a safe application access denial message supplied by the transport', async () => {
+    const transport = createTransport({
+      login: vi.fn(async () => {
+        throw new UserLoginTransportError('ORG_ACCESS_DENIED', '当前用户没有可用的平台设置应用实例')
+      }),
+    })
+    const login = document.createElement(USER_LOGIN_TAG)
+    const errors: UserLoginErrorDetail[] = []
+    login.addEventListener('error', (event) => {
+      errors.push((event as unknown as CustomEvent<UserLoginErrorDetail>).detail)
+    })
+    login.configure({
+      transport,
+      applicationName: 'qqxb-plat-admin',
+      initiallyAgreed: true,
+    })
+    document.body.append(login)
+    await settle(login)
+
+    updateInput(login, '#uniplat-login-mobile', '13800138000')
+    updateInput(login, '#uniplat-login-sms-code', '123456')
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.submit')?.click()
+    await vi.waitFor(() => expect(errors).toHaveLength(1))
+    await settle(login)
+
+    const message = '当前用户没有可用的平台设置应用实例'
+    expect(errors).toEqual([
+      {
+        code: 'ORG_ACCESS_DENIED',
+        message,
+        recoverable: false,
+      },
+    ])
+    expect(login.shadowRoot?.textContent).toContain(message)
+  })
+
+  it('clears the SMS countdown timer when removed', async () => {
+    vi.useFakeTimers()
+    const transport = createTransport()
+    const login = document.createElement(USER_LOGIN_TAG)
+    login.configure({ transport, applicationName: 'HrSaas', countdownSeconds: 60 })
+    document.body.append(login)
+    await settle(login)
+
+    updateInput(login, '#uniplat-login-mobile', '13800138000')
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.send-button')?.click()
+    await settle(login)
+    expect(vi.getTimerCount()).toBe(1)
+
+    login.remove()
+    expect(vi.getTimerCount()).toBe(0)
+  })
+
+  it('renders the registration-success transition and requests onboarding after two seconds', async () => {
+    vi.useFakeTimers()
+    const login = document.createElement(USER_LOGIN_TAG)
+    const loginEvents: unknown[] = []
+    const onboardingEvents: unknown[] = []
+    login.addEventListener('login-success', (event) => {
+      loginEvents.push((event as CustomEvent).detail)
+    })
+    login.addEventListener('onboarding-requested', (event) => {
+      onboardingEvents.push((event as CustomEvent).detail)
+    })
+    login.configure({
+      transport: createTransport({
+        login: vi.fn(async () => ({ applicationName: 'HrSaas', isNewUser: true })),
+      }),
+      applicationName: 'HrSaas',
+      initiallyAgreed: true,
+    })
+    document.body.append(login)
+    await settle(login)
+
+    updateInput(login, '#uniplat-login-mobile', '13800138000')
+    updateInput(login, '#uniplat-login-sms-code', '123456')
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.submit')?.click()
+    await settle(login)
+
+    expect(loginEvents).toEqual([{ applicationName: 'HrSaas', isNewUser: true }])
+    expect(login.shadowRoot?.querySelector('[role="tablist"]')).toBeNull()
+    expect(login.shadowRoot?.textContent).toContain('注册成功，欢迎加入亲亲企服')
+    expect(login.shadowRoot?.textContent).toContain('接下来创建你的团队 / 企业，即可开始办理业务')
+    expect(login.shadowRoot?.textContent).toContain('2 秒后自动进入入驻引导')
+    expect(login.shadowRoot?.textContent).toContain('立即开始')
+    expect(vi.getTimerCount()).toBe(1)
+
+    await vi.advanceTimersByTimeAsync(1_999)
+    expect(onboardingEvents).toEqual([])
+    await vi.advanceTimersByTimeAsync(1)
+    await settle(login)
+    expect(onboardingEvents).toEqual([{ applicationName: 'HrSaas', trigger: 'automatic' }])
+    expect(vi.getTimerCount()).toBe(0)
+  })
+
+  it('starts onboarding immediately without leaving a duplicate automatic timer', async () => {
+    vi.useFakeTimers()
+    const login = document.createElement(USER_LOGIN_TAG)
+    const onboardingEvents: unknown[] = []
+    login.addEventListener('onboarding-requested', (event) => {
+      onboardingEvents.push((event as CustomEvent).detail)
+    })
+    login.configure({
+      transport: createTransport({
+        login: vi.fn(async () => ({ applicationName: 'HrSaas', isNewUser: true })),
+      }),
+      applicationName: 'HrSaas',
+      initiallyAgreed: true,
+    })
+    document.body.append(login)
+    await settle(login)
+
+    updateInput(login, '#uniplat-login-mobile', '13800138000')
+    updateInput(login, '#uniplat-login-sms-code', '123456')
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.submit')?.click()
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.onboarding-button')?.click()
+
+    expect(onboardingEvents).toEqual([{ applicationName: 'HrSaas', trigger: 'manual' }])
+    expect(vi.getTimerCount()).toBe(0)
+    await vi.advanceTimersByTimeAsync(2_000)
+    expect(onboardingEvents).toHaveLength(1)
+  })
+
+  it('clears the automatic onboarding timer when removed', async () => {
+    vi.useFakeTimers()
+    const login = document.createElement(USER_LOGIN_TAG)
+    const onboardingEvents: unknown[] = []
+    login.addEventListener('onboarding-requested', (event) => {
+      onboardingEvents.push((event as CustomEvent).detail)
+    })
+    login.configure({
+      transport: createTransport({
+        login: vi.fn(async () => ({ applicationName: 'HrSaas', isNewUser: true })),
+      }),
+      applicationName: 'HrSaas',
+      initiallyAgreed: true,
+    })
+    document.body.append(login)
+    await settle(login)
+
+    updateInput(login, '#uniplat-login-mobile', '13800138000')
+    updateInput(login, '#uniplat-login-sms-code', '123456')
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.submit')?.click()
+    await settle(login)
+    expect(vi.getTimerCount()).toBe(1)
+
+    login.remove()
+    expect(vi.getTimerCount()).toBe(0)
+    await vi.advanceTimersByTimeAsync(2_000)
+    expect(onboardingEvents).toEqual([])
+  })
+
+  it('supports an injected password login without exposing credentials in events', async () => {
+    const loginWithPassword = vi.fn(async () => ({ applicationName: 'HrSaas' }))
+    const transport = createTransport({ loginWithPassword })
+    const login = document.createElement(USER_LOGIN_TAG)
+    const loginEvents: unknown[] = []
+    login.addEventListener('login-success', (event) => {
+      loginEvents.push((event as CustomEvent).detail)
+    })
+    login.configure({ transport, applicationName: 'HrSaas', initialMethod: 'password' })
+    document.body.append(login)
+    await settle(login)
+
+    expect(
+      login.shadowRoot?.querySelector<HTMLButtonElement>('[role="tab"][aria-selected="true"]')
+        ?.textContent,
+    ).toContain('密码登录')
+    updateInput(login, '#uniplat-login-mobile', '13800138000')
+    updateInput(login, '#uniplat-login-password', 'safe-test-password')
+    const passwordInput =
+      login.shadowRoot?.querySelector<HTMLInputElement>('#uniplat-login-password')
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.submit')?.click()
+    await vi.waitFor(() => expect(loginWithPassword).toHaveBeenCalledTimes(1))
+    await settle(login)
+
+    expect(loginWithPassword).toHaveBeenCalledWith({
+      mobile: '13800138000',
+      password: 'safe-test-password',
+      applicationName: 'HrSaas',
+      rememberSession: true,
+    })
+    expect(loginEvents).toEqual([{ applicationName: 'HrSaas' }])
+    expect(JSON.stringify(loginEvents)).not.toContain('13800138000')
+    expect(JSON.stringify(loginEvents)).not.toContain('safe-test-password')
+    expect(login.shadowRoot?.innerHTML).not.toContain('safe-test-password')
+    login.remove()
+    expect(passwordInput?.value).toBe('')
+  })
+
+  it('keeps QR status in one panel and clears polling after confirmation', async () => {
+    vi.useFakeTimers()
+    const createQrChallenge = vi.fn(async () => ({
+      challengeId: 'obviously-fake-qr-challenge',
+      imageUrl:
+        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="120" height="120"%3E%3Crect width="120" height="120"/%3E%3C/svg%3E',
+      pollIntervalMs: 750,
+    }))
+    const pollQrChallenge = vi
+      .fn()
+      .mockResolvedValueOnce({ status: 'scanned' })
+      .mockResolvedValueOnce({
+        status: 'confirmed',
+        result: { applicationName: 'HrSaas' },
+      })
+    const transport = createTransport({ createQrChallenge, pollQrChallenge })
+    const login = document.createElement(USER_LOGIN_TAG)
+    const loginEvents: unknown[] = []
+    login.addEventListener('login-success', (event) => {
+      loginEvents.push((event as CustomEvent).detail)
+    })
+    login.configure({
+      transport,
+      applicationName: 'HrSaas',
+      initialMethod: 'qr-code',
+      qrPollIntervalMs: 500,
+    })
+    document.body.append(login)
+    await settle(login)
+
+    expect(createQrChallenge).toHaveBeenCalledWith({ applicationName: 'HrSaas' })
+    expect(login.shadowRoot?.querySelector<HTMLImageElement>('.qr-image')?.src).toContain(
+      'data:image/svg+xml',
+    )
+    expect(login.shadowRoot?.textContent).toContain('请使用微信扫描小程序码登录')
+    expect(login.shadowRoot?.textContent).toContain('未登录时先完成登录')
+    expect(login.shadowRoot?.textContent).toContain('电脑端同步登录')
+    expect(vi.getTimerCount()).toBe(1)
+    expect(login.shadowRoot?.innerHTML).not.toContain('obviously-fake-qr-challenge')
+
+    await vi.advanceTimersByTimeAsync(500)
+    expect(pollQrChallenge).not.toHaveBeenCalled()
+    await vi.advanceTimersByTimeAsync(250)
+    await settle(login)
+    expect(login.shadowRoot?.textContent).toContain('扫码成功，请在手机上确认')
+    expect(vi.getTimerCount()).toBe(1)
+    expect(pollQrChallenge).toHaveBeenCalledWith('obviously-fake-qr-challenge', 'HrSaas')
+
+    await vi.advanceTimersByTimeAsync(750)
+    await settle(login)
+    expect(loginEvents).toEqual([{ applicationName: 'HrSaas' }])
+    expect(JSON.stringify(loginEvents)).not.toContain('obviously-fake-qr-challenge')
+    expect(vi.getTimerCount()).toBe(0)
+  })
+
+  it('stops polling and offers a refresh after QR login is rejected', async () => {
+    vi.useFakeTimers()
+    const transport = createTransport({
+      createQrChallenge: vi.fn(async () => ({
+        challengeId: 'obviously-fake-rejected-challenge',
+        imageUrl: 'data:image/png;base64,b2J2aW91c2x5LWZha2UtcG5n',
+        pollIntervalMs: 500,
+      })),
+      pollQrChallenge: vi.fn(async () => ({ status: 'rejected' as const })),
+    })
+    const errors: UserLoginErrorDetail[] = []
+    const login = document.createElement(USER_LOGIN_TAG)
+    login.addEventListener('error', (event) => {
+      errors.push((event as unknown as CustomEvent<UserLoginErrorDetail>).detail)
+    })
+    login.configure({ transport, applicationName: 'HrSaas', initialMethod: 'qr-code' })
+    document.body.append(login)
+    await settle(login)
+
+    await vi.advanceTimersByTimeAsync(500)
+    await settle(login)
+
+    expect(login.shadowRoot?.textContent).toContain('登录已取消')
+    expect(login.shadowRoot?.textContent).toContain('已在手机上取消登录，请点击刷新。')
+    expect(vi.getTimerCount()).toBe(0)
+    expect(errors).toEqual([
+      {
+        code: 'QR_LOGIN_REJECTED',
+        message: '已在手机上取消登录，请点击刷新。',
+        recoverable: true,
+      },
+    ])
+  })
+
+  it('maps a locked password account to a stable safe component error', async () => {
+    const transport = createTransport({
+      loginWithPassword: vi.fn(async () => {
+        throw new UserLoginTransportError('ACCOUNT_LOCKED')
+      }),
+    })
+    const errors: UserLoginErrorDetail[] = []
+    const login = document.createElement(USER_LOGIN_TAG)
+    login.addEventListener('error', (event) => {
+      errors.push((event as unknown as CustomEvent<UserLoginErrorDetail>).detail)
+    })
+    login.configure({ transport, applicationName: 'HrSaas', initialMethod: 'password' })
+    document.body.append(login)
+    await settle(login)
+
+    updateInput(login, '#uniplat-login-mobile', '13800138000')
+    updateInput(login, '#uniplat-login-password', 'safe-test-password')
+    await settle(login)
+    login.shadowRoot?.querySelector<HTMLButtonElement>('.submit')?.click()
+    await vi.waitFor(() => expect(errors).toHaveLength(1))
+    await settle(login)
+
+    expect(errors).toEqual([
+      {
+        code: 'ACCOUNT_LOCKED',
+        message: '账号暂时锁定，请稍后重试。',
+        recoverable: false,
+      },
+    ])
+    expect(login.shadowRoot?.innerHTML).not.toContain('safe-test-password')
+  })
+})