User profile page branch

[dev-par]

Build Out User Profile Page

Summary

This PR implements the user profile page, allowing users to view their personal information and club memberships/roles. Additionally, an edit mode has been added, enabling users to modify their profile details.

Changes Made

Profile Display (Read-Only Mode)

• Edited profile.html to display user profile information.
• Displayed personal details from the Profile model, including:
  • Username
  • Email
  • First name
  • Last name
  • Phone number
  • Address
  • City
  • State
  • Zip code
  • Birthday
  • Club memberships & roles
• Styled the page using user-profile.css for a clean and structured layout.

Edit Mode (Profile Editing)

• Implemented edit functionality in user-profile.js:
  • Clicking the edit button converts span elements into input fields with placeholders set to existing values.
  • The birthday field is a date input, while all others are text fields.
  • Clicking save updates the displayed data dynamically (persists in the UI until the page is refreshed).

Backend Integration

• Updated views.py (users.views.user_profile_view()) to serve user data dynamically.
• If a profile field is uninitialized, "None" is displayed as a placeholder.

File Structure

• HTML: app/users/templates/users/profile.html
• Scoped CSS: Created app/users/static/users/user-profile.css
• Scoped JS: Created app/users/static/users/user-profile.js

[IkeHunter]

@dev-par Looks great!

[IkeHunter]

@dev-par If you want to take up another challenge, try and implement the form without JS by using Django's forms:

• https://docs.djangoproject.com/en/5.1/topics/forms/
• https://www.geeksforgeeks.org/django-forms/

The goal would be to update the user's info in the database. Let me know if you want to give it a try.