diff options
Diffstat (limited to 'modules-available/usblockoff/templates')
5 files changed, 282 insertions, 202 deletions
diff --git a/modules-available/usblockoff/templates/usb-add-generic-rule.html b/modules-available/usblockoff/templates/usb-add-generic-rule.html index 07729db4..77b5f13e 100644 --- a/modules-available/usblockoff/templates/usb-add-generic-rule.html +++ b/modules-available/usblockoff/templates/usb-add-generic-rule.html @@ -18,8 +18,10 @@ <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"> @@ -64,6 +66,7 @@ </div> + <!-- <div id="expertMode" style="display: none;"> <div class="list-group-item"> @@ -132,7 +135,7 @@ </div> </div> - +--> </div> </div> </div> @@ -140,16 +143,26 @@ </form> </div> -<script type="text/javascript"> - $('a.btn[title]').tooltip({placement: "auto", html: true}); +<div class="pull-right"> + <a href="?do=usblockoff&show=edit-config&configid={{configid}}" class="btn btn-default">Cancel</a> + <button type="submit" class="btn btn-primary"> + <span class="glyphicon glyphicon-floppy-disk"></span> {{lang_save}} + </button> +</div> - var contains = true; - var c = $('#contains'); - c.bootstrapSwitch(); - c.on('switchChange.bootstrapSwitch', function(event, state) { - contains = state; +<script type="text/javascript"> + document.addEventListener("DOMContentLoaded", function(event) { + $('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(); @@ -169,27 +182,17 @@ 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 one-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'); + var rule = {}; + rule['target'] = $('#prop-action').val(); + rule['id'] = 0; + var attribute = {}; + attribute['prop'] = 'with-interface'; + attribute['value'] = $('#casual_selected option:selected').val(); + rule['attributes'] = []; + rule['attributes'].push(attribute); + + // TODO: SEND RULE TO PHO } </script>
\ No newline at end of file diff --git a/modules-available/usblockoff/templates/usb-configuration-table.html b/modules-available/usblockoff/templates/usb-configuration-table.html index eb3a8839..3ceebce5 100644 --- a/modules-available/usblockoff/templates/usb-configuration-table.html +++ b/modules-available/usblockoff/templates/usb-configuration-table.html @@ -6,6 +6,7 @@ </div> </div> </div> +<!-- <div class="row"> <div class="col-md-12"> <table id="configurationTable" class="table table-condensed table-hover stupidtable"> @@ -43,9 +44,83 @@ </a> </div> </div> + </div> --> +</div> + + +<ul class="nav nav-tabs"> + <li class="active"><a data-toggle="tab" href="#configTableMenu">{{lang_editConfig}}</a></li> + <li><a data-toggle="tab" href="#assignMenu">{{lang_assingMenu}}</a></li> +</ul> + +<div class="tab-content"> + <div id="configTableMenu" class="tab-pane fade in active"> + <div class="panel panel-default"> + <div class="panel-heading">{{lang_configurationTable}}</div> + <div class="panel-body"> + <div class="list-group"> + + <div class="row"> + <div class="col-md-12"> + <table id="configurationTable" class="table table-condensed table-hover stupidtable"> + <thead> + <tr> + <th data-sort="string">{{lang_serverName}}</th> + <th>{{lang_ruleInfoTODO}}</th> + <th>{{lang_edit}}</th> + <th>{{lang_delete}}</th> + </tr> + </thead> + <tbody> + {{#config_list}} + <tr> + <td data-sort-value="{{config_name}}">{{config_name}}</td> + <td>TODO: Show Rule information here</td> + <td> + <a class="btn btn-xs btn-info" href="?do=usblockoff&show=edit-config&configid={{config_id}}"> + <span class="glyphicon glyphicon-edit"></span> + </a> + </td> + <td> + <a class="btn btn-xs btn-danger" onclick="deleteConfig(event, {{config_id}});"> + <span class="glyphicon glyphicon-trash"></span> + </a> + </td> + </tr> + {{/config_list}} + </tbody> + </table> + <div class="buttonbar text-right"> + <a class="btn btn-success" href="?do=usblockoff&show=edit-config&configid=new-default"> + <span class="glyphicon glyphicon-plus"></span> + {{lang_configuration}} + </a> + </div> + </div> + </div> + + </div> + </div> + </div> + </div> + <div id="assignMenu" class="tab-pane fade"> + <div class="panel panel-default"> + <div class="panel-heading">{{lang_configurationTable}}</div> + <div class="panel-body"> + <div class="list-group"> + + <h3>Work in progress ...</h3> + <p>Todo: Implement this.</p> + <p>Or not.</p> + <p>¯\_(ツ)_/¯</p> + + </div> + </div> + </div> </div> </div> + <script> function deleteConfig(event, id) { event.preventDefault(); diff --git a/modules-available/usblockoff/templates/usb-device-list.html b/modules-available/usblockoff/templates/usb-device-list.html index a7c9afed..ea321008 100644 --- a/modules-available/usblockoff/templates/usb-device-list.html +++ b/modules-available/usblockoff/templates/usb-device-list.html @@ -1,79 +1,86 @@ -<div> - <form method="post" action="?do=usblockoff" id="addDevicesForm"> - <input type="hidden" name="token" value="{{token}}"> - <input type="hidden" name="action" value="addDevices"> - - <div class="input-group" id="search"> - <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> - <input type="text" id="myInput" class="form-control" onkeyup="search()" placeholder="Search for .." - style="font-size: 16px;"/> - <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span> - <select class="form-control" id="searchFor" style="font-size: 16px;" onchange="search()"> - <option value="0" select>Name</option> - <option value="1">Date / Time</option> - <option value="2">User Information</option> - <option value="3">USB Information</option> - <option value="4">Rules Information</option> - </select> - </div> - - <div style="max-height: 800px; overflow-x: auto;"> - <table class="table table-hover" id="myTable"> - <thead> - <tr> - <th width="1" style="text-align: center;">Name</th> - <th width="1" style="text-align: center;">Time</th> - <th width="1">User Info</th> - <th width="1">USB Info</th> - <th width="1">Rule Info</th> - </tr> - </thead> - {{#list}} - <input type="hidden" id="{{uid}}-prop-name" value="{{name}}"> - <input type="hidden" id="{{uid}}-prop-id" value="{{id}}"> - <input type="hidden" id="{{uid}}-prop-serial" value="{{serial}}"> - <input type="hidden" id="{{uid}}-prop-via-port" value="{{via-port}}"> - <input type="hidden" id="{{uid}}-prop-hash" value="{{hash}}"> - <input type="hidden" id="{{uid}}-prop-parent-hash" value="{{parent-hash}}"> - <input type="hidden" id="{{uid}}-prop-with-interface" value="{{with-interface}}"> - - <tbody onclick="clickRow(this, {{uid}});" id="{{uid}}"> - <tr> - <td nowrap align="center" style="vertical-align: middle;"><label>{{name}}</label></td> - <td nowrap align="center" style="vertical-align: middle;">{{time}}<br>{{date}}</td> - <td nowrap><font size="0">User: {{user}}<br>Location: {{location}}<br>Client: {{clientip}}</font></td> - <td nowrap><font size="0">id: {{id}}<br>Serial: {{serial}}<br>via-port: {{via-port}}</font></td> - <td nowrap><font size="0">hash: {{hash}}<br>parent-hash: {{parent-hash}}<br>with-interface: - {{with-interface}}</font></td> - </tr> - </tbody> - {{/list}} - </table> - </div> - - <div class="panel panel-default"> - <div class="panel-heading">{{lang_ruleOptions}}</div> - <div class="panel-body"> - <div class="list-group"> - <div id="settingsDIV"> - {{#settings}} - {{{settingHtml}}} - {{/settings}} - </div> +<form method="post" action="?do=usblockoff" id="addDevicesForm"> + <input type="hidden" name="token" value="{{token}}"> + <input type="hidden" name="action" value="addDevices"> + <input type="hidden" name="rules" value="" id="rules"> + <input type="hidden" name="configid" value="{{configid}}" id="configid"> + + <div class="input-group" id="search"> + <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> + <input type="text" id="myInput" class="form-control" onkeyup="search()" placeholder="Search for .." + style="font-size: 16px;"/> + <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span> + <select class="form-control" id="searchFor" style="font-size: 16px;" onchange="search()"> + <option value="0" select>Name</option> + <option value="1">Date / Time</option> + <option value="2">User Information</option> + <option value="3">USB Information</option> + <option value="4">Rules Information</option> + </select> + </div> + + <div style="max-height: 800px; overflow-x: auto;"> + <table class="table table-hover" id="myTable"> + <thead> + <tr> + <th width="1" style="text-align: center;">Name</th> + <th width="1" style="text-align: center;">Time</th> + <th width="1">User Info</th> + <th width="1">USB Info</th> + <th width="1">Rule Info</th> + </tr> + </thead> + {{#list}} + <input type="hidden" id="{{uid}}-prop-name" value="{{name}}"> + <input type="hidden" id="{{uid}}-prop-id" value="{{id}}"> + <input type="hidden" id="{{uid}}-prop-serial" value="{{serial}}"> + <input type="hidden" id="{{uid}}-prop-via-port" value="{{via-port}}"> + <input type="hidden" id="{{uid}}-prop-hash" value="{{hash}}"> + <input type="hidden" id="{{uid}}-prop-parent-hash" value="{{parent-hash}}"> + <input type="hidden" id="{{uid}}-prop-with-interface" value="{{with-interface}}"> + + <tbody onclick="clickRow(this, {{uid}});" id="{{uid}}"> + <tr> + <td nowrap align="center" style="vertical-align: middle;"><label>{{name}}</label></td> + <td nowrap align="center" style="vertical-align: middle;">{{time}}<br>{{date}}</td> + <td nowrap><font size="0">User: {{user}}<br>Location: {{location}}<br>Client: {{clientip}}</font></td> + <td nowrap><font size="0">id: {{id}}<br>Serial: {{serial}}<br>via-port: {{via-port}}</font></td> + <td nowrap><font size="0">hash: {{hash}}<br>parent-hash: {{parent-hash}}<br>with-interface: + {{with-interface}}</font></td> + </tr> + </tbody> + {{/list}} + </table> + </div> + + <div class="panel panel-default"> + <div class="panel-heading">{{lang_ruleOptions}}</div> + <div class="panel-body"> + <div class="list-group"> + <div id="settingsDIV"> + {{#settings}} + {{{settingHtml}}} + {{/settings}} </div> </div> </div> + </div> + <div class="pull-right"> + <a href="?do=usblockoff&show=edit-config&configid={{configid}}" class="btn btn-default">Cancel</a> + <button id="addButton" class="btn btn-success" type="submit" onclick="addDevices();"> + <span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span> + <span id="addButtonText"></span> + </button> + </div> - </form> -</div> +</form> <script type="text/javascript"> - $('a.btn[title]').tooltip(); - $('.settings-bs-switch').bootstrapSwitch({size: 'small'}); - countSelected(); - // Add handler to the modal Button. - $('#myModalAddButton').unbind().click(addDevices); + document.addEventListener("DOMContentLoaded", function(event) { + $('a.btn[title]').tooltip(); + $('.settings-bs-switch').bootstrapSwitch({size: 'small'}); + countSelected(); + }); function clickRow(tbody, uid) { $(tbody).toggleClass('selected'); @@ -83,14 +90,16 @@ function countSelected() { var numSelected = $('.selected').length; if (numSelected == 0) { - $('#myModalAddButton').prop('disabled', true); + $('#addButton').prop('disabled', true); + //$('#addButton').addClass('disabled'); } else { - $('#myModalAddButton').prop('disabled', false); + $('#addButton').prop('disabled', false); + //$('#addButton').removeClass('disabled'); } if (numSelected == 1) { - $('#myModalAddButtonText').text(' ' + numSelected + ' {{lang_device}}'); + $('#addButtonText').text(' ' + numSelected + ' {{lang_device}}'); } else { - $('#myModalAddButtonText').text(' ' + numSelected + ' {{lang_devices}}'); + $('#addButtonText').text(' ' + numSelected + ' {{lang_devices}}'); } } @@ -117,29 +126,27 @@ } function addDevices() { + var rules = []; $('.selected').each(function () { - var rule = $('#prop-action').val(); + var rule = {}; + rule['target'] = $('#prop-action').val(); + rule['id'] = 0; + rule['attributes'] = []; + var selected = $(this); $('#settingsDIV .settings-bs-switch').each(function () { if ($(this).is(":checked")) { - var settingname = $(this).attr('name').substring(5); - var info = $('#' + $(selected).attr('id') + '-' + $(this).attr('name')); - - if (settingname == 'id' || settingname == 'with-interface') { - rule += ' ' + settingname + ' ' + info.val(); - } else { - rule += ' ' + settingname + ' "' + info.val() + '"'; - } + var attr = {}; + attr['prop'] = $(this).attr('name').substring(5); + attr['value'] = $('#' + $(selected).attr('id') + '-' + $(this).attr('name')).val(); + + rule['attributes'].push(attr); } }); - if ($('#rules').val() != "") { - $('#rules').val($('#rules').val() + "\r\n"); - } - $('#rules').val($('#rules').val() + rule); + rules.push(rule); }); - $('#myModal').modal('toggle'); + $('#rules').val(JSON.stringify(rules)); } - </script> <style type='text/css'> diff --git a/modules-available/usblockoff/templates/usb-edit-config.html b/modules-available/usblockoff/templates/usb-edit-config.html index fc7aabfb..8e75b96d 100644 --- a/modules-available/usblockoff/templates/usb-edit-config.html +++ b/modules-available/usblockoff/templates/usb-edit-config.html @@ -14,7 +14,7 @@ <label>{{lang_configName}}</label> </div> <div class="col-sm-7"> - <input required class="form-control" name="configName" id="configName" value="{{configName}}"> + <input required class="form-control" name="configName" id="configName" maxlength="50" value="{{configName}}"> </div> <div class="col-sm-2"> <a class="btn btn-default" title="{{lang_configName_helptext}}"> @@ -31,7 +31,6 @@ <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#rulesConfigMenu">{{lang_rulesConfig}}</a></li> <li><a data-toggle="tab" href="#deamonConfigMenu">{{lang_daemonConfig}}</a></li> - <li><a data-toggle="tab" href="#assignMenu">{{lang_assignMenu}}</a></li> </ul> <div class="tab-content"> @@ -45,17 +44,11 @@ {{{daemonConfigHtml}} </div> </div> - <div id="assignMenu" class="tab-pane fade"> - <h3>Work in progress ...</h3> - <p>Todo: Implement this.</p> - <p>Or not.</p> - <p>¯\_(ツ)_/¯</p> - </div> </div> <div class="pull-right"> <!-- TODO: Reset Button should't call loadConfig instead do not reset the select input... but how? --> - <button class="btn btn-warning" type="reset" onclick="loadConfig($('#select_config'));"> + <button class="btn btn-warning" type="reset" onclick="location.reload();"> <!-- TODO: Add discardChanges to the main-> globalVariables --> <span class="glyphicon glyphicon-refresh"></span> {{lang_discardChanges}} </button> diff --git a/modules-available/usblockoff/templates/usb-rules-config.html b/modules-available/usblockoff/templates/usb-rules-config.html index 3827dc03..712eb2ab 100644 --- a/modules-available/usblockoff/templates/usb-rules-config.html +++ b/modules-available/usblockoff/templates/usb-rules-config.html @@ -1,105 +1,107 @@ <div class="panel panel-default"> - <div class="panel-heading">rules.conf - <input class="settings-bs-switch" id="rules_expert_Switch" type="checkbox" name="rules_expert_Switch" - data-on-text="Expert" data-off-text="Casual" data-size="small"> - </div> + <div class="panel-heading">rules.conf</div> <div class="panel-body" id="casualRules"> <div class="list-group"> - <!-- TEST_AREA --> - - <div> - Work in progress ... - </div> - - <!-- /TEST_AREA --> - - </div> - </div> + <input type="hidden" name="rules" value="" id="rules"> + <table id="rulesTable" class="table table-condensed table-hover"> + <thead> + <tr> + <th data-sort="string" width="20"><span class="glyphicon glyphicon-th-list"></span></th> + <th width="120">{{lang_target}}</th> + <th>{{lang_attributes}}</th> + <th>{{lang_edit}}</th> + <th>{{lang_delete}}</th> + </tr> + </thead> + <tbody id="tableBody" style="overflow: auto;"> - <div class="panel-body" id="expertRules" style="display: none;"> - <div class="list-group"> - <div class="form-group"> - <textarea class="form-control" rows="10" name="rules" id="rules">{{rules}}</textarea> - </div> + {{#rules}} + <tr id="{{id}}"> + <td class="drag-handler" style="cursor: pointer;text-align: center; vertical-align: middle;"> + <span class="glyphicon glyphicon-th-list"></span> + </td> + <td style="vertical-align: middle; text-align: center;">{{target}}</td> + <td> + {{#attributes}} + {{prop}}: {{value}}<br> + {{/attributes}} + {{#hasoverload}} + <a class="label label-default overload" style="background-color: #337ab7;" title="{{attributes_overload}}">+{{num_overload}}</a> + {{/hasoverload}} + </td> + <td> + <a class="btn btn-xs btn-info"> + <span class="glyphicon glyphicon-edit" onclick="alert('implement in new page');"></span> + </a> + </td> + <td> + <a class="btn btn-xs btn-danger" href="?do=usblockoff&action=deleteRule&id={{id}}&configid={{configid}}"> + <span class="glyphicon glyphicon-trash"></span> + </a> + </td> + </tr> + {{/rules}} + </tbody> + </table> <div class="pull-right"> - <a class="btn btn-default" title="{{lang_howToRuleLang}}" - href="https://usbguard.github.io/documentation/rule-language.html" - 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> + <a class="btn btn-success" href="?do=usblockoff&show=add-generic-rule&configid={{configid}}" + style="margin-right: 3px; float: right;"> + <span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span> <span>{{lang_genericRule}}</span> </a> - <a class="btn btn-success" style="float: right;" onclick="loadAddDeviceModal();"> + <a class="btn btn-success" href="?do=usblockoff&show=add-devices&configid={{configid}}" + style="margin-right: 3px;float: right;"> <span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span> <span>{{lang_devices}}</span> </a> </div> - </div></div> -</div> - -<div class="modal fade" id="myModal" tabindex="-1" role="dialog"> - <div class="modal-dialog"> - <div class="modal-content"> - <div class="modal-header" id="myModalHeader"></div> - <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"> - <span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span> - <span id="myModalAddButtonText"></span> - </button> - </div> </div> + </div> </div> - <script type="text/javascript"> + var rules = []; + var oldIndex = -1; document.addEventListener("DOMContentLoaded", function(event) { $('a.btn[title]').tooltip({placement: "auto", html: true}); - var s = $('#rules_expert_Switch'); - var mode = "casual"; - s.bootstrapSwitch(); - s.parent().parent().addClass('pull-right'); - s.parent().parent().css("margin", "-5px"); + $("#tableBody tr").each(function() { + rules.push(Number(this.id)); + }); + $('#rules').val(JSON.stringify(rules)); - s.on('switchChange.bootstrapSwitch', function(event, state) { - if (state) { - // Expert mode. - $('#casualRules').hide(); - $('#expertRules').show(); - mode = "expert"; - } else { - // Casual mode. - $('#expertRules').hide(); - $('#casualRules').show(); - mode = "casual"; - } + $('#tableBody').sortable({ + opacity: 0.8, + handle: '.drag-handler', + start: function(evt, ui) { + oldIndex = ui.item.index(); + }, + stop: function(evt, ui) { + updateTable(ui.item.index()); + }, }); + + $('a.overload').tooltip({placement: "auto", html: true}); }); - function loadAddDeviceModal() { - $('#myModalHeader').text("{{lang_device-list}}").css("font-weight", "Bold"); - $('#myModalAddButton').attr("form", "addDevicesForm"); - $('#myModal .modal-dialog').css('width', '60%'); - $('#myModal .modal-dialog').css('min-width', '60%'); - $('#myModal').modal('show'); - $('#myModalBody').load("?do=usblockoff&action=deviceList"); - } - function loadAddGenericRuleModal() { - $('#myModalHeader').text("{{lang_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"); + // Called after a drag & drop event is finished. + function updateTable(new_index) { + var old_i = -1; + if (oldIndex == -1) { + return; + } else { + old_i = oldIndex; + oldIndex = -1; + } + var rule = rules[old_i]; + rules.splice(old_i, 1); + rules.splice(new_index, 0, rule); + console.log(JSON.stringify(rules)); + $('#rules').val(JSON.stringify(rules)); } </script>
\ No newline at end of file |