Merge pull request #456 from dod-ccpo/fix-revoke-resend-ie

Fix revoke/resend invitations in IE

js/components/__tests__/__snapshots__/confirmation_popover.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmationPopover matches snapshot 1`] = `<v-popover-stub placement="top-start" delay="0" offset="0" trigger="click" container="body" popperoptions="[object Object]" popoverclass="vue-popover-theme" popoverbaseclass="tooltip popover" popoverinnerclass="tooltip-inner popover-inner" popoverwrapperclass="wrapper" popoverarrowclass="tooltip-arrow popover-arrow" autohide="true" handleresize="true"><template></template> <button type="button" class="tooltip-target">Do something dangerous</button></v-popover-stub>`;

js/components/__tests__/confirmation_popover.test.js

@@ -0,0 +1,32 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils'
+import VTooltip from 'v-tooltip'
+
+import ConfirmationPopover from '../confirmation_popover'
+
+const localVue = createLocalVue()
+localVue.use(VTooltip)
+
+describe('ConfirmationPopover', () => {
+  const wrapper = shallowMount(ConfirmationPopover, {
+    localVue,
+    propsData: {
+      action: '/some-url',
+      btn_text: 'Do something dangerous',
+      cancel_btn_text: 'Cancel',
+      confirm_btn_text: 'Confirm',
+      confirm_msg: 'Are you sure you want to do that?',
+      csrf_token: '42'
+    }
+  })
+
+  it('matches snapshot', () => {
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('renders form with hidden csrf input', () => {
+    const input = wrapper.find('input[type=hidden]')
+    expect(input.exists()).toBe(true)
+    expect(input.attributes('value')).toBe('42')
+  })
+})
+

js/components/confirmation_popover.js

@@ -0,0 +1,32 @@
+export default {
+  name: 'confirmation-popover',
+
+  props: {
+    action: String,
+    btn_text: String,
+    cancel_btn_text: String,
+    confirm_btn_text: String,
+    confirm_msg: String,
+    csrf_token: String
+  },
+
+  template: `
+    <v-popover placement='top-start'>
+      <template slot="popover">
+        <p>{{ confirm_msg }}</p>
+        <div class='action-group'>
+          <form method="POST" v-bind:action="action">
+            <input id="csrf_token" name="csrf_token" type="hidden" v-bind:value="csrf_token">
+            <button class='usa-button usa-button-primary' type='submit'>
+              {{ confirm_btn_text }}
+            </button>
+          </form>
+          <button class='usa-button usa-button-secondary' v-close-popover>
+            {{ cancel_btn_text }}
+          </button>
+        </div>
+      </template>
+      <button class="tooltip-target" type="button">{{ btn_text }}</button>
+    </v-popover>
+  `
+}

js/index.js

@@ -23,6 +23,7 @@ import CcpoApproval from './components/forms/ccpo_approval'
 import MembersList from './components/forms/members_list'
 import LocalDatetime from './components/local_datetime'
 import RequestsList from './components/forms/requests_list'
+import ConfirmationPopover from './components/confirmation_popover'
 
 Vue.config.productionTip = false
 
@@ -50,6 +51,7 @@ const app = new Vue({
     EditEnvironmentRole,
     EditProjectRoles,
     RequestsList,
+    ConfirmationPopover,
   },
 
   mounted: function() {

templates/components/confirmation_button.html

@@ -1,19 +1,10 @@
-{% macro ConfirmationButton(btn_text, action, csrf_token, confirm_msg="Are you sure?", confirm_btn="Confirm", cancel_btn="Cancel") -%}
+{% macro ConfirmationButton(btn_text, action, confirm_msg="Are you sure?", confirm_btn="Confirm", cancel_btn="Cancel") -%}
-  <v-popover placement='top-start'>
+  <confirmation-popover
-    <template slot="popover">
+    btn_text='{{ btn_text }}'
-      <p>{{ confirm_msg }}</p>
+    action='{{ action }}'
-      <div class='action-group'>
+    csrf_token='{{ csrf_token() }}'
-        <form method="POST" action="{{ action }}">
+    confirm_msg='{{ confirm_msg }}'
-          {{ csrf_token }}
+    confirm_btn_text='{{ confirm_btn }}'
-          <button class='usa-button usa-button-primary' type='submit'>
+    cancel_btn_text='{{ cancel_btn }}'>
-            {{ confirm_btn }}
+  </confirmation-popover>
-          </button>
-        </form>
-        <button class='usa-button usa-button-secondary' v-close-popover>
-          {{ cancel_btn }}
-        </button>
-      </div>
-    </template>
-    <button class="tooltip-target" type="button">{{ btn_text }}</button>
-  </v-popover>
 {%- endmacro %}

templates/workspaces/members/edit.html

@@ -44,14 +44,12 @@
         {{ ConfirmationButton(
               "Revoke Invitation",
               url_for("workspaces.revoke_invitation", workspace_id=workspace.id, token=member.latest_invitation.token),
-              form.csrf_token
            ) }}
       {% endif %}
       {% if member.can_resend_invitation %}
         {{ ConfirmationButton (
               "Resend Invitation",
               url_for("workspaces.resend_invitation", workspace_id=workspace.id, token=member.latest_invitation.token),
-              form.csrf_token,
               confirm_msg="Are you sure? This will send an email to invite the user to join this workspace."
         )}}
       {% endif %}