X-Git-Url: http://git.archive.openwrt.org/?p=project%2Fluci2%2Fui.git;a=blobdiff_plain;f=luci2%2Fhtdocs%2Fluci2%2Fluci2.js;h=6481c0bd90416c989d2f6e092e8c482527bc53da;hp=e401c7c41b701b96d86ead02edcbff0a7ab245d0;hb=5c515935eec07a2ca50d539da1c43bfceae5acc9;hpb=cc66f6160f8e44d07bf92b9321144fdc0c1cf473

diff --git a/luci2/htdocs/luci2/luci2.js b/luci2/htdocs/luci2/luci2.js
index e401c7c..6481c0b 100644
--- a/luci2/htdocs/luci2/luci2.js
+++ b/luci2/htdocs/luci2/luci2.js
@@ -387,7 +387,7 @@ function LuCI2()
 	};
 
 	this.globals = {
-		timeout:  3000,
+		timeout:  15000,
 		resource: '/luci2',
 		sid:      '00000000000000000000000000000000'
 	};
@@ -584,13 +584,44 @@ function LuCI2()
 
 		},
 
-		changes: _luci2.rpc.declare({
+		configs: _luci2.rpc.declare({
+			object: 'uci',
+			method: 'configs',
+			expect: { configs: [ ] }
+		}),
+
+		_changes: _luci2.rpc.declare({
 			object: 'uci',
 			method: 'changes',
 			params: [ 'config' ],
 			expect: { changes: [ ] }
 		}),
 
+		changes: function(config)
+		{
+			if (typeof(config) == 'string')
+				return this._changes(config);
+
+			var configlist;
+			return this.configs().then(function(configs) {
+				_luci2.rpc.batch();
+				configlist = configs;
+
+				for (var i = 0; i < configs.length; i++)
+					_luci2.uci._changes(configs[i]);
+
+				return _luci2.rpc.flush();
+			}).then(function(changes) {
+				var rv = { };
+
+				for (var i = 0; i < configlist.length; i++)
+					if (changes[i].length)
+						rv[configlist[i]] = changes[i];
+
+				return rv;
+			});
+		},
+
 		commit: _luci2.rpc.declare({
 			object: 'uci',
 			method: 'commit',
@@ -757,13 +788,13 @@ function LuCI2()
 					var net = nets[i] = networks[i];
 					var dev = net.l3_device || net.l2_device;
 					if (dev)
-						net.device = devs[dev] = { };
+						net.device = devs[dev] || (devs[dev] = { });
 				}
 
 				_luci2.rpc.batch();
 
 				for (var dev in devs)
-					_luci2.network.listDeviceNamestatus(dev);
+					_luci2.network.getDeviceStatus(dev);
 
 				return _luci2.rpc.flush();
 			}).then(function(devices) {
@@ -786,7 +817,7 @@ function LuCI2()
 						if (!devs[brm[j]])
 						{
 							devs[brm[j]] = { };
-							_luci2.network.listDeviceNamestatus(brm[j]);
+							_luci2.network.getDeviceStatus(brm[j]);
 						}
 
 						devs[devices[i]['device']].subdevices[j] = devs[brm[j]];
@@ -836,6 +867,9 @@ function LuCI2()
 
 				for (var i = 0; i < interfaces.length; i++)
 				{
+					if (!interfaces[i].route)
+						continue;
+
 					for (var j = 0; j < interfaces[i].route.length; j++)
 					{
 						var rt = interfaces[i].route[j];
@@ -897,7 +931,7 @@ function LuCI2()
 			}
 		}),
 
-		listDeviceNamestatus: _luci2.rpc.declare({
+		getDeviceStatus: _luci2.rpc.declare({
 			object: 'network.device',
 			method: 'status',
 			params: [ 'name' ],
@@ -912,6 +946,88 @@ function LuCI2()
 			object: 'luci2.network',
 			method: 'conntrack_count',
 			expect: { '': { count: 0, limit: 0 } }
+		}),
+
+		listSwitchNames: _luci2.rpc.declare({
+			object: 'luci2.network',
+			method: 'switch_list',
+			expect: { switches: [ ] }
+		}),
+
+		getSwitchInfo: _luci2.rpc.declare({
+			object: 'luci2.network',
+			method: 'switch_info',
+			params: [ 'switch' ],
+			expect: { info: { } },
+			filter: function(data, params) {
+				data['attrs']      = data['switch'];
+				data['vlan_attrs'] = data['vlan'];
+				data['port_attrs'] = data['port'];
+				data['switch']     = params['switch'];
+
+				delete data.vlan;
+				delete data.port;
+
+				return data;
+			}
+		}),
+
+		getSwitchStatus: _luci2.rpc.declare({
+			object: 'luci2.network',
+			method: 'switch_status',
+			params: [ 'switch' ],
+			expect: { ports: [ ] }
+		}),
+
+
+		runPing: _luci2.rpc.declare({
+			object: 'luci2.network',
+			method: 'ping',
+			params: [ 'data' ],
+			expect: { '': { code: -1 } }
+		}),
+
+		runPing6: _luci2.rpc.declare({
+			object: 'luci2.network',
+			method: 'ping6',
+			params: [ 'data' ],
+			expect: { '': { code: -1 } }
+		}),
+
+		runTraceroute: _luci2.rpc.declare({
+			object: 'luci2.network',
+			method: 'traceroute',
+			params: [ 'data' ],
+			expect: { '': { code: -1 } }
+		}),
+
+		runTraceroute6: _luci2.rpc.declare({
+			object: 'luci2.network',
+			method: 'traceroute6',
+			params: [ 'data' ],
+			expect: { '': { code: -1 } }
+		}),
+
+		runNslookup: _luci2.rpc.declare({
+			object: 'luci2.network',
+			method: 'nslookup',
+			params: [ 'data' ],
+			expect: { '': { code: -1 } }
+		}),
+
+
+		setUp: _luci2.rpc.declare({
+			object: 'luci2.network',
+			method: 'ifup',
+			params: [ 'data' ],
+			expect: { '': { code: -1 } }
+		}),
+
+		setDown: _luci2.rpc.declare({
+			object: 'luci2.network',
+			method: 'ifdown',
+			params: [ 'data' ],
+			expect: { '': { code: -1 } }
 		})
 	};
 
@@ -1072,6 +1188,57 @@ function LuCI2()
 		}
 	};
 
+	this.firewall = {
+		getZoneColor: function(zone)
+		{
+			if ($.isPlainObject(zone))
+				zone = zone.name;
+
+			if (zone == 'lan')
+				return '#90f090';
+			else if (zone == 'wan')
+				return '#f09090';
+
+			for (var i = 0, hash = 0;
+				 i < zone.length;
+				 hash = zone.charCodeAt(i++) + ((hash << 5) - hash));
+
+			for (var i = 0, color = '#';
+				 i < 3;
+				 color += ('00' + ((hash >> i++ * 8) & 0xFF).tozoneing(16)).slice(-2));
+
+			return color;
+		},
+
+		findZoneByNetwork: function(network)
+		{
+			var self = this;
+			var zone = undefined;
+
+			return _luci2.uci.foreach('firewall', 'zone', function(z) {
+				if (!z.name || !z.network)
+					return;
+
+				if (!$.isArray(z.network))
+					z.network = z.network.split(/\s+/);
+
+				for (var i = 0; i < z.network.length; i++)
+				{
+					if (z.network[i] == network)
+					{
+						zone = z;
+						break;
+					}
+				}
+			}).then(function() {
+				if (zone)
+					zone.color = self.getZoneColor(zone);
+
+				return zone;
+			});
+		}
+	};
+
 	this.system = {
 		getSystemInfo: _luci2.rpc.declare({
 			object: 'system',
@@ -1292,6 +1459,18 @@ function LuCI2()
 		}),
 
 
+		testReset: _luci2.rpc.declare({
+			object: 'luci2.system',
+			method: 'reset_test',
+			expect: { supported: false }
+		}),
+
+		startReset: _luci2.rpc.declare({
+			object: 'luci2.system',
+			method: 'reset_start'
+		}),
+
+
 		performReboot: _luci2.rpc.declare({
 			object: 'luci2.system',
 			method: 'reboot'
@@ -1452,137 +1631,117 @@ function LuCI2()
 
 	this.ui = {
 
+		saveScrollTop: function()
+		{
+			this._scroll_top = $(document).scrollTop();
+		},
+
+		restoreScrollTop: function()
+		{
+			if (typeof(this._scroll_top) == 'undefined')
+				return;
+
+			$(document).scrollTop(this._scroll_top);
+
+			delete this._scroll_top;
+		},
+
 		loading: function(enable)
 		{
 			var win = $(window);
 			var body = $('body');
-			var div = _luci2._modal || (
-				_luci2._modal = $('<div />')
-					.addClass('cbi-modal-loader')
-					.append($('<div />').text(_luci2.tr('Loading data...')))
+
+			var state = _luci2.ui._loading || (_luci2.ui._loading = {
+				modal: $('<div />')
+					.addClass('modal fade')
+					.append($('<div />')
+						.addClass('modal-dialog')
+						.append($('<div />')
+							.addClass('modal-content luci2-modal-loader')
+							.append($('<div />')
+								.addClass('modal-body')
+								.text(_luci2.tr('Loading data…')))))
 					.appendTo(body)
-			);
+					.modal({
+						backdrop: 'static',
+						keyboard: false
+					})
+			});
 
-			if (enable)
-			{
-				body.css('overflow', 'hidden');
-				body.css('padding', 0);
-				body.css('width', win.width());
-				body.css('height', win.height());
-				div.css('width', win.width());
-				div.css('height', win.height());
-				div.show();
-			}
-			else
-			{
-				div.hide();
-				body.css('overflow', '');
-				body.css('padding', '');
-				body.css('width', '');
-				body.css('height', '');
-			}
+			state.modal.modal(enable ? 'show' : 'hide');
 		},
 
 		dialog: function(title, content, options)
 		{
 			var win = $(window);
 			var body = $('body');
-			var div = _luci2._dialog || (
-				_luci2._dialog = $('<div />')
-					.addClass('cbi-modal-dialog')
+
+			var state = _luci2.ui._dialog || (_luci2.ui._dialog = {
+				dialog: $('<div />')
+					.addClass('modal fade')
 					.append($('<div />')
+						.addClass('modal-dialog')
 						.append($('<div />')
-							.addClass('cbi-modal-dialog-header'))
-						.append($('<div />')
-							.addClass('cbi-modal-dialog-body'))
-						.append($('<div />')
-							.addClass('cbi-modal-dialog-footer')
-							.append($('<button />')
-								.addClass('cbi-button')
-								.text(_luci2.tr('Close'))
-								.click(function() {
-									$('body')
-										.css('overflow', '')
-										.css('padding', '')
-										.css('width', '')
-										.css('height', '');
-
-									$(this).parent().parent().parent().hide();
-								}))))
+							.addClass('modal-content')
+							.append($('<div />')
+								.addClass('modal-header')
+								.append('<h4 />')
+									.addClass('modal-title'))
+							.append($('<div />')
+								.addClass('modal-body'))
+							.append($('<div />')
+								.addClass('modal-footer')
+								.append(_luci2.ui.button(_luci2.tr('Close'), 'primary')
+									.click(function() {
+										$(this).parents('div.modal').modal('hide');
+									})))))
 					.appendTo(body)
-			);
+			});
 
 			if (typeof(options) != 'object')
 				options = { };
 
 			if (title === false)
 			{
-				body
-					.css('overflow', '')
-					.css('padding', '')
-					.css('width', '')
-					.css('height', '');
-
-				_luci2._dialog.hide();
+				state.dialog.modal('hide');
 
 				return;
 			}
 
-			var cnt = div.children().children('div.cbi-modal-dialog-body');
-			var ftr = div.children().children('div.cbi-modal-dialog-footer');
+			var cnt = state.dialog.children().children().children('div.modal-body');
+			var ftr = state.dialog.children().children().children('div.modal-footer');
 
 			ftr.empty();
 
 			if (options.style == 'confirm')
 			{
-				ftr.append($('<button />')
-					.addClass('cbi-button')
-					.text(_luci2.tr('Ok'))
+				ftr.append(_luci2.ui.button(_luci2.tr('Ok'), 'primary')
 					.click(options.confirm || function() { _luci2.ui.dialog(false) }));
 
-				ftr.append($('<button />')
-					.addClass('cbi-button')
-					.text(_luci2.tr('Cancel'))
+				ftr.append(_luci2.ui.button(_luci2.tr('Cancel'), 'default')
 					.click(options.cancel || function() { _luci2.ui.dialog(false) }));
 			}
 			else if (options.style == 'close')
 			{
-				ftr.append($('<button />')
-					.addClass('cbi-button')
-					.text(_luci2.tr('Close'))
+				ftr.append(_luci2.ui.button(_luci2.tr('Close'), 'primary')
 					.click(options.close || function() { _luci2.ui.dialog(false) }));
 			}
 			else if (options.style == 'wait')
 			{
-				ftr.append($('<button />')
-					.addClass('cbi-button')
-					.text(_luci2.tr('Close'))
+				ftr.append(_luci2.ui.button(_luci2.tr('Close'), 'primary')
 					.attr('disabled', true));
 			}
 
-			div.find('div.cbi-modal-dialog-header').text(title);
-			div.show();
-
-			cnt
-				.css('max-height', Math.floor(win.height() * 0.70) + 'px')
-				.empty()
-				.append(content);
-
-			div.children()
-				.css('margin-top', -Math.floor(div.children().height() / 2) + 'px');
+			state.dialog.find('h4:first').text(title);
+			state.dialog.modal('show');
 
-			body.css('overflow', 'hidden');
-			body.css('padding', 0);
-			body.css('width', win.width());
-			body.css('height', win.height());
-			div.css('width', win.width());
-			div.css('height', win.height());
+			cnt.empty().append(content);
 		},
 
 		upload: function(title, content, options)
 		{
-			var form = _luci2._upload || (
-				_luci2._upload = $('<form />')
+			var state = _luci2.ui._upload || (_luci2.ui._upload = {
+				form: $('<form />')
 					.attr('method', 'post')
 					.attr('action', '/cgi-bin/luci-upload')
 					.attr('enctype', 'multipart/form-data')
@@ -1590,31 +1749,28 @@ function LuCI2()
 					.append($('<p />'))
 					.append($('<input />')
 						.attr('type', 'hidden')
-						.attr('name', 'sessionid')
-						.attr('value', _luci2.globals.sid))
+						.attr('name', 'sessionid'))
 					.append($('<input />')
 						.attr('type', 'hidden')
-						.attr('name', 'filename')
-						.attr('value', options.filename))
+						.attr('name', 'filename'))
 					.append($('<input />')
 						.attr('type', 'file')
 						.attr('name', 'filedata')
 						.addClass('cbi-input-file'))
 					.append($('<div />')
 						.css('width', '100%')
-						.addClass('progressbar')
-						.addClass('intermediate')
+						.addClass('progress progress-striped active')
 						.append($('<div />')
+							.addClass('progress-bar')
 							.css('width', '100%')))
 					.append($('<iframe />')
+						.addClass('pull-right')
 						.attr('name', 'cbi-fileupload-frame')
 						.css('width', '1px')
 						.css('height', '1px')
-						.css('visibility', 'hidden'))
-			);
+						.css('visibility', 'hidden')),
 
-			var finish = _luci2._upload_finish_cb || (
-				_luci2._upload_finish_cb = function(ev) {
+				finish_cb: function(ev) {
 					$(this).off('load');
 
 					var body = (this.contentDocument || this.contentWindow.document).body;
@@ -1639,41 +1795,43 @@ function LuCI2()
 							$('<p />').text(_luci2.tr('In case of network problems try uploading the file again.'))
 						], { style: 'close' });
 					}
-					else if (typeof(ev.data.cb) == 'function')
+					else if (typeof(state.success_cb) == 'function')
 					{
-						ev.data.cb(json);
+						state.success_cb(json);
 					}
-				}
-			);
+				},
 
-			var confirm = _luci2._upload_confirm_cb || (
-				_luci2._upload_confirm_cb = function() {
-					var d = _luci2._upload;
-					var f = d.find('.cbi-input-file');
-					var b = d.find('.progressbar');
-					var p = d.find('p');
+				confirm_cb: function() {
+					var f = state.form.find('.cbi-input-file');
+					var b = state.form.find('.progress');
+					var p = state.form.find('p');
 
 					if (!f.val())
 						return;
 
-					d.find('iframe').on('load', { cb: options.success }, finish);
-					d.submit();
+					state.form.find('iframe').on('load', state.finish_cb);
+					state.form.submit();
 
 					f.hide();
 					b.show();
 					p.text(_luci2.tr('File upload in progress …'));
 
-					_luci2._dialog.find('button').prop('disabled', true);
+					state.form.parent().parent().find('button').prop('disabled', true);
 				}
-			);
+			});
+
+			state.form.find('.progress').hide();
+			state.form.find('.cbi-input-file').val('').show();
+			state.form.find('p').text(content || _luci2.tr('Select the file to upload and press "%s" to proceed.').format(_luci2.tr('Ok')));
 
-			_luci2._upload.find('.progressbar').hide();
-			_luci2._upload.find('.cbi-input-file').val('').show();
-			_luci2._upload.find('p').text(content || _luci2.tr('Select the file to upload and press "%s" to proceed.').format(_luci2.tr('Ok')));
+			state.form.find('[name=sessionid]').val(_luci2.globals.sid);
+			state.form.find('[name=filename]').val(options.filename);
 
-			_luci2.ui.dialog(title || _luci2.tr('File upload'), _luci2._upload, {
+			state.success_cb = options.success;
+
+			_luci2.ui.dialog(title || _luci2.tr('File upload'), state.form, {
 				style: 'confirm',
-				confirm: confirm
+				confirm: state.confirm_cb
 			});
 		},
 
@@ -1751,32 +1909,10 @@ function LuCI2()
 
 		login: function(invalid)
 		{
-			if (!_luci2._login_deferred || _luci2._login_deferred.state() != 'pending')
-				_luci2._login_deferred = $.Deferred();
-
-			/* try to find sid from hash */
-			var sid = _luci2.getHash('id');
-			if (sid && sid.match(/^[a-f0-9]{32}$/))
-			{
-				_luci2.globals.sid = sid;
-				_luci2.session.isAlive().then(function(access) {
-					if (access)
-					{
-						_luci2.session.startHeartbeat();
-						_luci2._login_deferred.resolve();
-					}
-					else
-					{
-						_luci2.setHash('id', undefined);
-						_luci2.ui.login();
-					}
-				});
-
-				return _luci2._login_deferred;
-			}
-
-			var form = _luci2._login || (
-				_luci2._login = $('<div />')
+			var state = _luci2.ui._login || (_luci2.ui._login = {
+				form: $('<form />')
+					.attr('target', '')
+					.attr('method', 'post')
 					.append($('<p />')
 						.addClass('alert-message')
 						.text(_luci2.tr('Wrong username or password given!')))
@@ -1788,7 +1924,11 @@ function LuCI2()
 								.attr('type', 'text')
 								.attr('name', 'username')
 								.attr('value', 'root')
-								.addClass('cbi-input-text'))))
+								.addClass('form-control')
+								.keypress(function(ev) {
+									if (ev.which == 10 || ev.which == 13)
+										state.confirm_cb();
+								}))))
 					.append($('<p />')
 						.append($('<label />')
 							.text(_luci2.tr('Password'))
@@ -1796,13 +1936,15 @@ function LuCI2()
 							.append($('<input />')
 								.attr('type', 'password')
 								.attr('name', 'password')
-								.addClass('cbi-input-password'))))
+								.addClass('form-control')
+								.keypress(function(ev) {
+									if (ev.which == 10 || ev.which == 13)
+										state.confirm_cb();
+								}))))
 					.append($('<p />')
-						.text(_luci2.tr('Enter your username and password above, then click "%s" to proceed.').format(_luci2.tr('Ok'))))
-			);
+						.text(_luci2.tr('Enter your username and password above, then click "%s" to proceed.').format(_luci2.tr('Ok')))),
 
-			var response_cb = _luci2._login_response_cb || (
-				_luci2._login_response_cb = function(response) {
+				response_cb: function(response) {
 					if (!response.ubus_rpc_session)
 					{
 						_luci2.ui.login(true);
@@ -1813,16 +1955,13 @@ function LuCI2()
 						_luci2.setHash('id', _luci2.globals.sid);
 						_luci2.session.startHeartbeat();
 						_luci2.ui.dialog(false);
-						_luci2._login_deferred.resolve();
+						state.deferred.resolve();
 					}
-				}
-			);
+				},
 
-			var confirm_cb = _luci2._login_confirm_cb || (
-				_luci2._login_confirm_cb = function() {
-					var d = _luci2._login;
-					var u = d.find('[name=username]').val();
-					var p = d.find('[name=password]').val();
+				confirm_cb: function() {
+					var u = state.form.find('[name=username]').val();
+					var p = state.form.find('[name=password]').val();
 
 					if (!u)
 						return;
@@ -1840,21 +1979,47 @@ function LuCI2()
 					);
 
 					_luci2.globals.sid = '00000000000000000000000000000000';
-					_luci2.session.login(u, p).then(response_cb);
+					_luci2.session.login(u, p).then(state.response_cb);
 				}
-			);
+			});
+
+			if (!state.deferred || state.deferred.state() != 'pending')
+				state.deferred = $.Deferred();
+
+			/* try to find sid from hash */
+			var sid = _luci2.getHash('id');
+			if (sid && sid.match(/^[a-f0-9]{32}$/))
+			{
+				_luci2.globals.sid = sid;
+				_luci2.session.isAlive().then(function(access) {
+					if (access)
+					{
+						_luci2.session.startHeartbeat();
+						state.deferred.resolve();
+					}
+					else
+					{
+						_luci2.setHash('id', undefined);
+						_luci2.ui.login();
+					}
+				});
+
+				return state.deferred;
+			}
 
 			if (invalid)
-				form.find('.alert-message').show();
+				state.form.find('.alert-message').show();
 			else
-				form.find('.alert-message').hide();
+				state.form.find('.alert-message').hide();
 
