No indication that the current password entered is incorrect when changing password

[Keshav-0907]

Increasing Access

The addition of an alert for an invalid current password during the password reset process in the p5.js Web Editor would streamline user troubleshooting, enhance security, and boost overall confidence.

This improvement ensures users receive prompt feedback, guiding them to correct password entry efficiently, ultimately contributing to a more user-friendly and secure platform, thereby increasing access and user satisfaction.

Feature enhancement details

Issue Description

1. Go to /account

When reseting the password, if the current password entered is invalid there's no indication that to show that something is wrong in the data entered by the user.

It is crucial to implement to display relevant alert/warning to inform users about the incorrect current password entry, ensuring a smoother and more secure password reset process.

Screen.Recording.2024-01-27.at.8.10.20.PM.mov

Possible Solution

We can solve this by implementing a warning when the current password is wrong :

[Keshav-0907]

@raclim if you find this issue relevant, could you assign it to me? Thanks!

[lindapaiste]

Good idea. I agree that there should be some sort of feedback here. Either a toast (we show a toast when it's updated successfully), an error on the form like you've shown, or both.

Just adding more info about the API call:

Request URL: https://editor.p5js.org/editor/account
Request Method: PUT
Status Code: 401 Unauthorized

response:

{
    "error": "Current password is invalid."
}

Here's the action that handles the API call. We show a toast on success but nothing on failure.

p5.js-web-editor/client/modules/User/actions.js

Lines 276 to 288 in 2b99345

	export function updateSettings(formValues) {
	return (dispatch) =>
	new Promise((resolve) =>
	submitSettings(formValues)
	.then((response) => {
	dispatch(updateSettingsSuccess(response.data));
	dispatch(showToast(5500));
	dispatch(setToastText('Toast.SettingsSaved'));
	resolve();
	})
	.catch((error) => resolve({ error }))
	);
	}

We could add error toast handling to this action. We can also handle it in the component because you can await the response value from an async thunk action.

p5.js-web-editor/client/modules/User/components/AccountForm.jsx

Lines 47 to 49 in 2b99345

	function onSubmit(formProps) {
	return dispatch(updateSettings(formProps));
	}

The react-final-form package supports returning errors from the onSubmit handler. You can return an error for a specific property (currentPassword) or an overall form error. I have to check what our response.error object actually looks like (does it has the 401 status somewhere?) but we can do something along the lines of

async function onSubmit(formProps) {
  const response = await dispatch(updateSettings(formProps));
  if (response && response.error) {
    // return the error in the right format
  }
}

[Keshav-0907]

Yes, we get a 401 status when the current password is invalid.

p5.js-web-editor/server/controllers/user.controller.js

Lines 344 to 352 in 91e5b79

	if (req.body.currentPassword) {
	user.comparePassword(req.body.currentPassword, (passwordErr, isMatch) => {
	if (passwordErr) throw passwordErr;
	if (!isMatch) {
	res.status(401).json({ error: 'Current password is invalid.' });
	return;
	}
	user.password = req.body.newPassword;
	saveUser(res, user);

And I think toast for error handling would be a better choice, given that it aligns well with our current UI design, maintaining a cohesive and familiar user experience.

If you agree with the approach, could you please assign this issue to me?

I also tried implementing the toast for error handling. Here's a preview of how it looks:

Screen.Recording.2024-01-28.at.6.56.29.AM.mov

[Keshav-0907]

@lindapaiste Can you please review this PR ?