UserProfileForm

Domain

Display name, username (regex), bio (300 char), avatar URL alanları. cancelHref prop'u ile iptal butonu.

Default

Preview

Code

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

Pre-filled

Preview

Code

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

Source modules/domain/common/user/UserProfileForm.ejs

<%
  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',
    placeholder: 'Jane Doe',
    value: _initial.name || '',
    error: _errors.name
  }) %>

  <%- include('../../../ui/Input', {
    id:    'profile-username',
    label: 'Username',
    type:  'text',
    name:  'username',
    placeholder: 'janedoe',
    value: _initial.username || '',
    hint:  'Lowercase letters, numbers and underscores. 3–32 characters.',
    error: _errors.username
  }) %>

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

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

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