<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lost Password</title>
<link href="/login/cwp_theme/original/css/bootstrap.min.css" rel="stylesheet">
<link href="/login/cwp_theme/original/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="/login/cwp_theme/original/css/animate.css" rel="stylesheet">
<link href="/login/cwp_theme/original/css/style.css" rel="stylesheet">
<!-- Text spinners style -->
<link href="/login/cwp_theme/original/css/plugins/toastr/toastr.min.css" rel="stylesheet">
<!-- Gritter -->
<link href="/login/cwp_theme/original/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
<link href="/login/cwp_theme/original/css/plugins/textSpinners/spinners.css" rel="stylesheet">
<link rel="icon" href="{{url}}/img/ico/favicon.ico" type="image/png">
<style media="screen">
.error-label{
color: #ff0000;
font-size: 1.2rem;
margin-top: 0.4rem;
margin-bottom: -1rem;
display: block;
}
.logged-message{
/* display: flex;
height: 100vh;
justify-content: center;
align-items: center;
flex-direction: column; */
display: flex;
align-items: center;
}
.logged-message a{
margin-bottom: 2rem;
}
.logged-message img{
width: 35rem;
}
.logged-message-alert{
border-radius: 5px;
color: #676a6c;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.logged-message-alert .fa{
font-size: 6rem;
}
.logged-message-alert h5{
font-size: 2rem;
}
.logged-message-alert h2{
font-size: 2.5rem;
font-weight: bold;
}
.logged-message-wrapper{
display: none;
max-width: 800px;
margin: 0 auto;
padding: 100px 20px 20px 20px;
}
</style>
</head>
<body class="gray-bg">
<div class="middle-box animated fadeInDown" id="main_wrapper">
<div class="text-center">
<a href="#"><img src="/login/cwp_theme/original/img/cwp_logo.png" width="300"></a>
</div>
<div class="row" style="margin-top: 15px">
<div class="col-md-12">
<div class="ibox-content">
<h2 class="font-bold">Change of password</h2>
<p>
Complete the required fields to make the password change
</p>
<div class="row">
<div class="col-lg-12">
<form class="m-t" role="form" action="" id="pwd-container1">
<div class="form-group">
<input type="password" class="form-control example1" id="password1" placeholder="Password" placeholder="New Password" required="">
</div>
<div class="form-group">
<input type="password" id="password2" class="form-control" placeholder="Retype your password" required="">
</div>
<div class="form-group">
<div class="pwstrength_viewport_progress">
</div>
</div>
<input type="hidden" id="idsession" value="{{idsession}}">
<input type="hidden" id="token" value="{{token}}">
<button type="button" id="btnchangpass" class="btn btn-primary block full-width m-b" onclick="return newpass(this)">Change Password</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="logged-message-wrapper animated fadeInDown" id="pchanged_message">
<div class="logged-message row">
<div class="col-md-6" style="text-align: center;">
<a href="https://www.control-webpanel.com" target="_blank"><img src="/login/cwp_theme/original/img/new_logo_small.png"></a>
</div>
<div class="col-md-6" style="border-left: 1px solid #ddd;">
<div class="logged-message-alert">
<i class="fa fa-spinner text-success fa-spin"></i>
<h2 class="text-success">
Success!
</h2>
<p style="font-size: 1.6rem;">Your password has been changed succesfully, you are being redirected to login page.</p>
</div>
</div>
</div>
</div>
<script src="/login/cwp_theme/original/js/jquery-3.1.1.min.js"></script>
<script src="/login/cwp_theme/original/js/popper.min.js"></script>
<script src="/login/cwp_theme/original/js/bootstrap.js"></script>
<script src="/login/cwp_theme/original/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/login/cwp_theme/original/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="/login/cwp_theme/original}/js/inspinia.js"></script>
<script src="/login/cwp_theme/original/js/plugins/pace/pace.min.js"></script>
<!-- Password meter -->
<script src="{{url}}/js/plugins/pwstrength/pwstrength-bootstrap.min.js"></script>
<script src="{{url}}/js/plugins/pwstrength/zxcvbn.js"></script>
<script src="{{url}}/js/plugins/toastr/toastr.min.js"></script>
<script src="{{url}}/js/plugins/gritter/jquery.gritter.min.js"></script>
<script>
$(document).ready(function(){
var options1 = {};
options1.ui = {
container: "#pwd-container1",
showVerdictsInsideProgressBar: true,
viewports: {
progress: ".pwstrength_viewport_progress"
}
};
options1.common = {
debug: false,
};
$('.example1').pwstrength(options1);
});
function newpass(elem){
var pa1 = $("#password1").val();
var pass1 = btoa(pa1);
var pa2 = $("#password2").val();
var pass2 = btoa(pa2);
let valid = true;
if(pass1 == ''){
valid = false;
$("#password1").addClass('error');
}else if($("#password1").val().length < 8){
valid = false;
$("#password1").addClass('error');
if($("#password1").parent().find('.error-label').length == 0){
$("#password1").parent().append('<span class="error-label">Password must be longer than 8 characters</span>');
}
}else if(pass1 != pass2){
valid = false;
$("#password1").removeClass('error');
$("#password1").parent().find('.error-label').remove();
$("#password2").addClass('error');
if($("#password2").parent().find('.error-label').length == 0){
$("#password2").parent().append('<span class="error-label">Passwords do not match</span>');
}
}else{
$("#password1").removeClass('error');
$("#password2").removeClass('error');
$("#password1").parent().find('.error-label').remove();
$("#password2").parent().find('.error-label').remove();
$(elem).prop('disabled', true);
$(elem).text('Validating...');
$.ajax({
type: "POST",
url: "/login/index.php?acc=newpass",
data:"pass1="+pass1+"&pass2="+pass2+"&token="+$("#token").val()+"&idsession="+$("#idsession").val(),
complete: function(datos){
if(datos.responseText == 1){
$('#main_wrapper').hide();
$('#pchanged_message').show();
setTimeout(function(){
window.location = '/login/';
}, 3000);
}else{
noti_bubble('Something went wrong','Error!','error',false,false,'3000',true);
$(elem).prop('disabled', false);
$(elem).text('Change Password');
}
// //alert(datos.responseText);
// if(datos.responseText==1){ window.location = '/login/'; }else{ window.location = '/login/'; }
// return false;
}
});
return false;
}
return false;
// if((pass1!='')&&(pass2!='')){
// if(pass1==pass2){
//
// }else{
// noti_bubble('Something went wrong','Error!','error',false,false,'3000',true);
// return false;
// }
// }else{
// noti_bubble('Something went wrong','Error!','error',false,false,'3000',true);
// return false;
// }
return false;
}
function noti_bubble(title,msj,type,bar,button,timer,repeat) {
toastr.options = {
closeButton: button,
progressBar: bar,
showMethod: 'slideDown',
preventDuplicates:repeat,
timeOut: timer
};
if(type =='success'){ toastr.success(title, msj); }
if(type =='error'){ toastr.error(title, msj); }
if(type =='info'){ toastr.info(title, msj); }
if(type =='warning'){ toastr.warning(title, msj); }
//validatesound();
}
// $("#password2").keyup(function(){
// var lp1 =$("#password1").val(); //str.length;
// var lp1p = lp1.length;
// var lp2 =$("#password2").val(); //str.length;
// var lp2p = lp2.length;
// if(lp2p > lp1p){
// noti_bubble('Password does not match','Error!','error',false,false,'3000',true);
// return false;
// }else{
// if($("#password1").val()==$("#password2").val()){
// $("#btnchangpass").attr('disabled',false);
// $("#btnchangpass").removeClass('disabled');
// }else{
// $("#btnchangpass").attr('disabled',true);
// }
// }
// });
var Base64 = {
// private property
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// public method for encoding
encode : function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
// public method for decoding
decode : function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
// private method for UTF-8 encoding
_utf8_encode : function (string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
// private method for UTF-8 decoding
_utf8_decode : function (utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while ( i < utftext.length ) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
</script>
</body>
</html>
|