From 2519ed9496e1224a9f99e2dbab008a801790a971 Mon Sep 17 00:00:00 2001
From: Magdalena Markusik <magdalena.markusik@mirumee.com>
Date: Thu, 24 Sep 2020 15:30:16 +0200
Subject: [PATCH] add pattern matching for slug field not to use special
 characters

---
 src/components/SeoForm/SeoForm.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/SeoForm/SeoForm.tsx b/src/components/SeoForm/SeoForm.tsx
index e273455f9..4432bfd72 100644
--- a/src/components/SeoForm/SeoForm.tsx
+++ b/src/components/SeoForm/SeoForm.tsx
@@ -32,6 +32,8 @@ interface Error {
   code: ProductErrorCode | PageErrorCode;
 }
 
+const SLUG_REGEX = /^[a-z0-9]+(?:[\-a-z0-9]+)*$/;
+
 const useStyles = makeStyles(
   theme => ({
     addressBar: {
@@ -116,8 +118,11 @@ const SeoForm: React.FC<SeoFormProps> = props => {
   const classes = useStyles(props);
 
   const intl = useIntl();
+
   const [expanded, setExpansionStatus] = React.useState(false);
+
   const toggleExpansion = () => setExpansionStatus(!expanded);
+
   const shouldDisplayHelperText = helperText && !expanded;
 
   const getFilteredErrors = () =>
@@ -155,7 +160,13 @@ const SeoForm: React.FC<SeoFormProps> = props => {
       : getPageErrorMessage(error as PageErrorFragment, intl);
   };
 
-  // .replace(/[^\x00-\x7F]/g, "")
+  const handleSlugChange = event => {
+    const { value } = event.target;
+
+    if (value === "" || !!value.match(SLUG_REGEX)) {
+      onChange(event);
+    }
+  };
 
   return (
     <Card>
@@ -208,7 +219,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
               value={slug?.slice(0, 69)}
               disabled={loading || disabled}
               placeholder={slug || slugify(slugPlaceholder, { lower: true })}
-              onChange={onChange}
+              onChange={handleSlugChange}
               fullWidth
             />
             <FormSpacer />