Add a modal showing QR codes for public/private keys in permissions t…

…ab (steemit#1364)

app/components/elements/QrKeyView.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import QRCode from 'react-qr'
+require('./QrKeyView.scss');
+import { translate } from 'app/Translator';
+
+export default ({type, text, isPrivate, onClose}) => {
+    return (
+        <div className="text-center Dialog__qr_viewer">
+            <h3>{isPrivate ? translate('private_something_key', {key: type}) : translate('public_something_key', {key: type})}:</h3>
+            <br />
+            <QRCode text={text} />
+
+            <div>
+                <br />
+                <button type="button" className="button hollow" onClick={onClose}>
+                    {translate('close')}
+                </button>
+            </div>
+        </div>
+    );
+}

app/components/elements/QrKeyView.scss

@@ -0,0 +1,6 @@
+div.Dialog__qr_viewer {
+    text-align: center;
+    h3 {
+        text-transform: capitalize;
+    }
+}

app/components/elements/ShowKey.js

@@ -3,6 +3,7 @@ import shouldComponentUpdate from 'app/utils/shouldComponentUpdate'
 import {connect} from 'react-redux'
 import user from 'app/redux/User'
 import { translate } from 'app/Translator';
+import g from 'app/redux/GlobalReducer'
 
 /** Display a public key.  Offer to show a private key, but only if it matches the provided public key */
 class ShowKey extends Component {
@@ -57,6 +58,10 @@ class ShowKey extends Component {
         const {onKey, pubkey} = nextProps
         if(onKey) onKey((show ? wif : null), pubkey)
     }
+    showQr = () => {
+        const {show, wif} = this.state;
+        this.props.showQRKey({type: this.props.authType, text: show ? wif : this.props.pubkey, isPrivate: show});
+    }
     render() {
         const {onShow, showLogin, props: {pubkey, cmpProps, children, authType}} = this
         const {show, wif} = this.state
@@ -76,6 +81,9 @@ class ShowKey extends Component {
 
         return (<div className="row">
             <div className="column small-12 medium-10">
+                <div style={{display: "inline-block", paddingRight: 10, cursor: "pointer"}} onClick={this.showQr}>
+                    <img src={require("app/assets/images/qrcode.png")} height="40" width="40" />
+                </div>
                 {/* Keep this as wide as possible, check print preview makes sure WIF it not cut off */}
                 <span {...cmpProps}>{show ? wif : pubkey}</span>
             </div>
@@ -93,6 +101,9 @@ export default connect(
     dispatch => ({
         showLogin: ({username, authType}) => {
             dispatch(user.actions.showLogin({loginDefault: {username, authType}}))
+        },
+        showQRKey: ({type, isPrivate, text}) => {
+            dispatch(g.actions.showDialog({name: "qr_key", params: {type, isPrivate, text}}));
         }
     })
 )(ShowKey)

app/components/modules/Dialogs.jsx

@@ -11,6 +11,7 @@ import ConvertToSteem from 'app/components/elements/ConvertToSteem'
 import SuggestPassword from 'app/components/elements/SuggestPassword'
 import ChangePassword from 'app/components/elements/ChangePassword'
 import CheckLoginOwner from 'app/components/elements/CheckLoginOwner'
+import QrKeyView from 'app/components/elements/QrKeyView'
 import PromotePost from 'app/components/modules/PromotePost';
 import ExplorePost from 'app/components/modules/ExplorePost';
 
@@ -79,6 +80,12 @@ class Dialogs extends React.Component {
                     <ExplorePost onClick={this['hide_' + k]} {...v.get('params').toJS()} />
                 </Reveal>
             </span>:
+            k === 'qr_key' ? <span key={idx++} >
+                <Reveal onHide={this['hide_' + k]} show>
+                    <CloseButton onClick={this['hide_' + k]} />
+                    <QrKeyView onClose={this['hide_' + k]} {...v.get('params').toJS()} />
+                </Reveal>
+            </span>:
             null
             return cmp ? r.push(cmp) : r
         }, List())