INJIWEB-1681 Added the user profile and name to avoid confusion in passcode screen

[iamlokanath]

Changes Made:

1. PasscodePage.tsx — Updated to:
   Get user information from the useUser hook
   Pass the user object to PasscodePageTemplate
2. PasscodePageTemplate.tsx — Updated to:
   Accept an optional user prop
   Display user profile picture (or initials if no picture)
   Display user name in PascalCase
   Show the profile above the title
3. PasscodePageTemplateStyles.ts — Added styles for:
   User profile container
   Profile picture (circular with border)
   Profile initials fallback
   User name text styling
4. Container: Changed overflow-y-hidden to overflow-y-auto to enable vertical scrolling

Demo Video : https://github.com/user-attachments/assets/ee2606fb-4e3d-4a8a-8c36-f3abf661953c

Summary by CodeRabbit

• New Features

  • User profile shown on the passcode page (picture or initials and display name).
  • Wallet management improved with additional lock states and clearer unlock/create flows.

• Bug Fixes

  • Improved error handling and messaging for wallet operations, including network fallbacks.

• Style

  • Passcode page layout updated for better vertical scrolling and spacing.

• Tests

  • Added tests for profile display; removed one outdated passcode-clear test.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds optional user profile rendering to the PasscodePage template and extends PasscodePage with wallet state, multi-status handling, and improved error flows; the useUser hook now returns user data consumed by the template. (50 words)

Changes

Cohort / File(s)	Summary
Passcode Page Template inji-web/src/components/PageTemplate/PasscodePage/PasscodePageTemplate.tsx	Added optional `user?: User
Template Styles inji-web/src/components/PageTemplate/PasscodePage/PasscodePageTemplateStyles.ts	Added style tokens for user profile (userProfileContainer, userProfilePictureContainer, userProfilePicture, userProfileInitials, userProfileName); updated overlay, container, and contentWrapper for vertical scrolling and modal sizing.
Passcode Page Logic inji-web/src/pages/User/Passcode/PasscodePage.tsx	Introduced wallets state and fetch logic; added wallet statuses (PERMANENTLY_LOCKED, LAST_ATTEMPT_BEFORE_LOCKOUT), enhanced error handling and UI state (test IDs, disabling unlock, reset passcodes); pass user from useUser into PasscodePageTemplate.
Hook signature change src/hooks/User/useUser.ts (referenced)	useUser now returns { saveWalletId, user } instead of only saveWalletId.
Tests inji-web/src/__tests__/components/PageTemplate/PasscodePageTemplate.test.tsx, inji-web/src/__tests__/pages/User/PasscodePage.test.tsx	Added tests verifying profile image and initials rendering; removed one test that asserted clearing inputs on wrong unlock passcode.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant P as PasscodePage (UI)
    participant A as Wallet API
    participant H as useUser Hook
    participant T as PasscodePageTemplate

    U->>P: Enter passcode / submit
    P->>A: call unlockWallet/createWallet (passcode, walletPin)
    activate A
    A-->>P: reply (success or status/error)
    deactivate A

    alt unlock/create success
        P->>H: request user & saveWalletId
        H-->>P: returns user + saveWalletId
        P->>T: render with user prop
        T-->>U: display profile (picture or initials + name)
    else wallet status (PERMANENTLY_LOCKED / LAST_ATTEMPT...)
        P->>P: set status UI (disable unlock, show messages)
        P->>P: reset passcode inputs as needed
    else network / HTTP error
        P->>P: handleCommonErrors -> set error state and feedback
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• [INJIWEB-1560] - Update Submit Button Enable logic #479: Overlaps with passcode validation, unlock/create wallet flows, and related UI/test changes in PasscodePage.tsx.

Suggested reviewers

• jackjain

Poem

🐇 I nibble code and hop with delight,
A picture, initials, a name in sight.
Wallets now whisper their lockout decree,
Errors and status guide users to be free.
Hooray — a small rabbit cheer for UI bright!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: adding user profile and name display to the passcode screen to prevent confusion.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@inji-web/src/components/PageTemplate/PasscodePage/PasscodePageTemplate.tsx`:
- Around line 42-65: Update the accessible labeling for the profile
picture/initials in PasscodePageTemplate: for the <img> element (class
userProfilePicture) set a descriptive alt that includes the user's displayName
(e.g., "<displayName>’s profile picture") with a safe fallback when displayName
is missing, and for the initials container (class userProfileInitials) add
role="img" and an aria-label that likewise contains the user's name (or a
fallback like "User profile") so screen readers announce the initials as the
user's profile image; ensure conversions/usage rely on
convertStringIntoPascalCase(user.displayName) or a safe null/empty check to
build the labels.

[jackjain]

@iamlokanath please address coderabbit comments and unit test failures

@sanchi-singh24 please confirm on the UI design for the enhancement.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud