gui: add API token UI

Signed-off-by: Fabian Grünbichler <f.gruenbichler@proxmox.com>
2020-10-22 11:40:43 +02:00
parent e6b5bf69a3
commit 7fe76d3491
5 changed files with 447 additions and 0 deletions
--- a/www/window/TokenEdit.js
+++ b/www/window/TokenEdit.js
@ -0,0 +1,213 @@
+Ext.define('PBS.window.TokenEdit', {
+    extend: 'Proxmox.window.Edit',
+    alias: 'widget.pbsTokenEdit',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    onlineHelp: 'user_mgmt',
+
+    user: undefined,
+    tokenname: undefined,
+
+    isAdd: true,
+    isCreate: false,
+    fixedUser: false,
+
+    subject: gettext('API token'),
+
+    fieldDefaults: { labelWidth: 120 },
+
+    items: {
+	xtype: 'inputpanel',
+	column1: [
+	    {
+		xtype: 'pmxDisplayEditField',
+		cbind: {
+		    editable: (get) => get('isCreate') && !get('fixedUser'),
+		},
+		editConfig: {
+		    xtype: 'pbsUserSelector',
+		    allowBlank: false,
+		},
+		name: 'user',
+		value: Proxmox.UserName,
+		renderer: Ext.String.htmlEncode,
+		fieldLabel: gettext('User'),
+	    },
+	    {
+		xtype: 'pmxDisplayEditField',
+		cbind: {
+		    editable: '{isCreate}',
+		},
+		name: 'tokenname',
+		fieldLabel: gettext('Token Name'),
+		minLength: 2,
+		allowBlank: false,
+	    },
+	],
+
+	column2: [
+	    {
+                xtype: 'datefield',
+                name: 'expire',
+		emptyText: Proxmox.Utils.neverText,
+		format: 'Y-m-d',
+		submitFormat: 'U',
+                fieldLabel: gettext('Expire'),
+            },
+	    {
+		xtype: 'proxmoxcheckbox',
+		fieldLabel: gettext('Enabled'),
+		name: 'enable',
+		uncheckedValue: 0,
+		defaultValue: 1,
+		checked: true,
+	    },
+	],
+
+	columnB: [
+	    {
+		xtype: 'proxmoxtextfield',
+		name: 'comment',
+		fieldLabel: gettext('Comment'),
+	    },
+	],
+    },
+
+    getValues: function(dirtyOnly) {
+	var me = this;
+
+	var values = me.callParent(arguments);
+
+	// hack: ExtJS datefield does not submit 0, so we need to set that
+	if (!values.expire) {
+	    values.expire = 0;
+	}
+
+	if (me.isCreate) {
+	    me.url = '/api2/extjs/access/users/';
+	    let uid = encodeURIComponent(values.user);
+	    let tid = encodeURIComponent(values.tokenname);
+	    delete values.user;
+	    delete values.tokenname;
+
+	    me.url += `${uid}/token/${tid}`;
+	}
+
+	return values;
+    },
+
+    setValues: function(values) {
+	var me = this;
+
+	if (Ext.isDefined(values.expire)) {
+	    if (values.expire) {
+		values.expire = new Date(values.expire * 1000);
+	    } else {
+		// display 'never' instead of '1970-01-01'
+		values.expire = null;
+	    }
+	}
+
+	me.callParent([values]);
+    },
+
+    initComponent: function() {
+	let me = this;
+
+	me.url = '/api2/extjs/access/users/';
+
+	me.callParent();
+
+	if (me.isCreate) {
+	    me.method = 'POST';
+	} else {
+	    me.method = 'PUT';
+
+	    let uid = encodeURIComponent(me.user);
+	    let tid = encodeURIComponent(me.tokenname);
+
+	    me.url += `${uid}/token/${tid}`;
+	    me.load({
+		success: function(response, options) {
+		    let values = response.result.data;
+		    values.user = me.user;
+		    values.tokenname = me.tokenname;
+		    me.setValues(values);
+		},
+	    });
+	}
+    },
+
+    apiCallDone: function(success, response, options) {
+	let res = response.result.data;
+	if (!success || !res || !res.value) {
+	    return;
+	}
+
+	Ext.create('PBS.window.TokenShow', {
+	    autoShow: true,
+	    tokenid: res.tokenid,
+	    secret: res.value,
+	});
+    },
+});
+
+Ext.define('PBS.window.TokenShow', {
+    extend: 'Ext.window.Window',
+    alias: ['widget.pbsTokenShow'],
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    width: 600,
+    modal: true,
+    resizable: false,
+    title: gettext('Token Secret'),
+
+    items: [
+	{
+	    xtype: 'container',
+	    layout: 'form',
+	    bodyPadding: 10,
+	    border: false,
+	    fieldDefaults: {
+		labelWidth: 100,
+		anchor: '100%',
+            },
+	    padding: '0 10 10 10',
+	    items: [
+		{
+		    xtype: 'textfield',
+		    fieldLabel: gettext('Token ID'),
+		    cbind: {
+			value: '{tokenid}',
+		    },
+		    editable: false,
+		},
+		{
+		    xtype: 'textfield',
+		    fieldLabel: gettext('Secret'),
+		    inputId: 'token-secret-value',
+		    cbind: {
+			value: '{secret}',
+		    },
+		    editable: false,
+		},
+	    ],
+	},
+	{
+	    xtype: 'component',
+	    border: false,
+	    padding: '10 10 10 10',
+	    userCls: 'pmx-hint',
+	    html: gettext('Please record the API token secret - it will only be displayed now'),
+	},
+    ],
+    buttons: [
+	{
+	    handler: function(b) {
+		document.getElementById('token-secret-value').select();
+		document.execCommand("copy");
+	    },
+	    text: gettext('Copy Secret Value'),
+	},
+    ],
+});