Webpage UI: Edit User Profile

[henryajisegiri]

Goal

Edit profile page UI, covering biography, profile links, role, avatar, badges, visibility toggles, account details, email preferences, account connections, and account deletion.

Figma

---

Scope

Edit User Profile UI

---

Acceptance Criteria

1. Tagline

• The tagline field is simple text editor. Doesnt need to supporting: bold, italic, underline, ordered list, and hyperlinks . No full markdown support.
• Maximum character limit: 70 characters. A live character counter displays remaining characters (e.g. "XXK left").
• When the limit is reached, an error state is shown and further input is blocked.
• Content is auto-saved as the user types.
• Auto-save indicator states:
  • Saving — displayed while the request is in progress.
  • Saved — displayed once the request completes successfully.

---

2. Biography

• The biography field is a rich text editor supporting: bold, italic, underline, ordered list, and hyperlinks only. No full markdown support.
• Maximum character limit: 20K characters. A live character counter displays remaining characters (e.g. "20K left").
• When the limit is reached, an error state is shown and further input is blocked.
• Content is auto-saved as the user types.
• Auto-save indicator states:
  • Saving — displayed while the request is in progress.
  • Saved — displayed once the request completes successfully.
• Dev Note (@julhoang ): We need to add a regex to strip out markdown link – all URLs should be shown in full

---

3. Profile links

• Supported link labels: GitHub, Website, Email, Slack.
• Only HTTPS URLs are accepted. An inline error "Please add a secure link" is shown if a non-HTTPS URL is entered.
• Links are saved only when the user clicks "Save changes" for the Profile section.
• The "Add Another" link functionality is implemented but hidden behind a feature flag and disabled by default.

---

4. Your role

• The role dropdown is populated from a predefined list of member roles tied to contribution activity.
• The dropdown is disabled if the user has not made any contributions.
• The selected role is displayed on:
  • The user's public profile header
  • The user profile card on the posts feed

---

5. Avatar

• The user can upload, replace, or delete their avatar.
• Accepted formats: PNG and JPEG. Maximum file size: 5MB.
• Empty state: a default placeholder is shown when no avatar has been uploaded (see screenshot 4).
• Avatar is saved when the user clicks "Save changes" for the Profile section.

---

6. Badges

• Badges are earned through contributions to the Boost community and are fetched from the database.
• Empty state: badges are displayed horizontally when no badges have been earned, showing locked badge placeholders. A tooltip on hover displays the badge name.
• Earned state: badges are displayed vertically once the user starts earning badges.
• Select Title: users can select a display title tied to a badge.
  • If a user has only one badge, the badge's achievement name is used as the title by default with no dropdown shown.
  • If a user has multiple badges, a title dropdown is shown. The dropdown options are responsive to the selected badge — selecting a badge updates the available titles.
  • The selected badge title is what is displayed on the badges in hover state
• Badges and title selection are saved when the user clicks "Save changes" for the Profile section.

---

7. Visibility toggles

• Hide your GitHub activity from your profile — hides GitHub activity from the public profile when checked.
• Hide your mailing list activity from your profile — hides mailing list activity from the public profile when checked.
• Hide achievements & badges on your profile — hides the badges section from the public profile when checked.
• All toggles are saved when the user clicks "Save changes" for the Profile section.

---

8. Profile section — Save changes

Clicking "Save changes" in the Profile section saves all of the following in a single request:

• Profile links
• Role selection
• Avatar
• Badge title selection
• Visibility toggle states

Note: Biography is excluded — it is auto-saved independently.

---

9. Update details

• Username: Editable. Validated by the backend only on clicking "Save changes". If the username is already taken, display an inline error: "This username is already taken."
• Email: Displayed but disabled. Cannot be changed from this field.
• Country: Searchable dropdown populated with all countries. The selected country determines the country flag displayed on the user's public profile header and post feed card.
• Indicate last login method: When checked, the login page indicates the last authentication method used by this user.
• Override commit author name: When checked, globally replaces the user's git commit author name with their username.
• Clicking "Save changes" in this section saves only the Update details fields.

Question for the team: What is the purpose of the "Indicate last login method" toggle — is this displayed to the user themselves, or visible to others? Confirm expected behaviour before implementation.

---

10. Commit email address

• A field to add a commit email address is displayed.
• The full commit email address flow is covered in a separate ticket.

---

11. Email preferences

Users can opt in or out of email notifications via checkboxes. All preferences are saved when the user clicks "Save changes" in this section.

Notify me via email when my news is approved after moderation:

• Blog posts
• Links
• News
• Video
  Notify me via email when other users publish their news:
• Blog posts
• Links
• News
• Video
  Other:
• The site's terms of use or privacy policy are changed

---

12. Account connections

