(feat) Add the ability to change password from edit profile form #968

coderatomy · 2023-10-26T12:41:31Z

Summary

fixes #904
Adds ability to change password from /edit-profile

Changes

Improves validation and error handling in the Edit Profile form
Improves how form submission is handled. Utilizing the handleSubmit function from formik such that form submission is immediately cancelled if any validation errors exist. Sometimes our custom validation can have some loop holes.

Screencasts

Screencast.from.2023-10-26.15-27-09.webm

coderatomy · 2023-10-26T12:48:44Z

zubhub_frontend/zubhub/public/locales/en/translation.json

+ "changePassword": {
+ "newPassword": "Change Password",
+ "confirmNewPassword": "Retype new password",
+ "error": "<1/> {{errorMessage}}"


add a custom Component and an error message

coderatomy · 2023-10-26T12:49:42Z

zubhub_frontend/zubhub/src/views/edit_profile/EditProfile.jsx

@@ -117,7 +122,7 @@ function EditProfile(props) {
 className="auth-form"
 name="signup"
 noValidate="noValidate"
- onSubmit={e => editProfile(e, props, toast)}
+ onSubmit={props.handleSubmit}


utilizing the formik handleSubmit for better security in terms of validation

coderatomy · 2023-10-26T12:50:39Z

zubhub_frontend/zubhub/src/views/edit_profile/EditProfile.jsx

 user_location: '',
 bio: '',
 }),
 validationSchema,
+ handleSubmit: (values, { props }) => {
+ return editProfile(values, props, toast)


assigning the editProfile with the validated data

coderatomy · 2023-10-26T12:51:36Z

zubhub_frontend/zubhub/src/views/edit_profile/editProfileScripts.js

+ is: (newPassword) => newPassword && newPassword.length > 0,
+ then: Yup.string().oneOf([Yup.ref('newPassword')], 'Passwords must match').required('Retype new password'),
+ otherwise: Yup.string().notRequired(),
+ }),


improving the schema for better error handling

coderatomy · 2023-10-26T12:54:16Z

zubhub_frontend/zubhub/src/views/edit_profile/EditProfile.jsx

