Merge pull request #466 from giorgikh93/lockedV2

[v2] [desktop] Locked screen

Author: giorgikh93

package-lock.json

@@ -0,0 +1,83 @@
+import type { ThemeColors } from '@tetherto/pearpass-lib-ui-kit'
+import { rawTokens } from '@tetherto/pearpass-lib-ui-kit'
+
+export const createStyles = (colors: ThemeColors) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'stretch',
+    width: '100%',
+    minHeight: '100%',
+    boxSizing: 'border-box' as const
+  },
+  main: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    minHeight: 0,
+    maxWidth: '520px',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    padding: `${rawTokens.spacing16}px ${rawTokens.spacing24}px`,
+    textAlign: 'center' as const,
+    boxSizing: 'border-box' as const
+  },
+
+  pageHeaderWrap: {
+    marginBottom: `${rawTokens.spacing6}px`,
+    width: '100%'
+  },
+
+  description: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: `${rawTokens.spacing4}px`,
+    maxWidth: '420px'
+  },
+
+  descriptionText: {
+    fontSize: `${rawTokens.fontSize14}px`,
+    fontWeight: rawTokens.weightRegular,
+    color: colors.colorTextSecondary,
+    margin: 0
+  },
+
+  pill: {
+    display: 'flex',
+    flexDirection: 'row' as const,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    maxWidth: '440px',
+    marginTop: `${rawTokens.spacing24}px`,
+    padding: `${rawTokens.spacing10}px ${rawTokens.spacing8}px`,
+    borderRadius: `${rawTokens.spacing10}px`,
+    border: `1px solid ${colors.colorBorderPrimary}`,
+    boxSizing: 'border-box' as const
+  },
+
+  pillText: {
+    fontSize: `${rawTokens.fontSize14}px`,
+    fontWeight: rawTokens.weightMedium,
+    color: colors.colorTextSecondary
+  },
+
+  pillLeft: {
+    display: 'flex',
+    flexDirection: 'row' as const,
+    alignItems: 'center',
+    gap: `${rawTokens.spacing8}px`,
+    minWidth: 0
+  },
+
+  countdown: {
+    color: colors.colorPrimary,
+    fontVariantNumeric: 'tabular-nums' as const,
+    fontSize: `${rawTokens.fontSize14}px`,
+    fontWeight: rawTokens.weightMedium,
+    flexShrink: 0 as const
+  }
+})

src/pages/WelcomePage/LockedScreenV2/LockedScreenV2.styles.ts

