Implement mobile template for password dialog

preferences/templates/mobile/password.xet

@@ -2,32 +2,92 @@
 <!DOCTYPE overlay PUBLIC "-//EGroupware GmbH//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
 <!-- $Id$ -->
 <overlay>
-	<template id="preferences.password" template="" lang="" group="0" version="14.2">
+	<template id="preferences.password.change" template="" lang="" group="0" version="14.2">
-		<grid width="100%" height="100%">
+		<grid width="100%">
 			<columns>
-				<column width="35%"/>
+				<column width="200"/>
-				<column width="65%"/>
+				<column/>
+			</columns>
+			<rows>
+				<row>
+					<description value="Enter your new password"/>
+					<passwd id="n_passwd" class="et2_required"/>
+				</row>
+				<row>
+					<description value="Re-enter your password"/>
+					<passwd id="n_passwd_2" class="et2_required"/>
+				</row>
+			</rows>
+		</grid>
+	</template>
+	<template id="preferences.password.2fa" template="" lang="" group="0" version="19.1">
+		<grid id="2fa" width="100%">
+			<columns>
+				<column width="30%"/>
+				<column/>
+			</columns>
+			<rows>
+				<row disabled="!@hide_qrc" valign="top">
+					<vbox>
+						<button id="action[show]" label="Show QRCode" statustext="Show QRCode to enable on an additional device."/>
+						<button id="action[reset]" label="Reset QRCode"
+							statustext="Generate new QRCode to disable existing one, after enabling the new one!"/>
+						<button id="action[disable]" label="Disable Two Factor Auth"
+							onclick="et2_dialog.confirm(widget,'Are you sure?','Disable Two Factor Auth')"
+							statustext="Disabling allows to again log in without a second factor."/>
+					</vbox>
+					<description id="status" class="toptStatus"/>
+				</row>
+				<row disabled="@hide_qrc" valign="top">
+					<vbox>
+						<image src="qrc" class="qrCode" width="200"/>
+						<description value="Scan QRCode with a Time-based One-time Password (TOTP) App:"/>
+						<description value="Google Authenticator for Android" statustext="click to install"
+							extra_link_target="_blank" class="toptApp" href="$cont[gauth_android]"/>
+						<description value="Google Authenticator for iOS" statustext="click to install"
+							extra_link_target="_blank" class="toptApp" href="$cont[gauth_ios]"/>
+						<description value="Or other compatible apps" class="toptApp"/>
+					</vbox>
+				</row>
+				<row disabled="@hide_qrc">
+					<vbox>
+						<description value="Enter code to verify correct setup"/>
+						<textbox id="code" blur="XXX XXX" class="et2_required" width="100%"/>
+					</vbox>
+				</row>
+			</rows>
+		</grid>
+	</template>
+	<template id="preferences.password" template="" lang="" group="0" version="19.1">
+		<grid>
+			<columns>
+				<column width="30%"/>
+				<column/>
 			</columns>
 			<rows>
 				<row class="dialogHeadbar">
 					<hbox>
-						<button id="button[change]" image="apply"/>
+						<button id="button[save]"/>
+						<button id="button[cancel]" onclick="window.close();"/>
 					</hbox>
 				</row>
-				<row class="dialogHeader">
+				<row>
-					<description value="Change password" class="et2_fullWidth"/>
+					<passwd span="all" id="password" needed="true" autocomplete="off" blur="Current password" width="100%"/>
 				</row>
 				<row>
-					<description value="Enter your old password"/>
+					<description span="all" value="You need to enter your password to make any security changes!"/>
-					<passwd id="o_passwd_2" class="et2_fullWidth" needed="true"/>
 				</row>
 				<row>
-					<description value="Enter your new password"/>
+					<tabbox id="tabs" tab_height="400" width="100%" align_tabs="v">
-					<passwd id="n_passwd" class="et2_fullWidth" needed="true"/>
+						<tabs>
-				</row>
+							<tab id="change_password" label="Change password"/>
-				<row>
+							<tab id="two_factor_auth" label="Two factor auth"/>
-					<description value="Re-enter your password"/>
+						</tabs>
-					<passwd id="n_passwd_2" class="et2_fullWidth" needed="true"/>
+						<tabpanels>
+							<template id="preferences.password.change"/>
+							<template id="preferences.password.2fa"/>
+						</tabpanels>
+					</tabbox>
 				</row>
 			</rows>
 		</grid>