+ (props.errors['password'] &&
+ <Trans t={t} i18nextKey="editProfile.inputs.changePassword.error">
+ <ErrorIcon fontSize="small" /> {{errorMessage: props.errors['password']}}
+ </Trans>


using the Trans component from react-i18next to improve the field error message with Icons

NdibeRaymond · 2023-10-29T21:50:01Z

hello @coderatomy , you did a great job here! Thanks for that! few things that I'd like us to deliberate on:

have something against having the option to change the password alongside other things here (I didn't follow the conversation on the issue or I would have said the same thing there. I am also going to mention @srish and @tuxology here so they can give their opinion). It's been the standard practice to separate these two flows as one deals with a general change of data while the other deals with a kind of change that can affect a user's ability to log in. We can have a link from the edit-profile page that takes us to the change-password page, but both should not be on the same page. additionally, there should be some form of re-authentication before a user can be redirected to the change-password page (I think we missed implementing this before but it is important).

What I propose is something like this [some link on the edit-profile page] ------------> [page where the user re-authenticates with their old password] -------------------------------> [change-password page]

tuxology · 2023-10-30T18:26:42Z

@NdibeRaymond I agree about this as well. I see that @srish approved this more simple design here (#904 (comment)). I think the rationale why we have mixed both "Edit Profile" and "Account Settings" workflow is because the Edit Profile page allows you to change username, location, personal details etc. Which is very similar to "account" related info. Hence, we can, for now also allow changing password via that workflow as well. We can have a dedicated change password/account settings button some where which can do a similar workflow as yours and then we can phase out this change. We would need UX input for that and I think it would look similar to your approach

chaitanya-cloudknox · 2023-10-30T21:52:37Z

zubhub_frontend/zubhub/src/assets/js/styles/views/edit_profile/editProfileStyles.js

@@ -113,6 +113,11 @@ const styles = theme => ({
 color: 'var(--primary-color2)',
 },
 fieldHelperTextStyle: {
+ '&.MuiFormHelperText-root.Mui-error': {


Try sending the classnames to mui component rather than using their generated class names. it would hassle when upgrading libraries as they change how the classnames (or styles) (they usually support it) are created or update dom structure

<ErrorComponent classNames={{
errorComponent: classNames.myErrorClassName
}} />

chaitanya-cloudknox · 2023-10-30T22:01:20Z

zubhub_frontend/zubhub/src/views/edit_profile/EditProfile.jsx

- <InputLabel
- className={classes.customLabelStyle}
- htmlFor="password"
+ <Grid container style={{ display: 'block'}}> 


Why are you changing the grid system to block? its just gonno affect responsiveness

FYI If you aare changing to block system just use div instead

chaitanya-cloudknox · 2023-10-30T22:03:17Z

zubhub_frontend/zubhub/src/views/edit_profile/EditProfile.jsx

+ endAdornment={
+ <InputAdornment position="end">
+ <IconButton
+ aria-label="toggle password visibility"


labels need translations

chaitanya-cloudknox · 2023-10-30T22:04:27Z

zubhub_frontend/zubhub/src/views/edit_profile/editProfileScripts.js

@@ -221,7 +216,15 @@ export const handleTooltipClose = () => {
 export const validationSchema = Yup.object().shape({
 username: Yup.string().required('required'),
 user_location: Yup.string().min(1, 'min').required('required'),
- password: Yup.string().required('required'),
+ password: Yup.string().required('Your password is required'),


the errors needs translation

aqsaaqeel · 2023-11-14T19:30:02Z

hey @coderatomy please link this PR to #984 so that redundant work can be avoided. Once this PR is merged I can work on moving the edit profile to the sidenav. Thanks!

coderatomy · 2023-11-15T15:58:01Z

hey @aqsaaqeel , i think you can go on with this, just go through the comments here to get the context, then get out what might be useful from this PR and use it. My main priority now is on the Migrations. Kindly help me with that.

aqsaaqeel · 2023-11-15T19:48:16Z

hey @aqsaaqeel , i think you can go on with this, just go through the comments here to get the context, then get out what might be useful from this PR and use it. My main priority now is on the Migrations. Kindly help me with that.

Alright!

coderatomy added 2 commits October 26, 2023 15:29

add change password ability from /edit-profile

d5b7255

remove logs

ff0d432

coderatomy requested review from NdibeRaymond and tuxology as code owners October 26, 2023 12:41

coderatomy commented Oct 26, 2023

View reviewed changes

srish mentioned this pull request Oct 30, 2023

Move change password feature to a new tab #984

Open

chaitanya-cloudknox reviewed Oct 30, 2023

View reviewed changes

aqsaaqeel mentioned this pull request Nov 15, 2023

Feat/984: Add Edit Profile to the sidenav #999

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(feat) Add the ability to change password from edit profile form #968

(feat) Add the ability to change password from edit profile form #968

coderatomy commented Oct 26, 2023 •

edited

Loading

coderatomy Oct 26, 2023

coderatomy Oct 26, 2023

coderatomy Oct 26, 2023

coderatomy Oct 26, 2023

coderatomy Oct 26, 2023

NdibeRaymond commented Oct 29, 2023

tuxology commented Oct 30, 2023

chaitanya-cloudknox Oct 30, 2023

chaitanya-cloudknox Oct 30, 2023

chaitanya-cloudknox Oct 30, 2023

chaitanya-cloudknox Oct 30, 2023

aqsaaqeel commented Nov 14, 2023

coderatomy commented Nov 15, 2023 •

edited

Loading

aqsaaqeel commented Nov 15, 2023

(feat) Add the ability to change password from edit profile form #968

Are you sure you want to change the base?

(feat) Add the ability to change password from edit profile form #968

Conversation

coderatomy commented Oct 26, 2023 • edited Loading

Summary

Changes

Screencasts

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NdibeRaymond commented Oct 29, 2023

tuxology commented Oct 30, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aqsaaqeel commented Nov 14, 2023

coderatomy commented Nov 15, 2023 • edited Loading

aqsaaqeel commented Nov 15, 2023

coderatomy commented Oct 26, 2023 •

edited

Loading

coderatomy commented Nov 15, 2023 •

edited

Loading