Update the UserEditPage to display the learner's picture password

[LianaHarris360]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Update the UserEditPage to display the learner's picture password for admins when editing learner accounts, and handle role switching restrictions when picture login is enabled and the facility has reached the 1300 learner limit.

Complexity: Medium
Target branch: develop

Context

When picture login is enabled for a facility:

• Admins should be able to view a learner's picture password on the edit page
• Switching a coach or admin to learner role is restricted once the facility has 1300 learners with assigned picture passwords
• The picture password should be displayed visually using the icons and style configured in the facility's picture_password_settings

The Change

Display Picture Password for Learners

Add a new read-only section to display the learner's picture password when ALL of the following conditions are met:

• Picture login is enabled for the facility (picture_password_settings is not null)
• The user being edited has the learner role
• The learner has a picture_password value assigned (not null)

The picture password display section should include:

• A label (translated): "Picture password"
• Visual display of the 3 icons in sequence using KIcon
• Text labels for each icon displayed below or beside each icon
• Icons should use either the colorful or standard style based on facilityConfig.picture_password_settings
• The entire section should be styled as read-only (non-editable)

Picture password format parsing:

• The picture_password field on the user object is a dot-separated string (e.g., "3.7.12")
• Split this string to get the picture IDs
• Use PICTURE_PASSWORD_SET constant to map IDs to icon names
• Render icons using the appropriate icon name from the constant based on the facility's style setting

Disable Learner Role Selection
When attempting to switch a coach or admin to learner role AND the learner limit is reached:

• Disable the "Learner" role option in the user type selection
• Display the translation string: "Learner creation is currently disabled due to reaching limit of 1300 learners. Learn more"
• Make "Learn more" clickable to open the modal created in Create learner limit modal to notify admins when learner creation is disabled #14420
• If the user being edited is already a learner, the learner role option should remain enabled.

Remove Reset Password option from dropdown menu on Facility > Users page

When viewing the table of all users in a facility, currently admins can select the three dots menu button and select "Reset password". When picture login is enabled for this facility, the reset password menu option should not be displayed for learner accounts.

How to Get There

To test this implementation:

1. Enable picture login for a facility with fewer than 1300 learners
2. As an admin, navigate to edit that learner - verify picture password displays correctly
3. As an admin, navigate to edit a coach account, after 1300 learner limit is reached
4. Attempt to change the coach to a learner - verify the option is disabled with message
5. Click "Learn more" and verify the modal appears
6. Navigate to edit a user who is already a learner - verify the learner option remains enabled

Acceptance Criteria

General

• Picture password section displays when all visibility conditions are met:
  - Picture login enabled
  - User being edited is learner
  - Learner has picture password assigned
• Picture password section is hidden for coaches
• Picture password section is hidden for non-learner accounts
• Picture password section is hidden when learner has no picture password
• Picture password displays correct 3 icons in sequence
• Picture password uses correct icon style based on facility settings
• Picture password displays text labels for each icon
• Picture password section is styled as read-only
• Learner role option is disabled when switching to learner AND 1300 limit is reached
• Learner role option remains enabled if user being edited is already a learner
• Disabled learner option displays the translation string with "Learn more" link
• Clicking "Learn more" opens the modal with more information

Accessibility and i18n

• Disabled learner option conveys disabled state to screen readers
• Picture password section has appropriate semantic HTML and ARIA labels
• Icon text labels are accessible to screen readers
• Keyboard navigation works correctly for all interactive elements

Testing

• Manual test: Edit learner as admin with picture password - section displays correctly
• Manual test: Edit coach/admin account - picture password section is hidden
• Manual test: Switch coach to learner under 1300 limit - succeeds
• Manual test: Switch coach to learner at 1300 limit - disabled with message
• Manual test: Edit existing learner at 1300 limit - learner option remains enabled
• Manual test: Icon style changes correctly based on facility settings

References

• kolibri/plugins/facility/frontend/views/UserEditPage.vue
• packages/kolibri/constants.js - PICTURE_PASSWORD_SET constant

AI usage

🤖 This issue was written with AI assistance, under supervision, review and final edits by human 🤖