@@ -0,0 +1,265 @@
+/// <reference types="@testing-library/jest-dom" />
+
+import React from 'react'
+
+import '@testing-library/jest-dom'
+import { act, render, screen, waitFor } from '@testing-library/react'
+
+import { NAVIGATION_ROUTES } from '../../../constants/navigation'
+import { LockedScreenV2 } from './LockedScreenV2'
+
+;(globalThis as { React?: typeof React }).React = React
+
+type MasterPasswordLockStatus = {
+  isLocked?: boolean
+  lockoutRemainingMs?: number
+}
+
+const mockNavigate = jest.fn()
+jest.mock('../../../context/RouterContext', () => ({
+  useRouter: () => ({ navigate: mockNavigate })
+}))
+
+jest.mock('../../../hooks/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (str: string) => str
+  })
+}))
+
+jest.mock('../../../components/OnboardingShell', () => ({
+  OnboardingShell: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="onboarding-shell-mock">{children}</div>
+  )
+}))
+
+const mockRefreshMasterPasswordStatus = jest.fn<
+  () => Promise<MasterPasswordLockStatus | undefined>
+>()
+
+jest.mock('@tetherto/pearpass-lib-vault', () => ({
+  useUserData: () => ({
+    refreshMasterPasswordStatus: mockRefreshMasterPasswordStatus
+  })
+}))
+
+jest.mock('@tetherto/pearpass-lib-ui-kit', () => {
+  const actual = jest.requireActual<
+    typeof import('@tetherto/pearpass-lib-ui-kit')
+  >('@tetherto/pearpass-lib-ui-kit')
+
+  return {
+    ...actual,
+    useTheme: () => ({
+      theme: {
+        colors: {
+          colorTextSecondary: '#BDC3AC',
+          colorBorderPrimary: '#212814',
+          colorPrimary: '#B0D944'
+        }
+      }
+    }),
+    PageHeader: ({
+      title,
+      testID
+    }: {
+      title: React.ReactNode
+      testID?: string
+    }) => <h1 data-testid={testID}>{title}</h1>
+  }
+})
+
+jest.mock('@tetherto/pearpass-lib-ui-kit/icons', () => ({
+  WatchLater: () => <span data-testid="icon-watch-later" />
+}))
+
+const mockUseCountDown = jest.fn(
+  (_opts: { initialSeconds: number; onFinish: () => void | Promise<void> }) =>
+    '00:42'
+)
+
+jest.mock('@tetherto/pear-apps-lib-ui-react-hooks', () => ({
+  useCountDown: (opts: {
+    initialSeconds: number
+    onFinish: () => void | Promise<void>
+  }) => mockUseCountDown(opts)
+}))
+
+describe('LockedScreenV2', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseCountDown.mockImplementation(() => '00:42')
+    mockRefreshMasterPasswordStatus.mockResolvedValue({
+      isLocked: true,
+      lockoutRemainingMs: 60_000
+    })
+  })
+
+  it('renders headline, description, try-again label, and shell', async () => {
+    render(<LockedScreenV2 />)
+
+    expect(screen.getByTestId('locked-screen-v2')).toBeInTheDocument()
+    expect(screen.getByTestId('onboarding-shell-mock')).toBeInTheDocument()
+    expect(screen.getByTestId('locked-screen-headline-v2').textContent).toBe(
+      'PearPass locked'
+    )
+    expect(screen.getByTestId('locked-screen-desc-line1-v2').textContent).toBe(
+      'Too many failed attempts.'
+    )
+    expect(screen.getByTestId('locked-screen-desc-line2-v2').textContent).toBe(
+      'For your security, access is temporarily locked.'
+    )
+    expect(screen.getByTestId('locked-screen-try-label-v2').textContent).toBe(
+      'Try again in'
+    )
+
+    await waitFor(() => {
+      expect(mockRefreshMasterPasswordStatus).toHaveBeenCalled()
+    })
+    await waitFor(() => {
+      expect(screen.getByTestId('locked-screen-countdown-v2')).toBeInTheDocument()
+    })
+  })
+
+  it('shows countdown placeholder until status resolves with remaining lockout', async () => {
+    let resolveStatus: (value: MasterPasswordLockStatus) => void = () => {}
+    mockRefreshMasterPasswordStatus.mockImplementation(
+      () =>
+        new Promise<MasterPasswordLockStatus | undefined>((resolve) => {
+          resolveStatus = resolve
+        })
+    )
+
+    render(<LockedScreenV2 />)
+
+    expect(
+      screen.getByTestId('locked-screen-countdown-placeholder-v2')
+    ).toBeInTheDocument()
+    expect(screen.queryByTestId('locked-screen-countdown-v2')).not.toBeInTheDocument()
+
+    act(() => {
+      resolveStatus({ isLocked: true, lockoutRemainingMs: 30_000 })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('locked-screen-countdown-v2')).toBeInTheDocument()
+    })
+  })
+
+  it('shows live countdown when lockout remaining is positive after load', async () => {
+    render(<LockedScreenV2 />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('locked-screen-countdown-v2')).toBeInTheDocument()
+    })
+    expect(screen.queryByTestId('locked-screen-countdown-placeholder-v2')).not.toBeInTheDocument()
+    expect(screen.getByTestId('locked-screen-countdown-v2').textContent).toBe(
+      '00:42'
+    )
+  })
+
+  it('passes ceil(seconds) from lockoutRemainingMs to useCountDown', async () => {
+    mockRefreshMasterPasswordStatus.mockResolvedValue({
+      isLocked: true,
+      lockoutRemainingMs: 5500
+    })
+
+    render(<LockedScreenV2 />)
+
+    await waitFor(() => {
+      expect(mockUseCountDown).toHaveBeenCalled()
+    })
+
+    expect(mockUseCountDown).toHaveBeenCalledWith(
+      expect.objectContaining({ initialSeconds: 6 })
+    )
+  })
+
+  it('refreshes status on mount', async () => {
+    render(<LockedScreenV2 />)
+
+    await waitFor(() => {
+      expect(mockRefreshMasterPasswordStatus).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('navigates to master password when countdown finishes and vault reports unlocked', async () => {
+    let onFinish: (() => void | Promise<void>) | undefined
+
+    mockUseCountDown.mockImplementation(
+      (opts: { initialSeconds: number; onFinish: () => void | Promise<void> }) => {
+        onFinish = opts.onFinish
+        return '00:01'
+      }
+    )
+
+    mockRefreshMasterPasswordStatus
+      .mockResolvedValueOnce({
+        isLocked: true,
+        lockoutRemainingMs: 1000
+      })
+      .mockResolvedValueOnce({ isLocked: false })
+
+    render(<LockedScreenV2 />)
+
+    await waitFor(() => {
+      expect(onFinish).toBeDefined()
+    })
+
+    await act(async () => {
+      await onFinish?.()
+    })
+
+    expect(mockRefreshMasterPasswordStatus).toHaveBeenCalledTimes(2)
+    expect(mockNavigate).toHaveBeenCalledWith('welcome', {
+      state: NAVIGATION_ROUTES.MASTER_PASSWORD
+    })
+  })
+
+  it('does not navigate when status is still locked after countdown callback', async () => {
+    let onFinish: (() => void | Promise<void>) | undefined
+
+    mockUseCountDown.mockImplementation(
+      (opts: { initialSeconds: number; onFinish: () => void | Promise<void> }) => {
+        onFinish = opts.onFinish
+        return '00:01'
+      }
+    )
+
+    mockRefreshMasterPasswordStatus
+      .mockResolvedValueOnce({
+        isLocked: true,
+        lockoutRemainingMs: 1000
+      })
+      .mockResolvedValueOnce({ isLocked: true })
+
+    render(<LockedScreenV2 />)
+
+    await waitFor(() => {
+      expect(onFinish).toBeDefined()
+    })
+
+    await act(async () => {
+      await onFinish?.()
+    })
+
+    expect(mockNavigate).not.toHaveBeenCalled()
+  })
+
+  it('keeps placeholder when lockout remaining rounds to zero seconds', async () => {
+    mockRefreshMasterPasswordStatus.mockResolvedValue({
+      isLocked: true,
+      lockoutRemainingMs: 0
+    })
+
+    render(<LockedScreenV2 />)
+
+    await waitFor(() => {
+      expect(mockRefreshMasterPasswordStatus).toHaveBeenCalled()
+    })
+
+    expect(
+      screen.getByTestId('locked-screen-countdown-placeholder-v2')
+    ).toBeInTheDocument()
+    expect(mockUseCountDown).not.toHaveBeenCalled()
+  })
+})