<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Password Update Form</title>
<link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
<script th:inline="javascript">
/*<![CDATA[*/
var policyPattern = /*[[${policyPattern}]]*/;
var passwordStrengthI18n = {
0: /*[[#{screen.pm.password.strength.0}]]*/,
1: /*[[#{screen.pm.password.strength.1}]]*/,
2: /*[[#{screen.pm.password.strength.2}]]*/,
3: /*[[#{screen.pm.password.strength.3}]]*/,
4: /*[[#{screen.pm.password.strength.4}]]*/
};
/*]]>*/
</script>
</head>
<body>
<main role="main" class="container mt-3 mb-3">
<div class="alert alert-info">
<h3 th:utext="${expiredPass} ? #{screen.expiredpass.heading} : #{screen.mustchangepass.heading}">Change Password
Heading</h3>
<form id="passwordManagementForm" th:if="${passwordManagementEnabled}" method="post" th:object="${password}">
<div class="alert alert-danger" th:if="${#fields.hasErrors('*')}">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}">Error text</span>
</div>
<div class="form-group">
<label for="password" th:utext="#{screen.pm.enterpsw}">Enter Password:</label>
<input class="form-control" type="password" id="password" th:field="*{password}" required/>
</div>
<div class="form-group">
<label for="confirmedPassword" th:utext="#{screen.pm.confirmpsw}">Confirm Password:</label>
<input class="form-control" type="password" id="confirmedPassword" th:field="*{confirmedPassword}"
required/>
</div>
<div class="form-group">
<div>
<span th:text="#{screen.pm.password.strength}">Strength:</span>
<span id="password-strength-icon" class="fas" aria-hidden="true"></span>
</div>
<div class="progress">
<div id="strengthProgressBar" class="progress-bar"></div>
</div>
<div>
<span id="password-strength-warning"></span> <span id="password-strength-suggestions"></span>
</div>
</div>
<div class="form-group" id="password-strength-notes">
<div id="password-policy-violation-msg" class="alert alert-danger" role="alert" style="display: none;">
<span class="fas fa-exclamation-circle" aria-hidden="true"></span>
<strong th:text="#{screen.pm.password.policyViolation}">Password does not match the password policy requirement.</strong>
</div>
<div id="password-confirm-mismatch-msg" class="alert alert-danger" role="alert" style="display: none;">
<span class="fas fa-exclamation-circle" aria-hidden="true"></span>
<strong th:text="#{screen.pm.password.confirmMismatch}">Passwords do not match.</strong>
</div>
</div>
<div class="form-group text-center">
<input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
<input type="hidden" name="_eventId" value="submit"/>
<input class="btn btn-submit"
name="submit"
accesskey="s"
th:value="#{screen.pm.button.submit}"
value="SUBMIT"
id="submit"
type="submit"
disabled="true"/>
<a class="btn btn-danger" th:href="@{/login}" th:text="#{screen.pm.button.cancel}">CANCEL</a>
</div>
</form>
<p th:unless="${passwordManagementEnabled}"
th:utext="${expiredPass} ? #{screen.expiredpass.message} : #{screen.mustchangepass.message}">Expired/Must
Change Password text</p>
</div>
</main>
</body>
</html>
