imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Properly translate errors in ChangePassword.tsx so they show up translated to the user but not in our logs (#10615)

Browse source 
* Properly translate errors in `ChangePassword.tsx`

So they show up translated to the user but not in our logs.

Part of https://github.com/vector-im/element-web/issues/9597 and also fixes it
since it's the last piece mentioned (there could be other cases we log translated strings)

Fix https://github.com/vector-im/element-web/issues/9597

* Make more useful

* Update i18n strings

* No need to checkPassword since field validation already covers this

See https://github.com/matrix-org/matrix-react-sdk/pull/10615#discussion_r1167363765

Both of the error cases are covered by the logic in `verifyFieldsBeforeSubmit()` just above
and there is no way `checkPassword` would ever throw one of these errors since they are
already valid by the time it reaches here.

* Update i18n strings

* Revert "No need to checkPassword since field validation already covers this"

This reverts commit 7786dd151028e6fbf04d1a38a9c2cd47a3fbfc4b.

* Update i18n strings

* Add todo context to note that we can remove this logic in the future

* Ensure is an error

* Remove else

See https://github.com/matrix-org/matrix-react-sdk/pull/10615#discussion_r1173477053
This commit is contained in:
Eric Eastwood 2023-04-24 03:41:09 -05:00 • committed by GitHub
parent e24e85f7a5
commit 16ab5e9db0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 74 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/components/views/settings/ChangePassword.tsx
View file

@ -24,7 +24,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
import AccessibleButton from "../elements/AccessibleButton";
import Spinner from "../elements/Spinner";
import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
import { _t, _td } from "../../../languageHandler";
import { UserFriendlyError, _t, _td } from "../../../languageHandler";
import Modal from "../../../Modal";
import PassphraseField from "../auth/PassphraseField";
import { PASSWORD_MIN_SCORE } from "../auth/RegistrationForm";
@ -48,7 +48,7 @@ interface IProps {
/** Was one or more other devices logged out whilst changing the password */
didLogoutOutOtherDevices: boolean;
}) => void;
onError: (error: { error: string }) => void;
onError: (error: Error) => void;
rowClassName?: string;
buttonClassName?: string;
buttonKind?: string;
@ -183,7 +183,16 @@ export default class ChangePassword extends React.Component<IProps, IState> {
}
},
(err) => {
this.props.onError(err);
if (err instanceof Error) {
this.props.onError(err);
} else {
this.props.onError(
new UserFriendlyError("Error while changing password: %(error)s", {
error: String(err),
cause: undefined,
}),
);
}
},
)
.finally(() => {
@ -196,15 +205,19 @@ export default class ChangePassword extends React.Component<IProps, IState> {
});
}
private checkPassword(oldPass: string, newPass: string, confirmPass: string): { error: string } | undefined {
/**
* Checks the `newPass` and throws an error if it is unacceptable.
* @param oldPass The old password
* @param newPass The new password that the user is trying to be set
* @param confirmPass The confirmation password where the user types the `newPass`
* again for confirmation and should match the `newPass` before we accept their new
* password.
*/
private checkPassword(oldPass: string, newPass: string, confirmPass: string): void {
if (newPass !== confirmPass) {
return {
error: _t("New passwords don't match"),
};
throw new UserFriendlyError("New passwords don't match");
} else if (!newPass || newPass.length === 0) {
return {
error: _t("Passwords can't be empty"),
};
throw new UserFriendlyError("Passwords can't be empty");
}
}
@ -307,11 +320,24 @@ export default class ChangePassword extends React.Component<IProps, IState> {
const oldPassword = this.state.oldPassword;
const newPassword = this.state.newPassword;
const confirmPassword = this.state.newPasswordConfirm;
const err = this.checkPassword(oldPassword, newPassword, confirmPassword);
if (err) {
this.props.onError(err);
} else {
try {
// TODO: We can remove this check (but should add some Cypress tests to
// sanity check this flow). This logic is redundant with the input field
// validation we do and `verifyFieldsBeforeSubmit()` above. See
// https://github.com/matrix-org/matrix-react-sdk/pull/10615#discussion_r1167364214
this.checkPassword(oldPassword, newPassword, confirmPassword);
return this.onChangePassword(oldPassword, newPassword);
} catch (err) {
if (err instanceof Error) {
this.props.onError(err);
} else {
this.props.onError(
new UserFriendlyError("Error while changing password: %(error)s", {
error: String(err),
cause: undefined,
}),
);
}
}
};