Share dialog improve (#2760)

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

@@ -1,8 +1,11 @@
 import React from 'react';
-import { gettext } from '../../utils/constants';
 import PropTypes from 'prop-types';
-import { seafileAPI } from '../../utils/seafile-api';
+import copy from 'copy-to-clipboard';
 import { Button, Form, FormGroup, FormText, Label, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import SharedUploadInfo from '../../models/shared-upload-info';
+import toaster from '../toast';
 
 const propTypes = {
   itemPath: PropTypes.string.isRequired,
@@ -17,8 +20,7 @@ class GenerateUploadLink extends React.Component {
       passwordVisible: false,
       password: '',
       passwdnew: '',
-      link: '',
-      token:''
+      sharedUploadInfo: null,
     };
   }
 
@@ -31,10 +33,8 @@ class GenerateUploadLink extends React.Component {
     let repoID = this.props.repoID; 
     seafileAPI.getUploadLinks(repoID, path).then((res) => {
       if (res.data.length !== 0) {
-        this.setState({
-          link: res.data[0].link,
-          token: res.data[0].token,
-        });
+        let sharedUploadInfo = new SharedUploadInfo(res.data[0]);
+        this.setState({sharedUploadInfo: sharedUploadInfo});
       }
     });
   }
@@ -94,33 +94,46 @@ class GenerateUploadLink extends React.Component {
       });
     } else {
       seafileAPI.createUploadLink(repoID, path, this.state.password).then((res) => {
-        this.setState({
-          link: res.data.link,
-          token: res.data.token  
-        }); 
+        let sharedUploadInfo = new SharedUploadInfo(res.data);
+        this.setState({sharedUploadInfo: sharedUploadInfo}); 
       });
     }
   }
 
+  onCopyUploadLink = () => {
+    let uploadLink = this.state.sharedUploadInfo.link;
+    copy(uploadLink);
+    toaster.success(gettext('Upload link is copied to the clipboard.'));
+  }
+
   deleteUploadLink = () => {
-    seafileAPI.deleteUploadLink(this.state.token).then(() => {
+    let sharedUploadInfo = this.state.sharedUploadInfo
+    seafileAPI.deleteUploadLink(sharedUploadInfo.token).then(() => {
       this.setState({
-        link: '',
-        token: '',
         showPasswordInput: false,
         password: '',
         passwordnew: '',
+        sharedUploadInfo: null,
       });
     });
   }
 
   render() {
-    if (this.state.link) {
+    if (this.state.sharedUploadInfo) {
+      let sharedUploadInfo = this.state.sharedUploadInfo;
       return (
-        <Form>
-          <p>{this.state.link}</p>
+        <div>
+          <Form className="mb-4">
+            <FormGroup>
+              <dt className="text-secondary font-weight-normal">{gettext('Upload Link:')}</dt>
+              <dd className="d-flex">
+                <span>{sharedUploadInfo.link}</span>
+                <span className="far fa-copy action-icon" onClick={this.onCopyUploadLink}></span>
+              </dd>
+            </FormGroup>
+          </Form>
           <Button onClick={this.deleteUploadLink}>{gettext('Delete')}</Button>
-        </Form>
+        </div>
       );
     }
     return (