Re-implement QRCode feature for shared links

Author: cdujeu

core/src/plugins/action.share/res/react-share-form.css

@@ -79,6 +79,15 @@ div#react_share_form .additional-actions-links a {
   display: inline-block;
   margin-left: 10px;
 }
+div#react_share_form .additional-actions-links a.qrcode-active {
+  color: #333333;
+}
+div#react_share_form .qrCode {
+  text-align: center;
+}
+div#react_share_form .qrCode canvas {
+  margin-top: 10px;
+}
 div#react_share_form .form-legend {
   color: #bbb;
   margin-top: -5px !important;

core/src/plugins/action.share/res/react-share-form.less

@@ -98,6 +98,15 @@ div#react_share_form {
       cursor: pointer;
       display: inline-block;
       margin-left: 10px;
+      &.qrcode-active{
+        color: #333333;
+      }
+    }
+  }
+  .qrCode{
+    text-align: center;
+    canvas{
+      margin-top: 10px;
     }
   }
   .form-legend {

core/src/plugins/action.share/res/react/ShareDialog.js

@@ -854,7 +854,7 @@
             showMailer:React.PropTypes.func
         },
         getInitialState: function(){
-            return {editLink: false, copyMessage:''};
+            return {editLink: false, copyMessage:'', showQRCode: false};
         },
         toggleEditMode: function(){
             if(this.state.editLink && this.state.customLink){
@@ -917,6 +917,10 @@
             this.props.showMailer(mailData.subject, mailData.message, []);
         },
 
+        toggleQRCode: function(){
+            this.setState({showQRCode:!this.state.showQRCode});
+        },
+
         render: function(){
             var publicLink = this.props.linkData['public_link'];
             var editAllowed = this.props.editAllowed && !this.props.linkData['hash_is_shorten'] && !this.context.isReadonly() && this.props.shareModel.currentIsOwner();
@@ -944,13 +948,19 @@
                 if(editAllowed){
                     actionLinks.push(<a key="customize" onClick={this.toggleEditMode}>{this.context.getMessage('193')}</a>);
                 }
+                if(ReactModel.Share.qrcodeEnabled()){
+                    actionLinks.push(<a className={this.state.showQRCode?'qrcode-active':''} key="qrcode" onClick={this.toggleQRCode}>{this.context.getMessage('94')}</a>)
+                }
                 if(actionLinks.length){
                     actionLinks = (
                         <div className="additional-actions-links">{actionLinks}</div>
                     ) ;
                 }else{
                     actionLinks = null;
                 }
+                if(this.state.showQRCode){
+                    var qrCode = <div className="qrCode"><ReactQRCode size={128} value={publicLink} level="Q"/></div>;
+                }
                 return (
                     <div className="public-link-container">
                         <ReactMUI.TextField
@@ -963,6 +973,7 @@
                         /> {copyButton}
                         <div style={{textAlign:'center'}} className="section-legend" dangerouslySetInnerHTML={setHtml()}/>
                         {actionLinks}
+                        {qrCode}
                     </div>
                 );
             }

core/src/plugins/action.share/res/react/model/ShareModel.js

@@ -857,6 +857,10 @@
             return global.pydio.getPluginConfigs("core.ocs").get("ENABLE_FEDERATED_SHARING");
         }
 
+        static qrcodeEnabled(){
+            return global.pydio.getPluginConfigs("action.share").get("CREATE_QRCODE");
+        }
+
         prepareEmail(shareType, linkId = null){
             var MessageHash = global.pydio.MessageHash;
             var ApplicationTitle = global.pydio.appTitle;

core/src/plugins/gui.ajax/package.json

@@ -24,7 +24,8 @@
     "lodash": "^3.10.1",
     "classnames": "~2.1.3",
     "react-autosuggest": "1.18.2",
-    "clipboard":"^1.5.8"
+    "clipboard":"^1.5.8",
+    "qrcode.react":"0.6.1"
   },
   "devDependencies": {
     "grunt": "~0.4.5",

core/src/plugins/gui.ajax/res/js/vendor/nodejs/export.js

@@ -14,4 +14,5 @@ window.ReactDND.flow = require('lodash/function/flow');
 window.classNames = require('classnames');
 window.ReactAutoSuggest = require('react-autosuggest');
 window.Clipboard = require('clipboard');
+window.ReactQRCode = require('qrcode.react');
 window.injectTapEventPlugin();