Call default Magento 2 authentication popup from a custom module

Question

I would like to call the existing authentication modal popup built into Magento 2 from a custom module. It must already be in the body somewhere since it can readily be called by clicking the checkout button when not logged in (guest checkout is disabled).

I found this javascript code in my source,

**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/*jshint browser:true jquery:true*/
/*global alert*/
define(
    [
        'jquery',
        'ko',
        'Magento_Ui/js/form/form',
        'Magento_Customer/js/action/login',
        'Magento_Customer/js/customer-data',
        'Magento_Customer/js/model/authentication-popup',
        'mage/translate',
        'mage/url',
        'Magento_Ui/js/modal/alert',
        'mage/validation'
    ],
    function($, ko, Component, loginAction, customerData, authenticationPopup, $t, url, alert) {
        'use strict';
        return Component.extend({
            registerUrl: window.authenticationPopup.customerRegisterUrl,
            forgotPasswordUrl: window.authenticationPopup.customerForgotPasswordUrl,
            autocomplete: window.checkout.autocomplete,
            modalWindow: null,
            isLoading: ko.observable(false),

            defaults: {
                template: 'Magento_Customer/authentication-popup'
            },

            initialize: function() {
                var self = this;
                this._super();
                url.setBaseUrl(window.authenticationPopup.baseUrl);
                loginAction.registerLoginCallback(function() {
                    self.isLoading(false);
                });
            },

            /** Init popup login window */
            setModalElement: function (element) {
                if (authenticationPopup.modalWindow == null) {
                    authenticationPopup.createPopUp(element);
                }
            },

            /** Is login form enabled for current customer */
            isActive: function() {
                var customer = customerData.get('customer');
                return customer() == false;
            },

            /** Show login popup window */
            showModal: function() {
                if (this.modalWindow) {
                    $(this.modalWindow).modal('openModal');
                } else {
                    alert({
                        content: $t('Guest checkout is disabled.')
                    });
                }
            },

            /** Provide login action */
            login: function(loginForm) {
                var loginData = {},
                    formDataArray = $(loginForm).serializeArray();
                formDataArray.forEach(function (entry) {
                    loginData[entry.name] = entry.value;
                });

                if($(loginForm).validation()
                    && $(loginForm).validation('isValid')
                ) {
                    this.isLoading(true);
                    loginAction(loginData, null, false);
                }
            }
        });
    }
);

Then tried to call it from a link in my custom.phml file:

<p><a onClick="openLoginPopup()" href="javascript:void(0);">Log in</a> or <a onClick="openLoginPopup()" href="javascript:void(0);">create an account</a> for additional features.</p>

This just gave me an error that top wasn't defined. How can I call this popup from a custom module?

Answer 1

This is a tricky solution if you want to reuse Magento authentication popup.

1. In your custom.phtml, define class name to trigger popup (E.g. trigger-auth-popup)

   <p>
       <a class="trigger-auth-popup" href="javascript:void(0);">Log in</a> or <a class="trigger-auth-popup" href="javascript:void(0);">create an account</a> for additional features. 
   </p>
   

2. Override

   vendor/magento/module-customer/view/frontend/web/js/model/authentication-popup.js
   

   by copying it to your custom theme

   app/design/frontend/<Vendor>/<theme>/Magento_Customer/web/js/model/authentication-popup.js
   

   and change the trigger element like this

   /**
    * Create popUp window for provided element
    *
    * @param {HTMLElement} element
    */
   createPopUp: function (element) {
       var options = {
           'type': 'popup',
           'modalClass': 'popup-authentication',
           'focus': '[name=username]',
           'responsive': true,
           'innerScroll': true,
           'trigger': '.proceed-to-checkout, .trigger-auth-popup', // Add your custom class name to this property
           'buttons': []
       };
   
       this.modalWindow = element;
       modal(options, $(this.modalWindow));
   },
   

3. Re-deploy static content and check it out :)