Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/user profile page #453

Merged

Conversation

CuriousCoder00
Copy link
Contributor

fixes: #434
Added user profile page, edit profile page and account settings page

Edit profile page consists of:

  1. User profile updation - name and email
  2. User Profile Avatar updation

Account Settings page consists of:

  1. Change password
  2. Delete Account
Untitled.video.-.Made.with.Clipchamp.8.mp4

…er profile, changing password, updating avatar, and deleting user
- Refactor the profile layout component to include a sidebar and handle session authentication.
- Refactor the profile page component to display profile information and handle session authentication.
- Add the profile info component to display user profile details.
- Create a sidebar component for the profile page with navigation options.
@VineeTagarwaL-code
Copy link
Collaborator

after deletion it should atuomatically logout, will give a indepth review here

@CuriousCoder00
Copy link
Contributor Author

@VineeTagarwaL-code yes, please.
I'll make changes ASAP.

@VineeTagarwaL-code
Copy link
Collaborator

Few things i would like to see functionality wise :

  1. add a loader in the buttons to let the user know their actions are being processed
  2. instead of long lines that divides the containers. make it a seperate box similar to what we have in explore jobs page, you can take the card background color and text colors
    3.Come up with a better design for delete button, it takes a lot of space without any neeed
    image

image

@VineeTagarwaL-code
Copy link
Collaborator

after the changes are made, give a screen recording for me able to check the changes faster

  • video should be recorded in desktop view & mobile view to show the responsiveness of the pages
  • should fully test out everything you are changing

after that i will move ahead to reviewing the code and leaving comments if necessary

@CuriousCoder00
Copy link
Contributor Author

Ah yes, will make the changes ASAP

@CuriousCoder00
Copy link
Contributor Author

CuriousCoder00 commented Oct 5, 2024

@VineeTagarwaL-code I've made the requested changes and attached the demonstration video of changes for both desktop and mobile.

Desktop
https://github.com/user-attachments/assets/4ce61325-f029-4537-82f8-fb30eba93c18

Mobile
https://github.com/user-attachments/assets/362e3f10-8d3f-4248-b46d-d8d5acff0e5e

@VineeTagarwaL-code
Copy link
Collaborator

for mobile its not taking the full screen width
for image upload, please update the db and show the latest changes

add a small delete icon in edit profile and not a big button like that

@CuriousCoder00
Copy link
Contributor Author

CuriousCoder00 commented Oct 5, 2024

for image upload, please update the db and show the latest changes

I'm having issue with Bunny CDN it's being uploaded there and it's giving url in response but it's not the right URL, might be CDN_BASE_ACCESS_URL issue... lemme see if i can fix that
Otherwise i'd be looking forward to your guidance regarding this

for mobile its not taking the full screen width
add a small delete icon in edit profile and not a big button like that

Fixing these

@CuriousCoder00
Copy link
Contributor Author

Fix: full width issue for the mobile
image
Thinking of adding delete button in one of these places.. I think can only add like 2nd one at the right of Profile Info
image

@CuriousCoder00
Copy link
Contributor Author

  1. Updated upload-to-cdn.ts action to include file extension .webp
  2. Tested for both mobile and desktop - uploading profile working without any issue
  3. Moved the Delete Acctount button to Edit Profile and Removed Change Password Dialog to be a Form on Account settings page
  4. Updated authOptions.ts to include user avatar in session

Videos:

  1. Desktop
    https://github.com/user-attachments/assets/efbc27fb-fdba-45e3-a32c-27700bd189d1

  2. Mobile
    https://github.com/user-attachments/assets/2447f48f-d104-4983-89b0-626353819fdf

@VineeTagarwaL-code
Copy link
Collaborator

give video ref

…omponents

- Add removeAvatar function to user.profile.actions.ts to remove user's avatar
- Update EditProfilePicture.tsx component to include a removeImage function for removing the profile picture
@CuriousCoder00
Copy link
Contributor Author

@VineeTagarwaL-code
Copy link
Collaborator

got it very good

@CuriousCoder00
Copy link
Contributor Author

@VineeTagarwaL-code Do we need to add any other functionality in this?

@VineeTagarwaL-code
Copy link
Collaborator

reviewing the whole code then will say something

@VineeTagarwaL-code
Copy link
Collaborator

updated user image is not stored / updated in the db

@CuriousCoder00
Copy link
Contributor Author

updated user image is not stored / updated in the db

This is most likely happening because image in session not getting fetched after relogin

@CuriousCoder00
Copy link
Contributor Author

image
Images are being saved in the db, however the session or token was causing the issue as when i'm updating the image the session gets updated that time only it's not being updated after user logs in after some time.

Fixing this with adding new field image in token from logged in user or user and saving image in token object,
getting this image from token and saving it in session so it can be fetched across application

Before making change:
image
After making changes in token being sent over to the session:
image

@VineeTagarwaL-code VineeTagarwaL-code merged commit 06258fc into code100x:main Oct 8, 2024
1 check passed
@VineeTagarwaL-code
Copy link
Collaborator

didnt had the luxury of time to review the whole code, i will refactor the bits if i feel they are upto the mark

thanks for pr although, will make sure you get good bounty for this

@CuriousCoder00
Copy link
Contributor Author

CuriousCoder00 commented Oct 8, 2024

didnt had the luxury of time to review the whole code, i will refactor the bits if i feel they are upto the mark

thanks for pr although, will make sure you get good bounty for this

Appreciate the kind words about the bounty!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🚀 Feature: User profile page
2 participants