[share dialog] share link/upload link: improved 'set expiration'

- improved UI for 'edit expiration'
- improved code: added component `set-link-expiration.js`
- fixed bugs

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

@@ -1,8 +1,8 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import copy from 'copy-to-clipboard';
-import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon, InputGroupText, Alert, FormText } from 'reactstrap';
+import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon, Alert } from 'reactstrap';
 import { isPro, gettext, shareLinkExpireDaysMin, shareLinkExpireDaysMax, shareLinkExpireDaysDefault, shareLinkForceUsePassword, shareLinkPasswordMinLength, shareLinkPasswordStrengthLevel, canSendShareLinkEmail } from '../../utils/constants';
 import ShareLinkPermissionEditor from '../../components/select-editor/share-link-permission-editor';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -11,8 +11,8 @@ import ShareLink from '../../models/share-link';
 import toaster from '../toast';
 import Loading from '../loading';
 import SendLink from '../send-link';
-import DateTimePicker from '../date-and-time-picker';
 import SharedLink from '../shared-link';
+import SetLinkExpiration from '../set-link-expiration';
 
 const propTypes = {
   itemPath: PropTypes.string.isRequired,
@@ -31,20 +31,6 @@ class GenerateShareLink extends React.Component {
     this.isExpireDaysNoLimit = (shareLinkExpireDaysMin === 0 && shareLinkExpireDaysMax === 0 && shareLinkExpireDaysDefault == 0);
     this.defaultExpireDays = this.isExpireDaysNoLimit ? '' : shareLinkExpireDaysDefault;
 
-    let expirationLimitTip = '';
-    if (shareLinkExpireDaysMin !== 0 && shareLinkExpireDaysMax !== 0) {
-      expirationLimitTip = gettext('{minDays_placeholder} - {maxDays_placeholder} days')
-        .replace('{minDays_placeholder}', shareLinkExpireDaysMin)
-        .replace('{maxDays_placeholder}', shareLinkExpireDaysMax);
-    } else if (shareLinkExpireDaysMin !== 0 && shareLinkExpireDaysMax === 0) {
-      expirationLimitTip = gettext('Greater than or equal to {minDays_placeholder} days')
-        .replace('{minDays_placeholder}', shareLinkExpireDaysMin);
-    } else if (shareLinkExpireDaysMin === 0 && shareLinkExpireDaysMax !== 0) {
-      expirationLimitTip = gettext('Less than or equal to {maxDays_placeholder} days')
-        .replace('{maxDays_placeholder}', shareLinkExpireDaysMax);
-    }
-    this.expirationLimitTip = expirationLimitTip;
-
     this.state = {
       isOpIconShown: false,
       isValidate: false,
@@ -53,7 +39,7 @@ class GenerateShareLink extends React.Component {
       isExpireChecked: !this.isExpireDaysNoLimit,
       isExpirationEditIconShow: false,
       isEditingExpiration: false,
-      setExp: 'by-days',
+      expType: 'by-days',
       expireDays: this.defaultExpireDays,
       expDate: null,
       password: '',
@@ -118,33 +104,12 @@ class GenerateShareLink extends React.Component {
     }
   }
 
-  setExp = (e) => {
+  setExpType = (e) => {
     this.setState({
-      setExp: e.target.value
+      expType: e.target.value
     });
   }
 
-  disabledDate = (current) => {
-    if (!current) {
-      // allow empty select
-      return false;
-    }
-
-    if (this.isExpireDaysNoLimit) {
-      return current.isBefore(moment(), 'day');
-    }
-
-    const startDay = moment().add(shareLinkExpireDaysMin, 'days');
-    const endDay = moment().add(shareLinkExpireDaysMax, 'days');
-    if (shareLinkExpireDaysMin !== 0 && shareLinkExpireDaysMax !== 0) {
-      return current.isBefore(startDay, 'day') || current.isAfter(endDay, 'day');
-    } else if (shareLinkExpireDaysMin !== 0 && shareLinkExpireDaysMax === 0) {
-      return current.isBefore(startDay, 'day');
-    } else if (shareLinkExpireDaysMin === 0 && shareLinkExpireDaysMax !== 0) {
-      return current.isBefore(moment(), 'day') || current.isAfter(endDay, 'day');
-    }
-  }
-
   onExpDateChanged = (value) => {
     this.setState({
       expDate: value
@@ -199,7 +164,7 @@ class GenerateShareLink extends React.Component {
     if (isValid) {
       this.setState({errorInfo: ''});
       let { itemPath, repoID } = this.props;
-      let { password, isExpireChecked, setExp, expireDays, expDate } = this.state;
+      let { password, isExpireChecked, expType, expireDays, expDate } = this.state;
       let permissions;
       if (isPro) {
         const permissionDetails = Utils.getShareLinkPermissionObject(this.state.currentPermission).permissionDetails;
@@ -207,7 +172,7 @@ class GenerateShareLink extends React.Component {
       }
       let expirationTime = '';
       if (isExpireChecked) {
-        if (setExp == 'by-days') {
+        if (expType == 'by-days') {
           expirationTime = moment().add(parseInt(expireDays), 'days').format();
         } else {
           expirationTime = expDate.format();
@@ -245,6 +210,7 @@ class GenerateShareLink extends React.Component {
         passwdnew: '',
         isShowPasswordInput: shareLinkForceUsePassword ? true : false,
         expireDays: this.defaultExpireDays,
+        expDate: null,
         isExpireChecked: !this.isExpireDaysNoLimit,
         errorInfo: '',
         sharedLinkInfo: null,
@@ -266,7 +232,7 @@ class GenerateShareLink extends React.Component {
   }
 
   validateParamsInput = () => {
-    let { isShowPasswordInput, password, passwdnew, isExpireChecked, setExp, expireDays, expDate } = this.state;
+    let { isShowPasswordInput, password, passwdnew, isExpireChecked, expType, expireDays, expDate } = this.state;
 
     // validate password
     if (isShowPasswordInput) {
@@ -289,7 +255,7 @@ class GenerateShareLink extends React.Component {
     }
 
     if (isExpireChecked) {
-      if (setExp == 'by-date') {
+      if (expType == 'by-date') {
         if (!expDate) {
           this.setState({errorInfo: gettext('Please select an expiration time')});
           return false;
@@ -356,10 +322,10 @@ class GenerateShareLink extends React.Component {
     e.preventDefault();
     e.nativeEvent.stopImmediatePropagation();
 
-    let { setExp, expireDays, expDate } = this.state;
+    let { expType, expireDays, expDate } = this.state;
 
     let expirationTime = '';
-    if (setExp == 'by-days') {
+    if (expType == 'by-days') {
       expirationTime = moment().add(parseInt(expireDays), 'days').format();
     } else {
       expirationTime = expDate.format();
@@ -368,8 +334,8 @@ class GenerateShareLink extends React.Component {
     seafileAPI.updateShareLink(this.state.sharedLinkInfo.token, '', expirationTime).then((res) => {
       let sharedLinkInfo = new ShareLink(res.data);
       this.setState({
-	sharedLinkInfo: sharedLinkInfo,
+        sharedLinkInfo: sharedLinkInfo,
-	isEditingExpiration: false,
+        isEditingExpiration: false,
       });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -413,7 +379,7 @@ class GenerateShareLink extends React.Component {
 
     let passwordLengthTip = gettext('(at least {passwordMinLength} characters and includes {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols)');
     passwordLengthTip = passwordLengthTip.replace('{passwordMinLength}', shareLinkPasswordMinLength)
-                                         .replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel);
+      .replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel);
 
     const { userPerm } = this.props;
     const { isCustomPermission } = Utils.getUserPermission(userPerm);
@@ -463,7 +429,7 @@ class GenerateShareLink extends React.Component {
                 <dt className="text-secondary font-weight-normal">{gettext('Expiration Date:')}</dt>
                 {!this.state.isEditingExpiration &&
                   <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOverExpirationEditIcon} onMouseLeave={this.handleMouseOutExpirationEditIcon}>
-		    {moment(sharedLinkInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}
+                    {moment(sharedLinkInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}
                     {this.state.isExpirationEditIconShow && (
                       <a href="#"
                         role="button"
@@ -477,41 +443,21 @@ class GenerateShareLink extends React.Component {
                 }
                 {this.state.isEditingExpiration &&
                   <div className="ml-4">
-                    <FormGroup check>
+                    <SetLinkExpiration
-                      <Label check>
+                      minDays={shareLinkExpireDaysMin}
-                        <Input type="radio" name="set-exp" value="by-days" checked={this.state.setExp == 'by-days'} onChange={this.setExp} className="mr-1" />
+                      maxDays={shareLinkExpireDaysMax}
-                        <span>{gettext('Expiration days')}</span>
+                      defaultDays={shareLinkExpireDaysDefault}
-                      </Label>
+                      expType={this.state.expType}
-                      {this.state.setExp == 'by-days' && (
+                      setExpType={this.setExpType}
-                        <Fragment>
+                      expireDays={this.state.expireDays}
-                          <InputGroup style={{width: inputWidth}}>
+                      onExpireDaysChanged={this.onExpireDaysChanged}
-                            <Input type="text" value={this.state.expireDays} onChange={this.onExpireDaysChanged} />
+                      expDate={this.state.expDate}
-                            <InputGroupAddon addonType="append">
+                      onExpDateChanged={this.onExpDateChanged}
-                              <InputGroupText>{gettext('days')}</InputGroupText>
+                    />
-                            </InputGroupAddon>
+                    <div className={this.state.expType == 'by-days' ? 'mt-2' : 'mt-3'}>
-                          </InputGroup>
+                      <button className="btn btn-primary mr-2" onClick={this.updateExpiration}>{gettext('Update')}</button>
-                          {!this.state.isExpireDaysNoLimit && (
+                      <button className="btn btn-secondary" onClick={this.editingExpirationToggle}>{gettext('Cancel')}</button>
-                            <FormText color="muted">{this.expirationLimitTip}</FormText>
+                    </div>
-                          )}
-                        </Fragment>
-                      )}
-                    </FormGroup>
-                    <FormGroup check>
-                      <Label check>
-                        <Input type="radio" name="set-exp" value="by-date" checked={this.state.setExp == 'by-date'} onChange={this.setExp} className="mr-1" />
-                        <span>{gettext('Expiration time')}</span>
-                      </Label>
-                      {this.state.setExp == 'by-date' && (
-                        <DateTimePicker
-                          inputWidth={inputWidth}
-                          disabledDate={this.disabledDate}
-                          value={this.state.expDate}
-                          onChange={this.onExpDateChanged}
-                        />
-                      )}
-                    </FormGroup>
-                    <button className="btn btn-primary" onClick={this.updateExpiration}>{gettext('Update')}</button>{' '}
-                    <button className="btn btn-secondary" onClick={this.editingExpirationToggle}>{gettext('Cancel')}</button>
                   </div>
                 }
               </FormGroup>
@@ -562,15 +508,15 @@ class GenerateShareLink extends React.Component {
         <Form className="generate-share-link">
           <FormGroup check>
             {shareLinkForceUsePassword ? (
-            <Label check>
+              <Label check>
-              <Input type="checkbox" checked readOnly disabled />
+                <Input type="checkbox" checked readOnly disabled />
-              <span>{gettext('Add password protection')}</span>
+                <span>{gettext('Add password protection')}</span>
-            </Label>
+              </Label>
             ) : (
-            <Label check>
+              <Label check>
-              <Input type="checkbox" onChange={this.onPasswordInputChecked} />
+                <Input type="checkbox" onChange={this.onPasswordInputChecked} />
-              <span>{gettext('Add password protection')}</span>
+                <span>{gettext('Add password protection')}</span>
-            </Label>
+              </Label>
             )}
             {this.state.isShowPasswordInput &&
             <div className="ml-4">
@@ -603,39 +549,17 @@ class GenerateShareLink extends React.Component {
             </Label>
             {this.state.isExpireChecked &&
               <div className="ml-4">
-                <FormGroup check>
+                <SetLinkExpiration
-                  <Label check>
+                  minDays={shareLinkExpireDaysMin}
-                    <Input type="radio" name="set-exp" value="by-days" checked={this.state.setExp == 'by-days'} onChange={this.setExp} className="mr-1" />
+                  maxDays={shareLinkExpireDaysMax}
-                    <span>{gettext('Expiration days')}</span>
+                  defaultDays={shareLinkExpireDaysDefault}
-                  </Label>
+                  expType={this.state.expType}
-                  {this.state.setExp == 'by-days' && (
+                  setExpType={this.setExpType}
-                    <Fragment>
+                  expireDays={this.state.expireDays}
-                      <InputGroup style={{width: inputWidth}}>
+                  onExpireDaysChanged={this.onExpireDaysChanged}
-                        <Input type="text" value={this.state.expireDays} onChange={this.onExpireDaysChanged} />
+                  expDate={this.state.expDate}
-                        <InputGroupAddon addonType="append">
+                  onExpDateChanged={this.onExpDateChanged}
-                          <InputGroupText>{gettext('days')}</InputGroupText>
+                />
-                        </InputGroupAddon>
-                      </InputGroup>
-                      {!this.state.isExpireDaysNoLimit && (
-                        <FormText color="muted">{this.expirationLimitTip}</FormText>
-                      )}
-                    </Fragment>
-                  )}
-                </FormGroup>
-                <FormGroup check>
-                  <Label check>
-                    <Input type="radio" name="set-exp" value="by-date" checked={this.state.setExp == 'by-date'} onChange={this.setExp} className="mr-1" />
-                    <span>{gettext('Expiration time')}</span>
-                  </Label>
-                  {this.state.setExp == 'by-date' && (
-                    <DateTimePicker
-                      inputWidth={inputWidth}
-                      disabledDate={this.disabledDate}
-                      value={this.state.expDate}
-                      onChange={this.onExpDateChanged}
-                    />
-                  )}
-                </FormGroup>
               </div>
             }
           </FormGroup>

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

@@ -1,16 +1,16 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import copy from 'copy-to-clipboard';
 import moment from 'moment';
-import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon, InputGroupText, Alert, FormText } from 'reactstrap';
+import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon, Alert } from 'reactstrap';
 import { gettext, shareLinkForceUsePassword, shareLinkPasswordMinLength, shareLinkPasswordStrengthLevel, canSendShareLinkEmail, uploadLinkExpireDaysMin, uploadLinkExpireDaysMax, uploadLinkExpireDaysDefault } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import UploadLink from '../../models/upload-link';
 import toaster from '../toast';
 import SendLink from '../send-link';
-import DateTimePicker from '../date-and-time-picker';
 import SharedLink from '../shared-link';
+import SetLinkExpiration from '../set-link-expiration';
 
 const propTypes = {
   itemPath: PropTypes.string.isRequired,
@@ -27,20 +27,6 @@ class GenerateUploadLink extends React.Component {
     this.isExpireDaysNoLimit = (uploadLinkExpireDaysMin === 0 && uploadLinkExpireDaysMax === 0 && uploadLinkExpireDaysDefault == 0);
     this.defaultExpireDays = this.isExpireDaysNoLimit ? '' : uploadLinkExpireDaysDefault;
 
-    let expirationLimitTip = '';
-    if (uploadLinkExpireDaysMin !== 0 && uploadLinkExpireDaysMax !== 0) {
-      expirationLimitTip = gettext('{minDays_placeholder} - {maxDays_placeholder} days')
-        .replace('{minDays_placeholder}', uploadLinkExpireDaysMin)
-        .replace('{maxDays_placeholder}', uploadLinkExpireDaysMax);
-    } else if (uploadLinkExpireDaysMin !== 0 && uploadLinkExpireDaysMax === 0) {
-      expirationLimitTip = gettext('Greater than or equal to {minDays_placeholder} days')
-        .replace('{minDays_placeholder}', uploadLinkExpireDaysMin);
-    } else if (uploadLinkExpireDaysMin === 0 && uploadLinkExpireDaysMax !== 0) {
-      expirationLimitTip = gettext('Less than or equal to {maxDays_placeholder} days')
-        .replace('{maxDays_placeholder}', uploadLinkExpireDaysMax);
-    }
-    this.expirationLimitTip = expirationLimitTip;
-
     this.state = {
       showPasswordInput: shareLinkForceUsePassword ? true : false,
       passwordVisible: false,
@@ -52,7 +38,7 @@ class GenerateUploadLink extends React.Component {
       isExpireChecked: !this.isExpireDaysNoLimit,
       isExpirationEditIconShow: false,
       isEditingExpiration: false,
-      setExp: 'by-days',
+      expType: 'by-days',
       expireDays: this.defaultExpireDays,
       expDate: null
     };
@@ -126,11 +112,11 @@ class GenerateUploadLink extends React.Component {
       this.setState({errorInfo: ''});
 
       let { itemPath, repoID } = this.props;
-      let { password, isExpireChecked, setExp, expireDays, expDate } = this.state;
+      let { password, isExpireChecked, expType, expireDays, expDate } = this.state;
 
       let expirationTime = '';
       if (isExpireChecked) {
-        if (setExp == 'by-days') {
+        if (expType == 'by-days') {
           expirationTime = moment().add(parseInt(expireDays), 'days').format();
         } else {
           expirationTime = expDate.format();
@@ -148,7 +134,7 @@ class GenerateUploadLink extends React.Component {
   }
 
   validateParamsInput = () => {
-    let { showPasswordInput, password, passwordnew, isExpireChecked, setExp, expireDays, expDate } = this.state;
+    let { showPasswordInput, password, passwordnew, isExpireChecked, expType, expireDays, expDate } = this.state;
 
     // check password params
     if (showPasswordInput) {
@@ -171,7 +157,7 @@ class GenerateUploadLink extends React.Component {
     }
 
     if (isExpireChecked) {
-      if (setExp == 'by-date') {
+      if (expType == 'by-date') {
         if (!expDate) {
           this.setState({errorInfo: gettext('Please select an expiration time')});
           return false;
@@ -197,33 +183,12 @@ class GenerateUploadLink extends React.Component {
     this.setState({isExpireChecked: e.target.checked});
   }
 
-  setExp = (e) => {
+  setExpType = (e) => {
     this.setState({
-      setExp: e.target.value
+      expType: e.target.value
     });
   }
 
-  disabledDate = (current) => {
-    if (!current) {
-      // allow empty select
-      return false;
-    }
-
-    if (this.isExpireDaysNoLimit) {
-      return current.isBefore(moment(), 'day');
-    }
-
-    const startDay = moment().add(uploadLinkExpireDaysMin, 'days');
-    const endDay = moment().add(uploadLinkExpireDaysMax, 'days');
-    if (uploadLinkExpireDaysMin !== 0 && uploadLinkExpireDaysMax !== 0) {
-      return current.isBefore(startDay, 'day') || current.isAfter(endDay, 'day');
-    } else if (uploadLinkExpireDaysMin !== 0 && uploadLinkExpireDaysMax === 0) {
-      return current.isBefore(startDay, 'day');
-    } else if (uploadLinkExpireDaysMin === 0 && uploadLinkExpireDaysMax !== 0) {
-      return current.isBefore(moment(), 'day') || current.isAfter(endDay, 'day');
-    }
-  }
-
   onExpDateChanged = (value) => {
     this.setState({
       expDate: value
@@ -259,10 +224,10 @@ class GenerateUploadLink extends React.Component {
     e.preventDefault();
     e.nativeEvent.stopImmediatePropagation();
 
-    let { setExp, expireDays, expDate } = this.state;
+    let { expType, expireDays, expDate } = this.state;
 
     let expirationTime = '';
-    if (setExp == 'by-days') {
+    if (expType == 'by-days') {
       expirationTime = moment().add(parseInt(expireDays), 'days').format();
     } else {
       expirationTime = expDate.format();
@@ -271,8 +236,8 @@ class GenerateUploadLink extends React.Component {
     seafileAPI.updateUploadLink(this.state.sharedUploadInfo.token, expirationTime).then((res) => {
       let sharedUploadInfo = new UploadLink(res.data);
       this.setState({
-	sharedUploadInfo: sharedUploadInfo,
+        sharedUploadInfo: sharedUploadInfo,
-	isEditingExpiration: false,
+        isEditingExpiration: false,
       });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -286,6 +251,7 @@ class GenerateUploadLink extends React.Component {
       this.setState({
         showPasswordInput: shareLinkForceUsePassword ? true : false,
         expireDays: this.defaultExpireDays,
+        expDate: null,
         isExpireChecked: !this.isExpireDaysNoLimit,
         password: '',
         passwordnew: '',
@@ -309,7 +275,7 @@ class GenerateUploadLink extends React.Component {
 
     let passwordLengthTip = gettext('(at least {passwordMinLength} characters and includes {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols)');
     passwordLengthTip = passwordLengthTip.replace('{passwordMinLength}', shareLinkPasswordMinLength)
-                                         .replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel);
+      .replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel);
 
     if (this.state.sharedUploadInfo) {
       let sharedUploadInfo = this.state.sharedUploadInfo;
@@ -344,7 +310,7 @@ class GenerateUploadLink extends React.Component {
                 <dt className="text-secondary font-weight-normal">{gettext('Expiration Date:')}</dt>
                 {!this.state.isEditingExpiration &&
                   <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOverExpirationEditIcon} onMouseLeave={this.handleMouseOutExpirationEditIcon}>
-                   {moment(sharedUploadInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}
+                    {moment(sharedUploadInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}
                     {this.state.isExpirationEditIconShow && (
                       <a href="#"
                         role="button"
@@ -358,41 +324,21 @@ class GenerateUploadLink extends React.Component {
                 }
                 {this.state.isEditingExpiration &&
                   <div className="ml-4">
-                    <FormGroup check>
+                    <SetLinkExpiration
-                      <Label check>
+                      minDays={uploadLinkExpireDaysMin}
-                        <Input type="radio" name="set-exp" value="by-days" checked={this.state.setExp == 'by-days'} onChange={this.setExp} className="mr-1" />
+                      maxDays={uploadLinkExpireDaysMax}
-                        <span>{gettext('Expiration days')}</span>
+                      defaultDays={uploadLinkExpireDaysDefault}
-                      </Label>
+                      expType={this.state.expType}
-                      {this.state.setExp == 'by-days' && (
+                      setExpType={this.setExpType}
-                        <Fragment>
+                      expireDays={this.state.expireDays}
-                          <InputGroup style={{width: inputWidth}}>
+                      onExpireDaysChanged={this.onExpireDaysChanged}
-                            <Input type="text" value={this.state.expireDays} onChange={this.onExpireDaysChanged} />
+                      expDate={this.state.expDate}
-                            <InputGroupAddon addonType="append">
+                      onExpDateChanged={this.onExpDateChanged}
-                              <InputGroupText>{gettext('days')}</InputGroupText>
+                    />
-                            </InputGroupAddon>
+                    <div className={this.state.expType == 'by-days' ? 'mt-2' : 'mt-3'}>
-                          </InputGroup>
+                      <button className="btn btn-primary mr-2" onClick={this.updateExpiration}>{gettext('Update')}</button>
-                          {!this.state.isExpireDaysNoLimit && (
+                      <button className="btn btn-secondary" onClick={this.editExpirationToggle}>{gettext('Cancel')}</button>
-                            <FormText color="muted">{this.expirationLimitTip}</FormText>
+                    </div>
-                          )}
-                        </Fragment>
-                      )}
-                    </FormGroup>
-                    <FormGroup check>
-                      <Label check>
-                        <Input type="radio" name="set-exp" value="by-date" checked={this.state.setExp == 'by-date'} onChange={this.setExp} className="mr-1" />
-                        <span>{gettext('Expiration time')}</span>
-                      </Label>
-                      {this.state.setExp == 'by-date' && (
-                        <DateTimePicker
-                          inputWidth={inputWidth}
-                          disabledDate={this.disabledDate}
-                          value={this.state.expDate}
-                          onChange={this.onExpDateChanged}
-                        />
-                      )}
-                    </FormGroup>
-                    <button className="btn btn-primary" onClick={this.updateExpiration}>{gettext('Update')}</button>{' '}
-                    <button className="btn btn-secondary" onClick={this.editExpirationToggle}>{gettext('Cancel')}</button>
                   </div>
                 }
               </FormGroup>
@@ -416,15 +362,15 @@ class GenerateUploadLink extends React.Component {
         <FormGroup check>
           <Label check>
             {shareLinkForceUsePassword ? (
-            <Label check>
+              <Label check>
-              <Input type="checkbox" checked readOnly disabled />
+                <Input type="checkbox" checked readOnly disabled />
-              <span>{gettext('Add password protection')}</span>
+                <span>{gettext('Add password protection')}</span>
-            </Label>
+              </Label>
             ) : (
-            <Label check>
+              <Label check>
-              <Input type="checkbox" onChange={this.addPassword} />
+                <Input type="checkbox" onChange={this.addPassword} />
-              <span>{gettext('Add password protection')}</span>
+                <span>{gettext('Add password protection')}</span>
-            </Label>
+              </Label>
             )}
           </Label>
           {this.state.showPasswordInput &&
@@ -458,39 +404,17 @@ class GenerateUploadLink extends React.Component {
           </Label>
           {this.state.isExpireChecked &&
           <div className="ml-4">
-            <FormGroup check>
+            <SetLinkExpiration
-              <Label check>
+              minDays={uploadLinkExpireDaysMin}
-                <Input type="radio" name="set-exp" value="by-days" checked={this.state.setExp == 'by-days'} onChange={this.setExp} className="mr-1" />
+              maxDays={uploadLinkExpireDaysMax}
-                <span>{gettext('Expiration days')}</span>
+              defaultDays={uploadLinkExpireDaysDefault}
-              </Label>
+              expType={this.state.expType}
-              {this.state.setExp == 'by-days' && (
+              setExpType={this.setExpType}
-                <Fragment>
+              expireDays={this.state.expireDays}
-                  <InputGroup style={{width: inputWidth}}>
+              onExpireDaysChanged={this.onExpireDaysChanged}
-                    <Input type="text" value={this.state.expireDays} onChange={this.onExpireDaysChanged} />
+              expDate={this.state.expDate}
-                    <InputGroupAddon addonType="append">
+              onExpDateChanged={this.onExpDateChanged}
-                      <InputGroupText>{gettext('days')}</InputGroupText>
+            />
-                    </InputGroupAddon>
-                  </InputGroup>
-                  {!this.state.isExpireDaysNoLimit && (
-                    <FormText color="muted">{this.expirationLimitTip}</FormText>
-                  )}
-                </Fragment>
-              )}
-            </FormGroup>
-            <FormGroup check>
-              <Label check>
-                <Input type="radio" name="set-exp" value="by-date" checked={this.state.setExp == 'by-date'} onChange={this.setExp} className="mr-1" />
-                <span>{gettext('Expiration time')}</span>
-              </Label>
-              {this.state.setExp == 'by-date' && (
-                <DateTimePicker
-                  inputWidth={inputWidth}
-                  disabledDate={this.disabledDate}
-                  value={this.state.expDate}
-                  onChange={this.onExpDateChanged}
-                />
-              )}
-            </FormGroup>
           </div>
           }
         </FormGroup>

frontend/src/components/set-link-expiration.js

@@ -0,0 +1,119 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { FormGroup, Label, Input, InputGroup, InputGroupAddon, InputGroupText, FormText } from 'reactstrap';
+import { gettext } from '../utils/constants';
+import { Utils } from '../utils/utils';
+import DateTimePicker from './date-and-time-picker';
+
+const propTypes = {
+  minDays: PropTypes.number.isRequired,
+  maxDays: PropTypes.number.isRequired,
+  defaultDays: PropTypes.number.isRequired,
+  expType: PropTypes.string.isRequired,
+  setExpType: PropTypes.func.isRequired,
+  expireDays: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  onExpireDaysChanged: PropTypes.func.isRequired,
+  expDate: PropTypes.object,
+  onExpDateChanged: PropTypes.func.isRequired
+};
+
+const inputWidth = Utils.isDesktop() ? 250 : 210;
+
+class SetLinkExpiration extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    const { minDays, maxDays, defaultDays } = this.props;
+    this.isExpireDaysNoLimit = (minDays === 0 && maxDays === 0 && defaultDays == 0);
+
+    let expirationLimitTip = '';
+    if (minDays !== 0 && maxDays !== 0) {
+      expirationLimitTip = gettext('{minDays_placeholder} - {maxDays_placeholder} days')
+        .replace('{minDays_placeholder}', minDays)
+        .replace('{maxDays_placeholder}', maxDays);
+    } else if (minDays !== 0 && maxDays === 0) {
+      expirationLimitTip = gettext('Greater than or equal to {minDays_placeholder} days')
+        .replace('{minDays_placeholder}', minDays);
+    } else if (minDays === 0 && maxDays !== 0) {
+      expirationLimitTip = gettext('Less than or equal to {maxDays_placeholder} days')
+        .replace('{maxDays_placeholder}', maxDays);
+    }
+    this.expirationLimitTip = expirationLimitTip;
+  }
+
+  disabledDate = (current) => {
+    if (!current) {
+      // allow empty select
+      return false;
+    }
+
+    if (this.isExpireDaysNoLimit) {
+      return current.isBefore(moment(), 'day');
+    }
+
+    const { minDays, maxDays } = this.props;
+    const startDay = moment().add(minDays, 'days');
+    const endDay = moment().add(maxDays, 'days');
+    if (minDays !== 0 && maxDays !== 0) {
+      return current.isBefore(startDay, 'day') || current.isAfter(endDay, 'day');
+    } else if (minDays !== 0 && maxDays === 0) {
+      return current.isBefore(startDay, 'day');
+    } else if (minDays === 0 && maxDays !== 0) {
+      return current.isBefore(moment(), 'day') || current.isAfter(endDay, 'day');
+    }
+  }
+
+  render() {
+    const {
+      expType, setExpType,
+      expireDays, onExpireDaysChanged,
+      expDate, onExpDateChanged
+    } = this.props;
+    return (
+      <Fragment>
+        <FormGroup check>
+          <Label check>
+            <Input type="radio" name="set-exp" value="by-days" checked={expType == 'by-days'} onChange={setExpType} className="mr-1" />
+            <span>{gettext('Expiration days')}</span>
+          </Label>
+          {expType == 'by-days' && (
+            <Fragment>
+              <InputGroup style={{width: inputWidth}}>
+                <Input type="text" value={expireDays} onChange={onExpireDaysChanged} />
+                <InputGroupAddon addonType="append">
+                  <InputGroupText>{gettext('days')}</InputGroupText>
+                </InputGroupAddon>
+              </InputGroup>
+              {!this.isExpireDaysNoLimit && (
+                <FormText color="muted">{this.expirationLimitTip}</FormText>
+              )}
+            </Fragment>
+          )}
+        </FormGroup>
+        <FormGroup check>
+          <Label check>
+            <Input type="radio" name="set-exp" value="by-date" checked={expType == 'by-date'} onChange={setExpType} className="mr-1" />
+            <span>{gettext('Expiration time')}</span>
+          </Label>
+          {expType == 'by-date' && (
+            <DateTimePicker
+              inputWidth={inputWidth}
+              disabledDate={this.disabledDate}
+              value={expDate}
+              onChange={onExpDateChanged}
+            />
+          )}
+        </FormGroup>
+      </Fragment>
+    );
+  }
+}
+
+SetLinkExpiration.propTypes = propTypes;
+
+export default SetLinkExpiration;

seahub/api2/endpoints/share_links.py

@@ -499,7 +499,7 @@ class ShareLink(APIView):
             try:
                 perm = check_permissions_arg(request)
             except Exception:
-                error_msg = 'permissions invalud.'
+                error_msg = 'permissions invalid.'
                 return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
             if repo_folder_permission in (PERMISSION_PREVIEW_EDIT, PERMISSION_PREVIEW) \