UserProfileForm

Domain

Controlled form for editing display name, username, bio, and profile picture URL. Username validation: 3–32 chars, lowercase alphanumeric + underscore.

Preview

Code

<%- include('modules/domain/common/user/UserProfileForm', {
  action: '/account/profile',
  initial: {
    name:     user.name,
    username: user.username,
    biography: user.biography,
    profilePicture: user.profilePicture
  }
}) %>

Preview

Code

<%- include('modules/domain/common/user/UserProfileForm', {
  action: '/account/profile',
  cancelHref: '/account',
  initial: { name: 'Alice Johnson', username: 'alicejohnson', ... }
}) %>

<%
  var _action   = locals.action   || '#';
  var _method   = locals.method   || 'post';
  var _error    = locals.error    || '';
  var _errors   = locals.errors   || {};
  var _initial  = locals.initial  || {};
%>

  <% if (_error) { %>
  
    
    <%= _error %>
  
  <% } %>

  <%- include('../../../ui/Input', {
    id:    'profile-name',
    label: 'Display Name',
    type:  'text',
    name:  'name',
    value: _initial.name || '',
    error: _errors.name
  }) %>

  <%- include('../../../ui/Input', {
    id:    'profile-username',
    label: 'Username',
    type:  'text',
    name:  'username',
    value: _initial.username || '',
    error: _errors.username
  }) %>

  <%- include('../../../ui/Textarea', {
    id:    'profile-bio',
    label: 'Bio',
    name:  'biography',
    rows:  3,
    value: _initial.biography || '',
    error: _errors.biography
  }) %>

  <%- include('../../../ui/Input', {
    id:    'profile-picture',
    label: 'Profile Picture URL',
    type:  'url',
    name:  'profilePicture',
    value: _initial.profilePicture || '',
    error: _errors.profilePicture
  }) %>

  
    <% if (locals.cancelHref) { %>
    
      Cancel
    
    <% } %>
    <%- include('../../../ui/Button', {
      type: 'submit',
      children: 'Save Profile'
    }) %>

UserProfileForm

Default

Pre-filled