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

Merge pull request #760 from mirumee/fix/slug-length-1159

Browse source 
Limit slug to 255 characters
This commit is contained in:
Dominik Żegleń 2020-10-13 15:07:52 +02:00 committed by GitHub
commit a90a1f0157
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/SeoForm/SeoForm.tsx
View file

@ -23,6 +23,9 @@ enum SeoField {
} }
const SLUG_REGEX = /^[a-zA-Z0-9\-\_]+$/; const SLUG_REGEX = /^[a-zA-Z0-9\-\_]+$/;
const maxSlugLength = 255;
const maxTitleLength = 70;
const maxDescriptionLength = 300;
const useStyles = makeStyles( const useStyles = makeStyles(
theme => ({ theme => ({
@ -176,7 +179,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
{expanded && ( {expanded && (
<div className={classes.container}> <div className={classes.container}>
<TextField <TextField
error={!!getError(SeoField.slug)} error={!!getError(SeoField.slug) || slug.length > maxSlugLength}
name={SeoField.slug} name={SeoField.slug}
label={ label={
<div className={classes.labelContainer}> <div className={classes.labelContainer}>
@ -189,7 +192,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
defaultMessage="{numberOfCharacters} of {maxCharacters} characters" defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
description="character limit" description="character limit"
values={{ values={{
maxCharacters: 70, maxCharacters: maxSlugLength,
numberOfCharacters: slug?.length numberOfCharacters: slug?.length
}} }}
/> />
@ -197,8 +200,13 @@ const SeoForm: React.FC<SeoFormProps> = props => {
)} )}
</div> </div>
} }
InputProps={{
inputProps: {
maxlength: maxSlugLength
}
}}
helperText={getSlugHelperMessage()} helperText={getSlugHelperMessage()}
value={slug?.slice(0, 69)} value={slug}
disabled={loading || disabled} disabled={loading || disabled}
placeholder={slug || slugify(slugPlaceholder, { lower: true })} placeholder={slug || slugify(slugPlaceholder, { lower: true })}
onChange={handleSlugChange} onChange={handleSlugChange}
@ -206,6 +214,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
/> />
<FormSpacer /> <FormSpacer />
<TextField <TextField
error={title.length > maxTitleLength}
name={SeoField.title} name={SeoField.title}
label={ label={
<div className={classes.labelContainer}> <div className={classes.labelContainer}>
@ -218,7 +227,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
defaultMessage="{numberOfCharacters} of {maxCharacters} characters" defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
description="character limit" description="character limit"
values={{ values={{
maxCharacters: 70, maxCharacters: maxTitleLength,
numberOfCharacters: title.length numberOfCharacters: title.length
}} }}
/> />
@ -226,8 +235,13 @@ const SeoForm: React.FC<SeoFormProps> = props => {
)} )}
</div> </div>
} }
InputProps={{
inputProps: {
maxlength: maxTitleLength
}
}}
helperText={intl.formatMessage(seoFieldMessage)} helperText={intl.formatMessage(seoFieldMessage)}
value={title?.slice(0, 69)} value={title}
disabled={loading || disabled} disabled={loading || disabled}
placeholder={titlePlaceholder} placeholder={titlePlaceholder}
onChange={onChange} onChange={onChange}
@ -235,6 +249,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
/> />
<FormSpacer /> <FormSpacer />
<TextField <TextField
error={description.length > maxDescriptionLength}
name={SeoField.description} name={SeoField.description}
label={ label={
<div className={classes.labelContainer}> <div className={classes.labelContainer}>
@ -247,7 +262,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
defaultMessage="{numberOfCharacters} of {maxCharacters} characters" defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
description="character limit" description="character limit"
values={{ values={{
maxCharacters: 300, maxCharacters: maxDescriptionLength,
numberOfCharacters: description.length numberOfCharacters: description.length
}} }}
/> />
@ -256,7 +271,12 @@ const SeoForm: React.FC<SeoFormProps> = props => {
</div> </div>
} }
helperText={intl.formatMessage(seoFieldMessage)} helperText={intl.formatMessage(seoFieldMessage)}
value={description?.slice(0, 299)} InputProps={{
inputProps: {
maxlength: maxDescriptionLength
}
}}
value={description}
onChange={onChange} onChange={onChange}
disabled={loading || disabled} disabled={loading || disabled}
fullWidth fullWidth