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