Commit 5e28014

@@ -1,12 +1,13 @@
 import { Controller } from 'stimulus'
-import Tfa from '../models/tfa'
+import QRCode from 'qrcode'
 
 export default class extends Controller {
   get secret() { return this.targets.find("secret") }
+  get canvas() { return this.targets.find("canvas") }
 
   present() {
-    //let tfa = new Tfa(this.secret.value);
-    //console.log(tfa.qr_code());
-    console.log("CLICKED");
+    QRCode.toCanvas(this.canvas, this.secret.value, (error) => {
+      if (error) console.error(error);
+    });
   }
 }

@@ -1,9 +0,0 @@
-export default class Tfa {
-  constructor(secret) {
-    this.secret = secret;
-  }
-
-  qr_code() {
-    return "hello world";
-  }
-}

@@ -1,10 +1,11 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <h1>TFA Setup</h1>
+      <h1>Two Factor Authentication (TFA) - Setup</h1>
       <p><%= current_user.tfa_secret %></p>
       <p><%= current_user.tfa_provisioning_uri %></p>
       <%= form_for current_user, url: tfa_path, method: :post, data: { controller: 'tfa' } do |form| %>
+        <canvas id="canvas" data-target="tfa.canvas"></canvas>
         <%= form.button 'Show', type: 'button', class: 'btn', data: { action: 'click->tfa#present'  } %>
         <%= form.hidden_field :tfa_secret, data: { target: 'tfa.secret' } %>
         <%= form.submit "Save" %>