From 450b3bf15cde2b9a2356fb77a7641fc5186058de Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 12 Oct 2020 16:32:19 +0200
Subject: [PATCH 1/2] Limit slug to 255 characters

---
 src/components/SeoForm/SeoForm.tsx | 34 ++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 7 deletions(-)

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

From 9396f62df17800c55bdf33347cf038c51f5a2112 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 13 Oct 2020 13:31:53 +0200
Subject: [PATCH 2/2] Fix debug value

---
 src/components/SeoForm/SeoForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SeoForm/SeoForm.tsx b/src/components/SeoForm/SeoForm.tsx
index 0a1109f90..3825a697a 100644
--- a/src/components/SeoForm/SeoForm.tsx
+++ b/src/components/SeoForm/SeoForm.tsx
@@ -23,7 +23,7 @@ enum SeoField {
 }
 
 const SLUG_REGEX = /^[a-zA-Z0-9\-\_]+$/;
-const maxSlugLength = 15;
+const maxSlugLength = 255;
 const maxTitleLength = 70;
 const maxDescriptionLength = 300;