code.grnet.gr Git - flowspy/blob - templates/apply.html

   1 {% extends "b3theme/base.html" %}
   2 {% load widget_tweaks %}
   3 {% load i18n %}
   4
   5 {% block title %}
   6         {% if edit %}
   7                 {% trans "Edit Rule" %} {{form.data.name}}
   8         {% else %}
   9                 {% trans "Create new Rule" %}
  10         {% endif %}
  11 {% endblock %}
  12
  13 {% block breadcrumbs %}
  14  <li class="active"><span class="divider">/</span>
  15         {% if edit %}
  16                 {% trans "Edit rule" %} {{form.data.name}}
  17         {% else %}
  18         {% trans "Create rule" %}
  19         {% endif %}
  20 </li>
  21 {% endblock %}
  22 {% block extrahead %}
  23     <link href="{{STATIC_URL}}b3theme/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
  24     <link href="{{STATIC_URL}}b3theme/css/plugins/timeline/timeline.css" rel="stylesheet">
  25     <link href="{{STATIC_URL}}datepicker/css/datepicker.css" rel="stylesheet">
  26
  27 {% endblock %}
  28
  29 {% block extraheadbottom %}
  30 <style type="text/css">
  31
  32
  33
  34 #rule_form_container input:not([type="submit"]), #rule_form_container select {
  35     background: none repeat scroll 0 0 #FFFFFF;
  36     border: 1px solid #DDDDDD;
  37         -moz-border-radius: 3px; border-radius:3px; -webkit-border-radius: 3px;
  38     float: left;
  39     font-family: "Century Gothic",Helvetica,sans-serif;
  40     font-size: 13px;
  41     outline: medium none;
  42     padding: 5px;
  43     width: 180px;
  44 }
  45
  46
  47 #rule_form_container{
  48         -moz-border-radius: 10px 10px 10px 10px; border-radius:10px; -webkit-border-radius: 10px;
  49         -moz-box-shadow: 0 0 3px #AAAAAA; box-shadow: 0 0 3px #AAAAAA; -webkit-box-shadow: 0 0 3px #AAAAAA;
  50         background-color: #F9F9F9;
  51         border: 2px solid #FFFFFF;
  52         overflow: hidden;
  53     width: 800px;
  54         }
  55 #rule_form_container div label {
  56     color: #666666;
  57     float: left;
  58     font-family: "Century Gothic",Helvetica,sans-serif;
  59     font-size: 15px;
  60     font-weight: bold;
  61     line-height: 26px;
  62     margin-right: 15px;
  63     text-align: right;
  64     text-shadow: 1px 1px 1px #FFFFFF;
  65     width: 180px;
  66 }
  67 #rule_form_container p.submit {
  68     background: none repeat scroll 0 0 transparent;
  69     border: medium none;
  70     box-shadow: none;
  71 }
  72
  73 .errorlist{
  74         list-style: none outside none;
  75 }
  76
  77 </style>
  78  <link href="{{STATIC_URL}}js/select2/select2.css" rel="stylesheet">
  79  <link href="{{STATIC_URL}}js/select2/select2-bootstrap.css" rel="stylesheet">
  80 {% endblock %}
  81
  82 {% block pagejsbottom %}
  83 <script type="text/javascript" src="{{STATIC_URL}}datepicker/js/bootstrap-datepicker.js"></script>
  84 <script type="text/javascript" src="{{STATIC_URL}}js/select2/select2.js"></script>
  85 <script>
  86         $(document).ready( function(){
  87                 $('#id_then').removeAttr("multiple");
  88                 {% if user.is_superuser %}
  89                         $("#id_applier").select2();
  90                 {% endif %}
  91                 $("#id_protocol").select2();
  92                 $("#id_fragmenttype").select2();
  93                 $("#id_then").select2();
  94
  95                 reArrangeSelect("id_sourceport");
  96                 $("#id_sourceport").select2({
  97                         placeholder: "Source Port(s)"
  98                 });
  99                 reArrangeSelect("id_destinationport");
 100                 $("#id_destinationport").select2({
 101                         placeholder: "Destination Port(s)"
 102                 });
 103                 reArrangeSelect("id_port");
 104                 $("#id_port").select2({
 105                         placeholder: "Port(s)"
 106                 });
 107                 $('#id_expires').datepicker({
 108                         startDate: '+1d',
 109                         endDate: '+10d'
 110                 });
 111                 $('#setFromAll').click(function(){
 112                         $("#id_source").val('0.0.0.0/0');
 113                 });
 114
 115
 116                 /*$('#id_then').attr("multiple", "");*/
 117                 /*
 118                 $( "#id_expires" ).datepicker({ dateFormat: 'yy-mm-dd' , maxDate: '+10d', minDate: '+1d', changeMonth: false, changeYear: false }).datepicker( $.datepicker.regional[ "el" ] );
 119                 */
 120                 {% comment %}
 121                 $('#then_diag').dialog({
 122                         height: 220,
 123             width: 340,
 124                         modal: true,
 125                         autoOpen: false,
 126                         buttons: {
 127                 '{% trans "Add" %}': function() {
 128                         $.ajax({
 129                         url:"{% url add-rate-limit %}",
 130                         data:$("#add_rl_form").serialize(),
 131                         type: "POST",
 132                         cache: false,
 133                         success:function(data){
 134                                         try {
 135                                                 value = data.pk;
 136                                                 text = data.value;
 137                                                 $('#id_then').append($("<option></option>").attr("value",value).text(text));
 138                                                 $('#then_diag').dialog('close');
 139                                         }
 140                                         catch (exception) {
 141                                                 $('#then_diag').html(data);
 142                                         }
 143                                 }
 144                                 });
 145                 },
 146                 '{% trans "Cancel" %}': function() {
 147                         $('#then_diag').dialog('close');
 148                 }
 149         }
 150                 });
 151                 {% endcomment %}
 152
 153                 {% comment %}
 154                 $("#new_then_actions").button({
 155             icons: {
 156                 primary: "ui-icon-plusthick"
 157             },
 158                         })
 159                         .click(function(){
 160                                 $.ajax({
 161                                         url: "{% url add-rate-limit %}",
 162                                         cache: false,
 163                                         success: function(data){
 164                                                 $("#then_diag").html(data);
 165                                         }
 166                                 });
 167                                 $('#then_diag').dialog('open');
 168                                 return false;
 169                         });
 170
 171                         {% endcomment %}
 172                         $(".new_port").click(function(){
 173                                 $(".new_port").hide();
 174                                 $("#addnewport").show()
 175                                 $.ajax({
 176                                         url: "{% url add-port %}",
 177                                         cache: false,
 178                                         success: function(data){
 179                                                 $("#port_diag").html(data);
 180                                         }
 181                                 });
 182                                 // $('#port_diag').dialog('open');
 183                                 return false;
 184                         });
 185
 186                         function reArrangeSelect(elementId) {
 187                            $("#"+elementId).html($("#"+elementId+" option").sort(function(a, b) {
 188                                 return parseInt(a.text) == parseInt(b.text) ? 0 : parseInt(a.text) < parseInt(b.text) ? -1 : 1
 189                         }));
 190                         }
 191         });
 192
 193 </script>
 194 {% endblock %}
 195 {% block contentplaceholder %}
 196
 197             <div class="row">
 198                 <div class="col-lg-12">
 199                     <h1 class="page-header"> {% if edit %}{% trans "Edit rule" %}: {{form.data.name}}
 200     {% else %}{% trans "Apply for a new rule" %}
 201     {% endif %}</h1>
 202                 </div>
 203                 <!-- /.col-lg-12 -->
 204             </div>
 205
 206 <div class="row">
 207                 <div class="col-lg-8">
 208                         <div class="panel panel-primary">
 209                         <div class="panel-heading">
 210                             <i class="fa fa-shield fa-fw"></i> Firewall Rule
 211                         </div>
 212                         <!-- /.panel-heading -->
 213                         <div class="panel-body">
 214     <form method="POST" role="form" class="form-horizontal">
 215
 216             {% csrf_token %}
 217             {% load unescape %}
 218             {% if form.non_field_errors %}
 219             <div class="form-group {% if form.non_field_errors %} has-error {% endif %}" style="color: #A94442;">
 220                 {{ form.non_field_errors|unescape}}
 221                 </div>
 222             {% endif %}
 223             <fieldset {%  if edit %}  style="display:none;" {%  endif %}>
 224
 225                  <div class="form-group {% if form.name.errors %} has-error {% endif %}">
 226         <label for="id_name" class="col-md-2 control-label"><b>{% trans "Name" %}</b></label>
 227         <div class="col-md-8">
 228             {% render_field form.name class+="form-control" placeholder="Eg. ntpattack. A unique identifier will be added as a suffix" %}
 229             {% if form.name.errors %} <span class="help-block"> {{ form.name.errors|join:", " }} </span>
 230             {% endif %}
 231         </div>
 232         </div>
 233             </fieldset>
 234             {% if user.is_superuser %}
 235             <fieldset>
 236                 <hr>
 237                    <div class="form-group {% if form.applier.errors %} has-error {% endif %}">
 238                         <label for="id_name" class="col-md-2 control-label"><b>{% trans "Applier" %}</b></label>
 239                         <div class="col-md-8">
 240                             {% render_field form.applier class+="form-control" %}
 241                             {% if form.applier.errors %} <span class="help-block"> {{ form.applier.errors|join:", " }} </span>
 242                             {% endif %}
 243                         </div>
 244                         </div>
 245                 </fieldset>
 246                 {% else %}
 247                  <input type="hidden" id="id_applier" name="applier" value="{{applier}}"/>
 248                 {% endif %}
 249             <fieldset>
 250                 <hr>
 251                 <div class="form-group {% if form.source.errors %} has-error {% endif %}">
 252                         <label for="id_source" class="col-md-2 control-label"><b>{% trans "Source Address" %}</b></label>
 253                         <div class="col-md-6">
 254                             {% render_field form.source class+="form-control" placeholder=form.source.help_text %}
 255                             {% if form.source.errors %} <span class="help-block"> {{ form.source.errors|join:", " }} </span>
 256                             {% endif %}
 257                         </div>
 258                         <div class="col-md-2">
 259                             <img src="{{STATIC_URL}}threat_source.png" style="height: 30px;"/> &nbsp;&nbsp;<button type="button" class="btn btn-md btn-info btn-outline" id="setFromAll">Any</button>
 260                         </div>
 261                         </div>
 262
 263                                 <div class="form-group {% if form.destination.errors %} has-error {% endif %}">
 264                         <label for="id_destination" class="col-md-2 control-label"><b>{% trans "Destination Address" %}</b></label>
 265                         <div class="col-md-6">
 266                             {% render_field form.destination class+="form-control" placeholder=form.destination.help_text %}
 267                             {% if form.destination.errors %} <span class="help-block"> {{ form.destination.errors|join:", " }} </span>
 268                             {% endif %}
 269                         </div>
 270                         <div class="col-md-2">
 271                             <img src="{{STATIC_URL}}secure_destination.png" style="height: 30px;"/>
 272                         </div>
 273                         </div>
 274
 275                                 <div class="form-group {% if form.protocol.errors %} has-error {% endif %}">
 276                         <label for="id_protocol" class="col-md-2 control-label" style="font-weight: normal;">{% trans "Protocol(s)" %}</label>
 277                         <div class="col-md-8">
 278                             {% render_field form.protocol class+="form-control" %}
 279                             {% if form.protocol.errors %} <span class="help-block"> {{ form.protocol.errors|join:", " }} </span>
 280                             {% endif %}
 281                         </div>
 282                         </div>
 283
 284                         <div class="form-group {% if form.fragmenttype.errors %} has-error {% endif %}">
 285                         <label for="id_fragmenttype" class="col-md-2 control-label" style="font-weight: normal;">{% trans "Fragment Type" %}</label>
 286                         <div class="col-md-8">
 287                             {% render_field form.fragmenttype class+="form-control" %}
 288                             {% if form.fragmenttype.errors %} <span class="help-block"> {{ form.fragmenttype.errors|join:", " }} </span>
 289                             {% endif %}
 290                         </div>
 291                         </div>
 292                         </fieldset>
 293                         <!--  PORTS -->
 294                         <fieldset>
 295                 <hr>
 296                         <div class="form-group ">
 297                                 <label class="col-md-10" style="font-weight: normal;"><small>{% trans "Select source/destination port(s), or select common port(s) for both source/destination" %}. {{ form.sourceport.help_text }}</small></label>
 298                         </div>
 299                         <div class="form-group {% if form.sourceport.errors %} has-error {% endif %} {% if form.destinationport.errors %} has-error {% endif %} {% if form.port.errors %} has-error {% endif %}">
 300                         <label for="id_sourceport" class="col-md-2 control-label" style="font-weight: normal;">{% trans "Src. Port(s)" %}</label>
 301                         <div class="col-md-2">
 302                             {% render_field form.sourceport class+="form-control"  %}
 303                             {% if form.sourceport.errors %} <span class="help-block"> {{ form.sourceport.errors|join:", " }} </span>
 304                             {% endif %}
 305                         </div>
 306                                 <label for="id_destinationport" class="col-md-1 control-label" style="font-weight: normal;">{% trans "Dest. Port(s)" %}</label>
 307                         <div class="col-md-2">
 308                             {% render_field form.destinationport class+="form-control"  %}
 309                             {% if form.destinationport.errors %} <span class="help-block"> {{ form.destinationport.errors|join:", " }} </span>
 310                             {% endif %}
 311                         </div>
 312                         <label for="id_port" class="col-md-1 control-label" style="font-weight: normal;">{% trans "Port(s)" %}</label>
 313                         <div class="col-md-2">
 314                             {% render_field form.port class+="form-control"  %}
 315                             {% if form.port.errors %} <span class="help-block"> {{ form.port.errors|join:", " }} </span>
 316                             {% endif %}
 317                         </div>
 318                         </div>
 319                                 <div class="form-group ">
 320                                 <label class="col-md-2" style="font-weight: normal;"></label>
 321                                 <div class="col-md-8">
 322                                         <button class="new_port btn-info btn btn-md btn-outline" type="button">{% trans "Add Port" %}</button>
 323                                 </div>
 324                         </div>
 325                         <div class="form-group " id="addnewport" style="display:none">
 326                                 <label class="col-md-2  control-label" style="font-weight: normal;">{% trans "Add New Port" %}</label>
 327                                 <div class="col-md-8">
 328                                         <div id="port_diag" title="{% trans "Add new port" %}">
 329                                 </div>
 330                         </div>
 331                                 </fieldset>
 332
 333                         <!--  END OF PORTS -->
 334
 335             <fieldset>
 336                                 <hr>
 337
 338                 <div class="form-group {% if form.then.errors %} has-error {% endif %}">
 339                         <label for="id_then" class="col-md-2 control-label">{% trans "Then Actions" %}</label>
 340                         <div class="col-md-8">
 341                             {% render_field form.then class+="form-control" %}
 342                             {% if form.then.errors %} <span class="help-block"> {{ form.then.errors|join:", " }} </span>
 343                             {% endif %}
 344                         </div>
 345                         </div>
 346
 347             </fieldset>
 348             <fieldset>
 349                                 <hr>
 350                 <div class="form-group {% if form.expires.errors %} has-error {% endif %}">
 351                         <label for="id_then" class="col-md-2 control-label">{% trans "Expires" %}</label>
 352                         <div class="col-md-8">
 353                             {% render_field form.expires class+="form-control datepicker" data-date-format="yyyy-mm-dd"  %}
 354                             {% if form.expires.errors %} <span class="help-block"> {{ form.expires.errors|join:", " }} </span>
 355                             {% endif %}
 356                         </div>
 357                         </div>
 358             </fieldset>
 359
 360
 361             <fieldset>
 362                         <hr>
 363
 364                                 <div class="form-group {% if form.comments.errors %} has-error {% endif %}">
 365                         <label for="id_comments" class="col-md-2 control-label">{% trans "Comments" %}</label>
 366                         <div class="col-md-8">
 367                             {% render_field form.comments class+="form-control" placeholder="Give a short description of the intended use of this rule, that justifies the parameter selection above. Feel free to include any additional comments." %}
 368                             {% if form.comments.errors %} <span class="help-block"> {{ form.comments.errors|join:", " }} </span>
 369                             {% endif %}
 370                         </div>
 371                         </div>
 372
 373
 374             </fieldset>
 375                          <div class="form-group">
 376                                 <div class="col-md-2"></div>
 377                                  <div class="col-md-8">
 378                         <button type="submit" id="applybutton" value="{% trans 'Apply' %}" class="btn btn-md btn-primary">Apply</button>
 379                                 </div>
 380                         </div>
 381
 382
 383     </form>
 384 </div></div></div></div>
 385 <div id="then_diag" title="Add new rate-limit value">
 386 </div>
 387 <!-- <div id="port_diag" title="{% trans "Add new port" %}">
 388 </div> -->
 389
 390 {% endblock %}