Profile pages

[Jdplays]

Profile Pages

This PR mainly adds user profile pages, but also adds a few extra QOL features that were made for profiles to allow for consistency across the app.

Main Feature:

Profile Pages

• Each user has a profile page
• They can edit their avatar, first name, last name and bio
• Each profile also shows any roles or badges that user has
• Streaks are shown on profile pages if they are enabled
• Both viewing and editing pages are mobile optimised

User Badges
User badges have been added. These are made up of some text and an icon (6 available). They are meant for marking a user with a special badge where a separate role is not needed. i.e: Event Coordinator.
These are optional and can only be added through the user management page.
If a user has a badge, the text for it will appear as their main role

Other QOL changes

• The role badge style has now beed added across the app (private access log and user management, with user management having a nicer multi select for roles now)
• Tooltip added to volunteer attendance to see user details with a link to their profile
• Nav bar refresh feature. This is an element that is on every page. When an attribute of it is set to true, it tells the nav bar to reload. This is useful for when updating ones profile, you can save it and have everything updated without a page reload. Might be useful for more areas in the future.

Notes

Image Storage

• For profile images, they are stored in the same s3 object store as the workshop files, but now in a new bucket called user-data.
• Before they are stored, they are compressed to a maximum of 256x256 and made into a JPEG for more efficient storage.
• They are also compressed on the client side in TS (JS) for lower data transfer

Screenshots

Profile View
Desktop:

Mobile

Profile Edit
Desktop:

Mobile:

User Management
Table:

Edit:

Private Access Log
Table:

Tooltip:

Volunteer Attendance Tooltip

[Jdplays]

Tested this on a container and all looks to be working