🚸 (share) Sanitize URL ID

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}
+      value={value}
-      onSubmit={onPathnameChange}
+      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>

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,
       })
     },