Skip to main content
Your BarberApp profile contains your personal information, preferences, and settings. This guide explains how to view and update your profile as either a client or specialist.

​
Accessing your profile

To edit your profile:
  1. Log in to your BarberApp account
  2. Navigate to your dashboard (Client or Specialist view)
  3. Click on your profile or the “Edit Profile” option
  4. You’ll be directed to the profile editing form

​
Profile information

​
Available fields

All users can edit the following information:

First name

  • 2-30 characters
  • Must be a valid name format
  • Required field

Last name

  • 2-30 characters
  • Must be a valid name format
  • Required field

Sex

  • Select from predefined options
  • Required field
  • Used for demographic purposes

Phone number

  • 8-15 digits
  • Optional field
  • Used for appointment reminders
Component: The form is implemented in UserEditFormComponent (user-edit-form.component.ts:46).

​
Specialist-specific fields

If you’re logged in as a specialist, you also have access to:

Specialties

  • Select one or more specialties you offer
  • Required field (at least 1 specialty)
  • Determines which appointment types you can handle
  • Accessed via a modal selector
The specialties selector allows you to:
  • View all available specialties in BarberApp
  • Select multiple specialties
  • See how many are currently selected
  • Confirm or cancel changes
Component: SpecialtySelectorComponent (user-edit-form.component.ts:75-78)

​
Profile picture

​
Uploading a photo

BarberApp uses Cloudinary for image hosting and management.
1

Click the edit icon

Click on your current profile picture or the camera/edit icon overlay.
2

Select an image

  • Choose an image file from your device
  • Supported formats: Standard image types (JPEG, PNG, etc.)
  • The file input accepts image/* types
3

Preview your selection

The new image appears immediately as a preview using URL.createObjectURL().
The image is not uploaded yet - it’s only a local preview until you save.
4

Save changes

Click “Guardar cambios” (Save changes) to upload to Cloudinary and update your profile.
Implementation details (user-edit-form.component.ts:191-198):
  • File selection is handled through a hidden <input type="file">
  • Preview is generated using URL.createObjectURL()
  • Actual upload occurs during form submission via cloudinaryService.uploadImage()

​
Default profile picture

If you don’t upload a custom photo:
  • A default profile picture is displayed
  • Provided by cloudinaryService.defaultProfilePictureUrl (user-edit-form.component.ts:112)
  • You can upload a custom picture anytime
Best practices for profile photos:
  • Use portrait-style images (face clearly visible)
  • Ensure good lighting
  • The system recommends this for a more personal experience
  • Profile pictures are optional but encouraged

​
Form validation

​
Real-time validation

The form validates your input as you type:
FieldValidation RulesError Examples
First Name2-30 characters, valid name format”Name too short”, “Invalid characters”
Last Name2-30 characters, valid name format”Name too short”, “Invalid characters”
DNI7-9 digits (cannot be edited)N/A - read-only
Phone8-15 digits (optional)“Phone number must be 8-15 digits”
SpecialtiesAt least 1 (specialists only)“Select at least one specialty”
Custom validators are implemented in CustomValidators (user-edit-form.component.ts:92-97):
  • CustomValidators.name(2, 30) - Name format validation
  • CustomValidators.dni(7, 9) - DNI number validation
  • CustomValidators.phoneOptional(8, 15) - Optional phone validation

​
Save button behavior

The “Guardar cambios” (Save changes) button is: ✅ Enabled when:
  • Form is valid (all required fields filled correctly)
  • At least one field has changed from the original value
  • Not currently saving
❌ Disabled when:
  • Form has validation errors
  • No changes have been made
  • Save operation is in progress
Change detection (user-edit-form.component.ts:158-188):
  • The system compares current form values with original user data
  • For specialists, it performs deep comparison of specialty arrays
  • File selection triggers change detection immediately

​
Saving changes

​
The save process

When you click “Guardar cambios”:
1

Form validation

The form checks all fields are valid. If invalid, the submission is blocked.
2

Image upload (if applicable)

If you selected a new profile picture:
  • The image is uploaded to Cloudinary
  • A new profile picture URL is generated
  • This URL is added to your profile data
Code: cloudinaryService.uploadImage() (user-edit-form.component.ts:143)
3

Profile update

Your updated data is sent to Firebase:
  • All form fields are included
  • Your user ID is automatically attached
  • The update is processed by userFacade.updateUser()
Code: user-edit-form.component.ts:147
4

Redirect

After successful update, you’re redirected to:
  • /dashboard/client (if you’re a client)
  • /dashboard/specialist (if you’re a specialist)

​
Loading states

While saving:
  • The save button shows a loading spinner
  • Button text changes to “Guardando…” (Saving…)
  • The button is disabled to prevent double-submission
  • Loading state is managed by userFacade.isSaving signal
Implementation: user-edit-form.component.ts:89-96

​
Important restrictions

Fields you cannot edit:
  • DNI (Document number) - Fixed after registration
  • Email address - Linked to your Firebase authentication
To modify these fields, contact BarberApp support.

​
Contact information for assistance

The form displays help text with contact details (user-edit-form.component.html:106-108):
To modify your DNI or email address, contact:
  • Email: Available in the app configuration
  • Phone: Available in the app configuration
These are displayed from APP_SHARED_INFO.contact (user-edit-form.component.ts:61-62)

​
Important notes

​
Data propagation

Important: Changes to your profile only affect future appointments. Information in existing appointments remains unchanged to maintain accurate historical records.
The form displays this notice (user-edit-form.component.html:110-113):
“La información de tus turnos ya registrados no se actualizará por los cambios que hagas en esta sección. La modificación de datos recién tomará efecto en tus próximos movimientos.”

​
Form structure

The edit form uses Angular Reactive Forms with:
  • Form validation through FormBuilder
  • Real-time change detection via signals
  • Computed properties for enable/disable logic
  • Effect hooks to populate initial values
Component architecture (user-edit-form.component.ts:80-131): 
// Form is different for specialists vs clients
if (this.isSpecialist()) {
  // Includes specialties field
} else {
  // Standard client fields only
}

​
Specialty selection (specialists only)

​
Opening the specialty modal

Specialists see a “Servicios” (Services) field:
  • Shows count of selected specialties
  • Clicking opens a modal overlay
  • Modal displays all available specialties

​
Using the specialty selector

1

Click the services button

Shows current selection count (e.g., “Seleccionar (2 seleccionadas)”)
2

Select/deselect specialties

  • Click specialty cards to toggle selection
  • Previously selected specialties are pre-checked
  • Visual feedback shows selected state
3

Confirm or cancel

  • Confirm: Saves selections and closes modal
  • Cancel: Discards changes and closes modal
Component: user-edit-form.component.ts:69-78

​
Profile form layout

The form is organized in a responsive grid:
  • Profile picture section: Full width, centered on mobile
  • Form fields: Arranged in columns (responsive: 1-3 columns)
  • Information notice: Full width at bottom
  • Save button: Centered, full width on mobile
Responsive breakpoints:
  • Mobile: Single column layout
  • Medium screens: 2 columns (md:w-input-group)
  • Large screens: Up to 3 fields per row

Build docs developers (and LLMs) love

Get started for freeTalk to us