%PDF-
%PDF-
Mini Shell
Mini Shell
{% extends "template-base/index.tmpl" %}
{% block HTMLTitle %}{{ HTMLTitle }}{% endblock %}
{% block PageTitle %}{{ PageTitle }}{% endblock %}
{% block contenido %}
<form class="" method="" id="idForm" action="#" style="width: 90%; margin: 0 auto;">
<fieldset class="form-group">
<h2>{{Tr(Lang,"menu.Account_Settings")}}</h2>
<div class="row">
<div class="col-md-9">
<h4>{{Tr(Lang,"settings.change_pwd")}}</h4>
<div class="col-md-3">
<p>{{Tr(Lang,"settings.current_pwd")}}</p>
</div>
<div class="col-md-3">
<div class="col-md-9">
<input class="form-control" id="currentPwd" name="currentPwd" placeholder="" type="password">
</div>
<div class="col-md-3">
<i class="far fa-eye" onclick='showPwd("currentPwd")'></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="col-md-3">
<p>{{Tr(Lang,"settings.new_pwd")}}</p>
</div>
<div class="col-md-3">
<div class="col-md-9">
<input class="form-control" id="newPwd" name="newPwd" placeholder="" type="password" onkeyup="validatePassword(this.value);"/><span id="msg"></span>
</div>
<div class="col-md-3">
<i class="far fa-eye" onclick='showPwd("newPwd")'></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="col-md-3">
<p>{{Tr(Lang,"settings.confirm_pwd")}}</p>
</div>
<div class="col-md-3">
<div class="col-md-9">
<input class="form-control" id="confirmPwd" name="confirmPwd" placeholder="" type="password"><span id="msgConfirmation"></span>
</div>
<div class="col-md-3">
<i class="far fa-eye" onclick='showPwd("confirmPwd")'></i>
</div>
</div>
</div>
</div>
<!--<div class="form-group has-success">
<label class="control-label" for="message-light-input-1">Input with success</label>
<input class="form-control" id="message-light-input-1" type="text">
<small class="form-message light">Some success message.</small>
</div>-->
<hr>
<div class="row">
<div class="pull-right">
<button type="button" id="btnSave" class="btn btn-info" onclick="verifyData()">{{Tr(Lang,"settings.btn_save")}}</button>
</div>
</div>
</fieldset>
</form>
{% endblock %}
{% block finalScripts %}
<script>
function verifyData(){
var current = document.getElementById('currentPwd').value;
var newPwd = document.getElementById('newPwd').value;
var confirmPwd = document.getElementById('confirmPwd').value;
urlPost = '/settingsaccount';
if (newPwd != confirmPwd){
$.growl({ title: "Error", message: "New password and confirmation doesn't match!", style: "warning", size: "large" });
}else{
$.ajax({
url: urlPost,
type: 'POST',
data: jQuery.param({ currentPwd: current, newPwd : newPwd, confirmPwd : confirmPwd}),
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: function (response) {
if (response === "Password incorrect") {
$.growl({ title: "Error", message: response, style: "warning", size: "large" });
} else if (response === "Error with configuration file"){
$.growl({ title: "Error", message: response, style: "warning", size: "large" });
} else if (response === "New password can't be null or less than 8 characters"){
$.growl({ title: "Error", message: response, style: "warning", size: "large" });
}else {
$.growl({ title: "Success", message: "Settings save!", style: "notice", size: "large" });
}
},
error: function () {
alert("Error")
}
});
}
}
function showPwd(value){
var x = document.getElementById(value);
//alert(x);
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
function validatePassword(password) {
// Do not show anything when the length of password is zero.
if (password.length === 0) {
document.getElementById("msg").innerHTML = "";
return;
}
// Create an array and push all possible values that you want in password
var matchedCase = new Array();
matchedCase.push("[$@$!%*#?&]"); // Special Charector
matchedCase.push("[A-Z]"); // Uppercase Alpabates
matchedCase.push("[0-9]"); // Numbers
matchedCase.push("[a-z]"); // Lowercase Alphabates
// Check the conditions
var ctr = 0;
for (var i = 0; i < matchedCase.length; i++) {
if (new RegExp(matchedCase[i]).test(password)) {
ctr++;
}
}
// Display it
var color = "";
var strength = "";
if (password.length<8){
ctr = 5
}
switch (ctr) {
case 0:
case 1:
case 2:
strength = "Very Weak, to save should be at least Medium";
color = "red";
$('#btnSave').attr('disabled','disabled');
break;
case 3:
strength = "Medium";
color = "orange";
$('#btnSave').removeAttr('disabled');
break;
case 4:
strength = "Strong";
color = "green";
$('#btnSave').removeAttr('disabled');
break;
case 5:
strength = "Very short";
color = "red";
$('#btnSave').attr('disabled','disabled');
break;
}
document.getElementById("msg").innerHTML = strength;
document.getElementById("msg").style.color = color;
}
$('#newPwd, #confirmPwd').on('keyup', function () {
if ($('#newPwd').val() == $('#confirmPwd').val()) {
$('#msgConfirmation').html('Matching').css('color', 'green');
} else
$('#msgConfirmation').html('Not Matching').css('color', 'red');
});
</script>
{% endblock %}
Zerion Mini Shell 1.0