Add QR code of tempalink

lib/components/Tempalink.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import QRCode from 'react-qr'
 
 export default class Tempalink extends React.Component {
   constructor() {
@@ -12,13 +13,16 @@ export default class Tempalink extends React.Component {
 
   render() {
     var url = window.location.origin + '/' + this.props.token
-    return <input
+    return <div className="tempalink">
-      className="tempalink"
+      <input
-      onClick={this.onClick}
+        onClick={this.onClick}
-      readOnly
+        readOnly
-      ref="input"
+        ref="input"
-      type="text"
+        type="text"
-      value={url} />
+        value={url} />
+
+        <QRCode text={url} />
+    </div>
   }
 
 }

lib/index.styl

@@ -175,15 +175,24 @@ p {
 }
 
 .tempalink {
-    background: beige
+    display: flex
-    color: dark-gray
+    flex-direction: column
-    border: 0
+
-    margin: 20px 0
+    input {
-    font: 18px/1 monospace
+        background: beige
-    height: 60px
+        color: dark-gray
-    padding: 20px
+        border: 0
-    text-align: center
+        margin: 20px 0
-    width: 100%
+        font: 18px/1 monospace
+        height: 60px
+        padding: 20px
+        text-align: center
+        width: 100%
+    }
+
+    img {
+        margin: auto
+    }
 }
 
 .data {

package.json

@@ -58,6 +58,7 @@
     "react": "^0.13.0",
     "react-frozenhead": "^0.3.0",
     "react-google-analytics": "^0.2.0",
+    "react-qr": "0.0.2",
     "react-router": "^0.13.1",
     "socket.io": "^1.3.5",
     "socket.io-client": "^1.3.5",