js/QuarantineView.js

   1 /*global Proxmox*/
   2 Ext.define('PMG.QuarantineNavigationTree', {
   3     extend: 'Ext.list.Tree',
   4     xtype: 'quarantinenavigationtree',
   5
   6     select: function(path) {
   7         var me = this;
   8         var item = me.getStore().findRecord('path', path, 0, false, true, true);
   9         me.setSelection(item);
  10     },
  11
  12     store: {
  13         root: {
  14             expanded: true,
  15             children: [
  16                 {
  17                     text: gettext('Spam Quarantine'),
  18                     iconCls: 'fa fa-cubes',
  19                     path: 'pmgSpamQuarantine',
  20                     expanded: true,
  21                     children: [
  22                         {
  23                             text: gettext('Whitelist'),
  24                             iconCls: 'fa fa-file-o',
  25                             path: 'pmgUserWhitelist',
  26                             leaf: true
  27                         },
  28                         {
  29                             text: gettext('Blacklist'),
  30                             iconCls: 'fa fa-file',
  31                             path: 'pmgUserBlacklist',
  32                             leaf: true
  33                         }
  34                     ]
  35                 }
  36             ]
  37         }
  38     },
  39
  40     animation: false,
  41     expanderOnly: true,
  42     expanderFirst: false,
  43     ui: 'nav'
  44 });
  45
  46 Ext.define('PMG.QuarantineView', {
  47     extend: 'Ext.container.Container',
  48     xtype: 'quarantineview',
  49
  50     title: 'Proxmox Mail Gateway Quarantine',
  51
  52     controller: {
  53         xclass: 'Ext.app.ViewController',
  54         routes: {
  55             ':path:subpath': {
  56                 action: 'changePath',
  57                 before: 'beforeChangePath',
  58                 conditions : {
  59                     ':path'    : '(?:([%a-zA-Z0-9\\-\\_\\s,]+))',
  60                     ':subpath' : '(?:(?::)([%a-zA-Z0-9\\-\\_\\s,]+))?'
  61                 }
  62             }
  63         },
  64
  65         beforeChangePath: function(path, subpath, action) {
  66             var me = this;
  67
  68             if (!Ext.ClassManager.getByAlias('widget.'+ path)) {
  69                 console.warn('xtype "'+path+'" not found');
  70                 action.stop();
  71                 return;
  72             }
  73
  74             var lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
  75             if (lastpanel && lastpanel.xtype === path) {
  76                 // we have the right component already,
  77                 // we just need to select the correct tab
  78                 // default to the first
  79                 subpath = subpath || 0;
  80                 if (lastpanel.getActiveTab) {
  81                     // we assume lastpanel is a tabpanel
  82                     if (lastpanel.getActiveTab().getItemId() !== subpath) {
  83                         // set the active tab
  84                         lastpanel.setActiveTab(subpath);
  85                     }
  86                     // else we are already there
  87                 }
  88                 action.stop();
  89                 return;
  90             }
  91
  92             action.resume();
  93         },
  94
  95         changePath: function(path,subpath) {
  96             var me = this;
  97             var contentpanel = me.lookupReference('contentpanel');
  98             var lastpanel = contentpanel.getLayout().getActiveItem();
  99
 100             var obj = contentpanel.add({ xtype: path, cselect: subpath });
 101             var treelist = me.lookupReference('navtree');
 102
 103             treelist.suspendEvents();
 104             treelist.select(path);
 105             treelist.resumeEvents();
 106
 107             if (Ext.isFunction(obj.setActiveTab)) {
 108                 obj.setActiveTab(subpath || 0);
 109                 obj.addListener('tabchange', function(tabpanel, newc, oldc) {
 110                     var newpath = path;
 111
 112                     // only add the subpath part for the
 113                     // non-default tabs
 114                     if (tabpanel.items.findIndex('id', newc.id) !== 0) {
 115                         newpath += ":" + newc.getItemId();
 116                     }
 117
 118                     me.redirectTo(newpath);
 119                 });
 120             }
 121
 122             contentpanel.setActiveItem(obj);
 123
 124             if (lastpanel) {
 125                 contentpanel.remove(lastpanel, { destroy: true });
 126             }
 127         },
 128
 129         logout: function() {
 130             PMG.app.logout();
 131         },
 132
 133         changeLanguage: function() {
 134             Ext.create('Ext.window.Window', {
 135                 title: gettext('Language'),
 136                 bodyPadding: 10,
 137                 items: [
 138                     {
 139                         xtype: 'proxmoxLanguageSelector',
 140                         fieldLabel: gettext('Language'),
 141                         value: Ext.util.Cookies.get('PMGLangCookie') || 'en',
 142                     },
 143                 ],
 144
 145                 buttons: [
 146                     {
 147                         text: gettext('OK'),
 148                         handler: function() {
 149                             let me = this;
 150                             let win = this.up('window');
 151                             let value = win.down('proxmoxLanguageSelector').getValue();
 152                             var dt = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
 153                             Ext.util.Cookies.set('PMGLangCookie', value, dt);
 154                             win.mask(gettext('Please wait...'), 'x-mask-loading');
 155                             window.location.reload();
 156                         },
 157                     }
 158                 ]
 159             }).show();
 160         },
 161
 162         navigate: function(treelist, item) {
 163             this.redirectTo(item.get('path'));
 164         },
 165
 166         execQuarantineAction: function(qa) {
 167             PMG.Utils.doQuarantineAction(qa.action, qa.cselect);
 168         },
 169
 170         control: {
 171             '[reference=logoutButton]': {
 172                 click: 'logout'
 173             },
 174             '[reference=languageButton]': {
 175                 click: 'changeLanguage',
 176             },
 177         },
 178
 179         init: function(view) {
 180             var me = this;
 181
 182             // load username
 183             var username = Proxmox.UserName.replace(/\@quarantine$/, '');
 184             me.lookupReference('usernameinfo').setText(username);
 185
 186             // show login on requestexception
 187             // fixme: what about other errors
 188             Ext.Ajax.on('requestexception', function(conn, response, options) {
 189                 if (response.status == 401) { // auth failure
 190                     me.logout();
 191                 }
 192             });
 193
 194             var qa = PMG.Utils.extractQuarantineAction();
 195             var token;
 196             if (qa) {
 197                 token = 'pmgSpamQuarantine';
 198                 if (qa.action === 'blacklist') { token = 'pmgUserBlacklist'; }
 199                 if (qa.action === 'whitelist') { token = 'pmgUserWhitelist'; }
 200                 if (qa.cselect) {
 201                     token += ':' + qa.cselect;
 202                 }
 203                 this.redirectTo(token, true);
 204                 if (qa.action) {
 205                     me.execQuarantineAction(qa);
 206                 }
 207             } else {
 208                 // select treeitem and load page from url fragment
 209
 210                 token = Ext.util.History.getToken() || 'pmgSpamQuarantine';
 211                 this.redirectTo(token, true);
 212             }
 213         }
 214     },
 215
 216     plugins: 'viewport',
 217
 218     layout: {
 219         type: 'border'
 220     },
 221
 222     items: [
 223         {
 224             region: 'north',
 225             xtype: 'container',
 226             layout: {
 227                 type: 'hbox',
 228                 align: 'middle'
 229             },
 230             margin: '2 5 2 5',
 231             height: 38,
 232             items: [
 233                 {
 234                     xtype: 'proxmoxlogo'
 235                 },
 236                 {
 237                     xtype: 'versioninfo'
 238                 },
 239                 {
 240                     flex: 1
 241                 },
 242                 {
 243                     xtype: 'button',
 244                     reference: 'usernameinfo',
 245                     style: {
 246                         // proxmox dark grey p light grey as border
 247                         backgroundColor: '#464d4d',
 248                         borderColor: '#ABBABA'
 249                     },
 250                     margin: '0 5 0 0',
 251                     iconCls: 'fa fa-user',
 252                     menu: [
 253                         {
 254                             iconCls: 'fa fa-language',
 255                             text: gettext('Language'),
 256                             reference: 'languageButton',
 257                         },
 258                         '-',
 259                         {
 260                             reference: 'logoutButton',
 261                             iconCls: 'fa fa-sign-out',
 262                             text: gettext('Logout')
 263                         },
 264                     ],
 265                 },
 266             ]
 267         },
 268         {
 269             xtype: 'quarantinenavigationtree',
 270             reference: 'navtree',
 271             minWidth: 177,
 272             border: false,
 273             region: 'west',
 274             // we have to define it here until extjs 6.2
 275             // because of a bug where a viewcontroller does not detect
 276             // the selectionchange event of a treelist
 277             listeners: {
 278                 selectionchange: 'navigate'
 279             }
 280         },
 281         {
 282             xtype: 'panel',
 283             layout: {
 284                 type: 'card'
 285             },
 286             region: 'center',
 287             border: false,
 288             reference: 'contentpanel'
 289         }
 290     ]
 291 });