gui: enumerate recovery keys and list in 2nd factor window

Signed-off-by: Wolfgang Bumiller <w.bumiller@proxmox.com>

www/LoginView.js

@@ -281,9 +281,9 @@ Ext.define('PBS.login.TfaWindow', {
 		me.lookup('totpButton').setVisible(false);
 	    }
 
-	    if (!view.challenge.recovery) {
+	    if (!view.challenge.recovery || !view.challenge.recovery.length) {
 		me.lookup('recoveryButton').setVisible(false);
-	    } else if (view.challenge.recovery === "low") {
+	    } else if (view.challenge.recovery.length <= 3) {
 		me.lookup('recoveryButton')
 		    .setIconCls('fa fa-fw fa-exclamation-triangle');
 	    }
@@ -384,7 +384,12 @@ Ext.define('PBS.login.TfaWindow', {
 		me.lookup('webauthnButton').setVisible(false);
 		me.lookup('recoveryButton').setText(gettext("Confirm"));
 		me.lookup('recoveryInfo').setVisible(true);
-		if (view.challenge.recovery === "low") {
+		console.log("RECOVERY:", view.challenge.recovery);
+		me.lookup('availableRecovery').update(Ext.String.htmlEncode(
+		    gettext('Available recovery keys: ') + view.challenge.recovery.join(', ')
+		));
+		me.lookup('availableRecovery').setVisible(true);
+		if (view.challenge.recovery.length <= 3) {
 		    me.lookup('recoveryLow').setVisible(true);
 		}
 	    }
@@ -456,6 +461,15 @@ Ext.define('PBS.login.TfaWindow', {
 		textAlign: "center",
 	    },
 	},
+	{
+	    xtype: 'box',
+	    padding: '0 5',
+	    reference: 'availableRecovery',
+	    hidden: true,
+	    style: {
+		textAlign: "center",
+	    },
+	},
 	{
 	    xtype: 'box',
 	    padding: '0 5',

www/window/AddTfaRecovery.js

@@ -24,7 +24,12 @@ Ext.define('PBS.window.AddTfaRecovery', {
 	    return;
 	}
 
-	let values = response.result.data.recovery.join("\n");
+	let values = response
+	    .result
+	    .data
+	    .recovery
+	    .map((v, i) => `${i}: ${v}`)
+	    .join("\n");
 	Ext.create('PBS.window.TfaRecoveryShow', {
 	    autoShow: true,
 	    userid: this.getViewModel().get('userid'),