问使用jquery和模态的AEM注销

EN

<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
     data-sly-test.hasContent="${properties.signInLabel != '' && properties.signInXfPath != '' && properties.signOutLabel != '' && properties.signOutXfPath != '' }"
     class="ranosys-sign-in-buttons"
     data-current-user-url="/libs/granite/security/currentuser.json">

    <span
       class="xyz-sign-in-buttons__button xyz-sign-in-buttons__button--greeting"
       id="ranosysGreetingLabel"
       >${properties.greetingLabel @ i18n}</span>

    <a href="#sign-in"
       class="xyz-sign-in-buttons__button xyz-sign-in-buttons__button--sign-in"
       data-modal-url="${ properties.signInXfPath @ selectors='content', extension = 'html'}"
       data-sly-test="${properties.signInLabel != '' }">${properties.signInLabel}</a>

    <a href="#sign-out"  
       class="xyz-sign-in-buttons__button xyz-sign-out-buttons__button--sign-out"
       data-modal-url="${ properties.signOutXfPath @ selectors='content', extension = 'html'}"
       data-sly-test="${properties.signOutLabel != '' }">${properties.signOutLabel}</a>

</div>
<sly data-sly-call="${placeholderTemplate.placeholder @ isEmpty=!hasContent}"></sly>


**sign_in/out_button.js**

import $ from "jquery";
 
// alert("hiii");
        const currentUserUrl = $('.xyz-sign-in-buttons').data('current-user-url'),
            signIn = $('[href="#sign-in"]'),
            signOut = $('[href="#sign-out"]'),
            greetingLabel = $('#ranosysGreetingLabel'),
            greetingText = greetingLabel.text(),
            body = $('body');

        $.getJSON(currentUserUrl + "?nocache=" + new Date().getTime(), function(currentUser) {
            const isAnonymous = 'anonymous' === currentUser.authorizableId;

            if(isAnonymous) {
                signIn.show();
                body.addClass('anonymous');
            } else {
                signOut.show();
                greetingLabel.text(greetingText + ", " + currentUser.name);
                greetingLabel.show();
            }
        });


**modal.js**
import $ from "jquery";

  
    let visible = false;
    
    function showModal(e) {
        e.preventDefault();

        const xfUrl = $(this).data('modal-url');

        if (visible || !xfUrl) { return; }
        const showModalEvt = new Event('xyz-modal-show');
        const body = document.querySelector('body');

        $.get(xfUrl, function (data) {
            const modal = $('<div id="xyz-modal"/>');
            $('body').append(modal.append(data));
            modal.fadeIn(300, function() { visible = true; });
            visible = true;
            // dispatch event to indicate that the modal has been shown
            // used by sign-in-form.js to dynamically update a successful sign-in redirect to the current page
            body.dispatchEvent(showModalEvt);
        });

        return false;
    }

    function hideModal(e) {
        const modal = $('#xyz-modal');
        // if the target of the click isn't the modal nor a descendant of the modal
        if (visible && modal && !modal.is(e.target) && modal.has(e.target).length === 0) {
            e.preventDefault();

            modal.fadeOut(200, function(){
                modal.remove();
                visible = false;
            });

            return false;
        }

    }


    /*eslint no-use-before-define: ["error", { "functions": false }]*/

    /**
     * Handle clicking of the Sign In button
     */
    $('body').on('click', '[data-modal-url]', showModal);


    /**
     * Handle clicking "off-modal" to hide it
     */

      $(document).on('click', (hideModal));