Story 2449: Webpage Integration: Edit User Profile - Profile Links (boostorg#2514)

Co-authored-by: Teodoro B. Mendes <teodoro.mendes@metalab.com>

Author: javiercoronadonarvaez

core/context_processors.py

@@ -213,6 +213,11 @@ class NavLink:
     is_unread: bool = False
 
 
+def edit_profile_url():
+    """Shared CTA URL for the profile edit page."""
+    return f"{reverse('profile-account')}?edit=True"
+
+
 def header_context(request):
     """Context processor for header nav links."""
     nav_links = [
@@ -229,6 +234,7 @@ def header_context(request):
     return {
         "nav_links": nav_links,
         "releases_url": reverse("releases-most-recent"),
+        "edit_profile_url": edit_profile_url(),
     }
 
 

templates/v3/includes/_button.html

@@ -21,6 +21,7 @@
         - icon-library (uses btn-icon-library styles; ignores btn + btn-* classes)
     - disabled (optional): if truthy, adds disabled attribute to button
     - alpine_disabled (optional): Alpine.js expression for dynamic disabled binding (e.g. "hasErrors")
+    - alpine_click (optional): Alpine.js expression run on click (e.g. "save()")
     - extra_classes (optional) : Any extra classes that the button should have, as a string
     - aria_label (optional): An optional label for assistive technology. Defaults to the button label
     - js_disabled (optional, boolean): If this value is true, the button is hidden unless Javascript is disabled on the page
@@ -64,6 +65,7 @@
           aria-label="{{aria_label|default:label}}"
           {% if disabled %}disabled{% endif %}
           {% if alpine_disabled %}:disabled="{{ alpine_disabled }}"{% endif %}
+          {% if alpine_click %}@click="{{ alpine_click }}"{% endif %}
         >
     {% if icon_position|default:'left' == 'left' %}
       {% if icon_html %}

templates/v3/includes/_field_text.html

@@ -2,7 +2,10 @@
   V3 text input field.
   Variables:
     name                    (required) —  input name attribute
+    data_link_type          (optional) —  renders a data-link-type attribute for JS to key off of,
+                                          instead of relying on DOM/array position
     label                   (optional) —  label text
+    aria_label              (optional) —  accessible name for the input when no visible label is rendered
     placeholder             (optional) —  placeholder text
     value                   (optional) —  pre-filled value; with submit_icon, also seeds the Alpine x-model state so it survives init
     type                    (optional) —  input type, default "text"
@@ -96,6 +99,8 @@
            type="{{ type|default:'text' }}"
            id="field-{{ name }}"
            name="{{ name }}"
+           {% if data_link_type %}data-link-type="{{ data_link_type }}"{% endif %}
+           {% if aria_label %}aria-label="{{ aria_label }}"{% endif %}
            {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
            {% if value %}value="{{ value }}"{% endif %}
            {% if required %}required{% endif %}

templates/v3/includes/header/_header_avatar.html

@@ -25,6 +25,6 @@
   <div id="{{ avatar_id }}-menu" role="group" class="header__user-dropdown">
     {% include "v3/includes/header/_header_nav_link.html" with url=logout_url label="Logout" %}
     {% include "v3/includes/header/_header_nav_link.html" with url=profile_url label="My Profile" %}
-    {% include "v3/includes/header/_header_nav_link.html" with url=profile_url label="Edit Profile" %}
+    {% include "v3/includes/header/_header_nav_link.html" with url=edit_profile_url label="Edit Profile" %}
   </div>
 </div>

templates/v3/user_profile_edit.html

@@ -15,7 +15,7 @@
   <div class="user-profile__container">
     <div class="user-profile__profile-content-area">
       <div class="user-profile__col">
-        <div class="basic-card card user-profile__profile-edit-card">
+        <div class="basic-card card user-profile__profile-edit-card" x-data="profileForm">
           <div class="card__header">
             <span class="card__title">Profile</span>
           </div>
@@ -77,9 +77,11 @@
           <hr class="card__hr" aria-hidden="true" />
           <div class="card__column px-large">
             <span class="user-profile__link-section-heading">Profile Links</span>
-            <div class="user-profile__two-column-inputs">
+            {% comment %} Link rows: locked label (type) + value input. Inline validation (HTTPS for GitHub/Website, email format, Slack Member ID) is driven by profileForm; errors is keyed by link type. {% endcomment %}
+            <div class="user-profile__two-column-inputs" @input="clearLinkError($event)">
               {% for form in user_profile_form.link_formset %}
-                {% include 'v3/includes/_form_include.html' with form=form only %}
+                {% include 'v3/includes/_field_include.html' with bound_field=form.type only %}
+                {% include 'v3/includes/_field_text.html' with name=form.value.html_name value=form.value.value placeholder=form.value.field.widget.attrs.placeholder aria_label=form.type.value|capfirst|add:" link" alpine_error="errors."|add:form.type.value data_link_type=form.type.value only %}
               {% endfor %}
             </div>
             <div class="field__help">All links will be displayed publicly on your profile for other users to see.</div>
@@ -138,8 +140,16 @@
             </div>
           </div>
           <hr class="card__hr" aria-hidden="true" />
+          {% comment %} Persists the Profile links to the current user via PATCH /api/v1/users/me/. {% endcomment %}
           <div class="card__cta_section">
-            {% include 'v3/includes/_button.html' with style='primary' type='submit' label='Save Changes' only %}
+            {% include 'v3/includes/_button.html' with style='primary' type='button' label='Save Changes' alpine_disabled="saving" alpine_click="save()" only %}
+            <span class="user-profile__save-indicator" role="status" aria-live="polite">
+              <span class="user-profile__save-state" x-show="saveStatus === 'saved'" x-cloak>
+                <span class="user-profile__save-text">Saved</span>
+                {% include "includes/icon.html" with icon_name="saved" icon_class="create-post-page__save-icon" icon_size=16 %}
+              </span>
+              <span class="field__error" x-show="saveStatus === 'error'" x-text="saveError" x-cloak></span>
+            </span>
           </div>
         </div>
         <div class="basic-card card user-profile__delete-account">
@@ -400,6 +410,148 @@
         },
       };
     };
