Working room & client refactor

client/src/views/Home.vue

@@ -6,17 +6,34 @@
     </div>
     <h1 v-else class="title has-text-danger">Server offline</h1>
     <hr>
-    <b-button type="is-primary" @click="connectToRoomPrompt">Join a room</b-button>
+    <b-field position="is-centered">
+      <b-button type="is-primary" @click="connectToRoomPrompt">Join a room</b-button>
+    </b-field>
+    <b-field position="is-centered">
+      <b-button @click="isQRModalActive = true" icon-right="qrcode"/>
+    </b-field>
     <hr>
     <b-button type="is-primary" @click="makeRoomPrompt">Make a room</b-button>
+    <b-modal :active.sync="isQRModalActive" has-modal-card trap-focus>
+      <QRReader v-on:get-code="connectToRoom"/>
+    </b-modal>
   </div>
 </template>
 
 <script>
 import { send } from '../store/signalPlugin'
+import QRReader from './../components/QRReader'
 
 export default {
   name: 'Home',
+  components: {
+    QRReader
+  },
+  data () {
+    return {
+      isQRModalActive: false
+    }
+  },
   computed: {
     serverStatus () {
       return this.$store.state.app.serverStatus