Merge pull request #5137 from haiwen/link-expiration

update share/upload link expiration

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,27 +31,15 @@ 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,
       isShowPasswordInput: shareLinkForceUsePassword ? true : false,
       isPasswordVisible: false,
       isExpireChecked: !this.isExpireDaysNoLimit,
-      setExp: 'by-days',
+      isExpirationEditIconShow: false,
+      isEditingExpiration: false,
+      expType: 'by-days',
       expireDays: this.defaultExpireDays,
       expDate: null,
       password: '',
@@ -116,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
@@ -197,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;
@@ -205,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();
@@ -243,6 +210,7 @@ class GenerateShareLink extends React.Component {
         passwdnew: '',
         isShowPasswordInput: shareLinkForceUsePassword ? true : false,
         expireDays: this.defaultExpireDays,
+        expDate: null,
         isExpireChecked: !this.isExpireDaysNoLimit,
         errorInfo: '',
         sharedLinkInfo: null,
@@ -264,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) {
@@ -287,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;
@@ -337,6 +305,44 @@ class GenerateShareLink extends React.Component {
     return true;
   }
 
+  handleMouseOverExpirationEditIcon = () => {
+    this.setState({isExpirationEditIconShow: true});
+  }
+
+  handleMouseOutExpirationEditIcon = () => {
+    this.setState({isExpirationEditIconShow: false});
+  }
+
+  editingExpirationToggle = () => {
+    this.setState({isEditingExpiration: !this.state.isEditingExpiration});
+  }
+
+  updateExpiration = (e) => {
+
+    e.preventDefault();
+    e.nativeEvent.stopImmediatePropagation();
+
+    let { expType, expireDays, expDate } = this.state;
+
+    let expirationTime = '';
+    if (expType == 'by-days') {
+      expirationTime = moment().add(parseInt(expireDays), 'days').format();
+    } else {
+      expirationTime = expDate.format();
+    }
+
+    seafileAPI.updateShareLink(this.state.sharedLinkInfo.token, '', expirationTime).then((res) => {
+      let sharedLinkInfo = new ShareLink(res.data);
+      this.setState({
+        sharedLinkInfo: sharedLinkInfo,
+        isEditingExpiration: false,
+      });
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
   onNoticeMessageToggle = () => {
     this.setState({isNoticeMessageShow: !this.state.isNoticeMessageShow});
   }
@@ -373,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);
@@ -421,7 +427,39 @@ class GenerateShareLink extends React.Component {
             {sharedLinkInfo.expire_date && (
               <FormGroup className="mb-0">
                 <dt className="text-secondary font-weight-normal">{gettext('Expiration Date:')}</dt>
-                <dd>{moment(sharedLinkInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}</dd>
+                {!this.state.isEditingExpiration &&
+                  <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOverExpirationEditIcon} onMouseLeave={this.handleMouseOutExpirationEditIcon}>
+                    {moment(sharedLinkInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}
+                    {this.state.isExpirationEditIconShow && (
+                      <a href="#"
+                        role="button"
+                        aria-label={gettext('Edit')}
+                        title={gettext('Edit')}
+                        className="fa fa-pencil-alt attr-action-icon"
+                        onClick={this.editingExpirationToggle}>
+                      </a>
+                    )}
+                  </dd>
+                }
+                {this.state.isEditingExpiration &&
+                  <div className="ml-4">
+                    <SetLinkExpiration
+                      minDays={shareLinkExpireDaysMin}
+                      maxDays={shareLinkExpireDaysMax}
+                      defaultDays={shareLinkExpireDaysDefault}
+                      expType={this.state.expType}
+                      setExpType={this.setExpType}
+                      expireDays={this.state.expireDays}
+                      onExpireDaysChanged={this.onExpireDaysChanged}
+                      expDate={this.state.expDate}
+                      onExpDateChanged={this.onExpDateChanged}
+                    />
+                    <div className={this.state.expType == 'by-days' ? 'mt-2' : 'mt-3'}>
+                      <button className="btn btn-primary mr-2" onClick={this.updateExpiration}>{gettext('Update')}</button>
+                      <button className="btn btn-secondary" onClick={this.editingExpirationToggle}>{gettext('Cancel')}</button>
+                    </div>
+                  </div>
+                }
               </FormGroup>
             )}
 
@@ -470,15 +508,15 @@ class GenerateShareLink extends React.Component {
         <Form className="generate-share-link">
           <FormGroup check>
             {shareLinkForceUsePassword ? (
-            <Label check>
-              <Input type="checkbox" checked readOnly disabled />
-              <span>{gettext('Add password protection')}</span>
-            </Label>
+              <Label check>
+                <Input type="checkbox" checked readOnly disabled />
+                <span>{gettext('Add password protection')}</span>
+              </Label>
             ) : (
-            <Label check>
-              <Input type="checkbox" onChange={this.onPasswordInputChecked} />
-              <span>{gettext('Add password protection')}</span>
-            </Label>
+              <Label check>
+                <Input type="checkbox" onChange={this.onPasswordInputChecked} />
+                <span>{gettext('Add password protection')}</span>
+              </Label>
             )}
             {this.state.isShowPasswordInput &&
             <div className="ml-4">
@@ -511,39 +549,17 @@ class GenerateShareLink extends React.Component {
             </Label>
             {this.state.isExpireChecked &&
               <div className="ml-4">
-                <FormGroup check>
-                  <Label check>
-                    <Input type="radio" name="set-exp" value="by-days" checked={this.state.setExp == 'by-days'} onChange={this.setExp} className="mr-1" />
-                    <span>{gettext('Expiration days')}</span>
-                  </Label>
-                  {this.state.setExp == 'by-days' && (
-                    <Fragment>
-                      <InputGroup style={{width: inputWidth}}>
-                        <Input type="text" value={this.state.expireDays} onChange={this.onExpireDaysChanged} />
-                        <InputGroupAddon addonType="append">
-                          <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>
+                <SetLinkExpiration
+                  minDays={shareLinkExpireDaysMin}
+                  maxDays={shareLinkExpireDaysMax}
+                  defaultDays={shareLinkExpireDaysDefault}
+                  expType={this.state.expType}
+                  setExpType={this.setExpType}
+                  expireDays={this.state.expireDays}
+                  onExpireDaysChanged={this.onExpireDaysChanged}
+                  expDate={this.state.expDate}
+                  onExpDateChanged={this.onExpDateChanged}
+                />
               </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,
@@ -50,7 +36,9 @@ class GenerateUploadLink extends React.Component {
       sharedUploadInfo: null,
       isSendLinkShown: false,
       isExpireChecked: !this.isExpireDaysNoLimit,
-      setExp: 'by-days',
+      isExpirationEditIconShow: false,
+      isEditingExpiration: false,
+      expType: 'by-days',
       expireDays: this.defaultExpireDays,
       expDate: null
     };
@@ -124,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();
@@ -146,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) {
@@ -169,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;
@@ -195,31 +183,10 @@ class GenerateUploadLink extends React.Component {
     this.setState({isExpireChecked: e.target.checked});
   }
 
- setExp = (e) => {
-   this.setState({
-     setExp: 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');
-    }
+  setExpType = (e) => {
+    this.setState({
+      expType: e.target.value
+    });
   }
 
   onExpDateChanged = (value) => {
@@ -240,12 +207,51 @@ class GenerateUploadLink extends React.Component {
     this.props.closeShareDialog();
   }
 
+  handleMouseOverExpirationEditIcon = () => {
+    this.setState({isExpirationEditIconShow: true});
+  }
+
+  handleMouseOutExpirationEditIcon = () => {
+    this.setState({isExpirationEditIconShow: false});
+  }
+
+  editExpirationToggle = () => {
+    this.setState({isEditingExpiration: !this.state.isEditingExpiration});
+  }
+
+  updateExpiration = (e) => {
+
+    e.preventDefault();
+    e.nativeEvent.stopImmediatePropagation();
+
+    let { expType, expireDays, expDate } = this.state;
+
+    let expirationTime = '';
+    if (expType == 'by-days') {
+      expirationTime = moment().add(parseInt(expireDays), 'days').format();
+    } else {
+      expirationTime = expDate.format();
+    }
+
+    seafileAPI.updateUploadLink(this.state.sharedUploadInfo.token, expirationTime).then((res) => {
+      let sharedUploadInfo = new UploadLink(res.data);
+      this.setState({
+        sharedUploadInfo: sharedUploadInfo,
+        isEditingExpiration: false,
+      });
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
   deleteUploadLink = () => {
     let sharedUploadInfo = this.state.sharedUploadInfo;
     seafileAPI.deleteUploadLink(sharedUploadInfo.token).then(() => {
       this.setState({
         showPasswordInput: shareLinkForceUsePassword ? true : false,
         expireDays: this.defaultExpireDays,
+        expDate: null,
         isExpireChecked: !this.isExpireDaysNoLimit,
         password: '',
         passwordnew: '',
@@ -269,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;
@@ -302,7 +308,39 @@ class GenerateUploadLink extends React.Component {
             {sharedUploadInfo.expire_date && (
               <FormGroup className="mb-0">
                 <dt className="text-secondary font-weight-normal">{gettext('Expiration Date:')}</dt>
-                <dd>{moment(sharedUploadInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}</dd>
+                {!this.state.isEditingExpiration &&
+                  <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOverExpirationEditIcon} onMouseLeave={this.handleMouseOutExpirationEditIcon}>
+                    {moment(sharedUploadInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}
+                    {this.state.isExpirationEditIconShow && (
+                      <a href="#"
+                        role="button"
+                        aria-label={gettext('Edit')}
+                        title={gettext('Edit')}
+                        className="fa fa-pencil-alt attr-action-icon"
+                        onClick={this.editExpirationToggle}>
+                      </a>
+                    )}
+                  </dd>
+                }
+                {this.state.isEditingExpiration &&
+                  <div className="ml-4">
+                    <SetLinkExpiration
+                      minDays={uploadLinkExpireDaysMin}
+                      maxDays={uploadLinkExpireDaysMax}
+                      defaultDays={uploadLinkExpireDaysDefault}
+                      expType={this.state.expType}
+                      setExpType={this.setExpType}
+                      expireDays={this.state.expireDays}
+                      onExpireDaysChanged={this.onExpireDaysChanged}
+                      expDate={this.state.expDate}
+                      onExpDateChanged={this.onExpDateChanged}
+                    />
+                    <div className={this.state.expType == 'by-days' ? 'mt-2' : 'mt-3'}>
+                      <button className="btn btn-primary mr-2" onClick={this.updateExpiration}>{gettext('Update')}</button>
+                      <button className="btn btn-secondary" onClick={this.editExpirationToggle}>{gettext('Cancel')}</button>
+                    </div>
+                  </div>
+                }
               </FormGroup>
             )}
           </Form>
@@ -324,15 +362,15 @@ class GenerateUploadLink extends React.Component {
         <FormGroup check>
           <Label check>
             {shareLinkForceUsePassword ? (
-            <Label check>
-              <Input type="checkbox" checked readOnly disabled />
-              <span>{gettext('Add password protection')}</span>
-            </Label>
+              <Label check>
+                <Input type="checkbox" checked readOnly disabled />
+                <span>{gettext('Add password protection')}</span>
+              </Label>
             ) : (
-            <Label check>
-              <Input type="checkbox" onChange={this.addPassword} />
-              <span>{gettext('Add password protection')}</span>
-            </Label>
+              <Label check>
+                <Input type="checkbox" onChange={this.addPassword} />
+                <span>{gettext('Add password protection')}</span>
+              </Label>
             )}
           </Label>
           {this.state.showPasswordInput &&
@@ -366,39 +404,17 @@ class GenerateUploadLink extends React.Component {
           </Label>
           {this.state.isExpireChecked &&
           <div className="ml-4">
-            <FormGroup check>
-              <Label check>
-                <Input type="radio" name="set-exp" value="by-days" checked={this.state.setExp == 'by-days'} onChange={this.setExp} className="mr-1" />
-                <span>{gettext('Expiration days')}</span>
-              </Label>
-              {this.state.setExp == 'by-days' && (
-                <Fragment>
-                  <InputGroup style={{width: inputWidth}}>
-                    <Input type="text" value={this.state.expireDays} onChange={this.onExpireDaysChanged} />
-                    <InputGroupAddon addonType="append">
-                      <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>
+            <SetLinkExpiration
+              minDays={uploadLinkExpireDaysMin}
+              maxDays={uploadLinkExpireDaysMax}
+              defaultDays={uploadLinkExpireDaysDefault}
+              expType={this.state.expType}
+              setExpType={this.setExpType}
+              expireDays={this.state.expireDays}
+              onExpireDaysChanged={this.onExpireDaysChanged}
+              expDate={this.state.expDate}
+              onExpDateChanged={this.onExpDateChanged}
+            />
           </div>
           }
         </FormGroup>