[pmg-devel] [PATCH gui] add TFA components

[Wolfgang Bumiller]

Signed-off-by: Wolfgang Bumiller <w.bumiller at proxmox.com>
---
 js/LoginView.js      | 61 +++++++++++++++++++++++++++++++++-----------
 js/Makefile          |  1 +
 js/UserManagement.js |  8 ++++--
 js/UserSelector.js   | 13 ++++++++++
 pmg-index.html.tt    |  1 +
 5 files changed, 67 insertions(+), 17 deletions(-)
 create mode 100644 js/UserSelector.js

diff --git a/js/LoginView.js b/js/LoginView.js
index 7ad695c..63f4099 100644
--- a/js/LoginView.js
+++ b/js/LoginView.js
@@ -44,7 +44,7 @@ Ext.define('PMG.LoginView', {
 	    me.submitForm();
 	},
 
-	submitForm: function() {
+	submitForm: async function() {
 	    let me = this;
 	    let view = me.getView();
 	    let loginForm = me.lookupReference('loginForm');
@@ -67,23 +67,54 @@ Ext.define('PMG.LoginView', {
 		    sp.set(saveunField.getStateId(), saveunField.getValue());
 		}
 
-		loginForm.submit({
-		    success: function(form, action) {
-			// save login data and create cookie
-			PMG.Utils.updateLoginData(action.result.data);
-			PMG.app.changeView(view.targetview);
-		    },
-		    failure: function(form, action) {
-			loginForm.unmask();
-			Ext.MessageBox.alert(
-			    gettext('Error'),
-			    gettext('Login failed. Please try again'),
-			);
-		    },
-		});
+		let creds = loginForm.getValues();
+
+		try {
+		    let resp = await Proxmox.Async.api2({
+			url: '/api2/extjs/access/ticket',
+			params: creds,
+			method: 'POST',
+		    });
+
+		    let data = resp.result.data;
+		    if (data.ticket.startsWith('PMG:!tfa!')) {
+			data = await me.performTFAChallenge(data);
+		    }
+		    PMG.Utils.updateLoginData(data);
+		    PMG.app.changeView(view.targetview);
+		} catch (error) {
+		    Proxmox.Utils.authClear();
+		    loginForm.unmask();
+		    Ext.MessageBox.alert(
+			gettext('Error'),
+			gettext('Login failed. Please try again'),
+		    );
+		}
 	    }
 	},
 
+	performTFAChallenge: async function(data) {
+	    let me = this;
+
+	    let userid = data.username;
+	    let ticket = data.ticket;
+	    let challenge = JSON.parse(decodeURIComponent(
+		ticket.split(':')[1].slice("!tfa!".length),
+	    ));
+
+	    let resp = await new Promise((resolve, reject) => {
+		Ext.create('Proxmox.window.TfaLoginWindow', {
+		    userid,
+		    ticket,
+		    challenge,
+		    onResolve: value => resolve(value),
+		    onReject: reject,
+		}).show();
+	    });
+
+	    return resp.result.data;
+	},
+
 	openQuarantineLinkWindow: function() {
 	    let me = this;
 	    me.lookup('loginwindow').setVisible(false);
diff --git a/js/Makefile b/js/Makefile
index 672f61e..f4b7630 100644
--- a/js/Makefile
+++ b/js/Makefile
@@ -73,6 +73,7 @@ JSSRC=							\
 	FetchmailEdit.js				\
 	FetchmailView.js				\
 	UserManagement.js				\
+	UserSelector.js					\
 	ViewMailHeaders.js				\
 	PostfixQShape.js				\
 	PostfixMailQueue.js				\
diff --git a/js/UserManagement.js b/js/UserManagement.js
index 85e41e5..d81a4cc 100644
--- a/js/UserManagement.js
+++ b/js/UserManagement.js
@@ -27,7 +27,11 @@ Ext.define('PMG.UserManagement', {
 	    itemId: 'pop',
 	    iconCls: 'fa fa-reply-all',
 	},
+	{
+	    xtype: 'pmxTfaView',
+	    title: 'Two Factor',
+	    itemId: 'tfa',
+	    iconCls: 'fa fa-key',
+	},
     ],
 });
-
-
diff --git a/js/UserSelector.js b/js/UserSelector.js
new file mode 100644
index 0000000..8fb31d7
--- /dev/null
+++ b/js/UserSelector.js
@@ -0,0 +1,13 @@
+Ext.define('pmx-users', {
+    extend: 'Ext.data.Model',
+    fields: [
+	'userid', 'firstname', 'lastname', 'email', 'comment',
+	{ type: 'boolean', name: 'enable' },
+	{ type: 'date', dateFormat: 'timestamp', name: 'expire' },
+    ],
+    proxy: {
+	type: 'proxmox',
+	url: "/api2/json/access/users",
+    },
+    idProperty: 'userid',
+});
diff --git a/pmg-index.html.tt b/pmg-index.html.tt
index 4a29ba2..4e9f1af 100644
--- a/pmg-index.html.tt
+++ b/pmg-index.html.tt
@@ -24,6 +24,7 @@
     [% ELSE %]
     <script type="text/javascript" src="/pve2/ext6/ext-all.js"></script>
     <script type="text/javascript" src="/pve2/ext6/charts.js"></script>
+    <script type="text/javascript" src="/qrcode.min.js"></script>
     [% END %]
     <script type="text/javascript">
       Proxmox = {
-- 
2.30.2