[share dialog] added QR code for share/upload links (#4798)

frontend/src/components/btn-qr-code.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import QRCode from 'react-qr-code';
+import { Button, Popover, PopoverBody } from 'reactstrap';
+import { gettext } from '../utils/constants';
+
+import '../css/btn-qr-code.css';
+
+const propTypes = {
+  link: PropTypes.string.isRequired
+};
+
+class ButtonQR extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isPopoverOpen: false
+    };
+
+    this.btnID = 'btn-' + Math.random().toString().substr(2,5);
+  }
+
+  togglePopover = () => {
+    this.setState({
+      isPopoverOpen: !this.state.isPopoverOpen
+    });
+  }
+
+  render() {
+    const { link } = this.props;
+    const { isPopoverOpen } = this.state;
+    return (
+      <div className="ml-2">
+        <Button outline color="primary" className="btn-icon btn-qr-code-icon sf3-font sf3-font-qr-code" id={this.btnID} onClick={this.togglePopover} type="button"></Button>
+        <Popover placement="bottom" isOpen={isPopoverOpen} target={this.btnID} toggle={this.togglePopover}>
+          <PopoverBody>
+            <QRCode value={link} size={128} />
+            <p className="m-0 mt-1 text-center" style={{'maxWidth': '128px'}}>{gettext('Scan the QR code to view the shared content directly')}</p>
+          </PopoverBody>
+        </Popover>
+      </div>
+    );
+  }
+}
+
+ButtonQR.propTypes = propTypes;
+export default ButtonQR;

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

@@ -12,6 +12,7 @@ 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';
 
 const propTypes = {
   itemPath: PropTypes.string.isRequired,
@@ -370,23 +371,23 @@ class GenerateShareLink extends React.Component {
           <Form className="mb-4">
             <FormGroup className="mb-0">
               <dt className="text-secondary font-weight-normal">{gettext('Link:')}</dt>
-              <dd className="d-flex">
-                <span>{sharedLinkInfo.link}</span>{' '}
-                {sharedLinkInfo.is_expired ?
-                  <span className="err-message">({gettext('Expired')})</span> :
-                  <span className="far fa-copy action-icon" onClick={this.onCopySharedLink}></span>
-                }
+              <dd>
+                <SharedLink
+                  link={sharedLinkInfo.link}
+                  linkExpired={sharedLinkInfo.is_expired}
+                  copyLink={this.onCopySharedLink}
+                />
               </dd>
             </FormGroup>
             {!sharedLinkInfo.is_dir && sharedLinkInfo.permissions.can_download &&(  //just for file
               <FormGroup className="mb-0">
                 <dt className="text-secondary font-weight-normal">{gettext('Direct Download Link:')}</dt>
-                <dd className="d-flex">
-                  <span>{sharedLinkInfo.link}?dl=1</span>{' '}
-                  {sharedLinkInfo.is_expired ?
-                    <span className="err-message">({gettext('Expired')})</span> :
-                    <span className="far fa-copy action-icon" onClick={this.onCopyDownloadLink}></span>
-                  }
+                <dd>
+                  <SharedLink
+                    link={`${sharedLinkInfo.link}?dl=1`}
+                    linkExpired={sharedLinkInfo.is_expired}
+                    copyLink={this.onCopyDownloadLink}
+                  />
                 </dd>
               </FormGroup>
             )}

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

@@ -10,6 +10,7 @@ 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';
 
 const propTypes = {
   itemPath: PropTypes.string.isRequired,
@@ -264,9 +265,12 @@ class GenerateUploadLink extends React.Component {
           <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>
+                <SharedLink
+                  link={sharedUploadInfo.link}
+                  linkExpired={sharedUploadInfo.is_expired}
+                  copyLink={this.onCopyUploadLink}
+                />
               </dd>
             </FormGroup>
             {sharedUploadInfo.expire_date && (

frontend/src/components/shared-link.js

@@ -0,0 +1,36 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import { gettext } from '../utils/constants';
+import ButtonQR from './btn-qr-code';
+
+const propTypes = {
+  link: PropTypes.string.isRequired,
+  linkExpired: PropTypes.bool.isRequired,
+  copyLink: PropTypes.func.isRequired
+};
+
+// for 'share link' & 'upload link'
+class SharedLink extends React.Component {
+
+  render() {
+    const { link, linkExpired, copyLink } = this.props;
+    return (
+      <Fragment>
+        <div className="d-flex">
+          <InputGroup>
+            <Input type="text" readOnly={true} value={link} />
+            <InputGroupAddon addonType="append">
+              <Button color="primary" onClick={copyLink} className="border-0">{gettext('Copy')}</Button>
+            </InputGroupAddon>
+          </InputGroup>
+          <ButtonQR link={link} />
+        </div>
+        {linkExpired && <p className="err-message mt-1">({gettext('Expired')})</p>}
+      </Fragment>
+    );
+  }
+}
+
+SharedLink.propTypes = propTypes;
+export default SharedLink;