[usb-lock-off] Added generic rule functionality. Fixed tooltip flickering. Fixed alignment when windows is very small.

9 files changed, 439 insertions, 56 deletions

diff --git a/modules-available/usblockoff/lang/de/messages.json b/modules-available/usblockoff/lang/de/messages.json
new file mode 100644
index 00000000..7ec920b2
--- /dev/null
+++ b/modules-available/usblockoff/lang/de/messages.json
@@ -0,0 +1,4 @@
+{
+	"config-deleted": "Konfiguration erfolgreich gelöscht.",
+	"config-saved": "Konfiguration erfolgreich gespeichert."
+}
\ No newline at end of file
diff --git a/modules-available/usblockoff/lang/de/template-tags.json b/modules-available/usblockoff/lang/de/template-tags.json
index b17eb1fb..3614ed55 100644
--- a/modules-available/usblockoff/lang/de/template-tags.json
+++ b/modules-available/usblockoff/lang/de/template-tags.json
@@ -1,14 +1,43 @@
 {
-  "lang_howToRuleLang": "Verwendung der Regel Sprache.",
-  "lang_device": "USB Gerät",
-  "lang_devices": "USB Geräte",
-  "lang_general": "Allgemein",
-  "lang_config": "Konfiguration",
-  "lang_config_helptext": "Erstelle eine neue Konfiguration oder wähle eine aus, um sie zu Laden und Bearbeiten zu können",
-  "lang_configName": "Konfigurationsname",
-  "lang_configName_helptext": "Name der Konfiguration",
-  "lang_deleteConfig": "Konfiguration Löschen",
-  "lang_deleteConfig_helptext": "Löscht die Konfiguration aus der Datenbank",
-  "lang_createNewConfig": "<Neue Konfiguration erstellen>",
-  "lang_deleteConfigMessage": "Sind sie sicher, dass sie die Konfiguration Löschen wollen?"
+	"lang_howToRuleLang": "Verwendung der Regel Sprache.",
+	"lang_device": "USB Gerät",
+	"lang_devices": "USB Geräte",
+	"lang_general": "Allgemein",
+	"lang_config": "Konfiguration",
+	"lang_config_helptext": "Erstelle eine neue Konfiguration oder wähle eine aus, um sie zu Laden und Bearbeiten zu können",
+	"lang_configName": "Konfigurationsname",
+	"lang_configName_helptext": "Name der Konfiguration",
+	"lang_deleteConfig": "Konfiguration Löschen",
+	"lang_deleteConfig_helptext": "Löscht die Konfiguration aus der Datenbank",
+	"lang_createNewConfig": "<Neue Konfiguration erstellen>",
+	"lang_deleteConfigMessage": "Sind sie sicher, dass sie die Konfiguration Löschen wollen?",
+	"lang_genericRule": "Generische Regel",
+	"lang_generalOptions": "Allgemeine Optionen",
+	"lang_modeOptions": "Modus Optionen",
+	"lang_deviceClasses": "Geräteklassen",
+	"lang_classes-helptext": "",
+	"lang_contains": "Beinhält Interface",
+	"lang_contains-helptext": "Erlaubt das Gerät selbst wenn es noch zusätzliche Interfaces hat",
+	"lang_mass-storage": "Massenspeichergeräte",
+	"lang_hid": "Eingabegeräte",
+	"lang_hub": "USB Hubs",
+	"lang_printer": "Drucker",
+	"lang_audio": "Audiogeräte",
+	"lang_all-devices": "Alle USB Geräte",
+	"lang_addRule": "Regel hinzufügen",
+	"lang_operator": "Operator",
+	"lang_operator-helptext": "",
+	"lang_deviceClass": "Geräteklasse",
+	"lang_deviceClass-helptext": "",
+	"lang_deviceSubClass": "Gerätesubklasse",
+	"lang_deviceSubClass-helptext": "",
+	"lang_deviceProtocol": "Geräteprotokoll",
+	"lang_deviceProtocol-helptext": "",
+	"lang_all-of": "Alle von",
+	"lang_one-of": "Eins von",
+	"lang_none-of": "Keins von",
+	"lang_equals": "Gleicht",
+	"lang_equals-ordered": "Gleicht geordnet",
+	"lang_saveAsNewConfig": "Als neue Konfiguration Speichern",
+	"lang_saveAsNewConfig-helptext": "Erstellt eine neue Konfiguration anstatt die alte zu Überschreiben."
 }
