djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display all error messages on new-password page (#2410)

Browse source
This commit is contained in:
Krzysztof Żuraw 2022-10-26 12:12:37 +02:00 committed by GitHub
parent 730e9da122
commit 3c63b0baf1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 112 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
locale/defaultMessages.json
View file

@ -1673,6 +1673,9 @@
"context": "header",
"string": "Hello there, {userName}"
},
"ByYtFB": {
"string": "Invalid or expired token. Please check your token in URL"
},
"C0JLNW": {
"string": "Provided email address does not exist in our database."
},
@ -7092,6 +7095,9 @@
"context": "PageTypeDeleteWarningDialog single assigned items description",
"string": "You are about to delete page type <b>{typeName}</b>. It is assigned to {assignedItemsCount} {assignedItemsCount,plural,one{page} other{pages}}. Deleting this page type will also delete those pages. Are you sure you want to do this?"
},
"tR+UuE": {
"string": "User doesn't exist. Please check your email in URL"
},
"tTtoKd": {
"context": "error message",
"string": "Sorry, your username and/or password are incorrect. Please try again."

6
src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx
View file

@ -10,10 +10,10 @@ storiesOf("Views / Authentication / Set up a new password", module)
.addDecorator(CardDecorator)
.addDecorator(Decorator)
.add("default", () => (
<NewPasswordPage errors={[]} disabled={false} onSubmit={() => undefined} />
<NewPasswordPage errors={[]} loading={false} onSubmit={() => undefined} />
))
.add("loading", () => (
<NewPasswordPage errors={[]} disabled={true} onSubmit={() => undefined} />
<NewPasswordPage errors={[]} loading={true} onSubmit={() => undefined} />
))
.add("too short error", () => (
<NewPasswordPage
@ -24,7 +24,7 @@ storiesOf("Views / Authentication / Set up a new password", module)
addressType: null,
message: null,
}))}
disabled={false}
loading={false}
onSubmit={() => undefined}
/>
));

25
src/auth/components/NewPasswordPage/NewPasswordPage.tsx
View file

