hedera-web/forms/account/conf/ui.xml

<vn>
<vn-group>
	<db-form v-model="passwordForm">
		<db-model property="model">
			SELECT length, nAlpha, nUpper, nDigits, nPunct
				FROM account.userPassword
		</db-model>
	</db-form>
	<db-form id="user-form">
		<db-model property="model" id="user-model" updatable="true">
			SELECT u.id, u.name, u.email, u.nickname,
					u.lang, c.isToBeMailed, c.id clientFk
				FROM account.myUser u
					LEFT JOIN myClient c
						ON u.id = c.id
		</db-model>
	</db-form>
</vn-group>
<div id="title">
	<h1><t>Configuration</t></h1>
</div>
<div id="actions">
	<htk-bar-button
		icon="place"
		tip="_Addresses"
		on-click="hash.setAll({form: 'account/address-list'})"/>
	<htk-bar-button
		icon="lock_reset"
		tip="_Change password"
		on-click="this.onPassChangeClick()"/>
</div>
<div id="form" class="conf">
	<div class="form box vn-w-sm vn-pa-lg">
		<h5 class="vn-mb-md">
			<t>Personal information</t>
		</h5>
		<div class="form-group">
			<htk-entry
				placeholder="_Username"
				disabled="true"
				form="user-form"
				column="name"/>
		</div>
		<div class="form-group">
			<htk-entry
				placeholder="_Email"
				form="user-form"
				column="email">
			</htk-entry>
		</div>
		<div class="form-group">
			<htk-entry
				placeholder="_Display name"
				form="user-form"
				column="nickname"/>
		</div>
		<div class="form-group">
			<htk-combo
				placeholder="_Language"
				form="user-form"
				column="lang">
				<db-model property="model">
					<custom>
						SELECT code, name FROM language WHERE isActive
					</custom>
				</db-model>
			</htk-combo>
		</div>
		<div class="form-group">
			<label>
				<htk-check form="user-form" column="isToBeMailed"/>
				<t>Receive invoices by email</t>
			</label>
		</div>
	</div>
</div>
<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.onPassInfoClick()">
				<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>
				{{passwordForm.length}} <t>characters long</t>
			</li>
			<li>
				{{passwordForm.nAlpha}} <t>alphabetic characters</t>
			</li>
			<li>
				{{passwordForm.nUpper}} <t>capital letters</t>
			</li>
			<li>
				{{passwordForm.nDigits}} <t>digits</t>
			</li>
			<li>
				{{passwordForm.nPunct}} <t>symbols</t>
			</li>
		</ul>
	</div>
</htk-popup>
</vn>