+
+    window.profileForm = function () {
+      // Link value inputs each carry a data-link-type attribute (rendered from
+      // V3ProfileLinkChoices), so lookups key off that instead of DOM position.
+      const LINK_TYPES = ['github', 'website', 'email', 'slack'];
+      const linkInput = (type) => document.querySelector(`[data-link-type='${type}']`);
+      const SLACK_PROFILE_URL_PREFIX = '{{ SLACK_PROFILE_URL_PREFIX|escapejs }}';
+      const SLACK_MEMBER_ID_PATTERN = /^[A-Z0-9]{9,11}$/i;
+
+      return {
+        saving: false,
+        saveStatus: '',   // '' | 'saved' | 'error' (button shows "saving" via :disabled)
+        saveError: '',
+        errors: { github: '', website: '', email: '', slack: '' },  // inline per-link errors, keyed by type
+
+        // Clear a link's inline error as soon as the user edits that field.
+        clearLinkError(e) {
+          const type = e.target.dataset.linkType;
+          if (type) this.errors[type] = '';
+          this.saveStatus = '';
+          this.saveError = '';
+        },
+
+        isSecureUrl(value) {
+          try {
+            const url = new URL(value);
+            return url.protocol === 'https:' && Boolean(url.hostname);
+          } catch {
+            return false;
+          }
+        },
+
+        isUrl(value) {
+          try {
+            new URL(value);
+            return true;
+          } catch {
+            return false;
+          }
+        },
+
+        // '' when valid, otherwise the inline error message. Empty is allowed
+        // (the link is simply unset).
+        validateLink(type, value) {
+          if (!value) return '';
+          if (value.length > 200) return 'Must be 200 characters or fewer';
+          if (type === 'github' || type === 'website') {
+            return this.isSecureUrl(value) ? '' : 'Please add a secure link';
+          }
+          if (type === 'email') {
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? '' : 'Please enter a valid email address';
+          }
+          if (type === 'slack') {
+            // A pasted link must be our canonical CPPLang Slack profile URL;
+            // anything else that isn't a URL is checked against the Member ID shape.
+            if (this.isUrl(value)) {
+              return value.toLowerCase().startsWith(SLACK_PROFILE_URL_PREFIX.toLowerCase())
+                ? ''
+                : 'Please enter a valid CPPLang profile URL or Member ID';
+            }
+            return SLACK_MEMBER_ID_PATTERN.test(value) ? '' : 'Please enter a valid CPPLang Member ID';
+          }
+          return '';
+        },
+
+        // Build the profile_links payload, dropping empties. Slack takes a
+        // Member ID; store the canonical profile URL built from it (kept in
+        // sync with SLACK_PROFILE_URL_PREFIX in users/forms.py, which
+        // reverses it for prefill).
+        collectLinks() {
+          const links = {};
+          LINK_TYPES.forEach((type) => {
+            let value = (linkInput(type)?.value || '').trim();
+            if (!value) return;
+            if (type === 'slack') {
+              // Accept a bare Member ID or a pasted full profile URL — store one canonical URL.
+              let memberId = value;
+              if (memberId.toLowerCase().startsWith(SLACK_PROFILE_URL_PREFIX.toLowerCase())) {
+                memberId = memberId.slice(SLACK_PROFILE_URL_PREFIX.length);
+              }
+              value = SLACK_PROFILE_URL_PREFIX + memberId;
+            }
+            links[type] = value;
+          });
+          return links;
+        },
+
+        async save() {
+          if (this.saving) return;
+
+          // Validate all links up front; block the save if any fail.
+          let hasError = false;
+          LINK_TYPES.forEach((type) => {
+            const msg = this.validateLink(type, (linkInput(type)?.value || '').trim());
+            this.errors[type] = msg;
+            if (msg) hasError = true;
+          });
+          if (hasError) return;
+
+          this.saving = true;
+          this.saveStatus = '';
+          this.saveError = '';
+          try {
+            const res = await fetch('/api/v1/users/me/', {
+              method: 'PATCH',
+              headers: {
+                'X-CSRFToken': '{{ csrf_token }}',
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({ profile_links: this.collectLinks() }),
+            });
+            if (!res.ok) {
+              let data = {};
+              try {
+                data = await res.json();
+              } catch (_) {}
+
+              // Per-link validation errors (e.g. the backend secure-URL/Slack
+              // checks) come back keyed by link type; route them to their own
+              // field instead of the banner next to the Save button.
+              const linkErrors = data.profile_links;
+              if (linkErrors && typeof linkErrors === 'object' && !Array.isArray(linkErrors)) {
+                Object.entries(linkErrors).forEach(([type, msg]) => {
+                  this.errors[type] = Array.isArray(msg) ? msg[0] : msg;
+                });
+                return;
+              }
+
+              const fieldErrors = Object.values(data).flat().filter(Boolean);
+              throw new Error(fieldErrors.length ? fieldErrors.join(' ') : `Save failed (${res.status})`);
+            }
+            this.saveStatus = 'saved';
+          } catch (err) {
+            console.error('Profile save failed:', err);
+            this.saveStatus = 'error';
+            this.saveError = err.message || 'Could not save. Please try again.';
+          } finally {
+            this.saving = false;
+          }
+        },
+      };
+    };
   });
 
   </script>