diff --git a/modules-available/usblockoff/lang/en/messages.json b/modules-available/usblockoff/lang/en/messages.json
new file mode 100644
index 00000000..894ff608
--- /dev/null
+++ b/modules-available/usblockoff/lang/en/messages.json
@@ -0,0 +1,4 @@
+{
+	"config-deleted": "Config successfully deleted.",
+	"config-saved": "Config successfully saved."
+}
\ No newline at end of file
diff --git a/modules-available/usblockoff/lang/en/template-tags.json b/modules-available/usblockoff/lang/en/template-tags.json
index 20529d4a..914b844b 100644
--- a/modules-available/usblockoff/lang/en/template-tags.json
+++ b/modules-available/usblockoff/lang/en/template-tags.json
@@ -1,14 +1,43 @@
 {
-  "lang_howToRuleLang": "Usage of the Rule Language.",
-  "lang_device": "usb device",
-  "lang_devices": "usb devices",
-  "lang_general": "General",
-  "lang_config": "Configuration",
-  "lang_config_helptext": "Create a new configuration or choose one to load and edit it",
-  "lang_configName": "Configuration name",
-  "lang_configName_helptext": "The name of the configuration",
-  "lang_deleteConfig": "Delete configuration",
-  "lang_deleteConfig_helptext": "Delets the configuration",
-  "lang_createNewConfig": "<create new configuration>",
-  "lang_deleteConfigMessage": "Are you sure you want to delete the configuration?"
+	"lang_howToRuleLang": "Usage of the Rule Language.",
+	"lang_device": "usb device",
+	"lang_devices": "usb devices",
+	"lang_general": "General",
+	"lang_config": "Configuration",
+	"lang_config_helptext": "Create a new configuration or choose one to load and edit it",
+	"lang_configName": "Configuration name",
+	"lang_configName_helptext": "The name of the configuration",
+	"lang_deleteConfig": "Delete configuration",
+	"lang_deleteConfig_helptext": "Delets the configuration",
+	"lang_createNewConfig": "<create new configuration>",
+	"lang_deleteConfigMessage": "Are you sure you want to delete the configuration?",
+	"lang_genericRule": "generic rule",
+	"lang_generalOptions": "General options",
+	"lang_modeOptions": "Mode options",
+	"lang_deviceClasses": "Device classes",
+	"lang_classes-helptext": "",
+	"lang_contains": "Contains interface",
+	"lang_contains-helptext": "If true the device is allowed if it contains the interface among others",
+	"lang_mass-storage": "Mass storage devices",
+	"lang_hid": "Human interface devices",
+	"lang_hub": "USB Hubs",
+	"lang_printer": "Printer",
+	"lang_audio": "Audio devices",
+	"lang_all-devices": "All USB devices",
+	"lang_addRule": "Add rule",
+	"lang_operator": "Operator",
+	"lang_operator-helptext": "",
+	"lang_deviceClass": "Device class",
+	"lang_deviceClass-helptext": "",
+	"lang_deviceSubClass": "Device subclass",
+	"lang_deviceSubClass-helptext": "",
+	"lang_deviceProtocol": "Device protocol",
+	"lang_deviceProtocol-helptext": "",
+	"lang_all-of": "All of",
+	"lang_one-of": "One of",
+	"lang_none-of": "None of",
+	"lang_equals": "Equals",
+	"lang_equals-ordered": "Equals ordered",
+	"lang_saveAsNewConfig": "Save as new config",
+	"lang_saveAsNewConfig-helptext": "If true a new config is created instead of overriding the old one"
 }
