fd6b0f9b24
Have the confirmation popover in a separate Vue component fixes a bug in IE that was causing the `form` element in the popover to be ignored. Since `form`s cannot be nested, the `form` element in the popover was being discarded by IE and the revoke/resend invitation buttons did nothing. Breaking the functionality into a Vue component moves the `form` into a separate template. When the popover is displayed, the component is added to the DOM at the end, so the `form` is properly not-nested.
33 lines
926 B
JavaScript
33 lines
926 B
JavaScript
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>
|
|
`
|
|
}
|