ProfileEditForm
Component Detail
Description
An editable form component that allows users to update their contact details and account settings. Validates input client-side before submitting changes through ProfileService and meets WCAG 2.2 AA accessibility requirements including proper label associations and error announcements. Disables fields that are not editable for the current user's role.
profile-edit-form
Sources & reasoning
Profile Data & Settings is MVP per the blueprint [MVP] marker. The source doc lists peer mentor profile screens and settings as explicit Mobile App screen inventory items (lines 294, 297), and the Fase 1 MVP scope requires two mobile role profiles (line 325). The org labels system (line 310) means the profile UI must dynamically reflect per-org terminology, making this a foundational integration surface from launch.
-
docs/source/likeperson.md Ā· line 294-297Contact detail, edit, and peer mentor profile screens - Activity wizard (multi-step: contact ā date ā time ā duration ā summary) - Event wizard - Settings and preferences
-
docs/source/likeperson.md Ā· line 310Organization labels system - per-org terminology overrides fetched from backend and cached offline (currently: `contacts`, `my_contacts`, `peer_mentors`; extensible to singular forms
-
docs/source/likeperson.md Ā· line 3252 mobilrolle-profiler: Peer Mentor, Coordinator (Organization Admins logger pĆ„ som Coordinator i app-konteksten)
Responsibilities
- Render editable fields filtered by role-based access rules
- Perform client-side validation with accessible error messaging
- Submit updated profile data via ProfileService
- Reflect optimistic updates and revert on server error
- Enforce WCAG 2.2 AA requirements for form controls and focus management
Interfaces
handleSubmit(data: ProfileUpdatePayload): Promise<void>
validate(field: string, value: string): ValidationResult
onCancel(): void
Related Data Entities (1)
Data entities managed by this component