User Management › Staff › Khamla Sisavath
🎬 Simulate:
← Back to Back-office Users
KS

Khamla Sisavath

Instructor Active
Edit Profile
Account information

khamla.s@dtve.edu.la

+856 20 5555 1234

Vientiane TVET College

Active

Professional information

Senior Lecturer, Electrical Engineering

15 years of teaching experience in electrical installation and renewable energy systems at Vientiane TVET College.

https://khamla.dtve.edu.la

https://linkedin.com/in/khamla-s

https://x.com/khamla_tvet

https://facebook.com/khamla.sisavath

📝 Spec notes — UC-IDP.14 / SCR-IDP.27 (fields, actions, requirements)
Identity
  • Screen: SCR-IDP.27 — Staff Profile — Admin View
  • Use case: UC-IDP.14 — Manage Staff Profile
Brief description

A detailed profile page for back-office users, viewed by the Super Administrator only (Program Administrator has no access to this page — see UC-IDP.13 / SCR-IDP.31 for their institute membership management instead). Operates in two modes on the same page. View mode — profile header (photo/avatar, name, user-type badge, status badge, Edit Profile button); Instructor: Account information (email, phone, institution, account status) + Professional information (headline, bio, social links); all other staff types (Program Administrator, Super Administrator, Central Course Approver, Tag Administrator, Sale Administrator): Account information only (no institution). Edit mode — photo upload card (Instructor only), Account information (first name, last name, email, phone, account status dropdown — all types), Instructor information (professional title, affiliated organisation, biography WYSIWYG, social links — Instructor users only; other staff types have no additional fields).

Fields
  • display_photo / edit_photo "Profile Photo" — file · InstructorProfile.photo · visible when user_type == instructor · JPEG/PNG max 2 MB · read-only in view (avatar); editable via 📷 button in edit mode
  • display_fullname "Full Name" — composite (User.firstname + User.lastname) · always visible · read-only in view; split into First Name / Last Name in edit form
  • display_status "Account Status" — enum [Active, Suspended] · AuthIdentity.status · always visible · read-only (shown as badge in view; dropdown in edit)
  • view_mobile / mobile "Phone number" — phone · max 20 · User.mobile (shared across all types) · optional · read-only in view
  • view_institution "Institution" — text · InstructorProfile.affiliation · visible when view mode && user_type == instructor · read-only
  • email "Email" — format email · max 255 · required in edit · read-only in view · uniqueness check on change (SS-IDP.03)
  • account_status / edit_status "Account status" — enum [active, suspended] · AuthIdentity.status · required in edit · fallback: active
  • edit_headline "Professional Title" — text · InstructorProfile.headline · max 200 · visible when edit && user_type == instructor
  • affiliation "Affiliated organisation" — text · InstructorProfile.affiliation · max 200 · visible when edit && user_type == instructor
  • bio "Biography" — richtext · InstructorProfile.bio · max 2,000 chars (plain-text count) · visible when edit && user_type == instructor · WYSIWYG toolbar in edit; rendered HTML in view
  • website_url "Website" — url · visible when user_type == instructor
  • linkedin_url "LinkedIn" — url · visible when user_type == instructor
  • twitter_url "Twitter / X" — url · visible when user_type == instructor
  • facebook_url "Facebook" — url · visible when user_type == instructor
  • feedback_message "Feedback Message" — text · visible when has_feedback_message · read-only · e.g. "Changes saved successfully."
Actions
  • edit_profile "Edit Profile" — enabled always · visible when page_mode == view · triggers UC-IDP.14-M-4
  • save_edit "Save" — enabled when required_fields_valid && has_unsaved_changes (disabled until the Admin changes at least one field) · visible when page_mode == edit · triggers UC-IDP.14-M-6
  • cancel_edit "Cancel" — enabled always · visible when page_mode == edit · triggers UC-IDP.14-A-5A-1 (no unsaved changes → exit edit mode immediately, no confirmation) / UC-IDP.14-A-6A-1 (unsaved changes → opens Discard Changes confirmation dialog)
Additional requirements
  1. Section 2 (Instructor information) is shown only when the user being edited is an Instructor; Program Administrators and Super Administrators have no additional fields beyond Section 1. [refs: —]
  2. Changing a staff/instructor's email by the Super Administrator does not require verification code re-verification — treated as administrative override; recorded in audit log. [refs: —]
  3. Email uniqueness check: verified only when the email value has changed from its original value. [refs: SS-IDP.03]
  4. All edit actions (profile edits, account status changes) are recorded in the audit log. [refs: —]
  5. Inline feedback: on success → "Changes saved successfully."; on validation error → below the relevant field; on server error → in feedback_message region. [refs: —]
  6. Save is disabled until the Admin changes at least one field. Clicking Cancel with no unsaved changes exits edit mode immediately with no confirmation; clicking Cancel with unsaved changes shows a discard-confirmation dialog ("Discard Changes" / "Keep Editing") before exiting. [refs: —]
Mode notes

view — default mode. Profile header: photo (Instructor) or initials avatar (other types), full name, user type badge, account status badge, "Edit Profile" button. Account information: email, phone, institution [Instructor only], account status badge. Professional information: professional title, biography, social links [Instructor only].

edit — Photo upload card top (Instructor only; 📷 icon to change). Section 1 Account information: first name, last name, email (inline error on AF-7A), phone, account status dropdown — all back-office user types. Section 2 Instructor information: professional title, affiliated organisation, biography WYSIWYG, social links — Instructor users only; PA and SA have no Section 2. Save button disabled until at least one field changes, then enabled once required fields are also valid. Cancel button: if no changes made → exits edit mode directly, no confirmation (AF-5A); if changes were made → opens Discard Changes confirmation dialog (AF-6A).

↳ Embedded dialog: Discard Changes Confirmation (AF-6A)

Bootstrap modal (#modal-discard-changes) opened when Admin clicks Cancel in edit mode after having made changes. Body: "You have unsaved changes. Do you want to discard them?" Footer: "Keep Editing" (data-bs-dismiss — stays in edit mode; AF-6A.2) and "Discard Changes" (navigates to view mode; danger button). Not static — Escape and backdrop click also dismiss (simulating "Keep Editing"). Auto-opens on page load when ?scenario=AF-6A.