-			_luci2.ui.dialog(_luci2.tr('Authorization Required'), form, {
+			_luci2.ui.dialog(_luci2.tr('Authorization Required'), state.form, {
 				style: 'confirm',
-				confirm: confirm_cb
+				confirm: state.confirm_cb
 			});
 
-			return _luci2._login_deferred;
+			state.form.find('[name=password]').focus();
+
+			return state.deferred;
 		},
 
 		cryptPassword: _luci2.rpc.declare({
@@ -1965,9 +2130,17 @@ function LuCI2()
 				.append(_luci2.globals.mainMenu.render(2, 900));
 		},
 
-		renderView: function(node)
+		renderView: function()
 		{
+			var node = arguments[0];
 			var name = node.view.split(/\//).join('.');
+			var args = [ ];
+
+			for (var i = 1; i < arguments.length; i++)
+				args.push(arguments[i]);
+
+			if (_luci2.globals.currentView)
+				_luci2.globals.currentView.finish();
 
 			_luci2.ui.renderViewMenu();
 
@@ -1977,61 +2150,195 @@ function LuCI2()
 			_luci2.setHash('view', node.view);
 
 			if (_luci2._views[name] instanceof _luci2.ui.view)
-				return _luci2._views[name].render();
+			{
+				_luci2.globals.currentView = _luci2._views[name];
+				return _luci2._views[name].render.apply(_luci2._views[name], args);
+			}
+
+			var url = _luci2.globals.resource + '/view/' + name + '.js';
 
-			return $.ajax(_luci2.globals.resource + '/view/' + name + '.js', {
+			return $.ajax(url, {
 				method: 'GET',
 				cache: true,
 				dataType: 'text'
 			}).then(function(data) {
 				try {
-					var viewConstructor = (new Function(['L', '$'], 'return ' + data))(_luci2, $);
+					var viewConstructorSource = (
+						'(function(L, $) { ' +
+							'return %s' +
+						'})(_luci2, $);\n\n' +
+						'//@ sourceURL=%s'
+					).format(data, url);
+
+					var viewConstructor = eval(viewConstructorSource);
 
 					_luci2._views[name] = new viewConstructor({
 						name: name,
 						acls: node.write || { }
 					});
 
-					return _luci2._views[name].render();
+					_luci2.globals.currentView = _luci2._views[name];
+					return _luci2._views[name].render.apply(_luci2._views[name], args);
 				}
-				catch(e) { };
+				catch(e) {
+					alert('Unable to instantiate view "%s": %s'.format(url, e));
+				};
 
 				return $.Deferred().resolve();
 			});
 		},
 
+		updateHostname: function()
+		{
+			return _luci2.system.getBoardInfo().then(function(info) {
+				if (info.hostname)
+					$('#hostname').text(info.hostname);
+			});
+		},
+
+		updateChanges: function()
+		{
+			return _luci2.uci.changes().then(function(changes) {
+				var n = 0;
+				var html = '';
+
+				for (var config in changes)
+				{
+					var log = [ ];
+
+					for (var i = 0; i < changes[config].length; i++)
+					{
+						var c = changes[config][i];
+
+						switch (c[0])
+						{
+						case 'order':
+							break;
+
+						case 'remove':
+							if (c.length < 3)
+								log.push('uci delete %s.<del>%s</del>'.format(config, c[1]));
+							else
+								log.push('uci delete %s.%s.<del>%s</del>'.format(config, c[1], c[2]));
+							break;
+
+						case 'rename':
+							if (c.length < 4)
+								log.push('uci rename %s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2], c[3]));
+							else
+								log.push('uci rename %s.%s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2], c[3], c[4]));
+							break;
+
+						case 'add':
+							log.push('uci add %s <ins>%s</ins> (= <ins><strong>%s</strong></ins>)'.format(config, c[2], c[1]));
+							break;
+
+						case 'list-add':
+							log.push('uci add_list %s.%s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2], c[3], c[4]));
+							break;
+
+						case 'list-del':
+							log.push('uci del_list %s.%s.<del>%s=<strong>%s</strong></del>'.format(config, c[1], c[2], c[3], c[4]));
+							break;
+
+						case 'set':
+							if (c.length < 4)
+								log.push('uci set %s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2]));
+							else
+								log.push('uci set %s.%s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2], c[3], c[4]));
+							break;
+						}
+					}
+
+					html += '<code>/etc/config/%s</code><pre class="uci-changes">%s</pre>'.format(config, log.join('\n'));
+					n += changes[config].length;
+				}
+
+				if (n > 0)
+					$('#changes')
+						.empty()
+						.show()
+						.append($('<a />')
+							.attr('href', '#')
+							.addClass('label')
+							.addClass('notice')
+							.text(_luci2.trcp('Pending configuration changes', '1 change', '%d changes', n).format(n))
+							.click(function(ev) {
+								_luci2.ui.dialog(_luci2.tr('Staged configuration changes'), html, { style: 'close' });
+								ev.preventDefault();
+							}));
+				else
+					$('#changes')
+						.hide();
+			});
+		},
+
 		init: function()
 		{
 			_luci2.ui.loading(true);
 
 			$.when(
+				_luci2.ui.updateHostname(),
+				_luci2.ui.updateChanges(),
 				_luci2.ui.renderMainMenu()
 			).then(function() {
 				_luci2.ui.renderView(_luci2.globals.defaultNode).then(function() {
 					_luci2.ui.loading(false);
 				})
 			});
+		},
+
+		button: function(label, style, title)
+		{
+			style = style || 'default';
+
+			return $('<button />')
+				.attr('type', 'button')
+				.attr('title', title ? title : '')
+				.addClass('btn btn-' + style)
+				.text(label);
 		}
 	};
 
-	var AbstractWidget = Class.extend({
+	this.ui.AbstractWidget = Class.extend({
 		i18n: function(text) {
 			return text;
 		},
 
-		toString: function() {
-			var x = document.createElement('div');
-				x.appendChild(this.render());
+		label: function() {
+			var key = arguments[0];
+			var args = [ ];
+
+			for (var i = 1; i < arguments.length; i++)
+				args.push(arguments[i]);
+
+			switch (typeof(this.options[key]))
+			{
+			case 'undefined':
+				return '';
+
+			case 'function':
+				return this.options[key].apply(this, args);
 
-			return x.innerHTML;
+			default:
+				return ''.format.apply('' + this.options[key], args);
+			}
+		},
+
+		toString: function() {
+			return $('<div />').append(this.render()).html();
 		},
 
 		insertInto: function(id) {
 			return $(id).empty().append(this.render());
+		},
+
+		appendTo: function(id) {
+			return $(id).append(this.render());
 		}
 	});
 
-	this.ui.view = AbstractWidget.extend({
+	this.ui.view = this.ui.AbstractWidget.extend({
 		_fetch_template: function()
 		{
 			return $.ajax(_luci2.globals.resource + '/template/' + this.options.name + '.htm', {
@@ -2077,26 +2384,68 @@ function LuCI2()
 				container.append($('<h2 />').append(this.title));
 
 			if (this.description)
-				container.append($('<div />').addClass('cbi-map-descr').append(this.description));
+				container.append($('<p />').append(this.description));
 
 			var self = this;
+			var args = [ ];
+
+			for (var i = 0; i < arguments.length; i++)
+				args.push(arguments[i]);
+
 			return this._fetch_template().then(function() {
-				return _luci2.deferrable(self.execute());
+				return _luci2.deferrable(self.execute.apply(self, args));
 			});
-		}
-	});
-
-	this.ui.menu = AbstractWidget.extend({
-		init: function() {
-			this._nodes = { };
 		},
 
-		entries: function(entries)
+		repeat: function(func, interval)
 		{
-			for (var entry in entries)
-			{
-				var path = entry.split(/\//);
-				var node = this._nodes;
+			var self = this;
+
+			if (!self._timeouts)
+				self._timeouts = [ ];
+
+			var index = self._timeouts.length;
+
+			if (typeof(interval) != 'number')
+				interval = 5000;
+
+			var setTimer, runTimer;
+
+			setTimer = function() {
+				if (self._timeouts)
+					self._timeouts[index] = window.setTimeout(runTimer, interval);
+			};
+
+			runTimer = function() {
+				_luci2.deferrable(func.call(self)).then(setTimer, setTimer);
+			};
+
+			runTimer();
+		},
+
+		finish: function()
+		{
+			if ($.isArray(this._timeouts))
+			{
+				for (var i = 0; i < this._timeouts.length; i++)
+					window.clearTimeout(this._timeouts[i]);
+
+				delete this._timeouts;
+			}
+		}
+	});
+
+	this.ui.menu = this.ui.AbstractWidget.extend({
+		init: function() {
+			this._nodes = { };
+		},
+
+		entries: function(entries)
+		{
+			for (var entry in entries)
+			{
+				var path = entry.split(/\//);
+				var node = this._nodes;
 
 				for (i = 0; i < path.length; i++)
 				{
@@ -2136,7 +2485,10 @@ function LuCI2()
 				var child = this.firstChildView(nodes[i]);
 				if (child)
 				{
-					$.extend(node, child);
+					for (var key in child)
+						if (!node.hasOwnProperty(key) && child.hasOwnProperty(key))
+							node[key] = child[key];
+
 					return node;
 				}
 			}
@@ -2170,9 +2522,9 @@ function LuCI2()
 			var list = $('<ul />');
 
 			if (level == 0)
-				list.addClass('nav');
+				list.addClass('nav').addClass('navbar-nav');
 			else if (level == 1)
-				list.addClass('dropdown-menu');
+				list.addClass('dropdown-menu').addClass('navbar-inverse');
 
 			for (var i = 0; i < nodes.length; i++)
 			{
@@ -2186,16 +2538,24 @@ function LuCI2()
 				var item = $('<li />')
 					.append($('<a />')
 						.attr('href', '#')
-						.text(_luci2.tr(nodes[i].title))
-						.click(nodes[i], this._onclick))
+						.text(_luci2.tr(nodes[i].title)))
 					.appendTo(list);
 
 				if (nodes[i].childs && level < max)
 				{
 					item.addClass('dropdown');
-					item.find('a').addClass('menu');
+
+					item.find('a')
+						.addClass('dropdown-toggle')
+						.attr('data-toggle', 'dropdown')
+						.append('<b class="caret"></b>');
+
 					item.append(this._render(nodes[i].childs, level + 1));
 				}
+				else
+				{
+					item.find('a').click(nodes[i], this._onclick);
+				}
 			}
 
 			return list.get(0);
@@ -2227,7 +2587,7 @@ function LuCI2()
 		}
 	});
 
-	this.ui.table = AbstractWidget.extend({
+	this.ui.table = this.ui.AbstractWidget.extend({
 		init: function()
 		{
 			this._rows = [ ];
@@ -2274,7 +2634,7 @@ function LuCI2()
 			}
 
 			var table = document.createElement('table');
-				table.className = 'cbi-section-table';
+				table.className = 'table table-condensed table-hover';
 
 			var has_caption = false;
 			var has_description = false;
@@ -2393,38 +2753,42 @@ function LuCI2()
 		}
 	});
 
-	this.ui.progress = AbstractWidget.extend({
+	this.ui.progress = this.ui.AbstractWidget.extend({
 		render: function()
 		{
 			var vn = parseInt(this.options.value) || 0;
 			var mn = parseInt(this.options.max) || 100;
 			var pc = Math.floor((100 / mn) * vn);
 
-			var bar = document.createElement('div');
-				bar.className = 'progressbar';
-
-			bar.appendChild(document.createElement('div'));
-			bar.lastChild.appendChild(document.createElement('div'));
-			bar.lastChild.style.width = pc + '%';
+			var text;
 
 			if (typeof(this.options.format) == 'string')
-				$(bar.lastChild.lastChild).append(this.options.format.format(this.options.value, this.options.max, pc));
+				text = this.options.format.format(this.options.value, this.options.max, pc);
 			else if (typeof(this.options.format) == 'function')
-				$(bar.lastChild.lastChild).append(this.options.format(pc));
+				text = this.options.format(pc);
 			else
-				$(bar.lastChild.lastChild).append('%.2f%%'.format(pc));
+				text = '%.2f%%'.format(pc);
 
-			return bar;
+			return $('<div />')
+				.addClass('progress')
+				.append($('<div />')
+					.addClass('progress-bar')
+					.addClass('progress-bar-info')
+					.css('width', pc + '%'))
+				.append($('<small />')
+					.text(text));
 		}
 	});
 
-	this.ui.devicebadge = AbstractWidget.extend({
+	this.ui.devicebadge = this.ui.AbstractWidget.extend({
 		render: function()
 		{
-			var dev = this.options.l3_device || this.options.device || '?';
+			var l2dev = this.options.l2_device || this.options.device;
+			var l3dev = this.options.l3_device;
+			var dev = l3dev || l2dev || '?';
 
 			var span = document.createElement('span');
-				span.className = 'ifacebadge';
+				span.className = 'badge';
 
 			if (typeof(this.options.signal) == 'number' ||
 				typeof(this.options.noise) == 'number')
@@ -2462,7 +2826,7 @@ function LuCI2()
 				var type = 'ethernet';
 				var desc = _luci2.tr('Ethernet device');
 
-				if (this.options.l3_device != this.options.device)
+				if (l3dev != l2dev)
 				{
 					type = 'tunnel';
 					desc = _luci2.tr('Tunnel interface');
@@ -2712,6 +3076,7 @@ function LuCI2()
 				}
 			}
 
+			validation.i18n('Must be a valid IPv6 address');
 			return false;
 		},
 
@@ -2984,7 +3349,7 @@ function LuCI2()
 	};
 
 
-	this.cbi.AbstractValue = AbstractWidget.extend({
+	this.cbi.AbstractValue = this.ui.AbstractWidget.extend({
 		init: function(name, options)
 		{
 			this.name = name;
@@ -3005,27 +3370,42 @@ function LuCI2()
 			return this.section.id('field', sid || '__unknown__', this.name);
 		},
 
-		render: function(sid)
+		render: function(sid, condensed)
 		{
 			var i = this.instance[sid] = { };
 
-			i.top = $('<div />').addClass('cbi-value');
+			i.top = $('<div />');
 
-			if (typeof(this.options.caption) == 'string')
-				$('<label />')
-					.addClass('cbi-value-title')
-					.attr('for', this.id(sid))
-					.text(this.options.caption)
-					.appendTo(i.top);
+			if (!condensed)
+			{
+				i.top.addClass('form-group');
 
-			i.widget = $('<div />').addClass('cbi-value-field').append(this.widget(sid)).appendTo(i.top);
-			i.error = $('<div />').addClass('cbi-value-error').appendTo(i.top);
+				if (typeof(this.options.caption) == 'string')
+					$('<label />')
+						.addClass('col-lg-2 control-label')
+						.attr('for', this.id(sid))
+						.text(this.options.caption)
+						.appendTo(i.top);
+			}
+
+			i.error = $('<div />')
+				.addClass('label label-danger');
+
+			i.widget = $('<div />')
+
+				.append(this.widget(sid))
+				.append(i.error)
+				.appendTo(i.top);
+
+			if (!condensed)
+			{
+				i.widget.addClass('col-lg-5');
 
-			if (typeof(this.options.description) == 'string')
 				$('<div />')
-					.addClass('cbi-value-description')
-					.text(this.options.description)
+					.addClass('col-lg-5')
+					.text((typeof(this.options.description) == 'string') ? this.options.description : '')
 					.appendTo(i.top);
+			}
 
 			return i.top;
 		},
@@ -3129,6 +3509,52 @@ function LuCI2()
 			return chg;
 		},
 
+		_ev_validate: function(ev)
+		{
+			var d = ev.data;
+			var rv = true;
+			var val = d.elem.val();
+			var vstack = d.vstack;
+
+			if (vstack && typeof(vstack[0]) == 'function')
+			{
+				delete validation.message;
+
+				if ((val.length == 0 && !d.opt))
+				{
+					d.elem.parents('div.form-group, td').first().addClass('luci2-form-error');
+					d.elem.parents('div.input-group, div.form-group, td').first().addClass('has-error');
+
+					d.inst.error.text(_luci2.tr('Field must not be empty'));
+					rv = false;
+				}
+				else if (val.length > 0 && !vstack[0].apply(val, vstack[1]))
+				{
+					d.elem.parents('div.form-group, td').first().addClass('luci2-form-error');
+					d.elem.parents('div.input-group, div.form-group, td').first().addClass('has-error');
+
+					d.inst.error.text(validation.message.format.apply(validation.message, vstack[1]));
+					rv = false;
+				}
+				else
+				{
+					d.elem.parents('div.form-group, td').first().removeClass('luci2-form-error');
+					d.elem.parents('div.input-group, div.form-group, td').first().removeClass('has-error');
+
+					if (d.multi && d.inst.widget && d.inst.widget.find('input.error, select.error').length > 0)
+						rv = false;
+					else
+						d.inst.error.text('');
+				}
+			}
+
+			if (rv)
+				for (var field in d.self.rdependency)
+					d.self.rdependency[field].toggle(d.sid);
+
+			return rv;
+		},
+
 		validator: function(sid, elem, multi)
 		{
 			if (typeof(this.options.datatype) == 'undefined' && $.isEmptyObject(this.rdependency))
@@ -3153,79 +3579,31 @@ function LuCI2()
 			}
 
 			var evdata = {
-				self:  this,
-				sid:   sid,
-				elem:  elem,
-				multi: multi,
-				inst:  this.instance[sid],
-				opt:   this.options.optional
-			};
-
-			var validator = function(ev)
-			{
-				var d = ev.data;
-				var rv = true;
-				var val = d.elem.val();
-
-				if (vstack && typeof(vstack[0]) == 'function')
-				{
-					delete validation.message;
-
-					if ((val.length == 0 && !d.opt))
-					{
-						d.elem.addClass('error');
-						d.inst.top.addClass('error');
-						d.inst.error.text(_luci2.tr('Field must not be empty'));
-						rv = false;
-					}
-					else if (val.length > 0 && !vstack[0].apply(val, vstack[1]))
-					{
-						d.elem.addClass('error');
-						d.inst.top.addClass('error');
-						d.inst.error.text(validation.message.format.apply(validation.message, vstack[1]));
-						rv = false;
-					}
-					else
-					{
-						d.elem.removeClass('error');
-
-						if (d.multi && d.inst.widget.find('input.error, select.error').length > 0)
-						{
-							rv = false;
-						}
-						else
-						{
-							d.inst.top.removeClass('error');
-							d.inst.error.text('');
-						}
-					}
-				}
-
-				if (rv)
-				{
-					for (var field in d.self.rdependency)
-						d.self.rdependency[field].toggle(d.sid);
-				}
-
-				return rv;
+				self:   this,
+				sid:    sid,
+				elem:   elem,
+				multi:  multi,
+				vstack: vstack,
+				inst:   this.instance[sid],
+				opt:    this.options.optional
 			};
 
 			if (elem.prop('tagName') == 'SELECT')
 			{
-				elem.change(evdata, validator);
+				elem.change(evdata, this._ev_validate);
 			}
 			else if (elem.prop('tagName') == 'INPUT' && elem.attr('type') == 'checkbox')
 			{
-				elem.click(evdata, validator);
-				elem.blur(evdata, validator);
+				elem.click(evdata, this._ev_validate);
+				elem.blur(evdata, this._ev_validate);
 			}
 			else
 			{
-				elem.keyup(evdata, validator);
-				elem.blur(evdata, validator);
+				elem.keyup(evdata, this._ev_validate);
+				elem.blur(evdata, this._ev_validate);
 			}
 
-			elem.attr('cbi-validate', true).on('validate', evdata, validator);
+			elem.attr('cbi-validate', true).on('validate', evdata, this._ev_validate);
 
 			return elem;
 		},
@@ -3371,11 +3749,14 @@ function LuCI2()
 			if (typeof(o.disabled) == 'undefined') o.disabled = '0';
 
 			var i = $('<input />')
+				.addClass('form-control')
 				.attr('id', this.id(sid))
 				.attr('type', 'checkbox')
 				.prop('checked', this.ucivalue(sid));
 
-			return this.validator(sid, i);
+			return $('<div />')
+				.addClass('checkbox')
+				.append(this.validator(sid, i));
 		},
 
 		ucivalue: function(sid)
@@ -3415,12 +3796,10 @@ function LuCI2()
 
 			if (chg)
 			{
-				val = val ? this.options.enabled : this.options.disabled;
-
 				if (this.options.optional && val == this.options.initial)
 					this.map.set(uci.config, uci.section, uci.option, undefined);
 				else
-					this.map.set(uci.config, uci.section, uci.option, val);
+					this.map.set(uci.config, uci.section, uci.option, val ? this.options.enabled : this.options.disabled);
 			}
 
 			return chg;
@@ -3431,6 +3810,7 @@ function LuCI2()
 		widget: function(sid)
 		{
 			var i = $('<input />')
+				.addClass('form-control')
 				.attr('id', this.id(sid))
 				.attr('type', 'text')
 				.attr('placeholder', this.options.placeholder)
@@ -3444,26 +3824,28 @@ function LuCI2()
 		widget: function(sid)
 		{
 			var i = $('<input />')
+				.addClass('form-control')
 				.attr('id', this.id(sid))
 				.attr('type', 'password')
 				.attr('placeholder', this.options.placeholder)
 				.val(this.ucivalue(sid));
 
-			var t = $('<img />')
-				.attr('src', _luci2.globals.resource + '/icons/cbi/reload.gif')
-				.attr('title', _luci2.tr('Reveal or hide password'))
-				.addClass('cbi-button')
-				.click(function(ev) {
-					var i = $(this).prev();
-					var t = i.attr('type');
-					i.attr('type', (t == 'password') ? 'text' : 'password');
-					i = t = null;
-				});
+			var t = $('<span />')
+				.addClass('input-group-btn')
+				.append(_luci2.ui.button(_luci2.tr('Reveal'), 'default')
+					.click(function(ev) {
+						var b = $(this);
+						var i = b.parent().prev();
+						var t = i.attr('type');
+						b.text(t == 'password' ? _luci2.tr('Hide') : _luci2.tr('Reveal'));
+						i.attr('type', (t == 'password') ? 'text' : 'password');
+						b = i = t = null;
+					}));
 
 			this.validator(sid, i);
 
 			return $('<div />')
-				.addClass('cbi-input-password')
+				.addClass('input-group')
 				.append(i)
 				.append(t);
 		}
@@ -3472,7 +3854,8 @@ function LuCI2()
 	this.cbi.ListValue = this.cbi.AbstractValue.extend({
 		widget: function(sid)
 		{
-			var s = $('<select />');
+			var s = $('<select />')
+				.addClass('form-control');
 
 			if (this.options.optional)
 				$('<option />')
@@ -3519,16 +3902,13 @@ function LuCI2()
 				for (var i = 0; i < this.choices.length; i++)
 				{
 					$('<label />')
+						.addClass('checkbox')
 						.append($('<input />')
-							.addClass('cbi-input-checkbox')
 							.attr('type', 'checkbox')
 							.attr('value', this.choices[i][0])
 							.prop('checked', s[this.choices[i][0]]))
 						.append(this.choices[i][1])
 						.appendTo(t);
-
-					$('<br />')
-						.appendTo(t);
 				}
 
 			return t;
@@ -3691,7 +4071,7 @@ function LuCI2()
 			var v = s.values || [ ];
 			delete s.values;
 
-			$(s.parent).children('input').each(function(i) {
+			$(s.parent).children('div.input-group').children('input').each(function(i) {
 				if (i != del)
 					v.push(this.value || '');
 			});
@@ -3715,17 +4095,33 @@ function LuCI2()
 					sid: s.sid,
 					self: s.self,
 					parent: s.parent,
-					index: i
+					index: i,
+					remove: ((i+1) < v.length)
 				};
 
+				var btn;
+				if (evdata.remove)
+					btn = _luci2.ui.button('–', 'danger').click(evdata, this._btnclick);
+				else
+					btn = _luci2.ui.button('+', 'success').click(evdata, this._btnclick);
+
 				if (this.choices)
 				{
 					var txt = $('<input />')
+						.addClass('form-control')
 						.attr('type', 'text')
-						.hide()
-						.appendTo(s.parent);
+						.hide();
 
 					var sel = $('<select />')
+						.addClass('form-control');
+
+					$('<div />')
+						.addClass('input-group')
+						.append(txt)
+						.append(sel)
+						.append($('<span />')
+							.addClass('input-group-btn')
+							.append(btn))
 						.appendTo(s.parent);
 
 					evdata.input = this.validator(s.sid, txt, true);
@@ -3749,12 +4145,18 @@ function LuCI2()
 						.attr('type', 'text')
 						.attr('index', i)
 						.attr('placeholder', (i == 0) ? this.options.placeholder : '')
-						.addClass('cbi-input-text')
+						.addClass('form-control')
 						.keydown(evdata, this._keydown)
 						.keypress(evdata, this._keypress)
 						.val(v[i]);
 
-					f.appendTo(s.parent);
+					$('<div />')
+						.addClass('input-group')
+						.append(f)
+						.append($('<span />')
+							.addClass('input-group-btn')
+							.append(btn))
+						.appendTo(s.parent);
 
 					if (i == focus)
 					{
@@ -3775,16 +4177,6 @@ function LuCI2()
 					f = null;
 				}
 
-				$('<img />')
-					.attr('src', _luci2.globals.resource + ((i+1) < v.length ? '/icons/cbi/remove.gif' : '/icons/cbi/add.gif'))
-					.attr('title', (i+1) < v.length ? _luci2.tr('Remove entry') : _luci2.tr('Add entry'))
-					.addClass('cbi-button')
-					.click(evdata, this._btnclick)
-					.appendTo(s.parent);
-
-				$('<br />')
-					.appendTo(s.parent);
-
 				evdata = null;
 			}
 
@@ -3849,7 +4241,7 @@ function LuCI2()
 
 				/* arrow up */
 				case 38:
-					var prev = input.prevAll('input:first');
+					var prev = input.parent().prevAll('div.input-group:first').children('input');
 					if (prev.is(':visible'))
 						prev.focus();
 					else
@@ -3858,7 +4250,7 @@ function LuCI2()
 
 				/* arrow down */
 				case 40:
-					var next = input.nextAll('input:first');
+					var next = input.parent().nextAll('div.input-group:first').children('input');
 					if (next.is(':visible'))
 						next.focus();
 					else
@@ -3873,7 +4265,7 @@ function LuCI2()
 		{
 			if (!this.getAttribute('disabled'))
 			{
-				if (ev.target.src.indexOf('remove') > -1)
+				if (ev.data.remove)
 				{
 					var index = ev.data.index;
 					ev.data.self._redraw(-index, -1, index, ev.data);
@@ -3937,7 +4329,7 @@ function LuCI2()
 		widget: function(sid)
 		{
 			return $('<div />')
-				.addClass('cbi-value-dummy')
+				.addClass('form-control-static')
 				.attr('id', this.id(sid))
 				.html(this.ucivalue(sid));
 		},
@@ -4001,7 +4393,7 @@ function LuCI2()
 			var id = this.id(sid);
 			var ul = $('<ul />')
 				.attr('id', id)
-				.addClass('cbi-input-networks');
+				.addClass('list-unstyled');
 
 			var itype = this.options.multiple ? 'checkbox' : 'radio';
 			var value = this.ucivalue(sid);
@@ -4019,7 +4411,7 @@ function LuCI2()
 				{
 					var iface = this.interfaces[i];
 					var badge = $('<span />')
-						.addClass('ifacebadge')
+						.addClass('badge')
 						.text('%s: '.format(iface['interface']));
 
 					if (iface.device && iface.device.subdevices)
@@ -4032,12 +4424,13 @@ function LuCI2()
 
 					$('<li />')
 						.append($('<label />')
+							.addClass('radio inline')
 							.append($('<input />')
 								.attr('name', itype + id)
 								.attr('type', itype)
 								.attr('value', iface['interface'])
 								.prop('checked', !!check[iface['interface']])
-								.addClass('cbi-input-' + itype))
+								.addClass('form-control'))
 							.append(badge))
 						.appendTo(ul);
 				}
@@ -4047,12 +4440,13 @@ function LuCI2()
 			{
 				$('<li />')
 					.append($('<label />')
+						.addClass('radio inline text-muted')
 						.append($('<input />')
 							.attr('name', itype + id)
 							.attr('type', itype)
 							.attr('value', '')
 							.prop('checked', !value)
-							.addClass('cbi-input-' + itype))
+							.addClass('form-control'))
 						.append(_luci2.tr('unspecified')))
 					.appendTo(ul);
 			}
@@ -4111,7 +4505,7 @@ function LuCI2()
 	});
 
 
-	this.cbi.AbstractSection = AbstractWidget.extend({
+	this.cbi.AbstractSection = this.ui.AbstractWidget.extend({
 		id: function()
 		{
 			var s = [ arguments[0], this.map.uci_package, this.uci_type ];
@@ -4200,60 +4594,63 @@ function LuCI2()
 			return rv;
 		},
 
-		validate: function(sid)
+		validate_section: function(sid)
 		{
-			var rv = true;
-
-			if (!sid)
-			{
-				var as = this.sections();
-				for (var i = 0; i < as.length; i++)
-					if (!this.validate(as[i]['.name']))
-						rv = false;
-				return rv;
-			}
-
 			var inst = this.instance[sid];
-			var sv = rv[sid] || (rv[sid] = { });
 
 			var invals = 0;
-			var legend = $('#' + this.id('sort', sid)).find('legend:first');
-
-			legend.children('span').detach();
+			var badge = $('#' + this.id('teaser', sid)).children('span:first');
 
 			for (var i = 0; i < this.tabs.length; i++)
 			{
 				var inval = 0;
-				var tab = $('#' + this.id('tabhead', sid, this.tabs[i].id));
-
-				tab.children('span').detach();
+				var stbadge = $('#' + this.id('nodetab', sid, this.tabs[i].id)).children('span:first');
 
 				for (var j = 0; j < this.tabs[i].fields.length; j++)
 					if (!this.tabs[i].fields[j].validate(sid))
 						inval++;
 
 				if (inval > 0)
-				{
-					$('<span />')
-						.addClass('badge')
-						.attr('title', _luci2.tr('%d Errors'.format(inval)))
-						.text(inval)
-						.appendTo(tab);
+					stbadge.text(inval)
+						.attr('title', _luci2.trp('1 Error', '%d Errors', inval).format(inval));
+				else
+					stbadge.text('');
 
-					invals += inval;
-					tab = null;
-					rv = false;
-				}
+				invals += inval;
 			}
 
 			if (invals > 0)
-				$('<span />')
-					.addClass('badge')
-					.attr('title', _luci2.tr('%d Errors'.format(invals)))
-					.text(invals)
-					.appendTo(legend);
+				badge.text(invals)
+					.attr('title', _luci2.trp('1 Error', '%d Errors', invals).format(invals));
+			else
+				badge.text('');
 
-			return rv;
+			return invals;
+		},
+
+		validate: function()
+		{
+			this.error_count = 0;
+
+			var as = this.sections();
+
+			for (var i = 0; i < as.length; i++)
+			{
+				var invals = this.validate_section(as[i]['.name']);
+
+				if (invals > 0)
+					this.error_count += invals;
+			}
+
+			var badge = $('#' + this.id('sectiontab')).children('span:first');
+
+			if (this.error_count > 0)
+				badge.text(this.error_count)
+					.attr('title', _luci2.trp('1 Error', '%d Errors', this.error_count).format(this.error_count));
+			else
+				badge.text('');
+
+			return (this.error_count == 0);
 		}
 	});
 
@@ -4264,6 +4661,7 @@ function LuCI2()
 			this.options  = options;
 			this.tabs     = [ ];
 			this.fields   = { };
+			this.error_count  = 0;
 			this.active_panel = 0;
 			this.active_tab   = { };
 		},
@@ -4300,7 +4698,7 @@ function LuCI2()
 			this.map.remove(this.map.uci_package, sid);
 		},
 
-		_add: function(ev)
+		_ev_add: function(ev)
 		{
 			var addb = $(this);
 			var name = undefined;
@@ -4312,25 +4710,33 @@ function LuCI2()
 			if (addb.prop('disabled') || name === '')
 				return;
 
+			_luci2.ui.saveScrollTop();
+
 			self.active_panel = -1;
 			self.map.save();
 			self.add(name);
 			self.map.redraw();
+
+			_luci2.ui.restoreScrollTop();
 		},
 
-		_remove: function(ev)
+		_ev_remove: function(ev)
 		{
 			var self = ev.data.self;
 			var sid  = ev.data.sid;
 
+			_luci2.ui.saveScrollTop();
+
 			self.map.save();
 			self.remove(sid);
 			self.map.redraw();
 
+			_luci2.ui.restoreScrollTop();
+
 			ev.stopPropagation();
 		},
 
-		_sid: function(ev)
+		_ev_sid: function(ev)
 		{
 			var self = ev.data.self;
 			var text = $(this);
@@ -4375,6 +4781,80 @@ function LuCI2()
 			return true;
 		},
 
+		_ev_tab: function(ev)
+		{
+			var self = ev.data.self;
+			var sid  = ev.data.sid;
+
+			self.validate();
+			self.active_tab[sid] = parseInt(ev.target.getAttribute('data-luci2-tab-index'));
+		},
+
+		_ev_panel_collapse: function(ev)
+		{
+			var self = ev.data.self;
+
+			var this_panel = $(ev.target);
+			var this_toggle = this_panel.prevAll('[data-toggle="collapse"]:first');
+
+			var prev_toggle = $($(ev.delegateTarget).find('[data-toggle="collapse"]:eq(%d)'.format(self.active_panel)));
+			var prev_panel = $(prev_toggle.attr('data-target'));
+
+			prev_panel
+				.removeClass('in')
+				.addClass('collapse');
+
+			prev_toggle.find('.luci2-section-teaser')
+				.show()
+				.children('span:last')
+				.empty()
+				.append(self.teaser(prev_panel.attr('data-luci2-sid')));
+
+			this_toggle.find('.luci2-section-teaser')
+				.hide();
+
+			self.active_panel = parseInt(this_panel.attr('data-luci2-panel-index'));
+			self.validate();
+		},
+
+		_ev_panel_open: function(ev)
+		{
+			var self  = ev.data.self;
+			var panel = $($(this).attr('data-target'));
+			var index = parseInt(panel.attr('data-luci2-panel-index'));
+
+			if (index == self.active_panel)
+				ev.stopPropagation();
+		},
+
+		_ev_sort: function(ev)
+		{
+			var self    = ev.data.self;
+			var cur_idx = ev.data.index;
+			var new_idx = cur_idx + (ev.data.up ? -1 : 1);
+			var s       = self.sections();
+
+			if (new_idx >= 0 && new_idx < s.length)
+			{
+				var tmp = s[cur_idx]['.index'];
+
+				s[cur_idx]['.index'] = s[new_idx]['.index'];
+				s[new_idx]['.index'] = tmp;
+
+				if (self.active_panel == cur_idx)
+					self.active_panel = new_idx;
+				else if (self.active_panel == new_idx)
+					self.active_panel = cur_idx;
+
+				self.map.uci.reorder = true;
+
+				self.map.save();
+				self.map.redraw();
+			}
+
+			ev.stopPropagation();
+		},
+
 		teaser: function(sid)
 		{
 			var tf = this.teaser_fields;
@@ -4423,6 +4903,9 @@ function LuCI2()
 
 		_render_add: function()
 		{
+			if (!this.options.addremove)
+				return null;
+
 			var text = _luci2.tr('Add section');
 			var ttip = _luci2.tr('Create new section...');
 
@@ -4431,7 +4914,7 @@ function LuCI2()
 			else if (typeof(this.options.add_caption) == 'string')
 				text = this.options.add_caption, ttip = '';
 
-			var add = $('<div />').addClass('cbi-section-add');
+			var add = $('<div />');
 
 			if (this.options.anonymous === false)
 			{
@@ -4439,15 +4922,15 @@ function LuCI2()
 					.addClass('cbi-input-text')
 					.attr('type', 'text')
 					.attr('placeholder', ttip)
-					.blur({ self: this }, this._sid)
-					.keyup({ self: this }, this._sid)
+					.blur({ self: this }, this._ev_sid)
+					.keyup({ self: this }, this._ev_sid)
 					.appendTo(add);
 
 				$('<img />')
 					.attr('src', _luci2.globals.resource + '/icons/cbi/add.gif')
 					.attr('title', text)
 					.addClass('cbi-button')
-					.click({ self: this }, this._add)
+					.click({ self: this }, this._ev_add)
 					.appendTo(add);
 
 				$('<div />')
@@ -4457,20 +4940,19 @@ function LuCI2()
 			}
 			else
 			{
-				$('<input />')
-					.attr('type', 'button')
-					.addClass('cbi-button')
-					.addClass('cbi-button-add')
-					.val(text).attr('title', ttip)
-					.click({ self: this }, this._add)
-					.appendTo(add)
+				_luci2.ui.button(text, 'success', ttip)
+					.click({ self: this }, this._ev_add)
+					.appendTo(add);
 			}
 
 			return add;
 		},
 
-		_render_remove: function(sid)
+		_render_remove: function(sid, index)
 		{
+			if (!this.options.addremove)
+				return null;
+
 			var text = _luci2.tr('Remove');
 			var ttip = _luci2.tr('Remove this section');
 
@@ -4479,228 +4961,236 @@ function LuCI2()
 			else if (typeof(this.options.remove_caption) == 'string')
 				text = this.options.remove_caption, ttip = '';
 
-			return $('<input />')
-				.attr('type', 'button')
-				.addClass('cbi-button')
-				.addClass('cbi-button-remove')
-				.val(text).attr('title', ttip)
-				.click({ self: this, sid: sid }, this._remove);
+			return _luci2.ui.button(text, 'danger', ttip)
+				.click({ self: this, sid: sid, index: index }, this._ev_remove);
 		},
 
-		_render_caption: function(sid)
+		_render_sort: function(sid, index)
 		{
-			if (typeof(this.options.caption) == 'string')
-			{
-				return $('<legend />')
-					.text(this.options.caption.format(sid));
-			}
-			else if (typeof(this.options.caption) == 'function')
-			{
-				return $('<legend />')
-					.text(this.options.caption.call(this, sid));
-			}
+			if (!this.options.sortable)
+				return null;
 
-			return '';
+			var b1 = _luci2.ui.button('↑', 'info', _luci2.tr('Move up'))
+				.click({ self: this, index: index, up: true }, this._ev_sort);
+
+			var b2 = _luci2.ui.button('↓', 'info', _luci2.tr('Move down'))
+				.click({ self: this, index: index, up: false }, this._ev_sort);
+
+			return b1.add(b2);
 		},
 
-		render: function()
+		_render_caption: function()
 		{
-			var allsections = $();
-			var panel_index = 0;
+			return $('<h3 />')
+				.addClass('panel-title')
+				.append(this.label('caption') || this.uci_type);
+		},
 
-			this.instance = { };
+		_render_description: function()
+		{
+			var text = this.label('description');
 
-			var s = this.sections();
+			if (text)
+				return $('<div />')
+					.addClass('luci2-section-description')
+					.text(text);
 
-			if (s.length == 0)
+			return null;
+		},
+
+		_render_teaser: function(sid, index)
+		{
+			if (this.options.collabsible || this.map.options.collabsible)
 			{
-				var fieldset = $('<fieldset />')
-					.addClass('cbi-section');
+				return $('<div />')
+					.attr('id', this.id('teaser', sid))
+					.addClass('luci2-section-teaser well well-sm')
+					.append($('<span />')
+						.addClass('badge'))
+					.append($('<span />'));
+			}
 
-				var head = $('<div />')
-					.addClass('cbi-section-head')
-					.appendTo(fieldset);
+			return null;
+		},
 
-				head.append(this._render_caption(undefined));
+		_render_head: function(condensed)
+		{
+			if (condensed)
+				return null;
 
-				if (typeof(this.options.description) == 'string')
-				{
-					$('<div />')
-						.addClass('cbi-section-descr')
-						.text(this.options.description)
-						.appendTo(head);
-				}
+			return $('<div />')
+				.addClass('panel-heading')
+				.append(this._render_caption())
+				.append(this._render_description());
+		},
 
-				allsections = allsections.add(fieldset);
-			}
+		_render_tab_description: function(sid, index, tab_index)
+		{
+			var tab = this.tabs[tab_index];
 
-			for (var i = 0; i < s.length; i++)
+			if (typeof(tab.description) == 'string')
 			{
-				var sid = s[i]['.name'];
-				var inst = this.instance[sid] = { tabs: [ ] };
-
-				var fieldset = $('<fieldset />')
-					.attr('id', this.id('sort', sid))
-					.addClass('cbi-section');
+				return $('<div />')
+					.addClass('cbi-tab-descr')
+					.text(tab.description);
+			}
 
-				var head = $('<div />')
-					.addClass('cbi-section-head')
-					.attr('cbi-section-num', this.index)
-					.attr('cbi-section-id', sid);
+			return null;
+		},
 
-				head.append(this._render_caption(sid));
+		_render_tab_head: function(sid, index, tab_index)
+		{
+			var tab = this.tabs[tab_index];
+			var cur = this.active_tab[sid] || 0;
 
-				if (typeof(this.options.description) == 'string')
-				{
-					$('<div />')
-						.addClass('cbi-section-descr')
-						.text(this.options.description)
-						.appendTo(head);
-				}
+			var tabh = $('<li />')
+				.append($('<a />')
+					.attr('id', this.id('nodetab', sid, tab.id))
+					.attr('href', '#' + this.id('node', sid, tab.id))
+					.attr('data-toggle', 'tab')
+					.attr('data-luci2-tab-index', tab_index)
+					.text((tab.caption ? tab.caption.format(tab.id) : tab.id) + ' ')
+					.append($('<span />')
+						.addClass('badge'))
+					.on('shown.bs.tab', { self: this, sid: sid }, this._ev_tab));
 
-				var teaser;
-				if ((s.length > 1 && this.options.collabsible) || this.map.options.collabsible)
-					teaser = $('<div />')
-						.addClass('cbi-section-teaser')
-						.appendTo(head);
+			if (cur == tab_index)
+				tabh.addClass('active');
 
-				if (this.options.addremove)
-					$('<div />')
-						.addClass('cbi-section-remove')
-						.addClass('right')
-						.append(this._render_remove(sid))
-						.appendTo(head);
+			return tabh;
+		},
 
-				var body = $('<div />')
-					.attr('index', panel_index++);
+		_render_tab_body: function(sid, index, tab_index)
+		{
+			var tab = this.tabs[tab_index];
+			var cur = this.active_tab[sid] || 0;
 
-				var fields = $('<fieldset />')
-					.addClass('cbi-section-node');
+			var tabb = $('<div />')
+				.addClass('tab-pane')
+				.attr('id', this.id('node', sid, tab.id))
+				.attr('data-luci2-tab-index', tab_index)
+				.append(this._render_tab_description(sid, index, tab_index));
 
-				if (this.tabs.length > 1)
-				{
-					var menu = $('<ul />')
-						.addClass('cbi-tabmenu');
+			if (cur == tab_index)
+				tabb.addClass('active');
 
-					for (var j = 0; j < this.tabs.length; j++)
-					{
-						var tabid = this.id('tab', sid, this.tabs[j].id);
-						var theadid = this.id('tabhead', sid, this.tabs[j].id);
+			for (var i = 0; i < tab.fields.length; i++)
+				tabb.append(tab.fields[i].render(sid));
 
-						var tabc = $('<div />')
-							.addClass('cbi-tabcontainer')
-							.attr('id', tabid)
-							.attr('index', j);
+			return tabb;
+		},
 
-						if (typeof(this.tabs[j].description) == 'string')
-						{
-							$('<div />')
-								.addClass('cbi-tab-descr')
-								.text(this.tabs[j].description)
-								.appendTo(tabc);
-						}
+		_render_section_head: function(sid, index)
+		{
+			var head = $('<div />')
+				.addClass('luci2-section-header')
+				.append(this._render_teaser(sid, index))
+				.append($('<div />')
+					.addClass('btn-group')
+					.append(this._render_sort(sid, index))
+					.append(this._render_remove(sid, index)));
 
-						for (var k = 0; k < this.tabs[j].fields.length; k++)
-							this.tabs[j].fields[k].render(sid).appendTo(tabc);
+			if (this.options.collabsible)
+			{
+				head.attr('data-toggle', 'collapse')
+					.attr('data-parent', this.id('sectiongroup'))
+					.attr('data-target', '#' + this.id('panel', sid))
+					.on('click', { self: this }, this._ev_panel_open);
+			}
 
-						tabc.appendTo(fields);
-						tabc = null;
+			return head;
+		},
 
-						$('<li />').attr('id', theadid).append(
-							$('<a />')
-								.text(this.tabs[j].caption.format(this.tabs[j].id))
-								.attr('href', '#' + tabid)
-						).appendTo(menu);
-					}
+		_render_section_body: function(sid, index)
+		{
+			var body = $('<div />')
+				.attr('id', this.id('panel', sid))
+				.attr('data-luci2-panel-index', index)
+				.attr('data-luci2-sid', sid);
 
-					menu.appendTo(body);
-					menu = null;
+			if (this.options.collabsible || this.map.options.collabsible)
+			{
+				body.addClass('panel-collapse collapse');
 
-					fields.appendTo(body);
-					fields = null;
+				if (index == this.active_panel)
+					body.addClass('in');
+			}
 
-					var t = body.tabs({ active: this.active_tab[sid] });
+			var tab_heads = $('<ul />')
+				.addClass('nav nav-tabs');
 
-					t.on('tabsactivate', { self: this, sid: sid }, function(ev, ui) {
-						var d = ev.data;
-						d.self.validate();
-						d.self.active_tab[d.sid] = parseInt(ui.newPanel.attr('index'));
-					});
-				}
-				else
-				{
-					for (var j = 0; j < this.tabs[0].fields.length; j++)
-						this.tabs[0].fields[j].render(sid).appendTo(fields);
+			var tab_bodies = $('<div />')
+				.addClass('form-horizontal tab-content')
+				.append(tab_heads);
 
-					fields.appendTo(body);
-					fields = null;
-				}
+			for (var j = 0; j < this.tabs.length; j++)
+			{
+				tab_heads.append(this._render_tab_head(sid, index, j));
+				tab_bodies.append(this._render_tab_body(sid, index, j));
+			}
 
-				head.appendTo(fieldset);
-				head = null;
+			body.append(tab_bodies);
 
-				body.appendTo(fieldset);
-				body = null;
+			if (this.tabs.length <= 1)
+				tab_heads.hide();
 
-				allsections = allsections.add(fieldset);
-				fieldset = null;
+			return body;
+		},
 
-				//this.validate(sid);
-				//
-				//if (teaser)
-				//	teaser.append(this.teaser(sid));
-			}
+		_render_body: function(condensed)
+		{
+			var s = this.sections();
 
-			if (this.options.collabsible && s.length > 1)
-			{
-				var a = $('<div />').append(allsections).accordion({
-					header: '> fieldset > div.cbi-section-head',
-					heightStyle: 'content',
-					active: this.active_panel
-				});
+			if (this.active_panel < 0)
+				this.active_panel += s.length;
+			else if (this.active_panel >= s.length)
+				this.active_panel = s.length - 1;
 
-				a.on('accordionbeforeactivate', { self: this }, function(ev, ui) {
-					var h = ui.oldHeader;
-					var s = ev.data.self;
-					var i = h.attr('cbi-section-id');
+			var body = $('<ul />')
+				.addClass('list-group');
 
-					h.children('.cbi-section-teaser').empty().append(s.teaser(i));
-					s.validate();
-				});
+			if (this.options.collabsible)
+			{
+				body.attr('id', this.id('sectiongroup'))
+					.on('show.bs.collapse', { self: this }, this._ev_panel_collapse);
+			}
 
-				a.on('accordionactivate', { self: this }, function(ev, ui) {
-					ev.data.self.active_panel = parseInt(ui.newPanel.attr('index'));
-				});
+			if (s.length == 0)
+			{
+				body.append($('<li />')
+					.addClass('list-group-item text-muted')
+					.text(this.label('placeholder') || _luci2.tr('There are no entries defined yet.')))
+			}
 
-				if (this.options.sortable)
-				{
-					var s = a.sortable({
-						axis: 'y',
-						handle: 'div.cbi-section-head'
-					});
+			for (var i = 0; i < s.length; i++)
+			{
+				var sid = s[i]['.name'];
+				var inst = this.instance[sid] = { tabs: [ ] };
 
-					s.on('sortupdate', { self: this, ids: s.sortable('toArray') }, function(ev, ui) {
-						var sections = [ ];
-						for (var i = 0; i < ev.data.ids.length; i++)
-							sections.push(ev.data.ids[i].substring(ev.data.ids[i].lastIndexOf('.') + 1));
-						_luci2.uci.order(ev.data.self.map.uci_package, sections);
-					});
+				body.append($('<li />')
+					.addClass('list-group-item')
+					.append(this._render_section_head(sid, i))
+					.append(this._render_section_body(sid, i)));
+			}
 
-					s.on('sortstop', function(ev, ui) {
-						ui.item.children('div.cbi-section-head').triggerHandler('focusout');
-					});
-				}
+			return body;
+		},
 
-				if (this.options.addremove)
-					this._render_add().appendTo(a);
+		render: function(condensed)
+		{
+			this.instance = { };
 
-				return a;
-			}
+			var panel = $('<div />')
+				.addClass('panel panel-default')
+				.append(this._render_head(condensed))
+				.append(this._render_body(condensed));
 
 			if (this.options.addremove)
-				allsections = allsections.add(this._render_add());
+				panel.append($('<div />')
+					.addClass('panel-footer')
+					.append(this._render_add()));
 
-			return allsections;
+			return panel;
 		},
 
 		finish: function()
@@ -4711,146 +5201,101 @@ function LuCI2()
 			{
 				var sid = s[i]['.name'];
 
-				this.validate(sid);
+				this.validate_section(sid);
 
-				$('#' + this.id('sort', sid))
-					.children('.cbi-section-head')
-					.children('.cbi-section-teaser')
-					.append(this.teaser(sid));
+				if (i != this.active_panel)
+					$('#' + this.id('teaser', sid)).children('span:last')
+						.append(this.teaser(sid));
+				else
+					$('#' + this.id('teaser', sid))
+						.hide();
 			}
 		}
 	});
 
 	this.cbi.TableSection = this.cbi.TypedSection.extend({
-		render: function()
+		_render_table_head: function()
 		{
-			var allsections = $();
-			var panel_index = 0;
-
-			this.instance = { };
-
-			var s = this.sections();
-
-			var fieldset = $('<fieldset />')
-				.addClass('cbi-section');
-
-			fieldset.append(this._render_caption(sid));
-
-			if (typeof(this.options.description) == 'string')
-			{
-				$('<div />')
-					.addClass('cbi-section-descr')
-					.text(this.options.description)
-					.appendTo(fieldset);
-			}
-
-			var fields = $('<div />')
-				.addClass('cbi-section-node')
-				.appendTo(fieldset);
-
-			var table = $('<table />')
-				.addClass('cbi-section-table')
-				.appendTo(fields);
-
 			var thead = $('<thead />')
-				.append($('<tr />').addClass('cbi-section-table-titles'))
-				.appendTo(table);
+				.append($('<tr />')
+					.addClass('cbi-section-table-titles'));
 
 			for (var j = 0; j < this.tabs[0].fields.length; j++)
-				$('<th />')
+				thead.children().append($('<th />')
 					.addClass('cbi-section-table-cell')
 					.css('width', this.tabs[0].fields[j].options.width || '')
-					.append(this.tabs[0].fields[j].options.caption)
-					.appendTo(thead.children());
+					.append(this.tabs[0].fields[j].label('caption')));
 
-			if (this.options.sortable)
-				$('<th />').addClass('cbi-section-table-cell').text(' ').appendTo(thead.children());
+			if (this.options.addremove !== false || this.options.sortable)
+				thead.children().append($('<th />')
+					.addClass('cbi-section-table-cell')
+					.text(' '));
 
-			if (this.options.addremove !== false)
-				$('<th />').addClass('cbi-section-table-cell').text(' ').appendTo(thead.children());
+			return thead;
+		},
 
-			var tbody = $('<tbody />')
-				.appendTo(table);
+		_render_table_row: function(sid, index)
+		{
+			var row = $('<tr />')
+				.attr('data-luci2-sid', sid);
 
-			if (s.length == 0)
+			for (var j = 0; j < this.tabs[0].fields.length; j++)
 			{
-				$('<tr />')
-					.addClass('cbi-section-table-row')
-					.append(
-						$('<td />')
-							.addClass('cbi-section-table-cell')
-							.addClass('cbi-section-table-placeholder')
-							.attr('colspan', thead.children().children().length)
-							.text(this.options.placeholder || _luci2.tr('This section contains no values yet')))
-					.appendTo(tbody);
+				row.append($('<td />')
+					.css('width', this.tabs[0].fields[j].options.width || '')
+					.append(this.tabs[0].fields[j].render(sid, true)));
 			}
 
-			for (var i = 0; i < s.length; i++)
+			if (this.options.addremove !== false || this.options.sortable)
 			{
-				var sid = s[i]['.name'];
-				var inst = this.instance[sid] = { tabs: [ ] };
+				row.append($('<td />')
+					.addClass('text-right')
+					.append($('<div />')
+						.addClass('btn-group')
+						.append(this._render_sort(sid, index))
+						.append(this._render_remove(sid, index))));
+			}
 
-				var row = $('<tr />')
-					.addClass('cbi-section-table-row')
-					.appendTo(tbody);
+			return row;
+		},
 
-				for (var j = 0; j < this.tabs[0].fields.length; j++)
-				{
-					$('<td />')
-						.addClass('cbi-section-table-cell')
-						.css('width', this.tabs[0].fields[j].options.width || '')
-						.append(this.tabs[0].fields[j].render(sid, true))
-						.appendTo(row);
-				}
+		_render_table_body: function()
+		{
+			var s = this.sections();
 
-				if (this.options.sortable)
-				{
-					$('<td />')
-						.addClass('cbi-section-table-cell')
-						.addClass('cbi-section-table-sort')
-						.append($('<img />').attr('src', _luci2.globals.resource + '/icons/cbi/up.gif').attr('title', _luci2.tr('Drag to sort')))
-						.append($('<br />'))
-						.append($('<img />').attr('src', _luci2.globals.resource + '/icons/cbi/down.gif').attr('title', _luci2.tr('Drag to sort')))
-						.appendTo(row);
-				}
+			var tbody = $('<tbody />');
 
-				if (this.options.addremove !== false)
-				{
-					$('<td />')
-						.addClass('cbi-section-table-cell')
-						.append(this._render_remove(sid))
-						.appendTo(row);
-				}
+			if (s.length == 0)
+			{
+				var cols = this.tabs[0].fields.length;
 
-				this.validate(sid);
+				if (this.options.addremove !== false || this.options.sortable)
+					cols++;
 
-				row = null;
+				tbody.append($('<tr />')
+					.append($('<td />')
+						.addClass('text-muted')
+						.attr('colspan', cols)
+						.text(this.label('placeholder') || _luci2.tr('There are no entries defined yet.'))));
 			}
 
-			if (this.options.sortable)
+			for (var i = 0; i < s.length; i++)
 			{
-				var s = tbody.sortable({
-					handle: 'td.cbi-section-table-sort'
-				});
-
-				s.on('sortupdate', { self: this, ids: s.sortable('toArray') }, function(ev, ui) {
-					var sections = [ ];
-					for (var i = 0; i < ev.data.ids.length; i++)
-						sections.push(ev.data.ids[i].substring(ev.data.ids[i].lastIndexOf('.') + 1));
-					_luci2.uci.order(ev.data.self.map.uci_package, sections);
-				});
+				var sid = s[i]['.name'];
+				var inst = this.instance[sid] = { tabs: [ ] };
 
-				s.on('sortstop', function(ev, ui) {
-					ui.item.children('div.cbi-section-head').triggerHandler('focusout');
-				});
+				tbody.append(this._render_table_row(sid, i));
 			}
 
-			if (this.options.addremove)
-				this._render_add().appendTo(fieldset);
-
-			fields = table = thead = tbody = null;
+			return tbody;
+		},
 
-			return fieldset;
+		_render_body: function(condensed)
+		{
+			return $('<table />')
+				.addClass('table table-condensed table-hover')
+				.append(this._render_table_head())
+				.append(this._render_table_body());
 		}
 	});
 
@@ -4884,7 +5329,7 @@ function LuCI2()
 		}
 	});
 
-	this.cbi.Map = AbstractWidget.extend({
+	this.cbi.Map = this.ui.AbstractWidget.extend({
 		init: function(uci_package, options)
 		{
 			var self = this;
@@ -4901,18 +5346,49 @@ function LuCI2()
 			});
 		},
 
+		_load_cb: function(packages)
+		{
+			for (var i = 0; i < packages.length; i++)
+			{
+				this.uci.values[packages[i]['.package']] = packages[i];
+				delete packages[i]['.package'];
+			}
+
+			var deferreds = [ _luci2.deferrable(this.options.prepare()) ];
+
+			for (var i = 0; i < this.sections.length; i++)
+			{
+				for (var f in this.sections[i].fields)
+				{
+					if (typeof(this.sections[i].fields[f].load) != 'function')
+						continue;
+
+					var s = this.sections[i].sections();
+					for (var j = 0; j < s.length; j++)
+					{
+						var rv = this.sections[i].fields[f].load(s[j]['.name']);
+						if (_luci2.isDeferred(rv))
+							deferreds.push(rv);
+					}
+				}
+			}
+
+			return $.when.apply($, deferreds);
+		},
+
 		load: function()
 		{
+			var self = this;
+
 			this.uci = {
 				newid:   0,
 				values:  { },
 				creates: { },
 				changes: { },
-				deletes: { }
+				deletes: { },
+				reorder: false
 			};
 
-			this.active_panel = 0;
-
 			var packages = { };
 
 			for (var i = 0; i < this.sections.length; i++)
@@ -4920,126 +5396,125 @@ function LuCI2()
 
 			packages[this.uci_package] = true;
 
-			var load_cb = this._load_cb || (this._load_cb = $.proxy(function(packages) {
-				for (var i = 0; i < packages.length; i++)
-				{
-					this.uci.values[packages[i]['.package']] = packages[i];
-					delete packages[i]['.package'];
-				}
-
-				var deferreds = [ _luci2.deferrable(this.options.prepare()) ];
-
-				for (var i = 0; i < this.sections.length; i++)
-				{
-					for (var f in this.sections[i].fields)
-					{
-						if (typeof(this.sections[i].fields[f].load) != 'function')
-							continue;
-
-						var s = this.sections[i].sections();
-						for (var j = 0; j < s.length; j++)
-						{
-							var rv = this.sections[i].fields[f].load(s[j]['.name']);
-							if (_luci2.isDeferred(rv))
-								deferreds.push(rv);
-						}
-					}
-				}
-
-				return $.when.apply($, deferreds);
-			}, this));
-
 			_luci2.rpc.batch();
 
 			for (var pkg in packages)
 				_luci2.uci.get_all(pkg);
 
-			return _luci2.rpc.flush().then(load_cb);
+			return _luci2.rpc.flush().then(function(packages) {
+				return self._load_cb(packages);
+			});
 		},
 
-		render: function()
+		_ev_tab: function(ev)
 		{
-			var map = $('<div />').addClass('cbi-map');
+			var self = ev.data.self;
 
-			if (typeof(this.options.caption) == 'string')
-				$('<h2 />').text(this.options.caption).appendTo(map);
+			self.validate();
+			self.active_tab = parseInt(ev.target.getAttribute('data-luci2-tab-index'));
+		},
 
-			if (typeof(this.options.description) == 'string')
-				$('<div />').addClass('cbi-map-descr').text(this.options.description).appendTo(map);
+		_render_tab_head: function(tab_index)
+		{
+			var section = this.sections[tab_index];
+			var cur = this.active_tab || 0;
 
-			var sections = $('<div />').appendTo(map);
+			var tabh = $('<li />')
+				.append($('<a />')
+					.attr('id', section.id('sectiontab'))
+					.attr('href', '#' + section.id('section'))
+					.attr('data-toggle', 'tab')
+					.attr('data-luci2-tab-index', tab_index)
+					.text(section.label('caption') + ' ')
+					.append($('<span />')
+						.addClass('badge'))
+					.on('shown.bs.tab', { self: this }, this._ev_tab));
 
-			for (var i = 0; i < this.sections.length; i++)
-			{
-				var s = this.sections[i].render();
+			if (cur == tab_index)
+				tabh.addClass('active');
 
-				if (this.options.readonly || this.sections[i].options.readonly)
-					s.find('input, select, button, img.cbi-button').attr('disabled', true);
+			return tabh;
+		},
 
-				s.appendTo(sections);
+		_render_tab_body: function(tab_index)
+		{
+			var section = this.sections[tab_index];
+			var desc = section.label('description');
+			var cur = this.active_tab || 0;
 
-				if (this.sections[i].options.active)
-					this.active_panel = i;
-			}
+			var tabb = $('<div />')
+				.addClass('tab-pane')
+				.attr('id', section.id('section'))
+				.attr('data-luci2-tab-index', tab_index);
 
-			if (this.options.collabsible)
-			{
-				var a = sections.accordion({
-					header: '> fieldset > div.cbi-section-head',
-					heightStyle: 'content',
-					active: this.active_panel
-				});
+			if (cur == tab_index)
+				tabb.addClass('active');
 
-				a.on('accordionbeforeactivate', { self: this }, function(ev, ui) {
-					var h = ui.oldHeader;
-					var s = ev.data.self.sections[parseInt(h.attr('cbi-section-num'))];
-					var i = h.attr('cbi-section-id');
+			if (desc)
+				tabb.append($('<p />')
+					.text(desc));
 
-					h.children('.cbi-section-teaser').empty().append(s.teaser(i));
+			var s = section.render(this.options.tabbed);
 
-					for (var i = 0; i < ev.data.self.sections.length; i++)
-						ev.data.self.sections[i].validate();
-				});
+			if (this.options.readonly || section.options.readonly)
+				s.find('input, select, button, img.cbi-button').attr('disabled', true);
 
-				a.on('accordionactivate', { self: this }, function(ev, ui) {
-					ev.data.self.active_panel = parseInt(ui.newPanel.attr('index'));
-				});
-			}
+			tabb.append(s);
 
-			if (this.options.pageaction !== false)
+			return tabb;
+		},
+
+		_render_body: function()
+		{
+			var tabs = $('<ul />')
+				.addClass('nav nav-tabs');
+
+			var body = $('<div />')
+				.append(tabs);
+
+			for (var i = 0; i < this.sections.length; i++)
 			{
-				var a = $('<div />')
-					.addClass('cbi-page-actions')
-					.appendTo(map);
+				tabs.append(this._render_tab_head(i));
+				body.append(this._render_tab_body(i));
+			}
 
-				$('<input />')
-					.addClass('cbi-button').addClass('cbi-button-apply')
-					.attr('type', 'button')
-					.val(_luci2.tr('Save & Apply'))
-					.appendTo(a);
+			if (this.options.tabbed)
+				body.addClass('tab-content');
+			else
+				tabs.hide();
 
-				$('<input />')
-					.addClass('cbi-button').addClass('cbi-button-save')
-					.attr('type', 'button')
-					.val(_luci2.tr('Save'))
-					.click({ self: this }, function(ev) { ev.data.self.send(); })
-					.appendTo(a);
+			return body;
+		},
 
-				$('<input />')
-					.addClass('cbi-button').addClass('cbi-button-reset')
-					.attr('type', 'button')
-					.val(_luci2.tr('Reset'))
-					.click({ self: this }, function(ev) { ev.data.self.insertInto(ev.data.self.target); })
-					.appendTo(a);
+		render: function()
+		{
+			var map = $('<form />');
 
-				a = null;
-			}
+			if (typeof(this.options.caption) == 'string')
+				map.append($('<h2 />')
+					.text(this.options.caption));
 
-			var top = $('<form />').append(map);
+			if (typeof(this.options.description) == 'string')
+				map.append($('<p />')
+					.text(this.options.description));
 
-			map = null;
+			map.append(this._render_body());
+
+			if (this.options.pageaction !== false)
+			{
+				map.append($('<div />')
+					.addClass('panel panel-default panel-body text-right')
+					.append($('<div />')
+						.addClass('btn-group')
+						.append(_luci2.ui.button(_luci2.tr('Save & Apply'), 'primary')
+							.click({ self: this }, function(ev) {  }))
+						.append(_luci2.ui.button(_luci2.tr('Save'), 'default')
+							.click({ self: this }, function(ev) { ev.data.self.send(); }))
+						.append(_luci2.ui.button(_luci2.tr('Reset'), 'default')
+							.click({ self: this }, function(ev) { ev.data.self.insertInto(ev.data.self.target); }))));
+			}
 
-			return top;
+			return map;
 		},
 
 		finish: function()
@@ -5100,7 +5575,8 @@ function LuCI2()
 				'.type':      type,
 				'.name':      s,
 				'.create':    name,
-				'.anonymous': !name
+				'.anonymous': !name,
+				'.index':     1000 + this.uci.newid
 			};
 
 			return s;
@@ -5144,12 +5620,17 @@ function LuCI2()
 				if (!del || del[s] !== true)
 					sa.push(pkg[s]);
 
-			sa.sort(function(a, b) { return a['.index'] - b['.index'] });
-
 			if (crt)
 				for (var s in crt)
 					sa.push(crt[s]);
 
+			sa.sort(function(a, b) {
+				return a['.index'] - b['.index'];
+			});
+
+			for (var i = 0; i < sa.length; i++)
+				sa[i]['.index'] = i;
+
 			if (typeof(cb) == 'function')
 				for (var i = 0; i < sa.length; i++)
 					cb.apply(this, [ sa[i] ]);
@@ -5251,8 +5732,10 @@ function LuCI2()
 			var rv = true;
 
 			for (var i = 0; i < this.sections.length; i++)
+			{
 				if (!this.sections[i].validate())
 					rv = false;
+			}
 
 			return rv;
 		},
@@ -5287,90 +5770,124 @@ function LuCI2()
 			return $.when.apply($, deferreds);
 		},
 
-		send: function()
+		_send_uci_reorder: function()
 		{
-			if (!this.validate())
+			if (!this.uci.reorder)
 				return _luci2.deferrable();
 
-			var send_cb = this._send_cb || (this._send_cb = $.proxy(function() {
-				_luci2.rpc.batch();
+			_luci2.rpc.batch();
 
-				if (this.uci.creates)
-					for (var c in this.uci.creates)
-						for (var s in this.uci.creates[c])
-						{
-							var r = {
-								config: c,
-								values: { }
-							};
+			/*
+			 gather all created and existing sections, sort them according
+			 to their index value and issue an uci order call
+			*/
+			for (var c in this.uci.values)
+			{
+				var o = [ ];
 
-							for (var k in this.uci.creates[c][s])
-							{
-								if (k == '.type')
-									r.type = this.uci.creates[c][s][k];
-								else if (k == '.create')
-									r.name = this.uci.creates[c][s][k];
-								else if (k.charAt(0) != '.')
-									r.values[k] = this.uci.creates[c][s][k];
-							}
+				if (this.uci.creates && this.uci.creates[c])
+					for (var s in this.uci.creates[c])
+						o.push(this.uci.creates[c][s]);
 
-							_luci2.uci.add(r.config, r.type, r.name, r.values);
-						}
+				for (var s in this.uci.values[c])
+					o.push(this.uci.values[c][s]);
+
+				if (o.length > 0)
+				{
+					o.sort(function(a, b) {
+						return (a['.index'] - b['.index']);
+					});
+
+					var sids = [ ];
 
-				if (this.uci.changes)
-					for (var c in this.uci.changes)
-						for (var s in this.uci.changes[c])
-							_luci2.uci.set(c, s, this.uci.changes[c][s]);
+					for (var i = 0; i < o.length; i++)
+						sids.push(o[i]['.name']);
 
-				if (this.uci.deletes)
-					for (var c in this.uci.deletes)
-						for (var s in this.uci.deletes[c])
+					_luci2.uci.order(c, sids);
+				}
+			}
+
+			return _luci2.rpc.flush();
+		},
+
+		_send_uci: function()
+		{
+			_luci2.rpc.batch();
+
+			var self = this;
+			var snew = [ ];
+
+			if (this.uci.creates)
+				for (var c in this.uci.creates)
+					for (var s in this.uci.creates[c])
+					{
+						var r = {
+							config: c,
+							values: { }
+						};
+
+						for (var k in this.uci.creates[c][s])
 						{
-							var o = this.uci.deletes[c][s];
-							_luci2.uci['delete'](c, s, (o === true) ? undefined : o);
+							if (k == '.type')
+								r.type = this.uci.creates[c][s][k];
+							else if (k == '.create')
+								r.name = this.uci.creates[c][s][k];
+							else if (k.charAt(0) != '.')
+								r.values[k] = this.uci.creates[c][s][k];
 						}
 
-				return _luci2.rpc.flush();
-			}, this));
+						snew.push(this.uci.creates[c][s]);
 
-			var self = this;
+						_luci2.uci.add(r.config, r.type, r.name, r.values);
+					}
 
-			_luci2.ui.loading(true);
+			if (this.uci.changes)
+				for (var c in this.uci.changes)
+					for (var s in this.uci.changes[c])
+						_luci2.uci.set(c, s, this.uci.changes[c][s]);
 
-			return this.save().then(send_cb).then(function() {
-				return self.load();
-			}).then(function() {
-				self.redraw();
-				self = null;
+			if (this.uci.deletes)
+				for (var c in this.uci.deletes)
+					for (var s in this.uci.deletes[c])
+					{
+						var o = this.uci.deletes[c][s];
+						_luci2.uci['delete'](c, s, (o === true) ? undefined : o);
+					}
 
-				_luci2.ui.loading(false);
+			return _luci2.rpc.flush().then(function(responses) {
+				/*
+				 array "snew" holds references to the created uci sections,
+				 use it to assign the returned names of the new sections
+				*/
+				for (var i = 0; i < snew.length; i++)
+					snew[i]['.name'] = responses[i];
+
+				return self._send_uci_reorder();
 			});
 		},
 
-		dialog: function(id)
+		send: function()
 		{
-			var d = $('<div />');
-			var p = $('<p />');
+			if (!this.validate())
+				return _luci2.deferrable();
 
-			$('<img />')
-				.attr('src', _luci2.globals.resource + '/icons/loading.gif')
-				.css('vertical-align', 'middle')
-				.css('padding-right', '10px')
-				.appendTo(p);
+			var self = this;
 
-			p.append(_luci2.tr('Loading data...'));
+			_luci2.ui.saveScrollTop();
+			_luci2.ui.loading(true);
 
-			p.appendTo(d);
-			d.appendTo(id);
+			return this.save().then(function() {
+				return self._send_uci();
+			}).then(function() {
+				return _luci2.ui.updateChanges();
+			}).then(function() {
+				return self.load();
+			}).then(function() {
+				self.redraw();
+				self = null;
 
-			return d.dialog({
-				modal: true,
-				draggable: false,
-				resizable: false,
-				height: 90,
-				open: function() {
-					$(this).parent().children('.ui-dialog-titlebar').hide();
-				}
+				_luci2.ui.loading(false);
+				_luci2.ui.restoreScrollTop();
 			});
 		},