js/LDAPConfig.js

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