Commit 6040a2d

@@ -5,7 +5,7 @@ export default class extends Controller {
   get secret() { return this.targets.find("secret") }
   get canvas() { return this.targets.find("canvas") }
 
-  present() {
+  connect() {
     QRCode.toCanvas(this.canvas, this.secret.value, (error) => {
       if (error) console.error(error);
     });

@@ -2,14 +2,16 @@
   <div class="row">
     <div class="col">
       <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| %>
+      <div data-controller="tfa">
         <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" %>
-      <% end %>
+        <p>Secret: <%= current_user.tfa_secret %></p>
+        <p>Provisioning URI: <%= current_user.tfa_provisioning_uri %></p>
+        <%= form_for current_user, url: tfa_path, method: :post do |form| %>
+          <%= form.hidden_field :tfa_secret, data: { target: 'tfa.secret' } %>
+          <%= form.submit "Save", class: 'btn btn-primary', data: { disable_with: 'Saving…' } %>
+          <%= link_to "Cancel", dashboard_path, class: 'btn' %>
+        <% end %>
+      </div>
     </div>
   </div>
 </div>