js/LDAPConfig.js

   1 Ext.define('pmg-ldap-config', {
   2     extend: 'Ext.data.Model',
   3     fields: ['profile', 'server1', 'server2', 'comment',
   4               'mode', 'binddn', 'bindpw', 'basedn', 'groupbasedn',
   5               'filter', 'accountattr', 'mailattr',
   6               { name: 'port', type: 'integer' },
   7               { name: 'gcount', type: 'integer' },
   8               { name: 'mcount', type: 'integer' },
   9               { name: 'ucount', type: 'integer' },
  10               { name: 'disable', type: 'boolean' },
  11             ],
  12     proxy: {
  13         type: 'proxmox',
  14         url: "/api2/json/config/ldap",
  15     },
  16     idProperty: 'profile',
  17 });
  18
  19 Ext.define('PMG.LDAPInputPanel', {
  20     extend: 'Proxmox.panel.InputPanel',
  21     alias: 'widget.pmgLDAPInputPanel',
  22
  23     profileId: undefined,
  24
  25     onGetValues: function(values) {
  26         var me = this;
  27
  28         values.disable = values.enable ? 0 : 1;
  29         delete values.enable;
  30
  31         return values;
  32     },
  33
  34     initComponent: function() {
  35         var me = this;
  36
  37         me.column1 = [
  38             {
  39                 xtype: me.profileId ? 'displayfield' : 'textfield',
  40                 fieldLabel: gettext('Profile Name'),
  41                 value: me.profileId || '',
  42                 name: 'profile',
  43                 vtype: 'StorageId',
  44                 allowBlank: false,
  45             },
  46             {
  47                 xtype: 'proxmoxKVComboBox',
  48                 name: 'mode',
  49                 comboItems: [
  50                     ['ldap', PMG.Utils.format_ldap_protocol('ldap')],
  51                     ['ldaps', PMG.Utils.format_ldap_protocol('ldaps')],
  52                     ['ldap+starttls', PMG.Utils.format_ldap_protocol('ldap+starttls')],
  53                 ],
  54                 value: 'ldap',
  55                 fieldLabel: gettext('Protocol'),
  56                 listeners: {
  57                     change: function(cb, value) {
  58                         var isldap = value === 'ldap';
  59                         me.down('field[name=verify]').setVisible(!isldap);
  60                     },
  61                 },
  62             },
  63             {
  64                 xtype: 'proxmoxcheckbox',
  65                 name: 'verify',
  66                 fieldLabel: gettext('Verify Certificate'),
  67                 hidden: true,
  68                 uncheckedValue: 0,
  69                 value: 1,
  70                 checked: 1,
  71             },
  72             {
  73                 xtype: 'textfield',
  74                 fieldLabel: gettext('Server'),
  75                 allowBlank: false,
  76                 vtype: 'DnsOrIp',
  77                 name: 'server1',
  78             },
  79             {
  80                 xtype: 'proxmoxtextfield',
  81                 fieldLabel: gettext('Server'),
  82                 allowBlank: true,
  83                 deleteEmpty: !me.isCreate,
  84                 vtype: 'DnsOrIp',
  85                 name: 'server2',
  86             },
  87             {
  88                 xtype: 'proxmoxintegerfield',
  89                 name: 'port',
  90                 emptyText: gettext('Default'),
  91                 deleteEmpty: !me.isCreate,
  92                 minValue: 1,
  93                 maxValue: 65535,
  94                 fieldLabel: gettext('Port'),
  95             },
  96             {
  97                 xtype: 'textfield',
  98                 name: 'binddn',
  99                 allowBlank: true,
 100                 fieldLabel: gettext('User name'),
 101             },
 102             {
 103                 xtype: 'textfield',
 104                 inputType: 'password',
 105                 allowBlank: true,
 106                 name: 'bindpw',
 107                 fieldLabel: gettext('Password'),
 108             },
 109         ];
 110
 111         me.column2 = [
 112             {
 113                 xtype: 'proxmoxcheckbox',
 114                 name: 'enable',
 115                 checked: true,
 116                 uncheckedValue: 0,
 117                 fieldLabel: gettext('Enable'),
 118             },
 119             {
 120                 xtype: 'proxmoxtextfield',
 121                 allowBlank: true,
 122                 deleteEmpty: !me.isCreate,
 123                 name: 'basedn',
 124                 fieldLabel: gettext('Base DN'),
 125             },
 126             {
 127                 xtype: 'proxmoxtextfield',
 128                 allowBlank: true,
 129                 deleteEmpty: !me.isCreate,
 130                 name: 'groupbasedn',
 131                 fieldLabel: gettext('Base DN for Groups'),
 132             },
 133             {
 134                 xtype: 'proxmoxtextfield',
 135                 allowBlank: true,
 136                 deleteEmpty: !me.isCreate,
 137                 name: 'mailattr',
 138                 fieldLabel: gettext('EMail attribute name(s)'),
 139             },
 140             {
 141                 xtype: 'proxmoxtextfield',
 142                 allowBlank: true,
 143                 deleteEmpty: !me.isCreate,
 144                 name: 'accountattr',
 145                 fieldLabel: gettext('Account attribute name'),
 146             },
 147             {
 148                 xtype: 'proxmoxtextfield',
 149                 allowBlank: true,
 150                 deleteEmpty: !me.isCreate,
 151                 name: 'filter',
 152                 fieldLabel: gettext('LDAP filter'),
 153             },
 154             {
 155                 xtype: 'proxmoxtextfield',
 156                 allowBlank: true,
 157                 deleteEmpty: !me.isCreate,
 158                 name: 'groupclass',
 159                 fieldLabel: gettext('Group objectclass'),
 160             },
 161         ];
 162
 163         me.columnB = [
 164             {
 165                 xtype: 'textfield',
 166                 fieldLabel: gettext('Comment'),
 167                 allowBlank: true,
 168                 name: 'comment',
 169             },
 170         ];
 171
 172         me.callParent();
 173     },
 174 });
 175
 176 Ext.define('PMG.LDAPEdit', {
 177     extend: 'Proxmox.window.Edit',
 178     alias: 'widget.pmgLDAPEdit',
 179     onlineHelp: 'pmgconfig_ldap',
 180
 181     subject: 'LDAP Profile',
 182     isAdd: true,
 183
 184     initComponent: function() {
 185         var me = this;
 186
 187         me.isCreate = !me.profileId;
 188
 189         if (me.isCreate) {
 190             me.url = '/api2/extjs/config/ldap';
 191             me.method = 'POST';
 192         } else {
 193             me.url = '/api2/extjs/config/ldap/' + me.profileId + '/config';
 194             me.method = 'PUT';
 195         }
 196
 197         var ipanel = Ext.create('PMG.LDAPInputPanel', {
 198             isCreate: me.isCreate,
 199             profileId: me.profileId,
 200         });
 201
 202         me.items = [ipanel];
 203
 204         me.fieldDefaults = {
 205             labelWidth: 150,
 206         };
 207
 208         me.callParent();
 209
 210         if (!me.isCreate) {
 211             me.load({
 212                 success: function(response, options) {
 213                     var values = response.result.data;
 214
 215                     values.enable = values.disable ? 0 : 1;
 216                     values.verify = !!values.verify;
 217                     ipanel.setValues(values);
 218                 },
 219             });
 220         }
 221     },
 222 });
 223
 224 Ext.define('PMG.LDAPUserGrid', {
 225     extend: 'Ext.grid.Panel',
 226     xtype: 'pmgLDAPUserGrid',
 227
 228     emptyText: gettext('No data in database'),
 229     store: {
 230         autoDestroy: true,
 231         fields: ['dn', 'account', 'pmail'],
 232         proxy: { type: 'proxmox' },
 233         sorters: ['dn'],
 234     },
 235     columns: [
 236         {
 237             text: 'DN',
 238             dataIndex: 'dn',
 239             flex: 1,
 240         },
 241         {
 242             text: gettext('Account'),
 243             dataIndex: 'account',
 244             flex: 1,
 245         },
 246         {
 247             text: gettext('Primary E-Mail'),
 248             dataIndex: 'pmail',
 249             flex: 1,
 250         },
 251     ],
 252
 253     initComponent: function() {
 254         var me = this;
 255         me.callParent();
 256         if (me.url) {
 257             me.getStore().getProxy().setUrl(me.url);
 258             me.getStore().load();
 259         }
 260     },
 261 });
 262
 263 Ext.define('PMG.LDAPConfig', {
 264     extend: 'Ext.panel.Panel',
 265     xtype: 'pmgLDAPConfig',
 266
 267     controller: {
 268         xclass: 'Ext.app.ViewController',
 269
 270         openUserList: function(grid, record) {
 271             var name = this.getViewModel().get('name');
 272             Ext.create('Ext.window.Window', {
 273                 title: Ext.String.format(gettext("Users of '{0}'"), record.data.dn),
 274                 modal: true,
 275                 width: 600,
 276                 height: 400,
 277                 layout: 'fit',
 278                 items: [{
 279                     xtype: 'pmgLDAPUserGrid',
 280                     border: false,
 281                     url: '/api2/json/config/ldap/' + name + '/groups/' + encodeURIComponent(record.data.gid),
 282                 }],
 283             }).show();
 284         },
 285
 286         showUsers: function(button) {
 287             var me = this;
 288             var view = me.lookup('groupgrid');
 289             var record = view.getSelection()[0];
 290             me.openUserList(view, record);
 291         },
 292
 293         openUserMails: function(grid, record) {
 294             var name = this.getViewModel().get('name');
 295             Ext.create('Ext.window.Window', {
 296                 title: Ext.String.format(gettext("E-Mail addresses of '{0}'"), record.data.dn),
 297                 modal: true,
 298                 width: 600,
 299                 height: 400,
 300                 layout: 'fit',
 301                 items: [{
 302                     xtype: 'grid',
 303                     border: false,
 304                     store: {
 305                         autoLoad: true,
 306                         field: ['email', 'primary'],
 307                         proxy: {
 308                             type: 'proxmox',
 309                             url: '/api2/json/config/ldap/' + name + '/users/' + encodeURIComponent(record.data.pmail),
 310                         },
 311                     },
 312                     columns: [
 313                         { dataIndex: 'email', text: gettext('E-Mail address'), flex: 1 },
 314                     ],
 315                 }],
 316             }).show();
 317         },
 318
 319         showEmails: function(button) {
 320             var me = this;
 321             var view = me.lookup('usergrid');
 322             var record = view.getSelection()[0];
 323             me.openUserMails(view, record);
 324         },
 325
 326         reload: function(grid) {
 327             var me = this;
 328             var selection = grid.getSelection();
 329             me.showInfo(grid, selection);
 330         },
 331
 332         showInfo: function(grid, selected) {
 333             var me = this;
 334             var viewModel = me.getViewModel();
 335             if (selected[0]) {
 336                 var name = selected[0].data.profile;
 337                 viewModel.set('selected', true);
 338                 viewModel.set('name', name);
 339
 340                 // set grid stores and load them
 341                 var gstore = me.lookup('groupgrid').getStore();
 342                 var ustore = me.lookup('usergrid').getStore();
 343                 gstore.getProxy().setUrl('/api2/json/config/ldap/' + name + '/groups');
 344                 ustore.getProxy().setUrl('/api2/json/config/ldap/' + name + '/users');
 345                 gstore.load();
 346                 ustore.load();
 347             } else {
 348                 viewModel.set('selected', false);
 349             }
 350         },
 351
 352         init: function(view) {
 353             var me = this;
 354             me.lookup('grid').relayEvents(view, ['activate']);
 355             var groupgrid = me.lookup('groupgrid');
 356             var usergrid = me.lookup('usergrid');
 357
 358             Proxmox.Utils.monStoreErrors(groupgrid, groupgrid.getStore(), true);
 359             Proxmox.Utils.monStoreErrors(usergrid, usergrid.getStore(), true);
 360         },
 361
 362         control: {
 363             'grid[reference=grid]': {
 364                 selectionchange: 'showInfo',
 365                 load: 'reload',
 366             },
 367             'grid[reference=groupgrid]': {
 368                 itemdblclick: 'openUserList',
 369             },
 370             'grid[reference=usergrid]': {
 371                 itemdblclick: 'openUserMails',
 372             },
 373         },
 374     },
 375
 376     viewModel: {
 377         data: {
 378             name: '',
 379             selected: false,
 380         },
 381     },
 382
 383     layout: 'border',
 384
 385     items: [
 386         {
 387             region: 'center',
 388             reference: 'grid',
 389             xtype: 'pmgLDAPConfigGrid',
 390             border: false,
 391         },
 392         {
 393             xtype: 'tabpanel',
 394             reference: 'data',
 395             hidden: true,
 396             height: '50%',
 397             border: false,
 398             split: true,
 399             region: 'south',
 400             bind: {
 401                 hidden: '{!selected}',
 402             },
 403             items: [
 404                 {
 405                     xtype: 'grid',
 406                     reference: 'groupgrid',
 407                     border: false,
 408                     emptyText: gettext('No data in database'),
 409                     tbar: [{
 410                         xtype: 'proxmoxButton',
 411                         text: gettext('Show Users'),
 412                         handler: 'showUsers',
 413                         disabled: true,
 414                     }],
 415                     store: {
 416                         fields: ['dn', 'gid'],
 417                         proxy: { type: 'proxmox' },
 418                         sorters: ['dn'],
 419                     },
 420                     bind: {
 421                         title: Ext.String.format(gettext("Groups of '{0}'"), '{name}'),
 422                     },
 423                     columns: [
 424                         {
 425                             text: 'DN',
 426                             dataIndex: 'dn',
 427                             flex: 1,
 428                         },
 429                     ],
 430                 },
 431                 {
 432                     xtype: 'pmgLDAPUserGrid',
 433                     reference: 'usergrid',
 434                     border: false,
 435                     tbar: [{
 436                         xtype: 'proxmoxButton',
 437                         text: gettext('Show E-Mail addresses'),
 438                         handler: 'showEmails',
 439                         disabled: true,
 440                     }],
 441                     bind: {
 442                         title: Ext.String.format(gettext("Users of '{0}'"), '{name}'),
 443                     },
 444                 },
 445             ],
 446         },
 447     ],
 448
 449 });
 450
 451 Ext.define('PMG.LDAPConfigGrid', {
 452     extend: 'Ext.grid.GridPanel',
 453     alias: 'widget.pmgLDAPConfigGrid',
 454
 455     controller: {
 456         xclass: 'Ext.app.ViewController',
 457
 458         run_editor: function() {
 459             var me = this;
 460             var view = me.getView();
 461             var rec = view.getSelection()[0];
 462             if (!rec) {
 463                 return;
 464             }
 465
 466             var win = Ext.createWidget('pmgLDAPEdit', {
 467                 profileId: rec.data.profile,
 468             });
 469             win.on('destroy', me.reload, me);
 470             win.load();
 471             win.show();
 472         },
 473
 474         newProfile: function() {
 475             var me = this;
 476             var win = Ext.createWidget('pmgLDAPEdit', {});
 477             win.on('destroy', me.reload, me);
 478             win.show();
 479         },
 480
 481
 482         reload: function() {
 483             let view = this.getView();
 484             view.getStore().load();
 485             view.fireEvent('load', view);
 486         },
 487
 488         sync: function() {
 489             var me = this;
 490             var view = me.getView();
 491             var rec = view.getSelection()[0];
 492             Proxmox.Utils.API2Request({
 493                 url: '/config/ldap/' + rec.data.profile + '/sync',
 494                 method: 'POST',
 495                 waitMsgTarget: view,
 496                 callback: function() {
 497                     me.reload();
 498                 },
 499                 failure: function(response, opts) {
 500                     Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 501                 },
 502             });
 503         },
 504
 505         init: function(view) {
 506             var me = this;
 507             Proxmox.Utils.monStoreErrors(view, view.getStore(), true);
 508         },
 509     },
 510
 511     store: {
 512         model: 'pmg-ldap-config',
 513         sorters: [{
 514             property: 'profile',
 515             order: 'DESC',
 516         }],
 517     },
 518
 519     tbar: [
 520         {
 521             xtype: 'proxmoxButton',
 522             text: gettext('Edit'),
 523             disabled: true,
 524             handler: 'run_editor',
 525         },
 526         {
 527             text: gettext('Create'),
 528             handler: 'newProfile',
 529         },
 530         {
 531             xtype: 'proxmoxStdRemoveButton',
 532             baseurl: '/config/ldap',
 533             callback: 'reload',
 534         },
 535         {
 536             xtype: 'proxmoxButton',
 537             text: gettext('Synchronize'),
 538             enableFn: function(rec) {
 539                 return !rec.data.disable;
 540             },
 541             disabled: true,
 542             handler: 'sync',
 543         },
 544     ],
 545
 546     listeners: {
 547         itemdblclick: 'run_editor',
 548         activate: 'reload',
 549     },
 550
 551     columns: [
 552         {
 553             header: gettext('Profile Name'),
 554             sortable: true,
 555             width: 120,
 556             dataIndex: 'profile',
 557         },
 558         {
 559             header: gettext('Protocol'),
 560             sortable: true,
 561             dataIndex: 'mode',
 562             renderer: PMG.Utils.format_ldap_protocol,
 563         },
 564         {
 565             header: gettext('Server'),
 566             sortable: true,
 567             dataIndex: 'server1',
 568             renderer: function(value, metaData, rec) {
 569                 if (rec.data.server2) {
 570                     return value + '<br>' + rec.data.server2;
 571                 }
 572                 return value;
 573             },
 574         },
 575         {
 576             header: gettext('Enabled'),
 577             width: 80,
 578             sortable: true,
 579             dataIndex: 'disable',
 580             renderer: Proxmox.Utils.format_neg_boolean,
 581         },
 582         {
 583             header: gettext('Comment'),
 584             sortable: false,
 585             renderer: Ext.String.htmlEncode,
 586             dataIndex: 'comment',
 587             flex: 1,
 588         },
 589         {
 590             header: gettext('Accounts'),
 591             width: 80,
 592             sortable: true,
 593             dataIndex: 'ucount',
 594         },
 595         {
 596             header: gettext('Addresses'),
 597             width: 80,
 598             sortable: true,
 599             dataIndex: 'mcount',
 600         },
 601         {
 602             header: gettext('Groups'),
 603             width: 80,
 604             sortable: true,
 605             dataIndex: 'gcount',
 606         },
 607     ],
 608
 609 });