Updated the UI for edit/save functionality for user details/info when displaying

[dev-rsiva]

Description

I updated the complete UI with in-line editing and saving the existing/logged in user information, such as name and phone number.

1. Validation for name is implemented by displaying an error message when the user inputs invalid information.
2. Validation for phone numbers is implemented by displaying an error message when the user inputs invalid information.

Related Issue

Note: Sign-up/login is not working, so, i have changed the conditions/state and worked in the project. Once the changes are made, I restore the original conditions/state.

Screenshots / GIFs (if applicable)

The video of the implemented UI is attached for your reference.

[

11.05.2024_17.29.42_REC.mp4

](url)

Checklist:

Additional Notes

[codewarnab]

you can contact @anirbanmajumder0 for any query about sending request to backend updating details

[codewarnab]

Description

I updated the complete UI with in-line editing and saving the existing/logged in user information, such as name and phone number.

1. Validation for name is implemented by displaying an error message when the user inputs invalid information.
2. Validation for phone numbers is implemented by displaying an error message when the user inputs invalid information.

Related Issue

Note: Sign-up/login is not working, so, i have changed the conditions/state and worked in the project. Once the changes are made, I restore the original conditions/state.

Screenshots / GIFs (if applicable)

The video of the implemented UI is attached for your reference.

[

11.05.2024_17.29.42_REC.mp4
](url)

Checklist:

Additional Notes

just checked registration and login is working file please check the contribution.md for setting the envs and if you are still unable to login please share what issue are your facing

[Anirban-Majumder]

Here u should send the updated data to the backend .

[dev-rsiva]

Can i know the end points where should i send it. I dont have enough knowledge in backend system using python.

[Anirban-Majumder]

const url = process.env.REACT_APP_BACKEND_URL;
const response = await fetch(${url}/profile/, {
method: "POST",
headers: {
"Authorization": Token ${csrftoken},
"Content-Type": "application/json",
},
body: JSON.stringify({
profile_image: imageUrl,
}), like this but use name/ phone_number in the body

[codewarnab]

@dev-rsiva it will be better if you create a new branch/fork and put the changes their UserProfile.jsx has changed much