<vn>
<htk-popup
	id="change-password"
	modal="true">
	<div property="child-node" class="htk-dialog vn-w-xs vn-pa-lg">
		<div class="form">
			<h5 class="vn-mb-md">
				<t>Change password</t>
			</h5>
			<input
				id="old-password"
				type="password"
				placeholder="_Old password"/>
			<input
				id="new-password"
				type="password"
				placeholder="_New password"
				autocomplete="new-password"/>
			<input
				id="repeat-password"
				type="password"
				placeholder="_Repeat password"
				autocomplete="new-password"/>
		</div>
		<div class="button-bar">
			<button class="thin" on-click="this.onPassModifyClick()">
				<t>Modify</t>
			</button>
			<button class="thin" on-click="this.$.passwordInfo.show()">
				<t>Requirements</t>
			</button>
			<div class="clear"/>
		</div>
	</div>
</htk-popup>
<htk-popup
	id="password-info"
	modal="true">
	<div property="child-node" class="htk-dialog pass-info vn-w-xs vn-pa-lg">
		<h5 class="vn-mb-md">
			<t>Password requirements</t>
		</h5>
		<ul>
			<li>
				{{this.passwordForm.length}} <t>characters long</t>
			</li>
			<li>
				{{this.passwordForm.nAlpha}} <t>alphabetic characters</t>
			</li>
			<li>
				{{this.passwordForm.nUpper}} <t>capital letters</t>
			</li>
			<li>
				{{this.passwordForm.nDigits}} <t>digits</t>
			</li>
			<li>
				{{this.passwordForm.nPunct}} <t>symbols</t>
			</li>
		</ul>
	</div>
</htk-popup>
</vn>