Viewing File: /usr/local/cpanel/base/unprotected/nc-cpanel/templates/login.tmpl.2018561.2024-06-17@12:19:22~

[%

#----------------------------------------------------------------------
# Arguments (probably *not* a complete list!) that this template accepts:
#
#   allow_login_autocomplete
#   app_name
#   goto_uri
#   goto_app
#   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'   => 'cpanel-logo.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 notice_message = msg_code
    ? (login_messages.$msg_code || locale.maketext('An authorization error occurred. Please try again.') )
    : locale.maketext('You have logged out.');

SET login_target = (goto_uri=='/') ? '_top' : '_self';

#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 ? 'alert--success' : notice_style ? notice_style : 'alert--danger';

-%]

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

<input type="hidden" id="goto_uri" value="[% goto_uri.html() %]" />
<input type="hidden" id="goto_app" value="[% goto_app.html() %]" />
<!-- Do not remove msg_code as it is needed for automated testing - msg_code:[[%- msg_code -%]]  -->
<div id="login-wrapper" class="group [% login_classes.join(' ') %]">
    <div class="wrapper">
        <div id="notify">
            <noscript>
                <div class="error-notice">
                    <img src="[% MagicRevision(get_theme_url('images/notice-error.png')) %]" alt="Error" align="left"/>
                    [% 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) %]
                </div>
            </noscript>
            [% IF msg_code == 'link_account' %]
            <div id="link-account">
                <div class="content-wrapper">
                    [% IF user_info_payload.picture %]
                      [% IF user_info_payload.picture.match('https://') %]
                        <span class='link-account-avatar' style="background-size: 100% 100%; background-image:url([% user_info_payload.picture.html() %])"></span>
                      [% ELSE %]
                        <span class='link-account-avatar' style="background-image:url('data:image/*;base64,[% user_info_payload.picture %]')"></span>
                      [% END %]
                    [% END %]
                    [% IF existing_link_count %]
                      [% 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 %]
                </div>
            </div>
            [% END %]
        </div>

        <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 class="login-container" id="login-container">

                <div class="login-container__sub-container" id="login-sub-container">
                        <div class="login-container__header" id="login-sub-header">
                            [% IF script_uri == "/cpsess0/scripts7/authorizesupport" %]
                            <img class="small-logo" src="[% app_image %]" alt="logo" />
                            &mdash;
                            <p>[% locale.maketext('In order to grant cPanel support access to your server, please log in to [asis,WHM] and then click the “Grant” button.') %]</p>
                            [% ELSE %]
                            <img class="main-logo" src="[% app_image %]" alt="logo" />
                            [% END %]
                        </div>

                        [% IF app_name=="cpaneld" %]
                        <div id='login-status' class="alert [% notice_style_ %]"
                             style="visibility: [% shownotice ? 'visible' : 'hidden' %]">
                            <span tabindex="0" class="alert__close" onclick="closeNotice(this)">Close</span>
                            <div class="alert__content">
                                <p id="login-status-message">[% notice_message %]</p>

                                <p id="login-status-second-message">
                                    [% locale.maketext('Having trouble logging into cPanel? You can also log into cPanel') %]
                                    <a target="_blank" href="https://www.namecheap.com/support/knowledgebase/article.aspx/10132/27/where-can-i-log-into-my-cpanel-hosting-account"> via your Namecheap account</a>
                                </p>
                            </div>
                        </div>
                        [% END %]
                        <div class="login-container__main" id="login-sub"
                            [% IF linked_users && linked_users.size -%]
                                style="display:none"
                            [% END -%]
                        >
                            [% IF app_name=="cpaneld" %]
                            <h2 class="login-container__title">Welcome to Namecheap Hosting</h2>
                            [% 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 class="login-container__login-form login-form" 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" target="[% login_target %]" style="visibility:[% linked_users.size ? 'hidden' : '' %]">
                                    <div class="input-req-login login-form__label">
                                      <label for="user">[% IF app_name=="webmaild" %][% locale.maketext('Email Address') %][% ELSE %][% locale.maketext('Username') %][% END %]</label>
                                      [% IF app_name=="cpaneld" %]
                                        <div class="tooltip" data-gb-tooltip-placement="right">
                                          <div class="tooltip__toggle tooltip__toggle--icon"></div>
                                          <div class="tooltip__wrap">
                                            <div class="tooltip__arrow"></div>
                                            <div class="tooltip__content">
                                              <p>Your cPanel username should differ from your Namecheap username. Your cPanel login details can be found in your Welcome Email.</p>
                                            </div>
                                          </div>
                                        </div>
                                      [% END %]
                                    </div>

                                    <div class="input-field-login icon username-container login-form__input">
                                      <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 cPanel username') %][% END %]" class="std_textbox form-control" type="text" [% allow_login_autocomplete ? '' : 'autocomplete="off"' %] tabindex="1" required>
                                      [% IF app_name=="cpaneld" %]
                                        <p class="login-form__remark">The username should not have any spaces, uppercase or special characters.</p>
                                      [% END %]
                                    </div>

                                    <div class="input-req-login login-password-field-label login-form__label">
                                      <label for="pass">[% locale.maketext('Password') %]</label>
                                    </div>
                                    <div class="input-field-login icon password-container login-form__input form-field form-field--with-action">
                                        <input name="pass" id="pass" placeholder="[% IF app_name=="webmaild" %][% locale.maketext('Enter your email password.') %][% ELSE %][% locale.maketext('Enter your cPanel password') %][% END %]" class="std_textbox form-control" type="password" tabindex="2" [% allow_login_autocomplete ? '' : 'autocomplete="off"' %] required>
                                        [% IF app_name=="cpaneld" %]<button type="button" id="toggle_pass" class="form-field__action form-field__action--toggle-pass"></button>[% END %]
                                    </div>
                                    <div class="controls login-form__controls">
                                        <div class="login-btn">
                                            <button name="login" type="submit" [% IF app_name=="cpaneld" %]class="login-form__submit btn btn--red btn--block"[% END %] id="login_submit" tabindex="3">[% locale.maketext('Log in') -%]</button>
                                        </div>

                                        [% IF reset_pass -%]
                                        <div class="reset-pw">
                                            <a href="/resetpass?start=1" [% IF app_name=="cpaneld" %]class="login-form__reset-pass btn btn--link"[% END %] id="reset_password">[% locale.maketext('Reset Password') %]</a>
                                        </div>
                                        [% END -%]
                                    </div>
                                    <div class="clear" id="push"></div>

                                    <script>
                                      window.onload = function() {
                                        var inputs = [...document.querySelectorAll('.form-control')];
                                        var submit = document.getElementById('login_submit');
                                        var btnIsDisabled = true;

                                        toggleBtnState();

                                        inputs.forEach(function(input) {
                                          input.addEventListener('input', checkInputsOnEmpty);
                                        })

                                        function checkInputsOnEmpty() {
                                          if (this.value === '') {
                                            this.classList.add('is-error');
                                          } else {
                                            this.classList.remove('is-error');
                                          }

                                          toggleBtnState();
                                        };

                                        function toggleBtnState() {
                                          btnIsDisabled = inputs.some(function(input) {
                                            return input.value === '';
                                          })
                                          btnIsDisabled ? submit.setAttribute('disabled', true) : submit.removeAttribute('disabled')
                                        }

                                          var pass = document.getElementById("pass");
                                          document.getElementById("toggle_pass").addEventListener("click", function (event) {
                                              event.preventDefault();
                                              toggle_view(pass)
                                          });

                                          function toggle_view(element) {
                                              if (element.type === "password") {
                                                  element.type = "text";
                                              } else {
                                                  element.type = "password";
                                              }
                                              return false;
                                          }

                                      };
                                    </script>
                                </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>




    [% IF app_name=="cpaneld" %]
              <!-- Promo Chat — Copy this HTML -->
              <div class="promo-chat">
                <div class="grid-col">
                  <p>Need help? We're always here for you.</p>
                  <p>
                    <a href="/unprotected/nc-cpanel/nc-livechat/live-chat.php" target="_blank" class="btn btn--green btn--large">Chat with a Live Person</a>
                </p>
                </div>
              </div>
              <!-- END of Promo Chat — End of Copy this HTML -->

    [% END %]

    [% IF app_name=="webmaild" %]
              <!-- Promo Chat — Copy this HTML -->
              <div class="promo-chat">
                <div class="grid-col">
                  <p><em>Need help?</em> We're always here for you.</p>
                  <p>
                    <a href="/unprotected/nc-cpanel/nc-livechat/live-chat.php" target="_blank" class="btn green">Chat with a Live Person</a>
                  </p>
                </div>
              </div>
              <!-- END of Promo Chat — End of Copy this HTML -->

    [% END %]



            [% #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')) %]';"></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')) %]';"></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 id="locale-footer">
                <div class="locale-container">
                    <noscript>
                        <form method="get" action=".">
                            <select name="locale">
                                <option value="">[% locale.maketext('Change locale') %]</option>
                                [% "<option value='${cur_loc.tag}'>${cur_loc.name}</option>" FOR cur_loc=all_display_locales -%]
                            </select>
                            <button style="margin-left: 10px" type="submit">[% locale.maketext('Change') %]</button>
                        </form>
                        <style type="text/css">#mobilelocalemenu, #locales_list {display:none}</style>
                    </noscript>
                    <ul id="locales_list" class="locales_list">
                        [% FOREACH cur_loc = all_display_locales %]
                            [% LAST IF loop.index > 7 %]
                            <li><a href="/?locale=[% cur_loc.tag %]">[% cur_loc.name.replace(' ','&nbsp;') %]</a></li>
                        [% END %]
                        <li><a href="javascript:void(0)" id="morelocale" onclick="toggle_locales(true)" title="[% locale.maketext('More locales') %]">[% more_locales_symbol %]</a></li>
                    </ul>
                    <div id="mobilelocalemenu">[% locale.maketext("Select a locale:") %]
                        <a href="javascript:void(0)" onclick="toggle_locales(true)" title="[% locale.maketext('Change locale') %]">[% locale.get_language_tag_name() %]</a>
                    </div>
                </div>
            </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', 'jstz.min.js', 'cptimezone_optimized.js', 'utils.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>
Back to Directory File Manager