From 020a37c1f32a1d0b44246c9364df471fe8ed51ce Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 17 Oct 2022 07:55:38 +0200
Subject: [PATCH] :children_crossing: (share) Sanitize URL ID

---
 apps/builder/components/share/EditableUrl.tsx | 25 ++++++++++++++-----
 .../components/shared/hooks/useToast.tsx      |  3 ++-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/apps/builder/components/share/EditableUrl.tsx b/apps/builder/components/share/EditableUrl.tsx
index 1ba4f626a..9235d5f58 100644
--- a/apps/builder/components/share/EditableUrl.tsx
+++ b/apps/builder/components/share/EditableUrl.tsx
@@ -11,7 +11,8 @@ import {
 } from '@chakra-ui/react'
 import { EditIcon } from 'assets/icons'
 import { CopyButton } from 'components/shared/buttons/CopyButton'
-import React from 'react'
+import { useToast } from 'components/shared/hooks/useToast'
+import React, { useState } from 'react'
 
 type EditableUrlProps = {
   hostname: string
@@ -24,12 +25,26 @@ export const EditableUrl = ({
   pathname,
   onPathnameChange,
 }: EditableUrlProps) => {
+  const { showToast } = useToast()
+  const [value, setValue] = useState(pathname)
+
+  const handleSubmit = (newPathname: string) => {
+    if (/^[a-z]+(-[a-z]+)*$/.test(newPathname))
+      return onPathnameChange(newPathname)
+    setValue(pathname)
+    showToast({
+      title: 'Invalid ID',
+      description: 'Should contain only contain letters and dashes.',
+    })
+  }
+
   return (
     <Editable
       as={HStack}
       spacing={3}
-      defaultValue={pathname}
-      onSubmit={onPathnameChange}
+      value={value}
+      onChange={setValue}
+      onSubmit={handleSubmit}
     >
       <HStack spacing={1}>
         <Text>{hostname}/</Text>
@@ -58,9 +73,7 @@ export const EditableUrl = ({
 const EditButton = (props: ButtonProps) => {
   const { isEditing, getEditButtonProps } = useEditableControls()
 
-  return isEditing ? (
-    <></>
-  ) : (
+  return isEditing ? null : (
     <Button leftIcon={<EditIcon />} {...props} {...getEditButtonProps()}>
       Edit
     </Button>
diff --git a/apps/builder/components/shared/hooks/useToast.tsx b/apps/builder/components/shared/hooks/useToast.tsx
index e28c69239..2e65e7d53 100644
--- a/apps/builder/components/shared/hooks/useToast.tsx
+++ b/apps/builder/components/shared/hooks/useToast.tsx
@@ -7,10 +7,11 @@ export const useToast = () => {
   const showToast = useCallback(
     ({ title, description, status = 'error', ...props }: UseToastOptions) => {
       toast({
-        position: 'bottom-right',
+        position: 'top-right',
         description,
         title,
         status,
+        isClosable: true,
         ...props,
       })
     },