@ -15,7 +15,7 @@ export interface NewPasswordPageFormData {
confirmPassword: string;
}
export interface NewPasswordPageProps {
disabled: boolean;
loading: boolean;
errors: SetPasswordData["errors"];
onSubmit: (data: NewPasswordPageFormData) => SubmitPromise;
}
@ -26,14 +26,10 @@ const initialForm: NewPasswordPageFormData = {
};
const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
const { disabled, errors, onSubmit } = props;
const { loading, errors, onSubmit } = props;
const classes = useStyles(props);
const intl = useIntl();
const error = getAccountErrorMessage(
errors.find(err => err.field === "password"),
intl,
);
return (
<Form initial={initialForm} onSubmit={onSubmit}>
@ -50,7 +46,14 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
description="page title"
/>
</Typography>
{!!error && <div className={classes.panel}>{error}</div>}
{errors.map(error => (
<div
className={classes.panel}
key={`${error.code}-${error.field}`}
>
{getAccountErrorMessage(error, intl)}
</div>
))}
<Typography variant="caption" color="textSecondary">
<FormattedMessage
id="m0Dz+2"
@ -62,7 +65,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
autoFocus
fullWidth
autoComplete="none"
disabled={disabled}
disabled={loading}
label={intl.formatMessage({
id: "Ev6SEF",
defaultMessage: "New Password",
@ -74,13 +77,14 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
inputProps={{
"data-test-id": "password",
}}
required
/>
<FormSpacer />
<TextField
fullWidth
error={passwordError}
autoComplete="none"
disabled={disabled}
disabled={loading}
label={intl.formatMessage({
id: "vfG+nh",
defaultMessage: "Confirm Password",
@ -99,12 +103,13 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
inputProps={{
"data-test-id": "confirm-password",
}}
required
/>
<FormSpacer />
<Button
data-test="button-bar-confirm"
className={classes.submit}
disabled={(passwordError && data.password.length > 0) || disabled}
disabled={loading || data.password.length === 0 || passwordError}
variant="primary"
onClick={handleSubmit}
type="submit"

2
src/auth/views/NewPassword.tsx
View file

@ -41,7 +41,7 @@ const NewPassword: React.FC<RouteComponentProps> = ({ location }) => {
return (
<NewPasswordPage
errors={errors}
disabled={loading}
loading={loading}
onSubmit={handleSubmit}
/>
);

106
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -37564,10 +37564,16 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
data-shrink="false"
>
New Password
<span
aria-hidden="true"
class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
>
 *
</span>
</label>
<div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@ -37579,6 +37585,7 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
class="MuiInputBase-input-id MuiOutlinedInput-input-id"
data-test-id="password"
name="password"
required=""
type="password"
value=""
/>
@ -37590,7 +37597,7 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
class="PrivateNotchedOutline-legendLabelled-id"
>
<span>
New Password
New Password *
</span>
</legend>
</fieldset>
@ -37603,10 +37610,16 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
data-shrink="false"
>
Confirm Password
<span
aria-hidden="true"
class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
>
 *
</span>
</label>
<div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@ -37617,6 +37630,7 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
class="MuiInputBase-input-id MuiOutlinedInput-input-id"
data-test-id="confirm-password"
name="confirmPassword"
required=""
type="password"
value=""
/>
@ -37628,7 +37642,7 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
class="PrivateNotchedOutline-legendLabelled-id"
>
<span>
Confirm Password
Confirm Password *
</span>
</legend>
</fieldset>
@ -37638,9 +37652,10 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
class="FormSpacer-spacer-id"
/>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
data-test="button-bar-confirm"
tabindex="0"
disabled=""
tabindex="-1"
type="submit"
>
<span
@ -37684,10 +37699,16 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-required-id MuiInputLabel-required-id"
data-shrink="false"
>
New Password
<span
aria-hidden="true"
class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
>
 *
</span>
</label>
<div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@ -37700,6 +37721,7 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
data-test-id="password"
disabled=""
name="password"
required=""
type="password"
value=""
/>
@ -37711,7 +37733,7 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
class="PrivateNotchedOutline-legendLabelled-id"
>
<span>
New Password
New Password *
</span>
</legend>
</fieldset>
@ -37724,10 +37746,16 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-required-id MuiInputLabel-required-id"
data-shrink="false"
>
Confirm Password
<span
aria-hidden="true"
class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
>
 *
</span>
</label>
<div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@ -37739,6 +37767,7 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
data-test-id="confirm-password"
disabled=""
name="confirmPassword"
required=""
type="password"
value=""
/>
@ -37750,7 +37779,7 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
class="PrivateNotchedOutline-legendLabelled-id"
>
<span>
Confirm Password
Confirm Password *
</span>
</legend>
</fieldset>
@ -37812,10 +37841,16 @@ exports[`Storyshots Views / Authentication / Set up a new password too short err
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
data-shrink="false"
>
New Password
<span
aria-hidden="true"
class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
>
 *
</span>
</label>
<div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@ -37827,6 +37862,7 @@ exports[`Storyshots Views / Authentication / Set up a new password too short err
class="MuiInputBase-input-id MuiOutlinedInput-input-id"
data-test-id="password"
name="password"
required=""
type="password"
value=""
/>
@ -37838,7 +37874,7 @@ exports[`Storyshots Views / Authentication / Set up a new password too short err
class="PrivateNotchedOutline-legendLabelled-id"
>
<span>
New Password
New Password *
</span>
</legend>
</fieldset>
@ -37851,10 +37887,16 @@ exports[`Storyshots Views / Authentication / Set up a new password too short err
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
data-shrink="false"
>
Confirm Password
<span
aria-hidden="true"
class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
>
 *
</span>
</label>
<div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@ -37865,6 +37907,7 @@ exports[`Storyshots Views / Authentication / Set up a new password too short err
class="MuiInputBase-input-id MuiOutlinedInput-input-id"
data-test-id="confirm-password"
name="confirmPassword"
required=""
type="password"
value=""
/>
@ -37876,7 +37919,7 @@ exports[`Storyshots Views / Authentication / Set up a new password too short err
class="PrivateNotchedOutline-legendLabelled-id"
>
<span>
Confirm Password
Confirm Password *
</span>
</legend>
</fieldset>
@ -37886,9 +37929,10 @@ exports[`Storyshots Views / Authentication / Set up a new password too short err
class="FormSpacer-spacer-id"
/>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
data-test="button-bar-confirm"
tabindex="0"
disabled=""
tabindex="-1"
type="submit"
>
<span
@ -65897,7 +65941,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>
@ -65973,7 +66017,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>
@ -66014,7 +66058,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>
@ -66062,7 +66106,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>
@ -66103,7 +66147,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>
@ -66147,7 +66191,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
<div
@ -66189,7 +66233,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
<div
@ -66235,7 +66279,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>
@ -66276,7 +66320,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>
@ -66356,7 +66400,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>
@ -66398,7 +66442,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>
@ -66476,7 +66520,7 @@ exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>
@ -69014,7 +69058,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
<div
@ -69052,7 +69096,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>
@ -69099,7 +69143,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
>
Invalid value
Invalid or expired token. Please check your token in URL
</p>
</div>
</div>

12
src/utils/errors/account.ts
View file

@ -37,6 +37,14 @@ const messages = defineMessages({
id: "TDhHMi",
defaultMessage: "This needs to be unique",
},
invalidToken: {
id: "ByYtFB",
defaultMessage: "Invalid or expired token. Please check your token in URL",
},
userNotFound: {
id: "tR+UuE",
defaultMessage: "User doesn't exist. Please check your email in URL",
},
});
interface ErrorFragment {
@ -62,6 +70,10 @@ function getAccountErrorMessage(err: ErrorFragment, intl: IntlShape): string {
return intl.formatMessage(messages.tooSimilar);
case AccountErrorCode.UNIQUE:
return intl.formatMessage(messages.unique);
case AccountErrorCode.INVALID:
return intl.formatMessage(messages.invalidToken);
case AccountErrorCode.NOT_FOUND:
return intl.formatMessage(messages.userNotFound);
}
}