Viewing File: /usr/local/cpanel/base/unprotected/nc-cpanel/templates/login.tmpl
[%
#----------------------------------------------------------------------
# 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.png',
'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 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 ? 'alert-success success-notice' : notice_style ? notice_style : 'alert--danger 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="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 %]
[% IF msg_code == 'max_users_exceeded' %]
<div id='login-status' class="alert [% 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" class="alert__content">
<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="alert [% notice_style_ %]" style="visibility: [% shownotice ? 'visible' : 'hidden' %];">
<div class="content-wrapper">
<div id="login-detail" class="alert__content">
<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>
<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" class="login-container">
<div id="login-sub-container" class="login-container__sub-container">
<div id="login-sub-header" class="login-container__header">
[% IF script_uri == "/cpsess0/scripts7/authorizesupport" %]
<img class="small-logo" src="[% app_image %]" alt="logo" />
—
<p>
[% 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>
[% ELSE %]
<img class="main-logo" src="[% app_image %]" alt="logo" />
[% END %]
</div>
[% IF app_name=="cpaneld" %]
<div class="alerts-sticky">
<div id='login-status [% msg_code %]' class="alert [% notice_style_ %]"
style="display: [% shownotice ? 'block' : 'none' %]">
<span tabindex="0" class="alert__close" onclick="closeNotice(this)">Close</span>
<script>
function closeNotice(self) {
var alert = self.closest('.alert');
alert.style.visibility = 'hidden';
}
</script>
<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>
</div>
[% END %]
[% IF app_name=="webmaild" %]
<div class="alerts-sticky">
<div id='login-status [% msg_code %]' class="alert [% notice_style_ %]"
style="display: [% shownotice ? 'block' : 'none' %]">
<span tabindex="0" class="alert__close" onclick="closeNotice(this)">Close</span>
<script>
function closeNotice(self) {
var alert = self.closest('.alert');
alert.style.visibility = 'hidden';
}
</script>
<div class="alert__content">
<p id="login-status-message">[% notice_message %]</p>
</div>
</div>
</div>
[% END %]
<div id="login-sub" class="login-container__main" [% 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 id="forms" class="login-container__login-form login-form">
[%# 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="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 mt-32">
<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" class="login-form__submit btn btn--red btn--block" id="login_submit" tabindex="3">[% locale.maketext('Log in') -%]</button>
</div>
[% 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 %]" class="login-form__reset-pass btn btn--link" 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('keyup', 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 login-form__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 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>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 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 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(' ',' ') %]</a></li>
[% END %]
[% IF all_display_locales.size > 7 %]
<li><a href="javascript:void(0)" id="morelocale" onclick="toggle_locales(true)" title="[% locale.maketext('More locales') %]">[% more_locales_symbol %]</a></li>
[% END %]
</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>
<!--Close wrapper -->
</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>
Back to Directory
File Manager