diff --git a/static/css/base.css b/static/css/base.css
index 58e30a50a0d2c863a86c13512e99083dec47738e..706812e0158650e40be555871d45d06261c889bf 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -238,7 +238,7 @@ form.update textarea {
}
textarea#id_comments {
- width: 80%;
+ /*width: 80%;*/
}
.hidden {
diff --git a/static/secure_destination.png b/static/secure_destination.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c49a0cea5fd246227bd43576c20385cbb2b1f68
Binary files /dev/null and b/static/secure_destination.png differ
diff --git a/static/threat_source.png b/static/threat_source.png
new file mode 100644
index 0000000000000000000000000000000000000000..68e49246b764e5e0a8cdd5df1444dd0e54282ecd
Binary files /dev/null and b/static/threat_source.png differ
diff --git a/templates/apply.html b/templates/apply.html
index 99679d511f8fc4e516f840e451bb37b236e10c44..b132806a7638bab2f3b63fee06e44e1bcb9af7fd 100644
--- a/templates/apply.html
+++ b/templates/apply.html
@@ -155,197 +155,252 @@ th {
font-style: italic;
}
+div.roundbox, #portsacc, #id_comments{
+ background-color: #F4F4F4;
+ border: 1px solid #FFFFFF;
+ border-radius: 5px 5px 5px 5px;
+ box-shadow: 0 0 3px #AAAAAA;
+ clear: both;
+ float: left;
+ margin: 5px 0 5px 80px;
+ padding: 10px;
+ width: 620px;
+}
+#rule_form_wrapper{
+ margin: 15px auto;
+ position: relative;
+ text-align: center;
+ width: 800px;
+}
+
+#rule_form_container input:not([type="submit"]), #rule_form_container select {
+ background: none repeat scroll 0 0 #FFFFFF;
+ border: 1px solid #DDDDDD;
+ border-radius: 3px 3px 3px 3px;
+ float: left;
+ font-family: "Century Gothic",Helvetica,sans-serif;
+ font-size: 13px;
+ outline: medium none;
+ padding: 5px;
+ width: 180px;
+}
+
+#id_comments {
+ background: none repeat scroll 0 0 #FFFFFF;
+ border: 1px solid #DDDDDD;
+ border-radius: 3px 3px 3px 3px;
+ float: left;
+ font-family: "Century Gothic",Helvetica,sans-serif;
+ font-size: 13px;
+ outline: medium none;
+ padding: 5px;
+ width: 622px;
+}
+
+#rule_form_container{
+ background-color: #F9F9F9;
+ border: 2px solid #FFFFFF;
+ border-radius: 10px 10px 10px 10px;
+ box-shadow: 0 0 3px #AAAAAA;
+ overflow: hidden;
+ width: 800px;
+ }
+#rule_form_container div label {
+ color: #666666;
+ float: left;
+ font-family: "Century Gothic",Helvetica,sans-serif;
+ font-size: 15px;
+ font-weight: bold;
+ line-height: 26px;
+ margin-right: 15px;
+ text-align: right;
+ text-shadow: 1px 1px 1px #FFFFFF;
+ width: 180px;
+}
+#rule_form_container p.submit {
+ background: none repeat scroll 0 0 transparent;
+ border: medium none;
+ box-shadow: none;
+}
+
</style>
-<div align="center">
+<div align="center" id="rule_form_wrapper">
{% if edit %}<h3>{% trans "Edit rule" %}: {{form.data.name}}</h3>
{% else %}<h3>{% trans "Apply for a new rule" %}</h3>
{% endif %}
<form method="POST">
- {% csrf_token %}
- {% load unescape %}
- {% if form.non_field_errors %}
- <p class="error">
- {{ form.non_field_errors|unescape}}
- </p>
- {% endif %}
- <fieldset {% if edit %} style="display:none;" {% endif %}>
- <legend>
- {% trans "Rule Basic Info" %}
- </legend>
- <table>
- <tr>
- <th>
- {{ form.name.label_tag }}
- </th>
- <td>
- {{ form.name }}<span class="error">{{ form.name.errors|join:", " }}</span>
- </td>
- </tr>
- <tr class="help">
- <td>
- </td>
- <td>
+ <div id="rule_form_container">
+ {% csrf_token %}
+ {% load unescape %}
+ {% if form.non_field_errors %}
+ <p class="error">
+ {{ form.non_field_errors|unescape}}
+ </p>
+ {% endif %}
+ <fieldset {% if edit %} style="display:none;" {% endif %}>
+ <legend>
+ {% trans "Rule Basic Info" %}
+ </legend>
+ <div class="roundbox">
+ {{ form.name.label_tag }}{{ form.name }}
+ <br>
+ {% if form.name.errors %}
+ <br>
+ <p class="error" style="clear:both;">
+ {{ form.name.errors|join:", " }}
+ </p>
+ {% endif %}
+ <br>
+ <p style="clear:both;">
A unique identifier will be added as a name_suffix
- </td>
- </tr>
- </table>
- </fieldset>
- <fieldset>
- <legend>
- {% trans "Rule Match Conditions" %}
- </legend>
- <table>
+ </p>
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend>
+ {% trans "Rule Match Conditions" %}
+ </legend>
<input type="hidden" id="id_applier" name="applier" value="{{applier}}"/>
- <tr>
- <th>
- {{ form.source.label_tag }}
- </th>
- <td>
- {{ form.source }}<span class="error">{{ form.source.errors|join:", " }}</span>
- </td>
- </tr>
- <tr class="help">
- <td>
- </td>
- <td>
+ <div class="roundbox">
+ {{ form.source.label_tag }}{{ form.source }}<img src="/static/threat_source.png"/> {% if form.source.errors %}
+ <br>
+ <p class="error" style="clear:both;">
+ {{ form.source.errors|join:", " }}
+ </p>
+ {% endif %}
+ <br>
+ <p style="clear:both;">
{{ form.source.help_text }}
- </td>
- </tr>
- <tr>
- <th>
- {{ form.destination.label_tag }}
- </th>
- <td>
- {{ form.destination }}<span class="error">{{ form.destination.errors|join:", " }}</span>
- </td>
- </tr>
- <tr class="help">
- <td>
- </td>
- <td>
+ </p>
+ </div>
+ <div class="roundbox">
+ {{ form.destination.label_tag }}{{ form.destination }}<img src="/static/secure_destination.png"/> {% if form.destination.errors %}
+ <br>
+ <p class="error" style="clear:both;">
+ {{ form.destination.errors|join:", " }}
+ </p>
+ {% endif %}
+ <br>
+ <p style="clear:both;">
{{ form.destination.help_text }}
- </td>
- </tr>
- </table>
- <div id='portsacc' style="width: 500px;">
- <h3 style="padding: 0.5em 0.5em 0.5em 0.7em;">Advanced Settings (Ports)</h3>
- <div class='accord_wrapper' style="height: 452px !important;">
- Select source/destination port(s), or select common port(s) for both source/destination
- <table>
- <tr>
- <th>
- {{ form.sourceport.label_tag }}
- </th>
- <td>
- {{ form.sourceport }}
- <button class="new_port">
- Port
- </button>
- <span class="error">{{ form.sourceport.errors|join:", " }}</span>
- </td>
- </tr>
- <tr class="help">
- <td>
- </td>
- <td>
- {{ form.sourceport.help_text }}
- </td>
- </tr>
- <tr>
- <th>
- {{ form.destinationport.label_tag }}
- </th>
- <td>
- {{ form.destinationport }}
- <button class="new_port">
- Port
- </button>
- <span class="error">{{ form.destinationport.errors|join:", " }}</span>
- </td>
- </tr>
- <tr class="help">
- <td>
- </td>
- <td>
- {{ form.destinationport.help_text }}
- </td>
- </tr>
- <tr>
- <th>
- {{ form.port.label_tag }}
- </th>
- <td>
- {{ form.port }}
- <button class="new_port">
- Port
- </button>
- <span class="error">{{ form.port.errors|join:", " }}</span>
- </td>
- </tr>
- <tr class="help">
- <td>
- </td>
- <td>
- {{ form.port.help_text }}
- </td>
- </tr>
+ </p>
+ </div>
+ <div id='portsacc'>
+ <h3 style="padding: 0.5em 0.5em 0.5em 0.7em;">Advanced Settings (Ports)</h3>
+ <div class='accord_wrapper' style="height: 452px !important;">
+ Select source/destination port(s), or select common port(s) for both source/destination
+ <table>
+ <tr>
+ <th>
+ {{ form.sourceport.label_tag }}
+ </th>
+ <td>
+ {{ form.sourceport }}
+ <button class="new_port">
+ Port
+ </button>
+ <span class="error">{{ form.sourceport.errors|join:", " }}</span>
+ </td>
+ </tr>
+ <tr class="help">
+ <td>
+ </td>
+ <td>
+ {{ form.sourceport.help_text }}
+ </td>
+ </tr>
+ <tr>
+ <th>
+ {{ form.destinationport.label_tag }}
+ </th>
+ <td>
+ {{ form.destinationport }}
+ <button class="new_port">
+ Port
+ </button>
+ <span class="error">{{ form.destinationport.errors|join:", " }}</span>
+ </td>
+ </tr>
+ <tr class="help">
+ <td>
+ </td>
+ <td>
+ {{ form.destinationport.help_text }}
+ </td>
+ </tr>
+ <tr>
+ <th>
+ {{ form.port.label_tag }}
+ </th>
+ <td>
+ {{ form.port }}
+ <button class="new_port">
+ Port
+ </button>
+ <span class="error">{{ form.port.errors|join:", " }}</span>
+ </td>
+ </tr>
+ <tr class="help">
+ <td>
+ </td>
+ <td>
+ {{ form.port.help_text }}
+ </td>
+ </tr>
+ </div>
+ </table>
</div>
- </table>
- </div>
- </fieldset>
- <fieldset>
- <legend>
- {% trans "Rule Actions" %}
- </legend>
- <table>
- <tr>
- <th>
- {{ form.then.label_tag }}
- </th>
- <td>
- {{ form.then }}{% comment %}
- <button id="new_then_actions">
- Rate-limit
- </button>{% endcomment %}
- <span class="error">{{ form.then.errors|join:", " }}</span>
- </td>
- </tr>
- </table>
- </fieldset>
- <fieldset>
- <legend>
- {% trans "Expiration" %}
- </legend>
- <table>
- <tr>
- <th>
- {{ form.expires.label_tag }}
- </th>
- <td>
- {{ form.expires }}<span class="error">{{ form.expires.errors|join:", " }}</span>
- </td>
- </tr>
- </table>
- </fieldset>
- <fieldset>
- <legend>
- {% trans "Use/Comments" %}
- </legend>
- {% blocktrans %}
- <p>
- Give a short description of the intended use of this rule, that justifies the parameter selection above. Feel free to include any additional comments.
- </p>
- {% endblocktrans %}
+ </fieldset>
+ <fieldset>
+ <legend>
+ {% trans "Rule Actions" %}
+ </legend>
+ <div class="roundbox">
+ {{ form.then.label_tag }}{{ form.then }}{% comment %}
+ <button id="new_then_actions">
+ Rate-limit
+ </button>{% endcomment %}
+ {% if form.then.errors %}
+ <p class="error">
+ {{ form.then.errors|join:", " }}
+ </p>
+ {% endif %}
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend>
+ {% trans "Expiration" %}
+ </legend>
+ <div class="roundbox">
+ {{ form.expires.label_tag }}{{ form.expires }}
+ {% if form.expires.errors %}
+ <br>
+ <p class="error">
+ {{ form.expires.errors|join:", " }}
+ </p>
+ {% endif %}
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend>
+ {% trans "Use/Comments" %}
+ </legend>
+ {% blocktrans %}
+ <p class="roundbox">
+ Give a short description of the intended use of this rule, that justifies the parameter selection above. Feel free to include any additional comments.
+ </p>
+ {% endblocktrans %}
+ <p>
+ {{ form.comments }}
+ {% if form.errors %}
+ <br/>
+ <span class="error">{{ form.comments.errors|join:", " }}</span>{% endif %}
+ </p>
+ </fieldset>
<p>
- {{ form.comments }}
- {% if form.errors %}
- <br/>
- <span class="error">{{ form.comments.errors|join:", " }}</span>{% endif %}
+ <input type="submit" id="applybutton" value="{% trans "Apply" %}" />
</p>
- </fieldset>
- <p>
- <input type="submit" id="applybutton" value="{% trans "Apply" %}" />
- </p>
+ </div>
</form>
</div>
<div id="then_diag" title="Add new rate-limit value">