I am looking to enhance security for certain actions that require authentication by displaying a popover prompt for sign in/register to unauthenticated users.
My desired implementation would be something like this:
<button require-auth>Like</button>
When an unauthenticated user clicks on the button, a popover will appear (leveraging Bootstrap Vue popover) prompting them to sign in before proceeding.
To achieve this, I have created a custom directive that listens for the click event and checks the user's authentication status. The challenge lies in how to instantiate the popover component from within the directive and display it.
Here is what I have tried so far without success:
export const Authenticated: DirectiveOptions = {
bind (el, binding, vnode) {
el.addEventListener('click', (event) => {
if (store.getters['users/authenticated']) {
return;
}
event.preventDefault();
const node = document.createElement('div');
const placement = get(binding, 'value', 'auto');
const template = `
<p>You must be logged in to perform this action</p>
<div>
<b-button block :to="{ name: 'login' }">Log In</b-button>
<b-button block :to="{ name: 'register' }">Sign Up</b-button>
</div>`;
const popover = new BPopover({
propsData: { target: el, placement },
});
popover.$slots.default = [template as any];
popover.$slots.title = ['Authentication Required' as any];
popover.$mount(node);
popover.$emit('open');
console.log(popover.$el)
})
},
};
While I understand that using a component might simplify this process, I aim to make it work with any type of button without breaking the page structure by utilizing slots and wrapping content within a div element.
How can I successfully trigger the popover in this context?