Texts and optics

bwreg-webapp/src/main/resources/msg/messages_de.properties

 my_twofa=Meine Tokens
+twofa_backup_tan_list_values=Hier sehen Sie die n\u00E4chsten f\u00FCnf Werte Ihrer TAN Liste. Diese Werte m\u00FCssen in der angezeigten Reihenfolge verwendet werden.
 token_get_tanlist_values=TANs anzeigen
 ssh_key_deleted=Der SSH Key wurde gel\u00F6scht.
 ssh_key_confirm=SSH Key wirklich l\u00F6schen? Der Key kann nicht wiederverwendet werden.

bwreg-webapp/src/main/resources/msg/messages_en.properties

 my_twofa=My Tokens
+twofa_backup_tan_list_values=Here you see the next five values of your TAN list. These values must be used in the displayed order.
 token_get_tanlist_values=Show TANs
 ssh_key_deleted=SSH key has been deleted.
 ssh_key_confirm=Really delete ssh key? The key cannot be used again.

bwreg-webapp/src/main/webapp/user/twofa.xhtml

@@ -133,10 +133,23 @@
 			</p:outputPanel>
 		</p:panel>
 
-		<p:dialog header="#{messages.twofa_backup_tan_list_values}" 
+		<p:dialog header="#{messages.twofa_tokentype_tanlist}" width="240"
 					widgetVar="showBackupTanDlg" id="showBackupTanId" modal="true" closable="true" closeOnEscape="true"
 					showEffect="fade" hideEffect="fade">
-			<h:outputText value="#{twoFaUserBean.backupTanList.result.value.otp}" />
+			<div style="margin-bottom: 8px;">
+				<h:outputText value="#{messages.twofa_backup_tan_list_values}" />
+			</div>
+			<ul style="margin-bottom: 16px;">
+				<ui:repeat var="key" value="#{twoFaUserBean.backupTanList.result.value.otp.keySet()}">
+					<li style="margin-bottom: 4px;">
+						<b><h:outputText value="#{key}" /></b> -  
+						<h:outputText value="#{twoFaUserBean.backupTanList.result.value.otp.get(key)}" />
+					</li>
+				</ui:repeat>
+			</ul>
+			<p:commandButton value="Print" type="button" style="margin-bottom: 16px">
+    			<p:printer target="showBackupTanId" />
+			</p:commandButton>
 		</p:dialog>
 			
 		<p:dialog header="#{messages.twofa_create_totp_token}"