Skip to content

Implemented Toast Notifications for Error Handling During User Settings Update #2972

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

Merged
merged 3 commits into from
Aug 2, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 28 additions & 3 deletions client/modules/User/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -276,16 +276,41 @@ export function submitSettings(formValues) {

export function updateSettings(formValues) {
return (dispatch) =>
new Promise((resolve) =>
new Promise((resolve) => {
if (!formValues.currentPassword && formValues.newPassword) {
dispatch(showToast(5500));
dispatch(setToastText('Toast.EmptyCurrentPass'));
resolve();
return;
}
submitSettings(formValues)
.then((response) => {
dispatch(updateSettingsSuccess(response.data));
dispatch(showToast(5500));
dispatch(setToastText('Toast.SettingsSaved'));
resolve();
})
.catch((error) => resolve({ error }))
);
.catch((error) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we can look here and check if it's specifically a 401 error so that we know it's an incorrect password. If it's a 500 we could show a generic "something went wrong". We could also think about using the message from the server which plays into a larger discussion on translating server-side messages.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that sounds like a good approach. Differentiating between specific HTTP status codes like :

  • 401 for incorrect passwords
  • 500 for generic errors

On it

if (error.response) {
switch (error.response.status) {
case 401:
dispatch(showToast(5500));
dispatch(setToastText('Toast.IncorrectCurrentPass'));
break;
case 404:
dispatch(showToast(5500));
dispatch(setToastText('Toast.UserNotFound'));
break;
default:
dispatch(showToast(5500));
dispatch(setToastText('Toast.DefaultError'));
}
} else {
dispatch(showToast(5500));
dispatch(setToastText('Toast.NetworkError'));
}
});
});
}

export function createApiKeySuccess(user) {
Expand Down
7 changes: 6 additions & 1 deletion translations/locales/en-US/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,12 @@
"SketchFailedSave": "Failed to save sketch.",
"AutosaveEnabled": "Autosave enabled.",
"LangChange": "Language changed",
"SettingsSaved": "Settings saved."
"SettingsSaved": "Settings saved.",
"EmptyCurrentPass": "Current password field is empty",
"IncorrectCurrentPass": "Current password is incorrect",
"DefaultError":"Something went wrong",
"UserNotFound": "User not found",
"NetworkError": "Network error"
},
"Toolbar": {
"Preview": "Preview",
Expand Down
7 changes: 6 additions & 1 deletion translations/locales/hi/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,12 @@
"SketchFailedSave": "स्केच सेव करने में असमर्थ",
"AutosaveEnabled": "ऑटोसेव चालू",
"LangChange": "भाषा बदली",
"SettingsSaved": "सेटिंग्स सेव की"
"SettingsSaved": "सेटिंग्स सेव की",
"EmptyCurrentPass": "वर्तमान पासवर्ड फ़ील्ड खाली है",
"IncorrectCurrentPass": "वर्तमान पासवर्ड गलत है ",
"DefaultError":"कुछ गलत हो गया",
"UserNotFound": "उपयोगकर्ता नहीं मिला",
"NetworkError": "नेटवर्क त्रुटि"
},
"Toolbar": {
"Preview": "पूर्वावलोकन",
Expand Down
Loading