Create learner limit modal to notify admins when learner creation is disabled

[LianaHarris360]

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

Overview

Create a reusable modal component to inform admins when learner creation is disabled due to the picture password learner limit being reached.

Complexity: Low
Target branch: develop

Context

When picture login is enabled for a facility, there is a limit of 1300 learners who can have picture passwords assigned. Once this limit is reached, new learner accounts cannot be created. This modal provides clear feedback to admins about why learner creation is disabled and directs them to facility settings to change the sign-in method if they need to add more learners.

This modal component will be used in both the UserEditPage (when attempting to switch a coach/admin to learner role) and the UserCreate side panel (when attempting to create a new learner).

The Change

1. Create Modal Component (kolibri/plugins/facility/frontend/views/)

Create a new modal component with the following structure:

• Heading: "Learner limit reached"
• Body text: "This facility is using picture passwords, which are available only for facilities with fewer than 1300 learners. You've reached this limit. To add more learners, change the learner sign-in method in Facility settings."
• Two action buttons:
  • Primary button: "Go to facility settings" - should navigate to the facility settings page
  • Secondary button: "Close" - closes the modal

2. Add Translation String

Add two new translation strings for use in the UserCreate and UserEditPage components:

• "Learner creation is currently disabled due to reaching limit of 1300 learners."
  • Message shown to admins when they cannot create new learner accounts or switch existing users to learner role because the facility has reached the picture password learner limit.
• "Learn more."
  • Clickable button that opens a modal with additional information.

This string should be placed in a location where it can be imported by both UserEditPage and UserCreate components.

Acceptance Criteria

General

• Modal component is created in kolibri/plugins/facility/frontend/views/
• Modal heading displays "Learner limit reached"
• "facility settings" button navigates to facility settings page
• "Close" button closes the modal
• Modal emits appropriate events for parent component handling

Accessibility and i18n

• All text content uses translation strings

References

Figma

AI usage

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