users/forms.py

@@ -197,11 +197,18 @@ class V3ProfileLinkChoices(models.TextChoices):
     SLACK = "slack"
 
 
+# Slack links persist as the public profile URL from the CPPLang Slack
+# workspace (kept in sync with the frontend construction in
+# user_profile_edit.html) — the same link produced by "Copy link to profile"
+# in a user's Slack profile within the CPPLang workspace.
+SLACK_PROFILE_URL_PREFIX = "https://cpplang.slack.com/team/"
+
+
 class V3ProfileLinkForm(forms.Form):
     type = forms.ChoiceField(
         choices=V3ProfileLinkChoices.choices, disabled=True, label=""
     )
-    value = forms.CharField(max_length=80, label="")
+    value = forms.CharField(max_length=200, label="")
 
 
 V3ProfileLinkFormset = forms.formset_factory(V3ProfileLinkForm, extra=0)
@@ -248,7 +255,7 @@ def __init__(self, *args, **kwargs):
             elif field_value == V3ProfileLinkChoices.EMAIL:
                 placeholder = "example@example.com"
             elif field_value == V3ProfileLinkChoices.SLACK:
-                placeholder = "@"
+                placeholder = "CPPLang profile URL"
             form.fields["value"].widget.attrs["placeholder"] = placeholder
 
     # Left Column Fields

users/migrations/0022_user_profile_links.py

@@ -0,0 +1,28 @@
+# Generated by Django 6.0.2 on 2026-07-01 18:56
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("users", "0021_add_v3_testers_group"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="user",
+            name="profile_links",
+            field=models.JSONField(
+                blank=True,
+                default=dict,
+                help_text=(
+                    "Public profile links keyed by type (github, website, email, "
+                    "slack). Slack stores the full canonical CPPLang Slack "
+                    "profile URL (https://cpplang.slack.com/team/<Member ID>) "
+                    "built from the user's Slack Member ID. The Member ID is "
+                    "derived for display in the edit form."
+                ),
+            ),
+        ),
+    ]

users/models.py

@@ -261,6 +261,17 @@ class User(BaseUser):
         default=False,
         help_text="Indicate on the login page the last login method used.",
     )
+    profile_links = models.JSONField(
+        default=dict,
+        blank=True,
+        help_text=(
+            "Public profile links keyed by type (github, website, email, slack). "
+            "Slack stores the full canonical CPPLang Slack profile URL "
+            "(https://cpplang.slack.com/team/<Member ID>) built from the "
+            "user's Slack Member ID. The Member ID is derived for display in "
+            "the edit form."
+        ),
+    )
     # If non-null, the user has requested deletion but the grace period has not
     # elapsed.
     delete_permanently_at = models.DateTimeField(null=True, editable=False)