gui: add API token UI
Signed-off-by: Fabian Grünbichler <f.gruenbichler@proxmox.com>
This commit is contained in:
Fabian Grünbichler
Wolfgang Bumiller
parent
e6b5bf69a3
commit
7fe76d3491
@ -13,6 +13,7 @@ JSSRC= \
|
||||
data/RunningTasksStore.js \
|
||||
button/TaskButton.js \
|
||||
config/UserView.js \
|
||||
config/TokenView.js \
|
||||
config/RemoteView.js \
|
||||
config/ACLView.js \
|
||||
config/SyncView.js \
|
||||
@ -27,6 +28,7 @@ JSSRC= \
|
||||
window/SyncJobEdit.js \
|
||||
window/UserEdit.js \
|
||||
window/UserPassword.js \
|
||||
window/TokenEdit.js \
|
||||
window/VerifyJobEdit.js \
|
||||
window/ZFSCreate.js \
|
||||
dashboard/DataStoreStatistics.js \
|
||||
|
||||
@ -34,6 +34,12 @@ Ext.define('PBS.store.NavigationStore', {
|
||||
path: 'pbsUserView',
|
||||
leaf: true,
|
||||
},
|
||||
{
|
||||
text: gettext('API Token'),
|
||||
iconCls: 'fa fa-user-o',
|
||||
path: 'pbsTokenView',
|
||||
leaf: true,
|
||||
},
|
||||
{
|
||||
text: gettext('Permissions'),
|
||||
iconCls: 'fa fa-unlock',
|
||||
|
||||
@ -84,6 +84,14 @@ Ext.define('PBS.Utils', {
|
||||
return `Datastore ${what} ${id}`;
|
||||
},
|
||||
|
||||
extractTokenUser: function(tokenid) {
|
||||
return tokenid.match(/^(.+)!([^!]+)$/)[1];
|
||||
},
|
||||
|
||||
extractTokenName: function(tokenid) {
|
||||
return tokenid.match(/^(.+)!([^!]+)$/)[2];
|
||||
},
|
||||
|
||||
constructor: function() {
|
||||
var me = this;
|
||||
|
||||
|
||||
218
www/config/TokenView.js
Normal file
218
www/config/TokenView.js
Normal file
@ -0,0 +1,218 @@
|
||||
Ext.define('pbs-tokens', {
|
||||
extend: 'Ext.data.Model',
|
||||
fields: [
|
||||
'tokenid', 'tokenname', 'user', 'comment',
|
||||
{ type: 'boolean', name: 'enable', defaultValue: true },
|
||||
{ type: 'date', dateFormat: 'timestamp', name: 'expire' },
|
||||
],
|
||||
idProperty: 'tokenid',
|
||||
});
|
||||
|
||||
Ext.define('pbs-users-with-tokens', {
|
||||
extend: 'Ext.data.Model',
|
||||
fields: [
|
||||
'userid', 'firstname', 'lastname', 'email', 'comment',
|
||||
{ type: 'boolean', name: 'enable', defaultValue: true },
|
||||
{ type: 'date', dateFormat: 'timestamp', name: 'expire' },
|
||||
'tokens',
|
||||
],
|
||||
idProperty: 'userid',
|
||||
proxy: {
|
||||
type: 'proxmox',
|
||||
url: '/api2/json/access/users/?include_tokens=1',
|
||||
},
|
||||
});
|
||||
|
||||
Ext.define('PBS.config.TokenView', {
|
||||
extend: 'Ext.grid.GridPanel',
|
||||
alias: 'widget.pbsTokenView',
|
||||
|
||||
stateful: true,
|
||||
stateId: 'grid-tokens',
|
||||
|
||||
title: gettext('API Tokens'),
|
||||
|
||||
controller: {
|
||||
xclass: 'Ext.app.ViewController',
|
||||
|
||||
init: function(view) {
|
||||
view.userStore = Ext.create('Proxmox.data.UpdateStore', {
|
||||
autoStart: true,
|
||||
interval: 5 * 1000,
|
||||
storeId: 'pbs-users-with-tokens',
|
||||
storeid: 'pbs-users-with-tokens',
|
||||
model: 'pbs-users-with-tokens',
|
||||
});
|
||||
view.userStore.on('load', this.onLoad, this);
|
||||
view.on('destroy', view.userStore.stopUpdate);
|
||||
Proxmox.Utils.monStoreErrors(view, view.userStore);
|
||||
},
|
||||
|
||||
reload: function() { this.getView().userStore.load(); },
|
||||
|
||||
onLoad: function(store, data, success) {
|
||||
if (!success) return;
|
||||
|
||||
let tokenStore = this.getView().store.rstore;
|
||||
|
||||
let records = [];
|
||||
Ext.Array.each(data, function(user) {
|
||||
let tokens = user.data.tokens || [];
|
||||
Ext.Array.each(tokens, function(token) {
|
||||
let r = {};
|
||||
r.tokenid = token.tokenid;
|
||||
r.comment = token.comment;
|
||||
r.expire = token.expire;
|
||||
r.enable = token.enable;
|
||||
records.push(r);
|
||||
});
|
||||
});
|
||||
|
||||
tokenStore.loadData(records);
|
||||
tokenStore.fireEvent('load', tokenStore, records, true);
|
||||
},
|
||||
|
||||
addToken: function() {
|
||||
let me = this;
|
||||
Ext.create('PBS.window.TokenEdit', {
|
||||
isCreate: true,
|
||||
listeners: {
|
||||
destroy: function() {
|
||||
me.reload();
|
||||
},
|
||||
},
|
||||
}).show();
|
||||
},
|
||||
|
||||
editToken: function() {
|
||||
let me = this;
|
||||
let view = me.getView();
|
||||
let selection = view.getSelection();
|
||||
if (selection.length < 1) return;
|
||||
Ext.create('PBS.window.TokenEdit', {
|
||||
user: PBS.Utils.extractTokenUser(selection[0].data.tokenid),
|
||||
tokenname: PBS.Utils.extractTokenName(selection[0].data.tokenid),
|
||||
listeners: {
|
||||
destroy: function() {
|
||||
me.reload();
|
||||
},
|
||||
},
|
||||
}).show();
|
||||
},
|
||||
|
||||
showPermissions: function() {
|
||||
let me = this;
|
||||
let view = me.getView();
|
||||
let selection = view.getSelection();
|
||||
|
||||
if (selection.length < 1) return;
|
||||
|
||||
Ext.create('Proxmox.PermissionView', {
|
||||
auth_id: selection[0].data.tokenid,
|
||||
auth_id_name: 'auth_id',
|
||||
}).show();
|
||||
},
|
||||
|
||||
renderUser: function(tokenid) {
|
||||
return Ext.String.htmlEncode(PBS.Utils.extractTokenUser(tokenid));
|
||||
},
|
||||
|
||||
renderTokenname: function(tokenid) {
|
||||
return Ext.String.htmlEncode(PBS.Utils.extractTokenName(tokenid));
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
activate: 'reload',
|
||||
itemdblclick: 'editToken',
|
||||
},
|
||||
|
||||
store: {
|
||||
type: 'diff',
|
||||
autoDestroy: true,
|
||||
autoDestroyRstore: true,
|
||||
sorters: 'tokenid',
|
||||
model: 'pbs-tokens',
|
||||
rstore: {
|
||||
type: 'store',
|
||||
proxy: 'memory',
|
||||
storeid: 'pbs-tokens',
|
||||
model: 'pbs-tokens',
|
||||
},
|
||||
},
|
||||
|
||||
tbar: [
|
||||
{
|
||||
xtype: 'proxmoxButton',
|
||||
text: gettext('Add'),
|
||||
handler: 'addToken',
|
||||
selModel: false,
|
||||
},
|
||||
{
|
||||
xtype: 'proxmoxButton',
|
||||
text: gettext('Edit'),
|
||||
handler: 'editToken',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
xtype: 'proxmoxStdRemoveButton',
|
||||
baseurl: '/access/users/',
|
||||
callback: 'reload',
|
||||
getUrl: function(rec) {
|
||||
let tokenid = rec.getId();
|
||||
let user = PBS.Utils.extractTokenUser(tokenid);
|
||||
let tokenname = PBS.Utils.extractTokenName(tokenid);
|
||||
return '/access/users/' + encodeURIComponent(user) + '/token/' + encodeURIComponent(tokenname);
|
||||
},
|
||||
},
|
||||
{
|
||||
xtype: 'proxmoxButton',
|
||||
text: gettext('Permissions'),
|
||||
handler: 'showPermissions',
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
|
||||
viewConfig: {
|
||||
trackOver: false,
|
||||
},
|
||||
|
||||
columns: [
|
||||
{
|
||||
header: gettext('User'),
|
||||
width: 200,
|
||||
sortable: true,
|
||||
renderer: 'renderUser',
|
||||
dataIndex: 'tokenid',
|
||||
},
|
||||
{
|
||||
header: gettext('Token name'),
|
||||
width: 100,
|
||||
sortable: true,
|
||||
renderer: 'renderTokenname',
|
||||
dataIndex: 'tokenid',
|
||||
},
|
||||
{
|
||||
header: gettext('Enabled'),
|
||||
width: 80,
|
||||
sortable: true,
|
||||
renderer: Proxmox.Utils.format_boolean,
|
||||
dataIndex: 'enable',
|
||||
},
|
||||
{
|
||||
header: gettext('Expire'),
|
||||
width: 80,
|
||||
sortable: true,
|
||||
renderer: Proxmox.Utils.format_expire,
|
||||
dataIndex: 'expire',
|
||||
},
|
||||
{
|
||||
header: gettext('Comment'),
|
||||
sortable: false,
|
||||
renderer: Ext.String.htmlEncode,
|
||||
dataIndex: 'comment',
|
||||
flex: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
213
www/window/TokenEdit.js
Normal file
213
www/window/TokenEdit.js
Normal file
@ -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'),
|
||||
},
|
||||
],
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user