haproxy-wi/app/templates/add.html

437 lines
20 KiB
HTML

{% extends "base.html" %}
{% block title %}{{lang.menu_links.add_proxy.title}}{% endblock %}
{% block h2 %}{{lang.menu_links.add_proxy.title}}{% endblock %}
{% block content %}
{% from 'include/input_macros.html' import input, checkbox, select %}
{% set balance_params = {'roundrobin':'roundrobin','source':'source','leastconn':'leastconn','first':'first',
'rdp-cookie':'rdp-cookie', 'uri':'uri', 'uri whole':'uri whole', 'static-rr': 'static-rr',
'url_param userid':'url_param userid'} %}
{% set checks = {'':'Choose a custom health check','tcp-check':'Check a TCP Port', 'ssl-hello-chk':'Check a SSL Port',
'httpchk':'Check a HTTP service', 'ldap-check':'Check a LDAP service', 'mysql-check':'Check a MySql Service',
'pgsql-check':'Check a PgSQL Service', 'redis-check': 'Check a Redis Service', 'smtpchk':'Check a SMTP service'} %}
{% set observe = {'layer7':'layer7', 'layer4': 'layer4'} %}
{% set on_error = {'mark-down':'mark-down', 'fastinter': 'fastinter', 'fail-check':'fail-check',
'sudden-death':'sudden-death'} %}
{% set header_res = {'http-response': 'response', 'http-request': 'request'} %}
{% set header_params = {'add-header': 'add-header', 'set-header': 'set-header', 'del-header': 'del-header'} %}
{% set if_values = {'1':'Host name starts with','2':'Host name ends with','3':'Path starts with','4':'Path ends with', '6': 'Src ip'} %}
{% set force_close = {'0':'Off','1':'Server only','2':'Force close','3':'Pretend keep alive'} %}
<script src="/static/js/add.js"></script>
<script src="/static/js/edit_config.js"></script>
<script src="/static/js/le.js"></script>
<div id="tabs">
<ul>
<li><a href="#create" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.proxy}} - Roxy-WI">{{lang.words.create|title()}} {{lang.words.proxy}}</a></li>
<li><a href="#listen" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.listener|title()}} - Roxy-WI">{{lang.words.listener|title()}}</a></li>
<li><a href="#frontend" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.frontend|title()}} - Roxy-WI">{{lang.words.frontend|title()}}</a></li>
<li><a href="#backend" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.backend|title()}} - Roxy-WI">{{lang.words.backend|title()}}</a></li>
<li><a href="#ssl" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.upload|title()}} SSL {{lang.words.certs}} - Roxy-WI">SSL {{lang.words.certs}}</a></li>
<li><a href="#option" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.params|title()}} {{lang.words.templates}} - Roxy-WI">{{lang.words.params|title()}}</a></li>
<li><a href="#add-servers" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.servers|title()}} {{lang.words.templates}} - Roxy-WI">{{lang.words.servers|title()}}</a></li>
<li><a href="#userlist" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.userlists|title()}} - Roxy-WI">{{lang.words.userlists|title()}}</a></li>
<li><a href="#peers" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} peers - Roxy-WI">Peers</a></li>
<li><a href="#lists" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.and}} {{lang.words.upload}} {{lang.words.whitelists}} {{lang.words.or}} {{lang.words.blacklists}} - Roxy-WI">{{lang.words.lists|title()}}</a></li>
<li><a href="#maps" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.and}} {{lang.words.upload}} {{lang.words.maps}} - Roxy-WI">{{lang.words.maps|title()}}</a></li>
</ul>
<ul id='browse_histroy'></ul>
{% include 'include/add/add_proxy.html' %}
<div id="listen">
{% include 'include/add/listen.html' %}
</div>
<!-- Second tabs -->
<div id="frontend">
{% include 'include/add/frontend.html' %}
</div>
<!-- Third tabs -->
<div id="backend">
{% include 'include/add/backend.html' %}
</div>
<div id="ssl">
<table>
<caption><h3>SSL</h3></caption>
<tr class="overviewHead">
<td class="padding10 first-collumn" style="width: 30%;">{{lang.words.view|title()}} {{lang.words.cert2}}</td>
<td>
{{lang.words.upload|title()}} {{lang.words.certs}}
</td>
<td></td>
</tr>
<tr>
<td class="padding10 first-collumn">
{{ select('serv5', values=g.user_params['servers'], is_servers='true') }}
<button id="ssl_key_view" title="{{lang.words.view|title()}} {{lang.words.certs}}">{{lang.words.view|title()}}</button>
</td>
<td colspan="2" style="padding: 10px 0 10px 0;">
<span id="ajax-show-ssl"></span>
</td>
</tr>
<tr class="overviewHead">
<td class="padding10 first-collumn" style="width: 30%;">{{lang.words.upload|title()}} SSL {{lang.words.certs}}</td>
<td>
{{lang.words.cert_name|title()}}
</td>
<td>
<span title="{{lang.add_page.paste_cert_desc}}" class="help_cursor">{{lang.add_page.desc.paste_cert}}</span>
</td>
</tr>
<tr>
<td class="first-collumn padding10" valign="top" style="padding-top: 15px;">
{{ select('serv4', values=g.user_params['servers'], is_servers='true') }}
</td>
<td valign="top" style="padding-top: 27px;">
{{ input('ssl_name') }}
</td>
<td style="padding-top: 15px; padding-bottom: 15px;">
<textarea id="ssl_cert" cols="50" rows="5"></textarea><br /><br />
<button id="ssl_key_upload" title="{{lang.words.upload|title()}} SSL {{lang.words.cert}}">{{lang.words.upload|title()}}</button>
</td>
</tr>
</table>
<table id="le_table">
<caption><h3>Let's Encrypt</h3></caption>
<tr class="overviewHead">
<td class="padding10 first-collumn">{{lang.words.server|title()}}</td>
<td>{{lang.words.type|title()}}</td>
<td>{{lang.words.domains|title()}}</td>
<td>{{lang.words.desc|title()}}</td>
<td></td>
<td></td>
</tr>
<tbody id="le_table_body"></tbody>
</table>
<br /><span class="add-button" title="{{lang.words.create|title()}}" onclick="openLeDialog()">+ {{lang.words.create|title()}}</span>
<div id="ajax-ssl"></div>
</div>
<div id="option">
<table class="overview" id="option_table">
<tr class="overviewHead">
<td class="padding10 first-collumn">Id</td>
<td class="padding10 first-collumn">{{lang.words.params|title()}}</td>
<td></td>
</tr>
{% for option in options %}
<tr id="option-{{ option.id }}" class="{{ loop.cycle('odd', 'even') }}">
{% if option.groups|string() == g.user_params['group_id']|string() or group|string() == '1' %}
<td class="padding10 first-collumn">
{{ option.id }}
</td>
<td class="padding10 first-collumn" style="width: 77%;">
<input type="text" id="option-body-{{ option.id }}" value="{{ option.options }}" size="60" class="form-control">
</td>
<td>
<a class="delete" onclick="confirmDeleteOption({{ option.id }})" title="{{lang.words.delete|title()}} {{lang.words.param}} {{option.options}}" style="cursor: pointer;"></a>
</td>
{% endif %}
</tr>
{% endfor %}
</table>
<br /><span class="add-button" title="{{lang.words.add|title()}} {{lang.words.param}}" id="add-option-button">+ {{lang.words.add|title()}}</span>
<br /><br />
<table class="overview" id="option-add-table" style="display: none;">
<tr class="overviewHead">
<td class="padding10 first-collumn">&nbsp;</td>
<td>{{lang.words.param|title()}}</td>
<td></td>
</tr>
<tr>
<td class="padding10 first-collumn">
{{lang.words.enter|title()}} {{lang.words.w_an}} {{lang.words.param}}:
</td>
<td style="width: 77%;">
{{ input('new-option', size='60') }}
</td>
<td>
<span class="add-admin" id="add-option-new" title="{{lang.words.add|title()}} {{lang.words.new}} {{lang.words.param}}" style="cursor: pointer;"></span>
</td>
</tr>
</table>
<div id="ajax-option"></div>
<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
{{lang.add_page.desc.options}}
</div>
</div>
<div id="add-servers">
<table class="overview" id="servers_table">
<tr class="overviewHead">
<td class="padding10 first-collumn">{{lang.words.server|title()}}</td>
<td class="padding10 first-collumn">{{lang.words.desc|title()}}</td>
<td></td>
</tr>
{% for s in saved_servers %}
<tr id="servers-saved-{{ s.id }}" class="{{ loop.cycle('odd', 'even') }}">
{% if s.groups|string() == g.user_params['group_id']|string() or group|string() == '1' %}
<td class="padding10 first-collumn">
<input type="text" id="servers-ip-{{ s.id }}" value="{{ s.server }}" size="15" class="form-control">
</td>
<td class="padding10 first-collumn" style="width: 77%;">
<input type="text" id="servers-desc-{{ s.id }}" value="{{ s.description }}" size="50" class="form-control">
</td>
<td>
<a class="delete" onclick="confirmDeleteSavedServer({{ s.id }})" title="{{lang.words.delete|title()}} {{lang.words.server}} {{s.server}}" style="cursor: pointer;"></a>
</td>
{% endif %}
</tr>
{% endfor %}
</table>
<br /><span class="add-button" title="{{lang.words.add|title()}} {{lang.words.server}}" id="add-saved-server-button">+ {{lang.words.add|title()}}</span>
<br /><br />
<table class="overview" id="saved-server-add-table" style="display: none;">
<tr class="overviewHead">
<td class="padding10 first-collumn">{{lang.words.server|title()}}</td>
<td>{{lang.words.desc|title()}}</td>
<td></td>
</tr>
<tr>
<td class="padding10 first-collumn">
{{ input('new-saved-servers', size='15') }}
</td>
<td style="width: 77%;">
{{ input('new-saved-servers-description', size='50') }}
</td>
<td>
<span class="add-admin" id="add-saved-server-new" title="{{lang.words.add|title()}} {{lang.words.new|title()}} {{lang.words.server|title()}}" style="cursor: pointer;"></span>
</td>
</tr>
</table>
<div id="ajax-servers"></div>
<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
{{lang.add_page.desc.servers}}
</div>
</div>
<div id="userlist">
{% include 'include/add/userlist.html' %}
<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
{{lang.add_page.desc.userlist}}
</div>
<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
{{lang.words.read|title()}}
<a href="https://roxy-wi.org/description/userlist" title="How to use userlists" target="_blank">
<b>{{lang.words.here}}</b>
</a>
{{lang.phrases.howto_user}} {{lang.words.userlists}}
</div>
</div>
<div id="peers">
{% include 'include/add/peers.html' %}
<div class="alert addName alert-info" style="width: inherit; margin-right: 15px;">
{{lang.add_page.desc.peers_master}}
</div>
<div class="alert addName alert-info" style="width: inherit; margin-right: 15px;">
{{lang.add_page.desc.peers_slave}}
</div>
<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
{{lang.words.read|title()}}
<a href="https://roxy-wi.org/howto/peers" title="How to use peers" target="_blank">
<b>{{lang.words.here}}</b>
</a>
{{lang.phrases.howto_user}} peers
</div>
</div>
<div id="lists">
<table class="overview">
<tr class="overviewHead">
<th class="padding10 first-collumn">{{lang.words.new|title()}} {{lang.words.blacklist}}</th>
<th>{{lang.words.server|title()}} {{lang.words.for}} {{lang.words.uploading}}</th>
<th>{{lang.words.existing|title()}} {{lang.words.blacklists}}</th>
</tr>
<tr>
<td class="padding10 first-collumn" style="width: 25%;">
{{lang.words.name|title()}}: {{ input('new_blacklist_name') }}
<button onclick="createList('black')">{{lang.words.create|title()}}</button>
</td>
<td class="first-collumn">
{{ select('serv-black-list', values=g.user_params['servers'], is_servers='true') }}
</td>
<td style="width: 30%; padding: 10px 0 10px 0;">
{% for list in black_lists %}
<span class="list_of_lists list_blacklists">
<a onclick="editList('{{ list }}', 'black')" title="{{lang.words.edit|title()}} {{lang.words.the}} {{ list }} {{lang.words.list}}">{{ list }}</a>
</span>
{% endfor %}
</td>
</tr>
{{ input('group', value=group, type='hidden') }}
</table>
<table>
<tr class="overviewHead">
<th class="padding10 first-collumn">{{lang.words.new|title()}} {{lang.words.whitelist}}</th>
<th>{{lang.words.server|title()}} {{lang.words.for}} {{lang.words.uploading}}</th>
<th>{{lang.words.existing|title()}} {{lang.words.whitelists}}</th>
</tr>
<tr>
<td class="padding10 first-collumn" style="width: 25%;">
{{lang.words.name|title()}}: {{ input('new_whitelist_name') }}
<button onclick="createList('white')">{{lang.words.create|title()}}</button>
</td>
<td class="first-collumn">
{{ select('serv-white-list', values=g.user_params['servers'], is_servers='true') }}
</td>
<td style="width: 30%; padding: 10px 0 10px 0;">
{% for list in white_lists %}
<span class="list_of_lists list_whitelists">
<a onclick="editList('{{ list }}', 'white')" title="{{lang.words.edit|title()}} {{lang.words.the}} {{ list }} {{lang.words.list}}">{{ list }}</a>
</span>
{% endfor %}
</td>
</tr>
</table>
<div id="ajax"></div>
<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
{{lang.add_page.desc.lists_howto}}
<a href="https://roxy-wi.org/howto/blacklist" title="How to create and manage blacklist" target="_blank">{{lang.words.article}}</a>
</div>
<div id="dialog-confirm-cert-edit" title="{{lang.words.view|title()}} {{lang.words.cert}} " style="display: none;">
<span><b>{{lang.words.note|title()}}:</b> {{lang.add_page.desc.lists_new_line}}</span>
<textarea id="edit_lists" style="width: 100%" rows=20></textarea>
</div>
</div>
<div id="maps">
<table class="overview">
<tr class="overviewHead">
<th class="padding10 first-collumn">{{lang.words.new|title()}} {{lang.words.map}}</th>
<th>{{lang.words.server|title()}} {{lang.words.for}} {{lang.words.uploading}}</th>
<th>{{lang.words.existing|title()}} {{lang.words.maps}}</th>
</tr>
<tr>
<td class="padding10 first-collumn" style="width: 25%;">
{{lang.words.name|title()}}: {{ input('new_map_name') }}
<button onclick="createMap()">{{lang.words.create|title()}}</button>
</td>
<td class="first-collumn">
{{ select('serv-map', values=g.user_params['servers'], is_servers='true') }}
</td>
<td style="width: 30%; padding: 10px 0 10px 0;">
{% for map in maps %}
<span class="list_of_lists list_maps">
<a onclick="editMap('{{ map }}')" title="{{lang.words.edit|title()}} {{lang.words.the}} {{ map }} {{lang.words.map}}">{{ map }}</a>
</span>
{% endfor %}
</td>
</tr>
{{ input('group', value=group, type='hidden') }}
</table>
<div id="ajax-maps"></div>
<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
{{lang.add_page.desc.lists_howto}}
<a href="https://www.haproxy.com/blog/introduction-to-haproxy-maps" title="Introduction to HAProxy Maps" target="_blank">{{lang.words.article}}</a>
</div>
<div id="dialog-confirm-map-edit" title="{{lang.words.view|title()}} {{lang.words.map}} " style="display: none;">
<span><b>{{lang.words.note|title()}}:</b> {{lang.add_page.desc.lists_new_line}}</span>
<textarea id="edit_map" style="width: 100%" rows=20></textarea>
</div>
</div>
{% include 'include/del_confirm.html' %}
<div id="dialog-confirm-cert" title="View certificate " style="display: none;">
<pre id="dialog-confirm-body"></pre>
</div>
<input type="hidden" id="group_id" value="{{ g.user_params['group_id']|string() }}">
</div>
</div>
<script>
$( function() {
$( ".force_close" ).selectmenu({
width: 180
});
if (window.matchMedia('(max-width: 1280px)').matches || window.matchMedia('(max-width: 1024px)').matches || window.matchMedia('(max-width: 667px)').matches) {
$( "select" ).selectmenu({
width: 150
});
}
});
var serv_ports = $('.send_proxy');
for (var i = 0; i <= serv_ports.length; i++) {
var uniqId = makeid(3);
$(serv_ports[i]).append('<label for="' + uniqId + '" class="send_proxy_label" title="Set send-proxy for this server" data-help="The Send-proxy parameter enforces the use of the PROXY protocol over any connection established to this server. The PROXY protocol informs the other end about the layer 3/4 addresses of the incoming connection so that it can know the client\'s address or the public address it accessed to, whatever the upper-layer protocol.">send-proxy</label><input type="checkbox" name="send_proxy" value="1" id="' + uniqId + '">');
var uniqId = makeid(3);
$(serv_ports[i]).append('<label for="' + uniqId + '" class="send_proxy_label" title="Set this server as backup server" data-help="When all servers in a farm are down, we want to redirect traffic to a backup server which delivers either sorry pages or a degraded mode of the application.\n' +
'This can be done easily in HAProxy by adding the keyword backup on the server line. If multiple backup servers are configured, only the first active one is used.">backup</label><input type="checkbox" name="backup" value="1" id="' + uniqId + '">');
}
</script>
<div id="le-add-table" style="display: none;">
<table class="overview" id="group-add-table-overview" title="{{lang.words.add|title()}} {{lang.words.w_a}} {{lang.words.new3}} {{lang.words.group2}}">
{% include 'include/tr_validate_tips.html' %}
<tr>
<td class="padding20 first-collumn">
{{ lang.words.server|title() }}
</td>
<td>
{{ select('new-le-server_id', values=g.user_params['servers'], is_servers='true', by_id=1) }}
</td>
</tr>
<tr>
<td class="padding20 first-collumn">
{{ lang.words.type|title() }}
</td>
<td>
<select id="new-le-type">
<option value="standalone">Stand alone</option>
<option value="route53">Route 53</option>
<option value="cloudflare">CloudFlare</option>
<option value="digitalocean">DigitalOcean</option>
<option value="linode">Linode</option>
</select>
</td>
</tr>
<tr>
<td class="padding20 first-collumn">
{{ lang.words.domains|title() }}
</td>
<td>
{{ input('new-le-domain') }}
<div class="tooltip tooltipTop">{{ lang.add_page.desc.comma_separated }}</div>
</td>
</tr>
<tr class="le-standalone">
<td class="padding20 first-collumn">
{{ lang.words.email|title() }}
</td>
<td>
{{ input('new-le-email') }}
</td>
</tr>
<tr class="le-dns" style="display: none;">
<td class="padding20 first-collumn">
{{ lang.words.token|title() }}
</td>
<td>
{{ input('new-le-token') }}
</td>
</tr>
<tr class="le-aws" style="display: none;">
<td class="padding20 first-collumn">
Access key ID
</td>
<td>
{{ input('new-le-access_key_id') }}
</td>
</tr>
<tr class="le-aws" style="display: none;">
<td class="padding20 first-collumn">
Secret access key
</td>
<td>
{{ input('new-le-secret_access_key') }}
</td>
</tr>
<tr>
<td class="padding20 first-collumn">
{{ lang.words.desc|title() }}
</td>
<td>
{{ input('new-le-description') }}
</td>
</tr>
</table>
</div>
{% endblock %}