Group user fields in fieldsets

2 files changed, 155 insertions, 138 deletions

diff --git a/web/app/view/BaseDialog.js b/web/app/view/BaseDialog.js
index 75263485..aa9782f1 100644
--- a/web/app/view/BaseDialog.js
+++ b/web/app/view/BaseDialog.js
@@ -22,6 +22,7 @@ Ext.define('Traccar.view.BaseDialog', {
     resizable: false,
     modal: true,
     autoScroll: true,
+    constrain: true,
 
     initComponent: function () {
         if (window.innerHeight) {
diff --git a/web/app/view/UserDialog.js b/web/app/view/UserDialog.js
index 84103ee2..f0510880 100644
--- a/web/app/view/UserDialog.js
+++ b/web/app/view/UserDialog.js
@@ -28,145 +28,161 @@ Ext.define('Traccar.view.UserDialog', {
     items: {
         xtype: 'form',
         items: [{
-            xtype: 'textfield',
-            name: 'name',
-            fieldLabel: Strings.sharedName
-        }, {
-            xtype: 'textfield',
-            name: 'email',
-            fieldLabel: Strings.userEmail,
-            allowBlank: false
-        }, {
-            xtype: 'textfield',
-            name: 'password',
-            fieldLabel: Strings.userPassword,
-            inputType: 'password',
-            allowBlank: false
-        }, {
-            xtype: 'textfield',
-            name: 'phone',
-            fieldLabel: Strings.sharedPhone
-        }, {
-            xtype: 'checkboxfield',
-            inputValue: true,
-            uncheckedValue: false,
-            name: 'readonly',
-            fieldLabel: Strings.serverReadonly,
-            allowBlank: false,
-            hidden: true,
-            reference: 'readonlyField'
-        }, {
-            xtype: 'checkboxfield',
-            inputValue: true,
-            uncheckedValue: false,
-            name: 'admin',
-            fieldLabel: Strings.userAdmin,
-            allowBlank: false,
-            hidden: true,
-            reference: 'adminField'
-        }, {
-            xtype: 'combobox',
-            name: 'map',
-            fieldLabel: Strings.mapLayer,
-            store: 'MapTypes',
-            displayField: 'name',
-            valueField: 'key',
-            editable: false
-        }, {
-            xtype: 'combobox',
-            name: 'distanceUnit',
-            fieldLabel: Strings.sharedDistance,
-            store: 'DistanceUnits',
-            displayField: 'name',
-            valueField: 'key',
-            editable: false
-        }, {
-            xtype: 'combobox',
-            name: 'speedUnit',
-            fieldLabel: Strings.settingsSpeedUnit,
-            store: 'SpeedUnits',
-            displayField: 'name',
-            valueField: 'key',
-            editable: false
-        }, {
-            xtype: 'numberfield',
-            reference: 'latitude',
-            name: 'latitude',
-            fieldLabel: Strings.positionLatitude,
-            decimalPrecision: Traccar.Style.coordinatePrecision
-        }, {
-            xtype: 'numberfield',
-            reference: 'longitude',
-            name: 'longitude',
-            fieldLabel: Strings.positionLongitude,
-            decimalPrecision: Traccar.Style.coordinatePrecision
-        }, {
-            xtype: 'numberfield',
-            reference: 'zoom',
-            name: 'zoom',
-            fieldLabel: Strings.serverZoom
-        }, {
-            xtype: 'checkboxfield',
-            inputValue: true,
-            uncheckedValue: false,
-            name: 'twelveHourFormat',
-            fieldLabel: Strings.settingsTwelveHourFormat,
-            allowBlank: false
-        }, {
-            xtype: 'combobox',
-            name: 'coordinateFormat',
-            fieldLabel: Strings.settingsCoordinateFormat,
-            store: 'CoordinateFormats',
-            displayField: 'name',
-            valueField: 'key',
-            editable: false
-        }, {
-            xtype: 'checkboxfield',
-            inputValue: true,
-            uncheckedValue: false,
-            name: 'disabled',
-            fieldLabel: Strings.userDisabled,
-            hidden: true,
-            reference: 'disabledField'
-        }, {
-            xtype: 'datefield',
-            name: 'expirationTime',
-            fieldLabel: Strings.userExpirationTime,
-            disabled: true,
-            reference: 'expirationTimeField',
-            startDay: Traccar.Style.weekStartDay,
-            format: Traccar.Style.dateFormat
-        }, {
-            xtype: 'numberfield',
-            name: 'deviceLimit',
-            fieldLabel: Strings.userDeviceLimit,
-            disabled: true,
-            reference: 'deviceLimitField'
-        }, {
-            xtype: 'numberfield',
-            name: 'userLimit',
-            fieldLabel: Strings.userUserLimit,
-            disabled: true,
-            reference: 'userLimitField'
-        }, {
-            xtype: 'checkboxfield',
-            inputValue: true,
-            uncheckedValue: false,
-            name: 'deviceReadonly',
-            fieldLabel: Strings.userDeviceReadonly,
-            disabled: true,
-            reference: 'deviceReadonlyField'
-        }, {
-            xtype: 'textfield',
-            name: 'token',
-            reference: 'tokenField',
-            fieldLabel: Strings.userToken,
-            triggers: {
-                generate: {
-                    cls: 'iconCls: x-fa fa-refresh',
-                    handler: 'generateToken'
+            xtype: 'fieldset',
+            title: Strings.sharedRequired,
+            items: [{
+                xtype: 'textfield',
+                name: 'name',
+                fieldLabel: Strings.sharedName
+            }, {
+                xtype: 'textfield',
+                name: 'email',
+                fieldLabel: Strings.userEmail,
+                allowBlank: false
+            }, {
+                xtype: 'textfield',
+                name: 'password',
+                fieldLabel: Strings.userPassword,
+                inputType: 'password',
+                allowBlank: false
+            }]
+        }, {
+            xtype: 'fieldset',
+            title: Strings.sharedPreferences,
+            collapsible: true,
+            collapsed: true,
+            items: [{
+                xtype: 'textfield',
+                name: 'phone',
+                fieldLabel: Strings.sharedPhone
+            }, {
+                xtype: 'combobox',
+                name: 'map',
+                fieldLabel: Strings.mapLayer,
+                store: 'MapTypes',
+                displayField: 'name',
+                valueField: 'key',
+                editable: false
+            }, {
+                xtype: 'combobox',
+                name: 'distanceUnit',
+                fieldLabel: Strings.sharedDistance,
+                store: 'DistanceUnits',
+                displayField: 'name',
+                valueField: 'key',
+                editable: false
+            }, {
+                xtype: 'combobox',
+                name: 'speedUnit',
+                fieldLabel: Strings.settingsSpeedUnit,
+                store: 'SpeedUnits',
+                displayField: 'name',
+                valueField: 'key',
+                editable: false
+            }, {
+                xtype: 'numberfield',
+                reference: 'latitude',
+                name: 'latitude',
+                fieldLabel: Strings.positionLatitude,
+                decimalPrecision: Traccar.Style.coordinatePrecision
+            }, {
+                xtype: 'numberfield',
+                reference: 'longitude',
+                name: 'longitude',
+                fieldLabel: Strings.positionLongitude,
+                decimalPrecision: Traccar.Style.coordinatePrecision
+            }, {
+                xtype: 'numberfield',
+                reference: 'zoom',
+                name: 'zoom',
+                fieldLabel: Strings.serverZoom
+            }, {
+                xtype: 'checkboxfield',
+                inputValue: true,
+                uncheckedValue: false,
+                name: 'twelveHourFormat',
+                fieldLabel: Strings.settingsTwelveHourFormat,
+                allowBlank: false
+            }, {
+                xtype: 'combobox',
+                name: 'coordinateFormat',
+                fieldLabel: Strings.settingsCoordinateFormat,
+                store: 'CoordinateFormats',
+                displayField: 'name',
+                valueField: 'key',
+                editable: false
+            }]
+        }, {
+            xtype: 'fieldset',
+            title: Strings.sharedPermissions,
+            collapsible: true,
+            collapsed: true,
+            items: [{
+                xtype: 'checkboxfield',
+                inputValue: true,
+                uncheckedValue: false,
+                name: 'disabled',
+                fieldLabel: Strings.userDisabled,
+                hidden: true,
+                reference: 'disabledField'
+            }, {
+                xtype: 'checkboxfield',
+                inputValue: true,
+                uncheckedValue: false,
+                name: 'admin',
+                fieldLabel: Strings.userAdmin,
+                allowBlank: false,
+                hidden: true,
+                reference: 'adminField'
+            }, {
+                xtype: 'checkboxfield',
+                inputValue: true,
+                uncheckedValue: false,
+                name: 'readonly',
+                fieldLabel: Strings.serverReadonly,
+                allowBlank: false,
+                hidden: true,
+                reference: 'readonlyField'
+            }, {
+                xtype: 'checkboxfield',
+                inputValue: true,
+                uncheckedValue: false,
+                name: 'deviceReadonly',
+                fieldLabel: Strings.userDeviceReadonly,
+                disabled: true,
+                reference: 'deviceReadonlyField'
+            }, {
+                xtype: 'datefield',
+                name: 'expirationTime',
+                fieldLabel: Strings.userExpirationTime,
+                disabled: true,
+                reference: 'expirationTimeField',
+                startDay: Traccar.Style.weekStartDay,
+                format: Traccar.Style.dateFormat
+            }, {
+                xtype: 'numberfield',
+                name: 'deviceLimit',
+                fieldLabel: Strings.userDeviceLimit,
+                disabled: true,
+                reference: 'deviceLimitField'
+            }, {
+                xtype: 'numberfield',
+                name: 'userLimit',
+                fieldLabel: Strings.userUserLimit,
+                disabled: true,
+                reference: 'userLimitField'
+            }, {
+                xtype: 'textfield',
+                name: 'token',
+                reference: 'tokenField',
+                fieldLabel: Strings.userToken,
+                triggers: {
+                    generate: {
+                        cls: 'iconCls: x-fa fa-refresh',
+                        handler: 'generateToken'
+                    }
                 }
-            }
+            }]
         }]
     },