Commit 2b70841

mo <mo@mokhan.ca>
2018-12-17 23:47:01
add copy to clipboard button
1 parent 4a7db90
Changed files (5)
app
controllers
javascript
views
config
locales
app/controllers/my/mfas_controller.rb
@@ -14,7 +14,7 @@ module My
 
     def create
       current_user.update!(params.require(:user).permit(:mfa_secret))
-      redirect_to my_dashboard_path, notice: "successfully updated!"
+      redirect_to my_dashboard_path, notice: t('.success')
     end
 
     def edit; end
@@ -28,9 +28,9 @@ module My
 
     def destroy
       if current_user.mfa.disable!(params[:user][:code])
-        redirect_to my_dashboard_path, notice: 'MFA has been disabled'
+        redirect_to my_dashboard_path, notice: t('.success')
       else
-        redirect_to edit_my_mfa_path, error: "MFA code is incorrect"
+        redirect_to edit_my_mfa_path, error: t('.error')
       end
     end
   end
app/javascript/controllers/clipboard_controller.js
@@ -0,0 +1,16 @@
+import ApplicationController from './application_controller';
+
+export default class extends ApplicationController {
+  static targets = ['source'];
+  connect() {
+    if (document.queryCommandSupported("copy")) {
+      this.element.classList.add('clipboard--supported');
+    }
+  }
+
+  copy(event) {
+    event.preventDefault();
+    this.sourceTarget.select();
+    document.execCommand("copy");
+  }
+}
app/javascript/styles/application.scss
@@ -24,6 +24,14 @@
 
 .hide { display: none; }
 
+.clipboard-button {
+  display: none;
+}
+
+.clipboard--supported .clipboard-button {
+  display: initial;
+}
+
 .my-audits-index {
   .attribute-truncate {
     @include ellipsis(200px);
app/views/my/mfas/new.html.erb
@@ -15,16 +15,22 @@
         <div data-controller="mfa--setup">
           <canvas id="canvas" data-target="mfa--setup.canvas"></canvas>
           <%= form_with model: current_user, url: '#' do |form| %>
-            <div class="field">
+            <div class="field" data-controller="clipboard">
               <%= form.label :mfa_secret %>
               <div class="control">
-                <%= form.text_field :mfa_secret, class: 'input', disabled: :disabled, data: { target: 'mfa--setup.secret' } %>
+                <%= form.text_field :mfa_secret, class: 'input', readonly: :readonly, data: { target: 'mfa--setup.secret clipboard.source' } %>
+              </div>
+              <div class="control">
+                <button type="button" data-action="clipboard#copy" class="button clipboard-button">Copy to Clipboard</button>
               </div>
             </div>
-            <div class="field">
+            <div class="field" data-controller="clipboard">
               <%= form.label :provisioning_uri %>
               <div class="control">
-                <%= form.text_field :provisioning_uri, value: current_user.mfa.provisioning_uri, class: 'input', disabled: :disabled %>
+                <%= form.text_field :provisioning_uri, value: current_user.mfa.provisioning_uri, class: 'input', readonly: :readonly, data: { target: 'clipboard.source' } %>
+              </div>
+              <div class="control">
+                <button type="button" data-action="clipboard#copy" class="button clipboard-button">Copy to Clipboard</button>
               </div>
             </div>
           <% end %>
config/locales/en.yml
@@ -18,6 +18,7 @@ en:
         user_agent: User Agent
     models:
       user_session: Session
+  cancel: Cancel
   errors:
     bad_request:
       title: 400 - Bad Request
@@ -66,6 +67,11 @@ en:
       show:
         title: Dashboard
     mfas:
+      create:
+        success: successfully updated!
+      destroy:
+        error: MFA code is incorrect
+        success: MFA has been disabled
       edit:
         cancel: Cancel
         disable: Disable