[%

#----------------------------------------------------------------------
# Arguments (probably *not* a complete list!) that this template accepts:
#
#   allow_login_autocomplete
#   app_name
#   display_locales
#   https
#   login_messages
#   logout
#   msg_code
#   reset_pass - should be true if either resetpass or resetpass_sub is enabled (doesn't have to be both)

USE DataURI;
USE JSON;
USE Wbr;

SET disp_apps = {
    'whostmgrd' => 'WHM',
    'webmaild' => 'Webmail',
    'cpaneld' => 'cPanel',
};
SET disp_app  = disp_apps.item(app_name) || 'cPanel';

SET app_images = {
    'whostmgrd' => 'whm-logo_white.svg',
    'webmaild'  => 'webmail-logo.svg',
    'cpaneld'   => 'wp-squared.svg',
};

# get app modules based on $app_name
SET app_image = app_images.$app_name || app_images.cpaneld;
SET app_image = MagicRevision(get_theme_url("images/" _ app_image));

#If msg_code is 'link_account' we already have a separate display notice so don't need to show it twice
SET shownotice = logout || msg_code;
SET shownotice = msg_code == 'link_account' ? 0 : shownotice;
SET shownotice = msg_code == 'max_users_exceeded' ? 0 : shownotice;
SET notice_message = msg_code
    ? (login_messages.$msg_code || locale.maketext('An authorization error occurred. Please try again.') )
    : locale.maketext('You have logged out.');

# If on WHM and IE 11 show warning banner
SET show_IE_banner = app_name == 'whostmgrd' ? '' : 'display: none';

IF !contact_info || !contact_info.url || !contact_info.name;
    SET contact_info = {
        name => locale.maketext('Who is my hosting provider?'),
        url => 'https://go.cpanel.net/WhoIsMyHostingProvider',
    };
END;


#Windows XP doesn't have the fancy arrows, so use ellipsis for now.
SET more_locales_symbol = "…";

# Only run the display_locales function once by saving it into all_display_locales
SET all_display_locales = display_locales;

PROCESS "templates/external_auth_header.tmpl";

SET login_classes = [];
IF reset_pass;
    login_classes.push('has-pw-reset');
END;
UNLESS external_auth_modules;
    login_classes.push('no-external-auth-modules');
END;

SET notice_style_ = logout ? 'success-notice' : notice_style ? notice_style : 'error-notice';

-%]

[% MACRO ceil(n)
    GET n + (n - (n % (n + 1)) > 0 ? 1 : 0) FILTER format("%d");
%]

