How does Magento_Checkout/authentication.html use the `mage.modal` jQuery UI widget?

dmitrii_fediuk · May 20, 2018, 2:46pm

magento/magento2/blob/2.2.4/app/code/Magento/Checkout/view/frontend/web/template/authentication.html#L7-L90


<div class="authentication-wrapper" data-block="authentication" data-bind="visible: isActive()">
<button
    type="button"
    class="action action-auth-toggle"
    data-trigger="authentication">
    <span data-bind="i18n: 'Sign In'"></span>
</button>
<div class="block-authentication"
     style="display: none"
     data-bind="mageInit: {
        'Magento_Ui/js/modal/modal':{
            'type': 'custom',
            'modalClass': 'authentication-dropdown',
            'trigger': '[data-trigger=authentication]',
            'wrapperClass': 'authentication-wrapper',
            'parentModalClass': '_has-modal-custom _has-auth-shown',
            'responsive': true,
            'responsiveClass': 'custom-slide',
            'overlayClass': 'dropdown-overlay modal-custom-overlay',
            'buttons': []
        }}">
    <!-- ko foreach: getRegion('before') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!-- /ko -->
    <div class="block block-customer-login"
         data-bind="attr: {'data-label': $t('or')}">
        <div class="block-title">
            <strong id="block-customer-login-heading"
                    role="heading"
                    aria-level="2"
                    data-bind="i18n: 'Sign In'"></strong>
        </div>
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="block-content" aria-labelledby="block-customer-login-heading">
            <form data-role="login"
                  data-bind="submit:login"
                  method="post">
                <div class="fieldset"
                          data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
                    <div class="field field-email required">
                        <label class="label" for="login-email"><span data-bind="i18n: 'Email Address'"></span></label>
                        <div class="control">
                            <input type="email"
                                   class="input-text"
                                   id="login-email"
                                   name="username"
                                   data-bind="attr: {autocomplete: autocomplete}"
                                   data-validate="{required:true, 'validate-email':true}" />
                        </div>
                    </div>
                    <div class="field field-password required">
                        <label for="login-password" class="label"><span data-bind="i18n: 'Password'"></span></label>
                        <div class="control">
                            <input type="password"
                                   class="input-text"
                                   id="login-password"
                                   name="password"
                                   data-bind="attr: {autocomplete: autocomplete}"
                                   data-validate="{required:true}"
                                   autocomplete="off"/>
                        </div>
                    </div>
                    <!-- ko foreach: getRegion('additional-login-form-fields') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </div>
                <div class="actions-toolbar">
                    <input name="context" type="hidden" value="checkout" />
                    <div class="primary">
                        <button type="submit" class="action action-login secondary"><span data-bind="i18n: 'Sign In'"></span></button>
                    </div>
                    <div class="secondary">
                        <a class="action action-remind" data-bind="attr: { href: forgotPasswordUrl }">
                            <span data-bind="i18n: 'Forgot Your Password?'"></span>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</div>

dmitrii_fediuk · May 20, 2018, 2:46pm