repair invalid bug

frontend/src/components/dialog/generate-share-link.js

@@ -14,9 +14,10 @@ class GenerateShareLink extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      passwordVisible: false,
-      showPasswordInput: false,
       isValidate: false,
+      isShowPasswordInput: false,
+      isPasswordVisible: false,
+      isExpireChecked: false,
       password: '',
       passwdnew: '',
       expireDays: '',
@@ -28,6 +29,7 @@ class GenerateShareLink extends React.Component {
       'can_edit': false, 
       'can_download': true
     };
+    this.isExpireDaysNoLimit = (parseInt(shareLinkExpireDaysMin) === 0 && parseInt(shareLinkExpireDaysMax) === 0);
   }
 
   componentDidMount() {
@@ -47,9 +49,9 @@ class GenerateShareLink extends React.Component {
     });
   } 
 
-  addPassword = () => {
+  onPasswordInputChecked = () => {
     this.setState({
-      showPasswordInput: !this.state.showPasswordInput,
+      isShowPasswordInput: !this.state.isShowPasswordInput,
       password: '',
       passwdnew: '',
       errorInfo: ''
@@ -58,7 +60,7 @@ class GenerateShareLink extends React.Component {
 
   togglePasswordVisible = () => {
     this.setState({
-      passwordVisible: !this.state.passwordVisible
+      isPasswordVisible: !this.state.isPasswordVisible
     });
   }
 
@@ -66,20 +68,16 @@ class GenerateShareLink extends React.Component {
     let val = Math.random().toString(36).substr(5);
     this.setState({
       password: val,
-      passwordnew: val
+      passwdnew: val
     });
   }
 
   inputPassword = (e) => {
-    this.setState({
+    this.setState({password: e.target.value});
-      password: e.target.value
-    });
   }
 
   inputPasswordNew = (e) => {
-    this.setState({
+    this.setState({passwdnew: e.target.value});
-      passwordnew: e.target.value
-    });
   }
 
   setPermission = (permission) => {
@@ -97,35 +95,13 @@ class GenerateShareLink extends React.Component {
   }
 
   generateShareLink = () => {
-    let path = this.props.itemPath; 
+    let isValid = this.validateParamsInput();
-    let repoID = this.props.repoID;
+    if (isValid) {
-    if (this.state.showPasswordInput && (this.state.password == '')) {
+      let { itemPath, repoID } = this.props;
-      this.setState({
-        errorInfo: gettext('Please enter password')
-      });
-    }
-    else if (this.state.showPasswordInput && (this.state.showPasswordInput && this.state.password.length < 8)) {
-      this.setState({
-        errorInfo: gettext('Password is too short')
-      });
-    }
-    else if (this.state.showPasswordInput && (this.state.password !== this.state.passwordnew)) {
-      this.setState({
-        errorInfo: gettext('Passwords don\'t match')
-      });
-    } 
-    else if (this.state.expireDays === '') {
-      this.setState({
-        errorInfo: gettext('Please enter days')
-      });
-    } else if (!this.state.isValidate) {
-      // errMessage had been setted
-      return;
-    } else {
       let { password, expireDays } = this.state;
       let permissions = this.permissions;
       permissions = JSON.stringify(permissions);
-      seafileAPI.createShareLink(repoID, path, password, expireDays, permissions).then((res) => {
+      seafileAPI.createShareLink(repoID, itemPath, password, expireDays, permissions).then((res) => {
         this.setState({
           link: res.data.link,
           token: res.data.token
@@ -139,49 +115,100 @@ class GenerateShareLink extends React.Component {
       this.setState({
         link: '',
         token: '',
-        showPasswordInput: false,
         password: '',
         passwordnew: '',
+        isShowPasswordInput: false,
+        expireDays: '',
+        isExpireChecked: false,
       });
       this.permissions = {
         'can_edit': false,
         'can_download': true
       };
     });
-  } 
+  }
 
-  onExpireHandler = (e) => {
+  onExpireChecked = (e) => {
-    let day = e.target.value;
+    this.setState({isExpireChecked: e.target.checked});
+  }
+
+  onExpireDaysChanged = (e) => {
+    this.setState({expireDays: e.target.value});
+  }
+
+  validateParamsInput = () => {
+    let { isShowPasswordInput , password, passwdnew, isExpireChecked, expireDays } = this.state;
+    // validate password
+    if (isShowPasswordInput) {
+      if (password.length === 0) {
+        this.setState({errorInfo: 'Please enter password'});
+        return false;
+      }
+      if (password.length < 8) {
+        this.setState({errorInfo: 'Password is too short'});
+        return false;
+      }
+      if (password !== passwdnew) {
+        this.setState({errorInfo: 'Passwords don\'t match'});
+        return false;
+      }
+    }
+
+    // validate days
+    // no limit
     let reg = /^\d+$/;
-    let flag = reg.test(day);
+    if (this.isExpireDaysNoLimit) {
-    if (!flag) {
+      if (isExpireChecked) {
-      this.setState({
+        if (!expireDays) {
-        isValidate: false,
+          this.setState({errorInfo: gettext('Please enter days')});
-        errorInfo: gettext('Please enter a non-negative integer'),
+          return false;
-        expireDays: day,
+        }
-      });
+        let flag = reg.test(expireDays);
-      return;
+        if (!flag) {
-    }
+          this.setState({errorInfo: 'Please enter a non-negative integer'});
-    
+          return false;
-    day = parseInt(day);
+        }
+        this.setState({expireDays: parseInt(expireDays)});
+      }
+    } else {
+      if (!expireDays) {
+        this.setState({errorInfo: gettext('Please enter days')});
+        return false;
+      }
+      let flag = reg.test(expireDays);
+      if (!flag) {
+        this.setState({errorInfo: 'Please enter a non-negative integer'});
+        return false;
+      }
 
-    if (day < shareLinkExpireDaysMin || day > shareLinkExpireDaysMax) {
+      expireDays = parseInt(expireDays);
-      let errorMessage = gettext('Please enter a value between day1 and day2');
+      let minDays = parseInt(shareLinkExpireDaysMin);
-      errorMessage = errorMessage.replace('day1', shareLinkExpireDaysMin);
+      let maxDays = parseInt(shareLinkExpireDaysMax);
-      errorMessage = errorMessage.replace('day2', shareLinkExpireDaysMax);
+
-      this.setState({
+      if (minDays !== 0 && maxDays !== maxDays) {
-        isValidate: false,
+        if (expireDays < minDays) {
-        errorInfo: errorMessage,
+          this.setState({errorInfo: 'Please enter valid days'});
-        expireDays: day
+          return false;
-      });
+        }
-      return;
+      }
+      
+      if (minDays === 0 && maxDays !== 0 ) {
+        if (expireDays > maxDays) {
+          this.setState({errorInfo: 'Please enter valid days'});
+          return false;
+        }
+      }
+      
+      if (minDays !== 0 && maxDays !== 0) {
+        if (expireDays < minDays || expireDays < maxDays) {
+          this.setState({errorInfo: 'Please enter valid days'});
+          return false;
+        }
+      }
+      this.setState({expireDays: expireDays});
     }
 
-    this.setState({
+    return true;
-      isValidate: true,
-      errorInfo: '',
-      expireDays: day
-    });
   }
 
   render() {
@@ -197,35 +224,48 @@ class GenerateShareLink extends React.Component {
         <Form className="generate-share-link">
           <FormGroup check>
             <Label check>
-              <Input type="checkbox" onChange={this.addPassword}/>{'  '}{gettext('Add password protection')} 
+              <Input type="checkbox" onChange={this.onPasswordInputChecked}/>{'  '}{gettext('Add password protection')} 
             </Label>
           </FormGroup>
-          {this.state.showPasswordInput &&
+          {this.state.isShowPasswordInput &&
             <FormGroup className="link-operation-content">
               <Label>{gettext('Password')}</Label><span className="tip"> ({gettext('at least 8 characters')}) </span>
               <InputGroup className="passwd">
-                <Input type={this.state.passwordVisible ? 'text' : 'password'} value={this.state.password || ''} onChange={this.inputPassword}/>
+                <Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password || ''} onChange={this.inputPassword}/>
                 <InputGroupAddon addonType="append">
-                  <Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.passwordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
+                  <Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
                   <Button onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
                 </InputGroupAddon>
               </InputGroup>
               <Label>{gettext('Password again')}</Label>
-              <Input className="passwd" type={this.state.passwordVisible ? 'text' : 'password'} value={this.state.passwordnew || ''} onChange={this.inputPasswordNew} />
+              <Input className="passwd" type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} />
             </FormGroup>
           }
-          <FormGroup check>
+          {this.isExpireDaysNoLimit && (
-            <Label check>
+            <FormGroup check>
-              <Input className="expire-checkbox" type="checkbox" checked readOnly/>{'  '}{gettext('Add auto expiration')}
+              <Label check>
-              <Input className="expire-input" type="text" value={this.state.expireDays} onChange={this.onExpireHandler}/> <span>{gettext('days')}</span>
+                <Input className="expire-checkbox" type="checkbox" onChange={this.onExpireChecked}/>{'  '}{gettext('Add auto expiration')}
-              {parseInt(shareLinkExpireDaysMin) === 0 && parseInt(shareLinkExpireDaysMax) === 0 && (
+                <Input className="expire-input" type="text" value={this.state.expireDays} onChange={this.onExpireDaysChanged} readOnly={!this.state.isExpireChecked}/><span>{gettext('days')}</span>
-                <span> ({gettext('no limit')})</span>
+              </Label>
-              )}
+            </FormGroup>
-              {parseInt(shareLinkExpireDaysMax) !== 0 && (
+          )}
-                <span> ({shareLinkExpireDaysMin} - {shareLinkExpireDaysMax}{gettext('days')})</span>
+          {!this.isExpireDaysNoLimit && (
-              )}
+            <FormGroup check>
-            </Label>
+              <Label check>
-          </FormGroup>
+                <Input className="expire-checkbox" type="checkbox" onChange={this.onExpireChecked} checked readOnly/>{'  '}{gettext('Add auto expiration')}
+                <Input className="expire-input" type="text" value={this.state.expireDays} onChange={this.onExpireDaysChanged} /> <span>{gettext('days')}</span>
+                {(parseInt(shareLinkExpireDaysMin) !== 0 && parseInt(shareLinkExpireDaysMax) !== 0) && (
+                  <span> ({shareLinkExpireDaysMin} - {shareLinkExpireDaysMax}{' '}{gettext('days')})</span>
+                )}
+                {(parseInt(shareLinkExpireDaysMin) !== 0 && parseInt(shareLinkExpireDaysMax) === 0) && (
+                  <span> ({gettext('Greater than or equal to')} {shareLinkExpireDaysMin}{' '}{gettext('days')})</span>
+                )}
+                {(parseInt(shareLinkExpireDaysMin) === 0 && parseInt(shareLinkExpireDaysMax) !== 0) && (
+                  <span> ({gettext('Less than or equal to')} {shareLinkExpireDaysMax}{' '}{gettext('days')})</span>
+                )}
+              </Label>
+            </FormGroup>
+          )}
           <FormGroup check>
             <Label check>
               <Input type="checkbox" checked readOnly/>{'  '}{gettext('Set permission')}

frontend/src/components/dialog/share-dialog.js

@@ -9,10 +9,10 @@ import GenerateUploadLink from './generate-upload-link';
 import '../../css/share-link-dialog.css';
 
 const propTypes = {
-  itemPath: PropTypes.string.isRequired,
+  itemType: PropTypes.bool.isRequired, // there will be three choose: ['library', 'dir', 'file']
   itemName: PropTypes.string.isRequired,
+  itemPath: PropTypes.string.isRequired,
   toggleDialog: PropTypes.func.isRequired,
-  isDir: PropTypes.bool.isRequired,
   repoID: PropTypes.string.isRequired
 };
 
@@ -79,14 +79,13 @@ class ShareDialog extends React.Component {
   }
 
   renderFileContent = () => {
-    let activeTab = this.state.activeTab;
     return (
       <Fragment>
         <div className="share-dialog-side">
           <Nav pills vertical>
             <NavItem>
               <NavLink
-                className={activeTab === 'shareLink' ? 'active' : ''} onClick={() => {this.toggle.bind(this, 'shareLink');}}>
+                className="active" onClick={() => {this.toggle.bind(this, 'shareLink');}}>
                 {gettext('Share Link')}
               </NavLink>
             </NavItem>
@@ -104,15 +103,14 @@ class ShareDialog extends React.Component {
   }
 
   render() {
-    let itemName = this.props.itemName;
+    let { itemType, itemName } = this.props;
-    
     return (
       <div>
         <Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog">
-          <ModalHeader toggle={this.props.toggleDialog}>Share <span className="sf-font" title={itemName}>{itemName}</span></ModalHeader>
+          <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="sf-font" title={itemName}>{itemName}</span></ModalHeader>
           <ModalBody className="share-dialog-content">
-            {this.props.isDir && this.renderDirContent()}
+            {(itemType === 'library' || itemType === 'dir') && this.renderDirContent()}
-            {!this.props.isDir && this.renderFileContent()}
+            {itemType === 'file' && this.renderFileContent()}
           </ModalBody>
         </Modal>
       </div>

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -477,9 +477,9 @@ class DirentListItem extends React.Component {
         {this.state.isShareDialogShow &&
           <ModalPortal>
             <ShareDialog 
-              isDir={dirent.isDir()}
+              itemType={dirent.type}
-              itemPath={direntPath}
               itemName={dirent.name}
+              itemPath={direntPath}
               repoID={this.props.repoID}
               toggleDialog={this.onItemShare}
             />