• Connected accounts display the provider name (GitHub, Google), a "Connected" status, and a "Manage" button.
• Disconnected accounts display a "Connect" button that initiates the relevant OAuth flow.

---

13. Delete account

• A "Delete account" button is displayed with the warning: "Remove your account from our system. This action will permanently erase all your information and account from Boost, and it cannot be undone."
• The full delete account flow is covered in a separate ticket.

---

FE/BE Actions

Description	URL
Fetch user profile data
Auto-save biography
Save profile section (links, role, avatar, badges, toggles)
Fetch available roles
Upload avatar
Delete avatar
Fetch badges for user
Save update details (username, country, toggles)
Save email preferences
Connect OAuth account
Disconnect OAuth account

---

Out of Scope

• Commit email address flow (covered in a separate ticket)
• Delete account flow (covered in a separate ticket)
• Badge earning logic
• "Add Another" profile links (behind feature flag, deferred)

[kattyode]

QA Note:

During testing, the following discrepancies with the Acceptance Criteria were identified. @jlchilders11 , please let me know your thoughts on these and whether any of them are not considered valid cases for this ticket.

1. Tagline
1.1 Character Counter and Error State
According to the Acceptance Criteria, the Tagline field should include a live character counter with a maximum limit of 70 characters. Additionally, an error state should be displayed when the limit is reached.

However, in the current implementation, neither the character counter nor the error state is present.

Implementation:

Figma:

1.2 Auto-save Indicator

According to the Acceptance Criteria, the Tagline field should include an auto-save indicator showing the current save status (e.g., "Saving" and "Saved").

However, this indicator is currently missing from the implementation.

Implementation:

2. Biography.

1. The WYSIWYG editor is not consistently rendered. It is usually missing when the page is first loaded and only appears after one or more page refreshes.

2. Similar to the Tagline field, the Biography field is missing both the live character counter and the auto-save indicator required by the Acceptance Criteria
   Implementation:

Figma:

3. Profile Links:

1. The text "All links will be displayed publicly on your profile for other users to see" is not included in the implementation.
   Implementation:

Figma:

2. It is possible that the HTTPS validation requirement has not been implemented yet because the save functionality is currently unavailable.

According to the Acceptance Criteria:

"Only HTTPS URLs are accepted. An inline error 'Please add a secure link' is shown if a non-HTTPS URL is entered."

At the moment, I am unable to verify this behavior. Could you please confirm whether this validation will be implemented once the save functionality is available?

4. Avatar
When attempting to replace an avatar image, the newly selected image is not reflected in the avatar preview. The previous image remains displayed even after a new image has been selected.

avatar.mp4

5. Update Details
According to the Acceptance Criteria, the Email field should be displayed as disabled and non-editable. However, it is currently editable in the implementation.

6. Commit email address
According to the Figma design, only one Email field should be displayed. However, the current implementation displays two Email fields.
Implementation:

Figma:

7. Email Preferences
I'm not sure about the "The site's terms of use or privacy policy are changed" checkbox, as it is not included in the Figma design. Could you please confirm whether this is expected?
Implementation

Figma:

[jlchilders11]

@kattyode
Changes Made

1. Added auto save and character limit functionality and indicators to the tagline
2. Added auto save and character limit functionality and indicators to the biography
3. Added reminder text to profile links
4. Corrected avatar image upload. Additionally improved functionality such that the text changes in sync when an image is uploaded.
5. Disabled email field in detail upload
6. Removed Example commit emails
7. Removed Privacy policy update option (this was in the original design, but was removed in a revision after Rob decided it shouldn't be optional)

Additional QA notes:

I was unable to recreate the buggy loading of the Wysiwyg, but would be happy to debug.

[kattyode]

QA Validation note: Passed

Validated on: https://www.cppal-dev.boost.org/users/me/?edit=True

A set of test cases was successfully executed to validate this feature, and all the issues mentioned above have been correctly fixed:

1. The Tagline character counter, error state, and auto-save features were correctly included and validated successfully.

2. Biography, the live character counter and the auto-save indicator were correctly included

3. The text "All links will be displayed publicly on your profile for other users to see" was correctly included

4. Avatar, when attempting to replace an avatar image, the newly selected image is correctly reflected in the avatar preview.

5. Update details, the Email field is correctly displayed as disabled and non-editable.

6. Commit email address, only one Email field is displayed.

7. Email preferences, the "The site's terms of use or privacy policy are changed" checkbox, was correctly removed.

[kattyode]

@jlchilders11 Thank you so much for all your hard work! I only found one small inconsistency: when attempting to delete an avatar, clicking the Delete Avatar CTA does not currently remove the avatar.
I believe this will be covered in more detail as part of this ticket, though: #2496