<!-- Do not remove msg_code as it is needed for automated testing - msg_code:[[%- msg_code -%]]  -->
<div id="login-wrapper" class="login-wrapper group [% login_classes.join(' ') %]">
    <div class="login-wrapper__image-panel"></div>
    <div class="wrapper login-wrapper__content-panel">
        <div style="display:none">
            <div id="locale-container" style="visibility:hidden">
                <div id="locale-inner-container">
                    <div id="locale-header">
                        <div class="locale-head">[% locale.maketext('Please select a locale:') %]</div>
                        <div class="close"><a href="javascript:void(0)" onclick="toggle_locales(false)">X [% locale.maketext('Close') %]</a></div>
                    </div>
                    <div id="locale-map">
                        <div class="scroller clear">
                            [% FOREACH cur_loc = all_display_locales %]
                                <div class="locale-cell"><a href="?locale=[% cur_loc.tag %]">[% cur_loc.name %]</a></div>
                            [% END %]
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="content-container">
            <div id="login-container">
                <div id="login-sub-container">
                        <div id="notify">
                            <noscript>
                                <div class="error-notice">
                                    <p>
                                        [% locale.maketext('JavaScript is disabled in your browser.') %]
                                        [% locale.maketext('For [_1] to function properly, you must enable JavaScript.', disp_app) %]
                                        [% locale.maketext('If you do not enable JavaScript, certain features in [_1] will not function correctly.', disp_app) %]
                                    </p>
                                </div>
                             </noscript>
                            [% IF msg_code == 'link_account' %]
                                <div id="link-account">
                                    <div class="content-wrapper error-notice">
                                        [% IF user_info_payload.picture %]
                                        [% IF user_info_payload.picture.match('https://') %]
                                            <img class='link-account-avatar' src="[% user_info_payload.picture.html() %]" referrerpolicy="no-referrer">
                                        [% ELSE %]
                                            <img class='link-account-avatar' src="data:image/*;base64,[% user_info_payload.picture.html() %]">
                                        [% END %]
                                        [% END %]
                                        [% IF existing_link_count %]
                                        <p>
                                            [% locale.maketext('Your account “[_1]” is already associated with an existing “[_2]” account. Please log in to connect a new account.' , preferred_username , disp_app); %]
                                            [% ELSE %]
                                            [% locale.maketext('Your account “[_1]” is not associated with an existing “[_2]” account. Please log in to connect the account.' , preferred_username , disp_app); %]
                                            [% END %]
                                        </p>
                                    </div>
                                </div>
                            [% END %]
                            [% IF msg_code == 'max_users_exceeded' %]
                                <div id='login-status' class="[% notice_style_ %]">
                                    <div class="content-wrapper">
                                        <div id="login-detail">
                                            <div id="login-status-icon-container"><span class='login-status-icon'></span></div>
                                            <div id="login-status-message">
                                                <p><strong>[% locale.maketext('Maximum Users Exceeded.') %]</strong></p>
                                                <p>[% locale.maketext('The number of users on the server exceeds the maximum number of allowed users for your host server.') %]</p>
                                                <p>[% locale.maketext('For more information, contact your hosting provider: “[output,url,_1,_2,target,_blank]”', contact_info.url, contact_info.name) %]</p>
                                                <p>[% locale.maketext('If you have already updated your license, please wait a few minutes. Then try logging in again.') %]</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            [% END %]
                            <div id='login-status' class="[% notice_style_ %]" style="visibility: [% shownotice ? 'visible' : 'hidden' %]">
                                <div class="content-wrapper">
                                    <div id="login-detail">
                                        <div id="login-status-icon-container"><span class='login-status-icon'></span></div>
                                        <div id="login-status-message">[% notice_message %]</div>
                                    </div>
                                </div>
                            </div>
                            <div id="IE-warning" class="warn-notice IE-warning-hide" style="[% show_IE_banner %]">
                                <div class="content-wrapper">
                                    <div id="IE-warning-detail">
                                        <div id="IE-warning-icon-container"><span class="IE-warning-icon"></span></div>
                                        <div id="IE-warning-message">[% locale.maketext('The system has detected that you are using [asis,Internet Explorer] 11. [asis,cPanel] [output,amp] [asis,WHM] no longer supports [asis,Internet Explorer] 11. For more information, read the [output,url,_1,cPanel Blog,title,cPanel Blog,target,_2].', 'https://go.cpanel.net/ie11deprecation', '_blank') %]</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /notify -->
                        <div id="login-sub-header">
                            [% IF script_uri == "/cpsess0/scripts7/authorizesupport" %]
                            <img class="small-logo" src="[% app_image %]" alt="logo" />
                            &mdash;
                            [% locale.maketext('To grant [asis,cPanel] Support access to your server, log in to [asis,WHM] and click the “[_1]” button.', locale.maketext('Grant Access')) %]
                            </p>
                            [% END %]
                        </div>

                        <div id="login-sub"
                            [% IF linked_users && linked_users.size -%]
                                style="display:none"
                            [% END -%]
                        >
                            <div id="clickthrough_form" style="visibility:hidden">
                                <form action="javascript:void(0)">
                                    <div class="notices"></div>
                                    <button type="submit" class="clickthrough-cont-btn">[% locale.maketext('Continue') -%]</button>
                                </form>
                            </div>
                            <div id="forms">
                                [%# Don't change the form action or the ids/names of the username and password fields.
                                    Doing so will break browser-native login credential storage.
                                -%]
                                <form novalidate id="login_form" action="/login/" method="post" style="visibility:[% linked_users.size ? 'hidden' : '' %]">
                                    <div class="xreturning">
                                        <div class="overlap-group">
                                            <div class="login-header">
                                                <h2 class="title display--sm--bold">[% locale.maketext('Welcome.') %]</h2>
                                                <p class="sub-title body--lg">[% locale.maketext('Enter your account information to log in.') %]</p>
                                            </div>
                                            <div class="login-username">
                                                <div class="text-field">
                                                    <div class="content">
                                                        <div class="input-text">
                                                            <div class="input-field icon username-container">
                                                                <input name="user" id="user" autofocus="autofocus" value="[% user.html() %]" placeholder="[% IF app_name=="webmaild" %][% locale.maketext('Enter your email address.') %][% ELSE %][% locale.maketext('Enter your username.') %][% END %]" class="std_textbox" type="text" [% allow_login_autocomplete ? 'autocomplete="on"' : 'autocomplete="off"' %] tabindex="1" required>
                                                                <label for="user">User Name</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="login-password">
                                                <div class="text-field">
                                                    <div class="content">
                                                        <div class="input-text">
                                                            <div class="input-field icon password-container">
                                                                <input name="pass" id="pass" placeholder="[% IF app_name=="webmaild" %][% locale.maketext('Enter your email password.') %][% ELSE %][% locale.maketext('Enter your account password.') %][% END %]" class="std_textbox" type="password" tabindex="2" [% allow_login_autocomplete ? 'autocomplete="on"' : 'autocomplete="off"' %] required>
                                                                <label for="pass">Password</label>
                                                            </div>
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                            <div class="">
                                                <div class="">
                                                    <div class="">
                                                    [% IF reset_pass;
                                                            SET reset_url = "/resetpass?start=1";
                                                            IF !https;
                                                            USE ApplicationUrl;
                                                            SET secure_url = ApplicationUrl.get_secure_url(
                                                                        host            => SERVER_NAME,
                                                                        port            => SERVER_PORT,
                                                                        proxysubdomains => cpconf.proxysubdomains);
                                                            reset_url = secure_url _ reset_url;
                                                        END;
                                                    -%]
                                                        <div class="reset-pw">
                                                            <a href="[% reset_url %]" id="reset_password">[% locale.maketext('Forgot Password') %]
                                                            </a>
                                                        </div>
                                                    [% END -%]
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="controls">
                                                <div class="login-btn">
                                                    <button name="login" type="submit" id="login_submit" tabindex="3">[% locale.maketext('Let’s Go!') -%]</button>
                                                </div>
                                            </div>
                                            <div class="clear" id="push"></div>
                                        </div>
                                    </div>
                                    <div class="clear" id="push"></div>
                                </form>
                                <!--CLOSE forms -->
                            </div>
                        <!--CLOSE login-sub -->
                        </div>
                        [% PROCESS "templates/external_auth.tmpl" %]
                        [% IF linked_users.size -%]
                            <div id="select_users_option_block" style="display:none">
                                <div class="or-separator" >
                                    <span class="or-separator-label">[% locale.maketext('OR[comment,this is a decoration separator, shortest form is best]') %]</span>
                                    <span class="or-separator-secondary-label">[% locale.maketext("Log in via"); %]</span>
                                </div>
                                <div class="controls external-auth-items">
                                    <div class="btn">
                                        <button type="button" class="external-auth-select" style="background-color:#[% auth_mod.color %];text-color:#[% auth_mod.textcolor %]" onclick="show_select_user()">
                                            <span class="external-auth-btn-label">[% locale.maketext('Select user from list of linked accounts') %]</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        [% END -%]
                    <!--CLOSE wrapper -->
                    </div>
                <!--CLOSE login-sub-container -->
                </div>
            <!--CLOSE login-container -->
            </div>
            [% #If we have multiple users the user must select one %]
            [% IF linked_users.size -%]
                [% #calculate left postion based on # of items with a max width of 6 %]
                [% SET max_width = linked_users.size < 6 ? ( linked_users.size + 1 ) * 100 : 600; %]
                <form id="select_user_form" novalidate>
                    <div>
                    [% FOREACH user IN linked_users -%]
                        <div class="button-wrapper">
                            <button name="openid_user_selection" type="submit" id="login_submit" tabindex="3" value="[% user.username %]" title="[% user.username %]">
                                <div class="image-wrapper">
                                    <img src="https://gravatar.com/avatar/[% user.md5_hex %]?d=retro"
                                        onerror="if (this.src != '[% MagicRevision(get_theme_url('images/default-avatar.png')) %]') this.src = '[% MagicRevision(get_theme_url('images/default-avatar.png')) %]';"
                                        referrerpolicy="no-referrer"></img>
                                </div>
                                <div class="text-wrapper">
                                    <div class="text-content">
                                        [% Wbr.wbr_on_at_symbol(user.username) %]
                                    </div>
                                </div>
                            </button>
                        </div>
                    [% END -%]
                        <div class="button-wrapper" >
                            <button name="openid_user_selection" type="button" id="login_submit" tabindex="3" onclick="show_login()">
                                <div class="image-wrapper">
                                    <img src="https://gravatar.com/avatar/default_no_image?d=mm"
                                        onerror="if (this.src != '[% MagicRevision(get_theme_url('images/default-avatar.png')) %]') this.src = '[% MagicRevision(get_theme_url('images/default-avatar.png')) %]';"
                                        referrerpolicy="no-referrer"></img>
                                </div>
                                <div class="text-wrapper">
                                    <div class="link-extra-account">
                                        [% locale.maketext('Link Another Account') %]
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>
                    <div class="clear" id="push"></div>
                </form>
            [% END -%]
        </div>
    </div>
<!--Close login-wrapper -->
</div>
<script>
    var MESSAGES = [% JSON.stringify(login_messages) -%];

    window.IS_LOGOUT = [% logout ? 'true' : 'false' %];

[%# Must not include external javascript -jnk 06.20.09 -%]
[%
FOR file = ['login.js', 'submit_post.js', 'jstz.min.js', 'cptimezone_optimized.js'];
    SET js_url = get_theme_url("js-min/$file") || get_theme_url("js/$file");
    IF js_url;
        js_url = js_url.replace('^/','');
        "\n//$file\n";
        INSERT "$js_url";
    END;
END;
-%]
[% IF linked_users && linked_users.size %]
    var rows = [% ceil(linked_users.size / 6) %];
[% END %]

CPTimezone.reset_timezone();
</script>

<style>
    @media (min-width: 481px) {
        #select_user_form {
            width: [% max_width %]px;
        }
    }
</style>