Files
wlan-cloud-ucentralsec/wwwassets/reset_password.html
2021-07-10 23:14:31 -07:00

106 lines
2.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.password1 {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.password1 {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<form action="/api/v1/actionLink?action=reset_password" method="post" onsubmit="return validatePassword()">
<div class="imgcontainer">
<img src="/wwwassets/avatar.jpg" alt="Avatar" class="avatar">
</div>
<div>
<h1>Password Reset</h1>
</div>
<div class="container">
<label for="password1"><b>New Password</b></label>
<input id="password1" type="password" placeholder="New Password" name="password1" pattern="${PASSWORD_VALIDATION}" required>
<label for="password2"><b>Retype Password</b></label>
<input id="password2" type="password" placeholder="New Password" name="password2" pattern="${PASSWORD_VALIDATION}" required>
<input type="hidden" id="custId" name="id" value="${UUID}">
<button type="submit">Reset Password</button>
</div>
<div>
<p>Password rules:</p>
<ul>
<li>Must be at least 8 characters long.</li>
<li>Must contain 1 uppercase letter</li>
<li>Must contain 1 lowercase letter</li>
<li>Must contain 1 digit</li>
<li>Must contain 1 special character</li>
</ul>
</div>
</form>
<script>
function validatePassword() {
if(document.getElementById("password1").value == document.getElementById("password2").value) {
return true;
} else {
alert("The 2 passwords did not match. The passwords must match to reset your new password.");
return false;
}
}
</script>
</body>
</html>