ESP3D/esp8266/data/password.tpl
luc 627052ceeb Add basic authentification and OTA update
only web update is supported
2015-11-14 21:48:35 +08:00

112 lines
4.3 KiB
Smarty

$INCLUDE[header.inc]$
<div class="panel">
<div class="panel-heading">Change Password</div>
<div class="panel-body">
<form method="POST">
<div id="divpassword1" class="form-group $USER_PASSWORD_STATUS$" ><label class="control-label" for="PASSWORD1">Password: </label><br>
<input type="password" class="form-control" onkeyup="checkpassword()" id="PASSWORD1" name="PASSWORD" placeholder="Password (1~16)" value="$USER_PASSWORD$" max="16" m1n="1" style="width: auto;"></div>
<div id="divpassword2" class="form-group $USER_PASSWORD_STATUS2$"><label class="control-label"for="PASSWORD2">Confirm Password :</label><br>
<input type="password" class="form-control" onkeyup="checkpassword()" id="PASSWORD2" name="PASSWORD2" placeholder="Password (1~16)" max="16" minn="1" value="$USER_PASSWORD2$" style="width: auto;"></div>
<div class="alert alert-danger" role="alert" id="alerterror" style="$ERROR_MSG_VISIBILITY$" >
$ERROR_MSG$
</div>
<hr><input style="$SUBMIT_BUTTON_VISIBILITY$" type="submit" class="btn btn-primary" id="BTNSUBMIT" name="SUBMIT" value="Apply">
</form>
<div class="alert alert-success" id="alertsuccess" role="alert" style="$SUCCESS_MSG_VISIBILITY$" >
$SUCCESS_MSG$
</div>
</div>
</div>
<script>
function checkpassword()
{
var msg="";
var haserror=false;
var hassuccess=false;
var password1 = document.getElementById('PASSWORD1').value;
var password2 = document.getElementById('PASSWORD2').value;
if (password1.length<1)
{
msg+="Password too short<br>";
document.getElementById("divpassword1").className = "form-group has-error";
haserror=true;
hassuccess=false;
}
if (password1.length>16)
{
msg+="Password too long<br>";
document.getElementById("divpassword1").className = "form-group has-error";
haserror=true;
hassuccess=false;
}
if (password2.length<1)
{
msg+="Confirmation Password too short<br>";
document.getElementById("divpassword1").className = "form-group has-error";
haserror=true;
hassuccess=false;
}
if (password2.length>16)
{
msg+="Confirmation Password too long<br>";
document.getElementById("divpassword1").className = "form-group has-error";
haserror=true;
hassuccess=false;
}
if (password2!=password1)
{
msg+="Passwords do not matches<br>";
document.getElementById("divpassword2").className = "form-group has-error";
haserror=true;
hassuccess=false;
}
if (password1.length>0 && password1.length<17)
{
document.getElementById("divpassword1").className = "form-group has-success";
}
if (password2==password1 && password1.length>0 && password1.length<17)
{
haserror=false;
hassuccess=true;
document.getElementById("divpassword1").className = "form-group has-success";
document.getElementById("divpassword2").className = "form-group has-success";
msg="Passwords matches"
}
if (haserror)
{
document.getElementById("alerterror").style.visibility="visible";
document.getElementById("alerterror").style.width="auto";
document.getElementById("alerterror").style.height="auto";
document.getElementById("alerterror").style.padding="15px";
document.getElementById("alerterror").style.marginBottom="20px";
document.getElementById("alertsuccess").style.visibility="hidden";
document.getElementById("alertsuccess").style.width="0px";
document.getElementById("alertsuccess").style.height="0px";
document.getElementById("alertsuccess").style.padding="0px";
document.getElementById("alertsuccess").style.margin="0px";
document.getElementById("BTNSUBMIT").style.visibility="hidden";
document.getElementById("alerterror").innerHTML=msg;
}
if (hassuccess)
{
document.getElementById("alertsuccess").style.visibility="visible";
document.getElementById("alertsuccess").style.width="auto";
document.getElementById("alertsuccess").style.height="auto";
document.getElementById("alertsuccess").style.padding="15px";
document.getElementById("alertsuccess").style.marginBottom="20px";
document.getElementById("alerterror").style.visibility="hidden";
document.getElementById("alerterror").style.width="0px";
document.getElementById("alerterror").style.height="0px";
document.getElementById("alerterror").style.padding="0px";
document.getElementById("alerterror").style.margin="0px";
document.getElementById("BTNSUBMIT").style.visibility="visible";
document.getElementById("alertsuccess").innerHTML=msg;
}
}
</script>
$INCLUDE[footer.inc]$