Add validation for new shared folder

packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx

@@ -17,7 +17,7 @@ import { t, Trans } from "@lingui/macro"
 import { CSFTheme } from "../../../Themes/types"
 import { useFileBrowser } from "../../../Contexts/FileBrowserContext"
 import { useFilesApi } from "../../../Contexts/FilesApiContext"
-import { folderNameValidator } from "../../../Utils/validationSchema"
+import { nameValidator } from "../../../Utils/validationSchema"
 import { getPathWithFile } from "../../../Utils/pathUtils"
 
 
@@ -108,7 +108,7 @@ const CreateFolderModal: React.FC<ICreateFolderModalProps> = ({
         initialValues={{
           name: ""
         }}
-        validationSchema={folderNameValidator}
+        validationSchema={nameValidator}
         validateOnChange={false}
         onSubmit={async (values, helpers) => {
           if (!bucket) return

packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx

@@ -21,6 +21,7 @@ import { useEffect } from "react"
 import { SharedFolderModalMode } from "./types"
 import { useCreateOrEditSharedFolder } from "./hooks/useCreateOrEditSharedFolder"
 import { useLookupSharedFolderUser } from "./hooks/useLookupUser"
+import { nameValidator } from "../../../Utils/validationSchema"
 
 const useStyles = makeStyles(
   ({ breakpoints, constants, typography, zIndex, palette }: CSFTheme) => {
@@ -108,6 +109,10 @@ const useStyles = makeStyles(
       footer: {
         width: "100%",
         padding: `${constants.generalUnit * 2}px ${constants.generalUnit}px`
+      },
+      errorText: {
+        textAlign: "center",
+        color: palette.error.main
       }
     })
   }
@@ -127,6 +132,7 @@ const CreateOrEditSharedFolderModal = ({ mode, isModalOpen, onClose, bucketToEdi
   const [sharedFolderName, setSharedFolderName] = useState("")
   const { sharedFolderReaders, sharedFolderWriters, onNewUsers, handleLookupUser, usersError, setUsersError } = useLookupSharedFolderUser()
   const [hasPermissionsChanged, setHasPermissionsChanged] = useState(false)
+  const [nameError, setNameError] = useState("")
 
   useEffect(() => {
     setSharedFolderName("")
@@ -166,6 +172,22 @@ const CreateOrEditSharedFolderModal = ({ mode, isModalOpen, onClose, bucketToEdi
       .finally(onClose)
   }, [handleEditSharedFolder, sharedFolderWriters, sharedFolderReaders, onClose, bucketToEdit])
 
+  const onNameChange = useCallback((value?: string | number) => {
+    if (value === undefined) return
+
+    const trimmedValue = value.toString().trim()
+    setSharedFolderName(trimmedValue)
+
+    nameValidator
+      .validate({ name: trimmedValue })
+      .then(() => {
+        setNameError("")
+      })
+      .catch((e: Error) => {
+        setNameError(e.message)
+      })
+  }, [])
+
   return (
     <CustomModal
       className={classes.modalRoot}
@@ -196,9 +218,19 @@ const CreateOrEditSharedFolderModal = ({ mode, isModalOpen, onClose, bucketToEdi
               labelClassName={classes.inputLabel}
               label={t`Shared Folder Name`}
               value={sharedFolderName}
-              onChange={(value) => {setSharedFolderName(value?.toString() || "")}}
+              onChange={onNameChange}
               autoFocus
+              state={nameError ? "error" : "normal"}
             />
+            {nameError && (
+              <Typography
+                component="p"
+                variant="body1"
+                className={classes.errorText}
+              >
+                {nameError}
+              </Typography>
+            )}
           </div>
         }
         <div className={classes.modalFlexItem}>
@@ -275,7 +307,7 @@ const CreateOrEditSharedFolderModal = ({ mode, isModalOpen, onClose, bucketToEdi
               className={classes.okButton}
               loading={isCreatingSharedFolder || isEditingSharedFolder}
               onClick={mode === "create" ? onCreateSharedFolder : onEditSharedFolder}
-              disabled={mode === "create" ? !!usersError : !hasPermissionsChanged || !!usersError}
+              disabled={mode === "create" ? (!!usersError || !!nameError) : !hasPermissionsChanged || !!usersError}
             >
               {mode === "create"
                 ? <Trans>Create</Trans>

packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx

@@ -251,7 +251,7 @@ const SharedFileBrowser = () => {
       deleteItems,
       downloadFile: handleDownload,
       moveItems,
-      renameItem: renameItem,
+      renameItem,
       viewFolder,
       loadingCurrentPath,
       showUploadsInTable: false,

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemGridItem.tsx

@@ -12,7 +12,7 @@ import { CSFTheme } from "../../../../../Themes/types"
 import { FileSystemItem } from "../../../../../Contexts/FilesContext"
 import { ConnectDragPreview } from "react-dnd"
 import { Form, FormikProvider, useFormik } from "formik"
-import { renameSchema } from "../../../../../Utils/validationSchema"
+import { nameValidator } from "../../../../../Utils/validationSchema"
 
 const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => {
   return createStyles({
@@ -160,7 +160,7 @@ const FileSystemGridItem = React.forwardRef(
       initialValues:{
         fileName: name
       },
-      validationSchema: renameSchema,
+      validationSchema: nameValidator,
       onSubmit:(values) => {
         const newName = values.fileName?.trim()
 

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx

@@ -34,7 +34,7 @@ import { useFileBrowser } from "../../../../../Contexts/FileBrowserContext"
 import { getPathWithFile } from "../../../../../Utils/pathUtils"
 import { BucketUser } from "@chainsafe/files-api-client"
 import { useMemo } from "react"
-import { renameSchema } from "../../../../../Utils/validationSchema"
+import { nameValidator } from "../../../../../Utils/validationSchema"
 
 const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => {
   return createStyles({
@@ -156,7 +156,7 @@ const FileSystemItem = ({
     initialValues:{
       fileName: name
     },
-    validationSchema:renameSchema,
+    validationSchema: nameValidator,
     onSubmit:(values) => {
       const newName = values.fileName?.trim()
 
@@ -433,7 +433,7 @@ const FileSystemItem = ({
     menuItems,
     onFolderOrFileClicks,
     preview,
-    renameSchema,
+    renameSchema: nameValidator,
     selected,
     setEditing,
     resetSelectedFiles

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemTableItem.tsx

@@ -18,7 +18,7 @@ import dayjs from "dayjs"
 import { FileSystemItem } from "../../../../../Contexts/FilesContext"
 import { ConnectDragPreview } from "react-dnd"
 import { Form, FormikProvider, useFormik } from "formik"
-import { renameSchema } from "../../../../../Utils/validationSchema"
+import { nameValidator } from "../../../../../Utils/validationSchema"
 
 const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => {
   const desktopGridSettings = "50px 69px 3fr 190px 100px 45px !important"
@@ -145,7 +145,7 @@ const FileSystemTableItem = React.forwardRef(
       initialValues:{
         fileName: name
       },
-      validationSchema: renameSchema,
+      validationSchema: nameValidator,
       onSubmit:(values) => {
         const newName = values.fileName?.trim()
 

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx

@@ -24,7 +24,7 @@ import { Form, FormikProvider, useFormik } from "formik"
 import clsx from "clsx"
 import { BucketKeyPermission } from "../../../../../Contexts/FilesContext"
 import UserBubble from "../../../../Elements/UserBubble"
-import { renameSchema } from "../../../../../Utils/validationSchema"
+import { nameValidator } from "../../../../../Utils/validationSchema"
 
 const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => {
 
@@ -210,12 +210,12 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
 
   const formik = useFormik({
     initialValues:{
-      fileName: name
+      name
     },
     enableReinitialize: true,
-    validationSchema: renameSchema,
+    validationSchema: nameValidator,
     onSubmit:(values, { resetForm }) => {
-      const newName = values.fileName?.trim()
+      const newName = values.name?.trim()
 
       newName && handleRename && handleRename(bucket, newName)
       setIsRenaming(false)

packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx

@@ -230,13 +230,15 @@ const InitialScreen = ({ className }: IInitialScreen) => {
     setIsConnecting(false)
   }
 
-  const onSubmitEmail = useCallback((values) => {
+  const onSubmitEmail = useCallback((values: {email: string}) => {
     setIsConnecting(true)
     setErrorEmail("")
+    const trimmedEmail = values.email.trim()
+
     filesApiClient
-      .getIdentityEmailToken({ email: values.email })
+      .getIdentityEmailToken({ email: trimmedEmail })
       .then(() => {
-        setEmail(values.email)
+        setEmail(trimmedEmail)
         setLoginMode("email")
       })
       .catch((e) => {

packages/files-ui/src/Components/Modules/LoginModule/PasswordlessEmail.tsx

@@ -88,31 +88,13 @@ interface IPasswordlessEmail {
 
 const PasswordlessEmail = ({ resetLogin, email }: IPasswordlessEmail) => {
   const classes = useStyles()
-  // const [isSubmitEmailLoading, setIsSubmitEmailLoading] = useState(false)
   const [isSubmitResendEmailLoading, setIsSubmitResendEmailLoading] = useState(false)
   const [isSubmitNonceLoading, setIsSubmitNonceLoading] = useState(false)
-  // const [page, setPage] = useState<"confirmEmail" | "confirmVerificationCode">("confirmEmail")
-  // const [email, setEmail] = useState<string | undefined>()
   const [hasEmailResent, setHasEmailResent] = useState(false)
   const { filesApiClient } = useFilesApi()
   const { login } = useThresholdKey()
   const [error, setError] = useState<string | undefined>()
 
-  // const onSubmitEmail = useCallback((values) => {
-  //   setIsSubmitEmailLoading(true)
-  //   setError(undefined)
-  //   filesApiClient.getIdentityEmailToken({ email: values.email })
-  //     .then(() => {
-  //       setEmail(values.email)
-  //       setPage("confirmVerificationCode")
-  //       setIsSubmitEmailLoading(false)
-  //     }).catch ((e) => {
-  //       setError(t`Something went wrong!`)
-  //       setIsSubmitEmailLoading(false)
-  //       console.error(e)
-  //     })
-  // }, [filesApiClient])
-
   const onSubmitNonce = useCallback((values) => {
     if (!email) return
     setIsSubmitNonceLoading(true)

packages/files-ui/src/Utils/validationSchema.ts

@@ -1,49 +1,28 @@
 import { t } from "@lingui/macro"
 import { object, string } from "yup"
 
-const whitespaceOnlyRegex = new RegExp("^\\s+$")
-
-export const renameSchema = object().shape({
-  fileName: string()
-    .min(1, t`Please enter a name`)
-    .max(65, t`Name too long`)
-    .required(t`A name is required`)
-    .test(
-      "Invalid character in name",
-      t`Name cannot contain '/' character`,
-      (val: string | null | undefined) => !val?.includes("/")
-    )
-    .test(
-      "Only whitespace",
-      t`Name cannot only contain whitespace characters`,
-      (val) => !!val && !whitespaceOnlyRegex.test(val)
-    )
-})
-
-export const folderNameValidator = object().shape({
+export const nameValidator = object().shape({
   name: string()
+    .trim()
     .min(1, t`Please enter a name`)
     .max(65, t`Name too long`)
-    .required("Folder name is required")
+    .required("A name is required")
     .test(
       "Invalid name",
-      "Folder name cannot contain '/' character",
+      "A name cannot contain '/' character",
       (val: string | null | undefined) => !val?.includes("/")
     )
-    .test(
-      "Only whitespace",
-      t`Folder name cannot only contain whitepsace characters`,
-      (val) => !!val && !whitespaceOnlyRegex.test(val)
-    )
 })
 
 export const emailValidation = object().shape({
   email: string()
+    .trim()
     .email("Please enter a valid email")
     .required(t`Email is required`)
 })
 
 export const nonceValidation = object().shape({
   nonce: string()
+    .trim()
     .required(t`Verification code is required`)
 })

packages/files-ui/src/locales/de/messages.po

@@ -25,9 +25,6 @@ msgstr "Es wird ein Sicherungsgeheimsatz generiert und für Ihr Konto verwendet.
 msgid "A file with the same name already exists"
 msgstr "Es existiert bereits eine Datei mit demselben Namen"
 
-msgid "A name is required"
-msgstr "Ein Name ist erforderlich"
-
 msgid "Account"
 msgstr "Konto"
 
@@ -277,9 +274,6 @@ msgstr "Vorname"
 msgid "Folder"
 msgstr "Ordner"
 
-msgid "Folder name cannot only contain whitepsace characters"
-msgstr ""
-
 msgid "Folder name is already in use"
 msgstr ""
 
@@ -391,12 +385,6 @@ msgstr "Meine Dateien"
 msgid "Name"
 msgstr "Name"
 
-msgid "Name cannot contain '/' character"
-msgstr "Name darf kein /-Zeichen enthalten"
-
-msgid "Name cannot only contain whitespace characters"
-msgstr ""
-
 msgid "Name too long"
 msgstr "Name zu lang"
 

packages/files-ui/src/locales/en/messages.po

@@ -25,9 +25,6 @@ msgstr "A backup secret phrase will be generated and used for your account.<0/>W
 msgid "A file with the same name already exists"
 msgstr "A file with the same name already exists"
 
-msgid "A name is required"
-msgstr "A name is required"
-
 msgid "Account"
 msgstr "Account"
 
@@ -280,9 +277,6 @@ msgstr "First name"
 msgid "Folder"
 msgstr "Folder"
 
-msgid "Folder name cannot only contain whitepsace characters"
-msgstr "Folder name cannot only contain whitepsace characters"
-
 msgid "Folder name is already in use"
 msgstr "Folder name is already in use"
 
@@ -394,12 +388,6 @@ msgstr "My Files"
 msgid "Name"
 msgstr "Name"
 
-msgid "Name cannot contain '/' character"
-msgstr "Name cannot contain '/' character"
-
-msgid "Name cannot only contain whitespace characters"
-msgstr "Name cannot only contain whitespace characters"
-
 msgid "Name too long"
 msgstr "Name too long"