Update Facility Settings Page with "How learners sign in" section

[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 Facility Settings page with a new "How learners sign in" section, and radio options, including picture password.

Complexity: Medium
Target branch: develop

Context

The Facility Settings page currently has a section for controlling how learners log in, with options for username/password and username-only login. This work adds a new subsection and a third login option — picture password.

Until the API endpoint that sets the facility settings learner_can_login_with_picture_password and picture_password_settings have been implemented within /facility/frontend/modules/facilityConfig/actions.js, use hardcoded or stubbed local state for the selected login option so the UI can be built and reviewed independently.

The Change

1. Settings Page Reorganization

• Add a "Users" and "Resources" subheading/section to the Facility Settings page, moving the current, appropriate KCheckboxs under these new sections.
• Add a "How learners sign in" subheading/section to the Facility Settings page per the Figma designs and add the following radio options under it:
  • "Enter username and password" with a nested sub-option: "Allow learners to edit their passwords when signed in"
  • "Enter username only"
  • "Picture password" with the description: "Learners sign in by selecting a 3-picture sequence" with the nested sub-options:
    • "Child-friendly icons" (radio button)
    • "Standard icons" (radio button)
    • "Show icon names" (checkbox)

How to Get There

1. Log in as an admin
2. Navigate to Facility > Settings

Out of Scope

• Addition of info icon buttons and corresponding informational modals
• Disabling "Picture password" option when a facility has more than 1300 learners

Acceptance Criteria

General

• "How learners sign in" subheading and section are present on the Facility Settings page
• All radio options rendered correctly with correct labels and descriptions
• "Child-friendly icons", "Standard icons", and "Show icon names" are nested below the "Picture password" setting.
• All strings have been added to a new picturePasswords.js file in packages/kolibri/uiText

Accessibility and i18n

• All new UI elements are keyboard navigable

Testing

• Update facility-config-page.spec.js to include new setting options

References

• Existing facility settings view: kolibri/plugins/facility/frontend/views/FacilityConfigPage
• Figma designs

AI usage

🤖 This issue was written with AI assistance, under supervision, review and final edits by [@LianaHarris360 ] 🤖