Feature/avatar refactor

[Igor-Ponso]

Summary

This PR introduces avatar support to the starter kit by allowing users to upload, preview, and remove their profile photos from the Profile settings page.

What's included

• Users can upload a new profile photo by clicking their avatar.
• A preview is shown immediately using URL.createObjectURL().
• Users can remove their current avatar before submitting the form — this clears the preview and reverts to the fallback.
• The avatar removal is visual-only until the user clicks Save. No data is deleted until the update is submitted.
• The form uses the _method: 'PATCH' approach with form.post(...) and forceFormData: true for proper file handling.

Backend changes

• Added a new nullable column to the users table:

 $table->string('profile_photo_path', 2048)->nullable();

• Added the HasProfilePhoto trait with:

  • Accessor getProfilePhotoUrlAttribute()
  • Alias accessor getAvatarAttribute() for frontend use
  • No default fallback image — returns null if not set

• The ProfileController@update method now:

  • Accepts a remove_avatar boolean to remove the existing avatar from storage
  • Stores the uploaded avatar if profile_photo is present
  • Validates and processes avatar logic safely

Frontend changes

• Avatar preview logic updated to use:

  • Uploaded file preview if selected
  • Existing avatar from the user model if no file is selected
  • Fallback to user initials if none is available

• Created an accessible Remove avatar button with lucide-vue-next's <Trash2 /> icon and confirmation modal

• File size validation (max 2MB) for avatar uploads

• Form uses _method: 'PATCH' to spoof method and ensure compatibility with Laravel route expectations

Tests

• Existing ProfileUpdateTest was updated and expanded to:
  • Ensure email and name updates behave as expected
  • Ensure email verification status is preserved or reset accordingly
  • (Optionally) Add coverage for avatar upload and removal flow if needed

Accessibility

• Improved UX for assistive technologies and mobile:
  • Visible button instead of icon-only UI
  • Added proper aria-labels and semantic HTML

---

Please let me know if there's anything that can be improved or aligned further with the kit’s standards.
This implementation was designed to be minimal, accessible, and consistent with the current architecture.

[tnylea]

Hey Igor, Thanks for the PR. We have a PR currently open here: #79, is there anything different that your PR does?

Would you mind collaborating on that PR and making any additions/modifications that you feel should be in it?

Let me know. I appreciate the PR.

[Igor-Ponso]

Hey @tnylea

Oh. Sorry. I was not aware.

As far as I understand, the difference between is click in the avatar to upload the image, and a modal saying THIS WILL BE ONLY UPDATED AFTER SAVE.

Like this

Macbook-Air-vue-starter-kit.test-g3d9dyzyeuek23.webm

Also a validation for photos > 2mb.

But surely I can collaborate in that other PR. No worries!

Just let me know if that is the approach you prefer so I can close that PR :)

[tnylea]

Hey @Igor-Ponso, really appreciate it and it looks great. The other PR has very similar functionality and we'll be merging in soon. We've added the previous implementation to the other starter kits as well.

Thanks a ton.