Viewing File: /usr/local/cpanel/base/unprotected/nc-cpanel/templates/resetpass_set_password.tmpl
[%
SET application_dir = 'cpanel';
SET file = 'resetpass';
%]
[% PROCESS '_assets/cjt2_header_include.tt' %]
<div id="content" ng-controller="setPasswordController">
<div id="forms" class="login-container__login-form login-form">
<a href="#" class="btn btn--link login-form__back-link">Reset Password</a>
<p class="login-form__text">You may set your new password below.</p>
<form id="reset_form" name="reset_form" action="/resetpass" method="post" novalidate>
<!-- prevent password autofill -->
<input type="text" style="display:none">
<input type="password" autocomplete='off' style="display:none">
<input type="hidden" name="action" value="password">
<input type="hidden" name="user" value="[%user%]">
<input type="hidden" name="debug" value="[%CPANEL.is_debug_mode_enabled() ? '1' : '' %]">
<!-- Password Input -->
<div class="reset-input-group">
<div class="input-req-login login-form__label">
<label for="password">[% locale.maketext('New Password') %]</label>
</div>
<div class="login-form__input input-field-login icon password-confirm-container form-field form-field--with-action">
<!-- <password name="password"
class="std_textbox form-control"
tabindex="1"
auto-focus
autocomplete="off"
title="[% locale.maketext('Your new password.') %]"
minimum-strength="[% get_required_password_strength( is_subaccount ? 'virtual' : 'passwd' ) %]"
placeholder="[% locale.maketext('Enter your new password') %]"
password="password"
show-meter="false"
show-strength="false"
show-generator="false"
minimum-length="5"
required
generate-button-tab-index="-1"
toggle-view-button-tab-index="-1"
generate-settings-tab-index="-1"
strength-meets-template="[% locale.lextext('This password has a strength of [numf,_1], which meets or exceeds the system requirement of [numf,_2].') %]"
strength-does-not-meet-template="[% locale.lextext('The password has a strength of [numf,_1], but your system requires a strength of [numf,_2].') %]"
password-strength="passwordStrength">
</password> -->
<input name="password" type="password" id="password" class="std_textbox form-control" autocomplete="off" placeholder="[% locale.maketext('Enter your new password') %]" tabindex="1">
<button type="button" id="copy-to-clipboard" onclick="copyToClipboard()" class="form-field__action form-field__action--copy-pass"></button>
<script>
function copyToClipboard() {
var copyText = document.getElementById("password");
var btn = document.getElementById('copy-to-clipboard');
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
btn.innerHTML = `
<div class="tooltip__wrap" style="display:block;">
<div class="tooltip__arrow"></div>
<div class="tooltip__content">
<p>Copy to clipboard</p>
</div>
</div>
`;
setTimeout(function() {
btn.innerHTML = '';
}, 1000)
}
</script>
<button type="button" id="toggle_pass" class="form-field__action form-field__action--toggle-pass"></button>
</div>
<a id="generate-pass"
class="login-form__small-link"
href="#">
[% locale.maketext('Generate Password') %]
</a>
<ul id="password-validation" class="login-form__messages mb-32">
<li class="login-form__remark">
[% locale.maketext('You must complete this field.') %]
</li>
<li class="login-form__remark">
[% locale.maketext('You must provide a password with at least 5 characters.') %]
</li>
<li class="login-form__remark">
[% locale.maketext('You must provide a stronger password.') %]
</li>
</ul>
</div>
<!-- Password Confirmation -->
<div class="reset-input-group">
<div class="input-req-login login-form__label">
<label for="confirm">[% locale.maketext('Confirm Password') %]</label>
</div>
<div class="input-field-login icon password-confirm-container login-form__input form-field form-field--with-action">
<input name="confirm"
id="confirm"
type="password"
autocomplete='off'
ng-model="passwordConfirm"
class="std_textbox form-control"
tabindex="2"
placeholder="[% locale.maketext('Enter your new password, again.') %]"
validate-equals="reset_form.password"
required>
<span class="form-field__action form-field__action--success-icon" hidden="hidden" id="success-pass-icon"></span>
<button type="button" id="toggle_confirm" class="form-field__action form-field__action--toggle-pass"></button>
</div>
<ul id="confirm-validation" class="login-form__messages">
<li class="login-form__remark">
[% locale.maketext('You must complete this field.') %]
</li>
<li class="login-form__remark">
[% locale.maketext('The passwords do not match.') %]
</li>
</ul>
</div>
<div class="controls login-form__controls">
<div class="login-btn">
<input name="login"
type="submit"
id="login"
class="login-form__submit btn btn--red btn--block"
value="[% locale.maketext('Set Password') %]"
disabled>
</div>
<div class="reset-pw">
<a href="/" class="login-form__reset-pass btn btn--link" id="reset_password">[% locale.maketext('Cancel') %]</a>
</div>
</div>
<script>
window.onload = function() {
var inputs = document.querySelectorAll('.form-control');
var newPasswordInput = document.getElementById('password');
var confirmPasswordInput = document.getElementById('confirm');
var icon = document.getElementById('success-pass-icon');
var submitBtn = document.getElementById("login");
var passwordValidation = document.getElementById("password-validation");
var confirmValidation = document.getElementById("confirm-validation");
document.getElementById("generate-pass").addEventListener("click", function (event) {
event.preventDefault();
password.value = generatePassword(16);
validateInputs(passwordValidation, confirmValidation);
});
['input', 'change', 'blur'].forEach(function (evt) {
newPasswordInput.addEventListener(evt, () => {validateInputs(passwordValidation, confirmValidation)}, false);
confirmPasswordInput.addEventListener(evt, () => {validateInputs(passwordValidation, confirmValidation)}, false);
});
function showElementAndHideOthers(parent, elementNum) {
var children = parent.children;
// Because DOM is a tree, "walk backwards"
for (var i = children.length - 1; i >= 0; i--) {
children[i].style.display = "none";
if (i === elementNum) {
children[i].style.display = "block";
}
}
}
function validateInputs(passwordValidation, confirmValidation) {
// Hide all errors. Hide confirm flag. And disable login button
icon.style.display = '';
showElementAndHideOthers(passwordValidation, -1);
showElementAndHideOthers(confirmValidation, -1);
// confirmFlag.style.visibility = "hidden";
// submit.setAttribute('disabled', true);
// Standard reg exp for password
var reStrongPass = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\_\$%\^&\*])(?=.{5,})")
submitBtn.setAttribute('disabled', true);
if (password.value === "") {
showElementAndHideOthers(passwordValidation, 0);
} else if (password.value.length < 5) {
showElementAndHideOthers(passwordValidation, 1);
} else if (!reStrongPass.test(password.value)) {
showElementAndHideOthers(passwordValidation, 2);
} else if (confirmPasswordInput.value === "") {
showElementAndHideOthers(confirmValidation, 0);
} else if (password.value !== confirmPasswordInput.value) {
showElementAndHideOthers(confirmValidation, 1);
} else {
icon.style.display = 'block';
submitBtn.removeAttribute('disabled');
console.log("OK")
// confirmFlag.style.visibility = "visible";
// submit.removeAttribute('disabled');
}
}
var pass = document.getElementById("pass");
document.querySelectorAll(".form-field__action--toggle-pass").forEach(function (toggle) {
toggle.addEventListener("click", function (event) {
event.preventDefault();
toggle_view(this.closest('.login-form__input').querySelector('input'));
});
})
function toggle_view(element) {
if (element.type === "password") {
element.type = "text";
} else {
element.type = "password";
}
return false;
}
function generatePassword(pLength) {
var keyListAlpha = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ";
var keyListInt = "123456789";
var keyListSpec = "!@#_$%^&*";
var password = '';
var len = Math.ceil(pLength / 2);
len = len - 1;
var lenSpec = pLength - 2 * len;
for (var i = 0; i < len; i++) {
password += keyListAlpha.charAt(Math.floor(Math.random() * keyListAlpha.length));
password += keyListInt.charAt(Math.floor(Math.random() * keyListInt.length));
}
for (i = 0; i < lenSpec; i++) {
password += keyListSpec.charAt(Math.floor(Math.random() * keyListSpec.length));
}
password = password.split('').sort(function () {
return 0.5 - Math.random()
}).join('');
return password;
}
};
</script>
</form>
<span id="resetpass-set-password">[%# marker for testing%]</span>
</div>
</div>
<!-- <script type="text/javascript">
window.onload = function () {
console.log('asdadasdasdasd')
var password = document.getElementById("password");
var passwordValidation = document.getElementById("password-validation");
var confirm = document.getElementById("confirm");
var confirmValidation = document.getElementById("confirm-validation");
var confirmFlag = document.getElementById("flag-password-confirmed");
var submit = document.getElementById('submit');
var copyToClipboardBtn = document.getElementById("copy-button");
submit.setAttribute('disabled', true);
copyToClipboardBtn.addEventListener("click", function (event) {
event.preventDefault();
navigator.clipboard.writeText(password.value);
this.querySelector('span').innerText = 'Copied to clipboard';
});
copyToClipboardBtn.addEventListener('mouseenter', function() {
this.querySelector('span').style.display = 'block';
});
copyToClipboardBtn.addEventListener('mouseleave', function() {
this.querySelector('span').style.display = '';
});
document.getElementById("toggle_password").addEventListener("click", function (event) {
event.preventDefault();
toggle_view(password)
});
document.getElementById("generate-pass").addEventListener("click", function (event) {
event.preventDefault();
password.value = password_generator(16);
validateInputs();
});
document.getElementById("toggle_confirm").addEventListener("click", function (event) {
event.preventDefault();
toggle_view(confirm)
});
['input', 'change', 'blur'].forEach(function (evt) {
password.addEventListener(evt, validateInputs, false);
confirm.addEventListener(evt, validateInputs, false);
});
function toggle_view(element) {
if (element.type === "password") {
element.type = "text";
} else {
element.type = "password";
}
return false;
}
function showElementAndHideOthers(parent, elementNum) {
var children = parent.children;
// Because DOM is a tree, "walk backwards"
for (var i = children.length - 1; i >= 0; i--) {
children[i].style.display = "none";
if (i === elementNum) {
children[i].style.display = "block";
}
}
}
function validateInputs() {
// Hide all errors. Hide confirm flag. And disable login button
showElementAndHideOthers(passwordValidation, -1);
showElementAndHideOthers(confirmValidation, -1);
confirmFlag.style.visibility = "hidden";
submit.setAttribute('disabled', true);
// Standard reg exp for password
var reStrongPass = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\_\$%\^&\*])(?=.{5,})")
if (password.value === "") {
showElementAndHideOthers(passwordValidation, 0);
password.classList.add('is-error');
} else if (password.value.length < 5) {
showElementAndHideOthers(passwordValidation, 1);
password.classList.add('is-error');
} else if (!reStrongPass.test(password.value)) {
showElementAndHideOthers(passwordValidation, 2);
password.classList.add('is-error');
} else if (confirm.value === "") {
showElementAndHideOthers(confirmValidation, 0);
password.classList.remove('is-error');
confirm.classList.add('is-error');
} else if (password.value !== confirm.value) {
showElementAndHideOthers(confirmValidation, 1);
password.classList.remove('is-error');
confirm.classList.add('is-error');
} else {
confirm.classList.remove('is-error');
password.classList.remove('is-error');
confirmFlag.style.visibility = "visible";
submit.removeAttribute('disabled');
}
}
function password_generator(pLength) {
var keyListAlpha = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ";
var keyListInt = "123456789";
var keyListSpec = "!@#_$%^&*";
var password = '';
var len = Math.ceil(pLength / 2);
len = len - 1;
var lenSpec = pLength - 2 * len;
for (var i = 0; i < len; i++) {
password += keyListAlpha.charAt(Math.floor(Math.random() * keyListAlpha.length));
password += keyListInt.charAt(Math.floor(Math.random() * keyListInt.length));
}
for (i = 0; i < lenSpec; i++)
password += keyListSpec.charAt(Math.floor(Math.random() * keyListSpec.length));
password = password.split('').sort(function () {
return 0.5 - Math.random()
}).join('');
return password;
}
}
</script> -->
Back to Directory
File Manager