proxmox-backup/www/window/TokenEdit.js

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'),
	},
    ],
});