fix validate name when create folder or file (#6704)

haiwen · Sep 4, 2024 · 6f9d82d · 6f9d82d
1 parent 2d6d557
commit 6f9d82d
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 101 deletions.
diff --git a/frontend/src/components/dialog/create-file-dialog.js b/frontend/src/components/dialog/create-file-dialog.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
+import { Utils, validateName } from '../../utils/utils';
 
 const propTypes = {
   fileType: PropTypes.string,
@@ -54,19 +54,21 @@ class CreateFile extends React.Component {
     if (!this.state.isSubmitBtnActive) {
       return;
     }
-
-    let isDuplicated = this.checkDuplicatedName();
-    let newName = this.state.childName;
-
+    let newName = this.state.childName.trim();
+    let { isValid, errMessage } = validateName(newName);
+    if (!isValid) {
+      this.setState({ errMessage });
+      return;
+    }
+    let isDuplicated = this.props.checkDuplicatedName(newName);
     if (isDuplicated) {
       let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
       errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
-      this.setState({ errMessage: errMessage });
-    } else {
-      let path = this.state.parentPath + newName;
-      this.props.onAddFile(path);
-      this.props.toggleDialog();
+      this.setState({ errMessage });
+      return;
     }
+    this.props.onAddFile(this.state.parentPath + newName);
+    this.props.toggleDialog();
   };
 
   handleKeyDown = (e) => {
@@ -76,11 +78,6 @@ class CreateFile extends React.Component {
     }
   };
 
-  checkDuplicatedName = () => {
-    let isDuplicated = this.props.checkDuplicatedName(this.state.childName);
-    return isDuplicated;
-  };
-
   onAfterModelOpened = () => {
     if (!this.newInput.current) return;
     this.newInput.current.focus();

diff --git a/frontend/src/components/dialog/create-folder-dialog.js b/frontend/src/components/dialog/create-folder-dialog.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
+import { Utils, validateName } from '../../utils/utils';
 
 const propTypes = {
   fileType: PropTypes.string,
@@ -46,18 +46,20 @@ class CreateForder extends React.Component {
     if (!this.state.isSubmitBtnActive) {
       return;
     }
-
     let newName = this.state.childName;
-    let isDuplicated = this.checkDuplicatedName();
-
+    let { isValid, errMessage } = validateName(newName);
+    if (!isValid) {
+      this.setState({ errMessage });
+      return;
+    }
+    let isDuplicated = this.props.checkDuplicatedName(newName);
     if (isDuplicated) {
       let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
       errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
-      this.setState({ errMessage: errMessage });
-    } else {
-      let path = this.state.parentPath + newName;
-      this.props.onAddFolder(path);
+      this.setState({ errMessage });
+      return;
     }
+    this.props.onAddFolder(this.state.parentPath + newName);
   };
 
   handleKeyDown = (e) => {
@@ -71,11 +73,6 @@ class CreateForder extends React.Component {
     this.props.addFolderCancel();
   };
 
-  checkDuplicatedName = () => {
-    let isDuplicated = this.props.checkDuplicatedName(this.state.childName);
-    return isDuplicated;
-  };
-
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>

diff --git a/frontend/src/components/dialog/rename-dialog.js b/frontend/src/components/dialog/rename-dialog.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
+import { Utils, validateName } from '../../utils/utils';
 import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
 
 const propTypes = {
@@ -47,19 +47,20 @@ class Rename extends React.Component {
   };
 
   handleSubmit = () => {
-    let { isValid, errMessage } = this.validateInput();
+    let newName = this.state.newName.trim();
+    let { isValid, errMessage } = validateName(newName);
     if (!isValid) {
-      this.setState({ errMessage: errMessage });
-    } else {
-      let isDuplicated = this.checkDuplicatedName();
-      if (isDuplicated) {
-        let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
-        errMessage = errMessage.replace('{name}', Utils.HTMLescape(this.state.newName));
-        this.setState({ errMessage: errMessage });
-      } else {
-        this.props.onRename(this.state.newName);
-      }
+      this.setState({ errMessage });
+      return;
+    }
+    let isDuplicated = this.props.checkDuplicatedName(newName);
+    if (isDuplicated) {
+      let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
+      errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
+      this.setState({ errMessage });
+      return;
     }
+    this.props.onRename(newName);
   };
 
   handleKeyDown = (e) => {
@@ -77,30 +78,6 @@ class Rename extends React.Component {
     this.setState({ newName: name });
   };
 
-  validateInput = () => {
-    let newName = this.state.newName.trim();
-    let isValid = true;
-    let errMessage = '';
-    if (!newName) {
-      isValid = false;
-      errMessage = gettext('Name is required.');
-      return { isValid, errMessage };
-    }
-
-    if (newName.indexOf('/') > -1) {
-      isValid = false;
-      errMessage = gettext('Name should not include ' + '\'/\'' + '.');
-      return { isValid, errMessage };
-    }
-
-    return { isValid, errMessage };
-  };
-
-  checkDuplicatedName = () => {
-    let isDuplicated = this.props.checkDuplicatedName(this.state.newName);
-    return isDuplicated;
-  };
-
   onAfterModelOpened = () => {
     if (!this.newInput.current) return;
     const { currentNode } = this.props;

diff --git a/frontend/src/components/dialog/rename-dirent.js b/frontend/src/components/dialog/rename-dirent.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
+import { Utils, validateName } from '../../utils/utils';
 import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
 
 const propTypes = {
@@ -47,20 +47,21 @@ class Rename extends React.Component {
   };
 
   handleSubmit = () => {
-    let { isValid, errMessage } = this.validateInput();
+    let newName = this.state.newName.trim();
+    let { isValid, errMessage } = validateName(newName);
     if (!isValid) {
-      this.setState({ errMessage: errMessage });
-    } else {
-      let isDuplicated = this.checkDuplicatedName();
-      if (isDuplicated) {
-        let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
-        errMessage = errMessage.replace('{name}', Utils.HTMLescape(this.state.newName));
-        this.setState({ errMessage: errMessage });
-      } else {
-        this.props.onRename(this.state.newName);
-        this.props.toggleCancel();
-      }
+      this.setState({ errMessage });
+      return;
     }
+    let isDuplicated = this.props.checkDuplicatedName(newName);
+    if (isDuplicated) {
+      let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
+      errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
+      this.setState({ errMessage });
+      return;
+    }
+    this.props.onRename(newName);
+    this.props.toggleCancel();
   };
 
   handleKeyDown = (e) => {
@@ -79,30 +80,6 @@ class Rename extends React.Component {
     this.setState({ newName: name });
   };
 
-  validateInput = () => {
-    let newName = this.state.newName.trim();
-    let isValid = true;
-    let errMessage = '';
-    if (!newName) {
-      isValid = false;
-      errMessage = gettext('Name is required.');
-      return { isValid, errMessage };
-    }
-
-    if (newName.indexOf('/') > -1) {
-      isValid = false;
-      errMessage = gettext('Name should not include ' + '\'/\'' + '.');
-      return { isValid, errMessage };
-    }
-
-    return { isValid, errMessage };
-  };
-
-  checkDuplicatedName = () => {
-    let isDuplicated = this.props.checkDuplicatedName(this.state.newName);
-    return isDuplicated;
-  };
-
   onAfterModelOpened = () => {
     const inputElement = this.newInput.current;
     if (inputElement) {

diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
@@ -1713,3 +1713,29 @@ export const validatePassword = (password) => {
   const requiredStrengths = userStrongPasswordRequired ? ['strong', 'very_strong'] : ['medium', 'strong', 'very_strong'];
   return requiredStrengths.includes(passwordStrength);
 };
+
+export const validateName = (newName) => {
+  let isValid = true;
+  let errMessage = '';
+  if (!newName || !newName.trim()) {
+    isValid = false;
+    errMessage = gettext('Name is required');
+    return { isValid, errMessage };
+  }
+  if (newName.includes('/')) {
+    isValid = false;
+    errMessage = gettext('Name cannot contain slash');
+    return { isValid, errMessage };
+  }
+  if (newName.includes('`')) {
+    isValid = false;
+    errMessage = gettext('Name cannot contain backtick');
+    return { isValid, errMessage };
+  }
+  if (newName.includes('\\')) {
+    isValid = false;
+    errMessage = gettext('Name cannot contain backslash');
+    return { isValid, errMessage };
+  }
+  return { isValid, errMessage };
+};