diff --git a/modules-available/usblockoff/page.inc.php b/modules-available/usblockoff/page.inc.php
index d33765f0..9e5664fc 100644
--- a/modules-available/usblockoff/page.inc.php
+++ b/modules-available/usblockoff/page.inc.php
@@ -56,11 +56,13 @@ class Page_usblockoff extends Page
 			Database::exec("DELETE FROM `usb_configs` WHERE configid=:configid", array('configid' => $configID));
 		}
 
+		Message::addSuccess('config-deleted');
 		Util::redirect('?do=usblockoff');
 	}
 
 	protected function updateConfig()
 	{
+		$result['saveAsNewConfig'] = Request::post('saveAsNewConfig', false, 'bool');
 		// Add new settings in usbguard-daemon.conf here:
 		$result['RuleFile'] = Request::post('RuleFile', '', 'string');
 		$result['ImplicitPolicyTarget'] = Request::post('ImplicitPolicyTarget', '', 'string');
@@ -104,7 +106,7 @@ class Page_usblockoff extends Page
 		}
 
 		// INSERT IN DB
-		if ($id == '0') {
+		if ($id == '0' || $result['saveAsNewConfig']) {
 			$dbquery = Database::exec("INSERT INTO `usb_configs` (configname, rulesconfig, daemonconfig) VALUES (:configname, :rulesconfig, :daemonconfig)",
 				array('configname' => $configname,
 					'rulesconfig' => $result['rules'],
@@ -116,6 +118,7 @@ class Page_usblockoff extends Page
 					'rulesconfig' => $result['rules'],
 					'daemonconfig' => implode($newDaemonConf)));
 		}
+		Message::addSuccess('config-saved');
 	}
 
 	/**
@@ -133,12 +136,13 @@ class Page_usblockoff extends Page
 		} elseif ($action === 'loadConfig') {
 			$id = Request::any('id', 0, 'int');
 			$this->ajaxConfig($id);
+		} elseif ($action === 'genericRuleBuilder') {
+			$this->ajaxGenericRuleBuilder();
 		}
 	}
 
 	private function ajaxConfig($id)
 	{
-
 		$form = array();
 		$rulesConf = null;
 
@@ -180,10 +184,96 @@ class Page_usblockoff extends Page
 		));
 	}
 
+	private function ajaxGenericRuleBuilder() {
+		$settings = array();
+
+		// TODO: Translate Operator Action etc..
+
+		$setting = array();
+		$setting['title'] = "Action";
+		$setting['select_list'] = array(array(
+			'option' => 'allow',
+			'active' => true,
+		),
+			array(
+				'option' => 'block',
+				'active' => false,
+			),
+			array(
+				'option' => 'reject',
+				'active' => false,
+			));
+		$setting['helptext'] = array('helptext' => Dictionary::translateFile('rule', 'abr_helptext'));
+		$setting['property'] = 'action';
+		$setting['settingHtml'] = Render::parse('server-prop-dropdown', (array)$setting);
+		$settings[] = $setting;
+
+		/*
+		$setting = array();
+		$setting['title'] = "Operator";
+		$setting['select_list'] = array(
+			array(
+				'option' => 'all-of',
+				'active' => true,
+			),
+			array(
+				'option' => 'one-of',
+				'active' => false,
+			),
+			array(
+				'option' => 'none-of',
+				'active' => false,
+			),
+			array(
+				'option' => 'equals',
+				'active' => false,
+			),
+			array(
+				'option' => 'equals-ordered',
+				'active' => false,
+			)
+		);
+		$setting['helptext'] = array('helptext' => Dictionary::translateFile('rule', 'operator_helptext'));
+		$setting['property'] = 'action';
+		$setting['settingHtml'] = Render::parse('server-prop-dropdown', (array)$setting);
+		$settings[] = $setting;
+		*/
+
+		/* THIS IS DONE in HTML code because server-prop-dropdown doens't have a value option for a selected
+		$casualMode = array();
+		$setting = array();
+		// $setting['helptext'] = array('helptext' => Dictionary::translateFile('rule', ''))
+		$setting['title'] = 'Device Class';
+		$setting['select_list'] = array(
+			array(
+				'option' => 'USB-Sticks',
+				'active' => true,
+			),
+			array(
+				'option' => 'HID-Devices',
+				'active' => false,
+			),
+			array(
+				'option' => 'All',
+				'active' => false,
+			)
+		);
+		$setting['property'] = 'action';
+		$setting['settingHtml'] = Render::parse('server-prop-dropdown', (array)$setting);
+		$casualMode[] = $setting;*/
+
+		echo Render::parse('usb-add-generic-rule', array(
+			'settings' => array_values($settings),
+			/*'casual' => array_values($casualMode)*/
+		));
+	}
+
 	private function ajaxDeviceList()
 	{
 		$usbdevices = $this->getUsbDeviceList();
 
+		// TODO: Translate Operator Action etc..
+
 		$settings = array();
 		$setting = array();
 		$setting['title'] = "Action";
diff --git a/modules-available/usblockoff/templates/usb-add-generic-rule.html b/modules-available/usblockoff/templates/usb-add-generic-rule.html
new file mode 100644
index 00000000..4e8339c7
--- /dev/null
+++ b/modules-available/usblockoff/templates/usb-add-generic-rule.html
@@ -0,0 +1,195 @@
+<div>
+	<form method="post" action="?do=usblockoff" id="addGenericRuleForm">
+		<input type="hidden" name="token" value="{{token}}">
+		<input type="hidden" name="action" value="addGenericRule">
+
+		<div class="panel panel-default">
+			<div class="panel-heading">{{lang_generalOptions}}</div>
+			<div class="panel-body">
+				<div class="list-group">
+
+					{{#settings}}
+					{{{settingHtml}}}
+					{{/settings}}
+
+				</div>
+			</div>
+		</div>
+
+		<div class="panel panel-default">
+			<div class="panel-heading">{{lang_modeOptions}}
+				<input class="settings-bs-switch" id="expert_Switch" type="checkbox" name="expert_Switch"
+				data-on-text="Expert" data-off-text="Casual" data-size="small">
+			</div>
+			<div class="panel-body">
+				<div class="list-group">
+
+					<div id="casualMode">
+
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3"><label>{{lang_deviceClasses}}</label></div>
+								<div class="col-md-7">
+									<select class="form-control" id="casual_selected">
+										<option value="08:*:*" selected>{{lang_mass-storage}}</option>
+										<option value="03:*:*">{{lang_hid}}</option>
+										<option value="09:*:*">{{lang_hub}}</option>
+										<option value="07:*:*">{{lang_printer}}</option>
+										<option value="01:*:*">{{lang_audio}}</option>
+										<option value="*:*:*">{{lang_all-devices}}</option>
+									</select>
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default" title="{{lang_classes-helptext}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
+							</div>
+						</div>
+
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3"><label>{{lang_contains}}</label></div>
+								<div class="col-md-7">
+									<input class="settings-bs-switch" id="contains" type="checkbox" value="1" checked
+									data-size="small">
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default" title="{{lang_contains-helptext}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
+							</div>
+						</div>
+
+					</div>
+
+					<div id="expertMode" style="display: none;">
+
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3"><label>{{lang_operator}}</label></div>
+								<div class="col-md-7">
+									<select class="form-control" id="expert_selected">
+										<option value="all-of">{{lang_all-of}}</option>
+										<option value="one-of">{{lang_one-of}}</option>
+										<option value="none-of">{{lang_none-of}}</option>
+										<option value="equals" selected>{{lang_equals}}</option>
+										<option value="equals-ordered">{{lang_equals-ordered}}</option>
+									</select>
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default" title="{{lang_operator-helptext}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
+							</div>
+						</div>
+
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3"><label>{{lang_deviceClass}}</label></div>
+								<div class="col-md-7">
+									<input class="form-control" type="input" id="input_deviceClass"
+											 value="">
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default" title="{{lang_deviceClass-helptext}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
+							</div>
+						</div>
+
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3"><label>{{lang_deviceSubClass}}</label></div>
+								<div class="col-md-7">
+									<input class="form-control" type="input" id="input_deviceSubClass"
+											 value="">
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default" title="{{lang_deviceSubClass-helptext}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
+							</div>
+						</div>
+
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3"><label>{{lang_deviceProtocol}}</label></div>
+								<div class="col-md-7">
+									<input class="form-control" type="input" id="input_deviceProtocol"
+											 value="">
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default" title="{{lang_deviceProtocol-helptext}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
+							</div>
+						</div>
+
+					</div>
+
+				</div>
+			</div>
+		</div>
+
+	</form>
+</div>
+
+<script type="text/javascript">
+	$('a.btn[title]').tooltip({placement: "auto", html: true});
+
+
+	var contains = true;
+	var c = $('#contains');
+	c.bootstrapSwitch();
+	c.on('switchChange.bootstrapSwitch', function(event, state) {
+		contains = state;
+	});
+	var s = $('#expert_Switch');
+	var mode = "casual";
+	s.bootstrapSwitch();
+	s.parent().parent().addClass('pull-right');
+	s.parent().parent().css("margin", "-5px");
+
+	s.on('switchChange.bootstrapSwitch', function(event, state) {
+		if (state) {
+			// Expert mode.
+			$('#casualMode').hide();
+			$('#expertMode').show();
+			mode = "expert";
+		} else {
+			// Casual mode.
+			$('#expertMode').hide();
+			$('#casualMode').show();
+			mode = "casual";
+		}
+	});
+
+	// Add handler to the modal Button.
+	$('#myModalAddButton').unbind().click(addRule);
+	$('#myModalAddButtonText').text('{{lang_addRule}}');
+
+	function addRule() {
+		if ($('#rules').val() != "") {
+			$('#rules').val($('#rules').val() + "\r\n");
+		}
+		if (mode == "casual") {
+			if (contains) {
+				$('#rules').val($('#rules').val() + $('#prop-action').val() + ' with-interface all-of' + ' { ' +
+					$('#casual_selected option:selected').val() + ' }');
+			} else {
+				$('#rules').val($('#rules').val() + $('#prop-action').val() + ' with-interface ' + $('#casual_selected option:selected').val());
+			}
+		} else {
+			$('#rules').val($('#rules').val() + $('#prop-action').val() + ' with-interface ' + $('#expert_selected option:selected').val()
+				+ ' { ' + $("#input_deviceClass").val() + ":" + $("#input_deviceSubClass").val() + ":"
+				+ $('#input_deviceProtocol').val() + ' }');
+		}
+		$('#myModal').modal('hide');
+	}
+</script>
\ No newline at end of file
diff --git a/modules-available/usblockoff/templates/usb-choose-config.html b/modules-available/usblockoff/templates/usb-choose-config.html
index 06dcf92f..0ad7213a 100644
--- a/modules-available/usblockoff/templates/usb-choose-config.html
+++ b/modules-available/usblockoff/templates/usb-choose-config.html
@@ -2,6 +2,7 @@
 	<input type="hidden" name="token" value="{{token}}">
 	<input type="hidden" name="action" id="formAction" value="updateConfig">
 	<input type="hidden" name="id" value="0" id="configID">
+	<input type="hidden" name="saveAsNewConfig" value="0" id="saveAsNewConfig">
 
 	<div class="panel panel-default">
 		<div class="panel-heading">{{lang_general}}</div>
@@ -14,16 +15,14 @@
 							<label>{{lang_config}}</label>
 						</div>
 						<div class="col-sm-7">
-							<div class="col-sm-7">
-								<!--<input class="form-control" name="{{name}}" id="{{name}}" value="{{value}}">-->
-								<select class="form-control" id="select_config" name="select_config"
-										  onchange="loadConfig(this);">
-									<option value="0">{{lang_createNewConfig}}</option>
-									{{#config_list}}
-									<option value={{config_id}}>{{config_name}}</option>
-									{{/config_list}}
-								</select>
-							</div>
+							<!--<input class="form-control" name="{{name}}" id="{{name}}" value="{{value}}">-->
+							<select class="form-control" id="select_config" name="select_config"
+									  onchange="loadConfig(this);">
+								<option value="0">{{lang_createNewConfig}}</option>
+								{{#config_list}}
+								<option value={{config_id}}>{{config_name}}</option>
+								{{/config_list}}
+							</select>
 						</div>
 						<div class="col-sm-2">
 							<a class="btn btn-default" title="{{lang_config_helptext}}">
@@ -39,9 +38,7 @@
 							<label>{{lang_configName}}</label>
 						</div>
 						<div class="col-sm-7">
-							<div class="col-sm-7">
-								<input required class="form-control" name="configName" id="configName" value="{{configName}}">
-							</div>
+							<input required class="form-control" name="configName" id="configName" value="{{configName}}">
 						</div>
 						<div class="col-sm-2">
 							<a class="btn btn-default" title="{{lang_configName_helptext}}">
@@ -54,16 +51,30 @@
 				<div class="list-group-item">
 					<div class="row">
 						<div class="col-sm-3">
+							<label>{{lang_saveAsNewConfig}}</label>
+						</div>
+						<div class="col-sm-7">
+							<input class="settings-bs-switch" id="saveAsNewConfig_CB" type="checkbox" value="0" data-size="small">
+						</div>
+						<div class="col-sm-2">
+							<a class="btn btn-default" title="{{lang_saveAsNewConfig-helptext}}">
+								<span class="glyphicon glyphicon-question-sign"></span>
+							</a>
+						</div>
+					</div>
+				</div>
+
+				<div class="list-group-item">
+					<div class="row">
+						<div class="col-sm-3">
 							<label>{{lang_deleteConfig}}</label>
 						</div>
 						<div class="col-sm-7">
-							<div class="col-sm-7">
-								<!--	<button class="btn btn-danger confirm-delete" type="submit" onclick="deleteConfig();">{{lang_delete}}</button>-->
-								<button class="btn btn-danger" value="" id="deleteConfigButton" title="{{lang_delete}}"
-										  onclick="deleteConfig(event);">
-									<span class="glyphicon glyphicon-trash"></span> {{lang_delete}}
-								</button>
-							</div>
+							<!--	<button class="btn btn-danger confirm-delete" type="submit" onclick="deleteConfig();">{{lang_delete}}</button>-->
+							<button class="btn btn-danger" value="" id="deleteConfigButton" title="{{lang_delete}}"
+									  onclick="deleteConfig(event);">
+								<span class="glyphicon glyphicon-trash"></span> {{lang_delete}}
+							</button>
 						</div>
 						<div class="col-sm-2">
 							<a class="btn btn-default" title="{{lang_deleteConfig_helptext}}">
@@ -81,6 +92,13 @@
 <script type="text/javascript">
 	document.addEventListener("DOMContentLoaded", function () {
 		$('#select_config').change();
+		$('#saveAsNewConfig_CB').bootstrapSwitch().on('switchChange.bootstrapSwitch', function(event, state) {
+			if (state) {
+				$('#saveAsNewConfig').val(1);
+			} else {
+				$('#saveAsNewConfig').val(0);
+			}
+		});
 	});
 
 	function loadConfig(selectedOption) {
diff --git a/modules-available/usblockoff/templates/usb-configuration.html b/modules-available/usblockoff/templates/usb-configuration.html
index fdfb0793..4b0f1d58 100644
--- a/modules-available/usblockoff/templates/usb-configuration.html
+++ b/modules-available/usblockoff/templates/usb-configuration.html
@@ -10,9 +10,7 @@
 						<label>{{name}}</label>
 					</div>
 					<div class="col-sm-7">
-						<div class="col-sm-7">
-							<input class="form-control" name="{{name}}" id="{{name}}" value="{{value}}">
-						</div>
+						<input class="form-control" name="{{name}}" id="{{name}}" value="{{value}}">
 					</div>
 					<div class="col-sm-2">
 						<a class="btn btn-default" title="{{helptext}}">
@@ -39,9 +37,14 @@
 			<div class="pull-right">
 				<a class="btn btn-default" title="{{lang_howToRuleLang}}"
 					href="https://usbguard.github.io/documentation/rule-language.html"
-					style="margin-right: 3px;" target="_blank">
+					style="margin-right: -1px;" target="_blank">
 					<span class="glyphicon glyphicon-question-sign"></span>
 				</a>
+				<a class="btn btn-success" onclick="loadAddGenericRuleModal();"
+					style="margin-right: 3px; float: none;">
+					<span class="glyphicon glyphicon-plus"></span>
+					<span>{{lang_genericRule}}</span>
+				</a>
 				<a class="btn btn-success" style="float: right;" onclick="loadAddDeviceModal();">
 					<span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span>
 					<span>{{lang_devices}}</span>
@@ -70,7 +73,7 @@
 			<div class="modal-body" id="myModalBody"></div>
 			<div class="modal-footer">
 				<a class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</a>
-				<button id="myModalAddButton" class="btn btn-success" type="button" onclick="addDevices();">
+				<button id="myModalAddButton" class="btn btn-success" type="button">
 					<span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span>
 					<span id="myModalAddButtonText"></span>
 				</button>
@@ -80,12 +83,10 @@
 </div>
 
 <script type="text/javascript">
-	$('a.btn[title]').tooltip({placement: "left", html: true});
-	//var configID = $('#select_config option:selected').val();
-	//$('#deleteConfigButton').val(configID);
+	$('a.btn[title]').tooltip({placement: "auto", html: true});
 
 	function loadAddDeviceModal() {
-		// TODO Change text of the MODAL!!
+		// TODO: Make "Device list" a lang Tag...
 		$('#myModalHeader').text("Device list").css("font-weight", "Bold");
 		$('#myModalAddButton').attr("form", "addDevicesForm");
 		$('#myModal .modal-dialog').css('width', '60%');
@@ -93,4 +94,14 @@
 		$('#myModal').modal('show');
 		$('#myModalBody').load("?do=usblockoff&action=deviceList");
 	}
+
+	function loadAddGenericRuleModal() {
+		// TODO: see todo above
+		$('#myModalHeader').text("Add generic rule").css("font-weight", "Bold");
+		$('#myModalAddButton').attr("form", "addGenericRuleForm");
+		$('#myModal .modal-dialog').css('width', '60%');
+		$('#myModal .modal-dialog').css('min-width', '60%');
+		$('#myModal').modal('show');
+		$('#myModalBody').load("?do=usblockoff&action=genericRuleBuilder");
+	}
 </script>
diff --git a/modules-available/usblockoff/templates/usb-device-list.html b/modules-available/usblockoff/templates/usb-device-list.html
index a2964987..b5cc82b0 100644
--- a/modules-available/usblockoff/templates/usb-device-list.html
+++ b/modules-available/usblockoff/templates/usb-device-list.html
@@ -52,7 +52,7 @@
 		</div>
 
 		<div class="panel panel-default">
-			<div class="panel-heading">Rule Options</div>
+			<div class="panel-heading">{{lang_ruleOptions}}</div>
 			<div class="panel-body">
 				<div class="list-group">
 
@@ -72,6 +72,9 @@
 	$('.settings-bs-switch').bootstrapSwitch({size: 'small'});
 	countSelected();
 
+	// Add handler to the modal Button.
+	$('#myModalAddButton').unbind().click(addDevices);
+
 	function clickRow(tbody, uid) {
 		$(tbody).toggleClass('selected');
 		countSelected();