New UI fix

Co-authored-by: XakPlant <xakplant@users.noreply.github.com>
This commit is contained in:
AB
2024-04-28 15:06:58 +03:00
parent 48521cb8a3
commit 58be345610
5 changed files with 213 additions and 153 deletions

View File

@ -3,23 +3,31 @@
{% block content %}
<div id="entety-menu">
<div id="list">
<h1 class="server-content-title">Clients</h1>
{% for client, values in CLIENTS.items() %}
<div class="server-item server-item-{% if client == selected_client %}unread{% else %}selected{% endif %} pure-g">
<div class="" onclick="location.href='/clients?selected_client={{ client }}';">
<h5 class="server-name">{{ values["name"] }}</h5>
<h4 class="server-info">Allowed {{ values["servers"]|length }} server{% if values["servers"]|length >1 %}s{%endif%}</h4>
<div id="list">
<h1 class="server-content-title">Clients</h1>
<form id="search-form" class="pure-form">
<input placeholder="&#128269;" type="text" id="entety-menu-search" />
</form>
<div data-search-box class="srcollable-list-content">
{% for client, values in CLIENTS.items() %}
<div
class="server-item server-item-{% if client == selected_client %}unread{% else %}selected{% endif %} pure-g">
<div class="" onclick="location.href='/clients?selected_client={{ client }}';">
<h5 data-search class="server-name">{{ values["name"] }}</h5>
<h4 class="server-info">{{ values["servers"]|length }} server{% if values["servers"]|length >1
%}s{%endif%}</h4>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
<div onclick="location.href='/clients?add_client=True';" class="server-item server-add pure-g">
<div onclick="location.href='/clients?add_client=True';" class="server-item server-add pure-g">
<div class="pure-u-1">
+
</div>
</div>
</div>
</div>
</div>
</div>
{% if add_client %}
@ -31,38 +39,43 @@
</div>
</div>
<div class="server-content-body">
<form action="/add_client" class="pure-form pure-form-stacked" method="POST">
<fieldset>
<div class="pure-g">
<div class="pure-u-1 ">
<input type="text" class="" name="name" required placeholder="Name"/>
<form action="/add_client" class="pure-form pure-form-stacked" method="POST">
<fieldset>
<div class="pure-g">
<div class="pure-u-1 ">
<input type="text" class="" name="name" required placeholder="Name" />
</div>
<div class="pure-u-1 ">
<input type="text" class="" name="comment" placeholder="Comment" />
</div>
<div class="pure-checkbox">
{% for server in SERVERS %}
<div class="server-checkbox">
<input type="checkbox" id="option{{loop.index0}}" name="servers"
value="{{server.info()['local_server_id']}}">
<label class="pure-checkbox" for="option{{loop.index0}}">{{server.info()["comment"]}}
<span class="pure-form-message">ID: {{server.info()['local_server_id'][0:8]}}</span>
<span class="pure-form-message">Comment: {{server.info()["name"]}}</span>
</label>
</div>
{% endfor %}
</div>
</div>
<div class="pure-u-1 ">
<input type="text" class="" name="comment" placeholder="Comment"/>
</div>
<div class="pure-checkbox">
{% for server in SERVERS %}
<label class="pure-checkbox" for="option{{loop.index0}}">{{server.info()["name"]}}
<input type="checkbox" id="option{{loop.index0}}" name="servers" value="{{server.info()['local_server_id']}}"></label>
{% endfor %}
</div>
</div>
<button type="submit" class="pure-button pure-input-1 pure-button-primary">Add</button>
</fieldset>
</form>
</div>
<button type="submit" class="pure-button pure-input-1 pure-button-primary">Add</button>
</fieldset>
</form>
</div>
</div>
</div>
{% endif %}
{% if selected_client and not add_client %}
{% set client = CLIENTS[selected_client] %}
{% set client = CLIENTS[selected_client] %}
<div id="content">
<div id="content">
<div class="">
<div class="server-content-header pure-g">
<div class="">
@ -73,115 +86,82 @@
</div>
</div>
<div class="server-content-body">
<form action="/add_client" class="pure-form pure-form-stacked" method="POST">
<fieldset>
<div class="pure-g">
<div class="pure-u-1 ">
<input type="text" class="pure-u-1" name="name" required value="{{client['name']}}"/>
<input type="hidden" class="pure-u-1" name="old_name" required value="{{client['name']}}"/>
<form action="/add_client" class="pure-form pure-form-stacked" method="POST">
<fieldset>
<div class="pure-g">
<div class="pure-u-1 ">
<input type="text" class="pure-u-1" name="name" required value="{{client['name']}}" />
<input type="hidden" class="pure-u-1" name="old_name" required value="{{client['name']}}" />
</div>
<div class="pure-u-1 ">
<input type="text" class="pure-u-1" name="comment" value="{{client['comment']}}" />
</div>
<input type="hidden" class="pure-u-1" name="user_id" value="{{selected_client}}" />
<div class="pure-checkbox">
<p>Allow access to:</p>
{% for server in SERVERS %}
<div class="server-checkbox">
<input {% if server.info()['local_server_id'] in client['servers'] %}checked{%endif%}
type="checkbox" id="option{{loop.index0}}" name="servers"
value="{{server.info()['local_server_id']}}">
<label class="pure-checkbox" for="option{{loop.index0}}">{{server.info()["comment"]}}
<span class="pure-form-message">ID: {{server.info()['local_server_id'][0:8]}}</span>
<span class="pure-form-message">Comment: {{server.info()["name"]}}</span>
<span class="pure-form-message">{% if
server.info()['local_server_id'] in client['servers'] %}Usage: {% for key in
server.data["keys"] %}{% if key.name == client['name'] %}{{ (key.used_bytes if
key.used_bytes else 0) | filesizeformat }}{% endif %}{% endfor
%}{%endif%}</span>
</label>
</div>
{% endfor %}
</div>
</div>
<div class="pure-u-1 ">
<input type="text" class="pure-u-1" name="comment" value="{{client['comment']}}"/>
<div class="pure-g pure-form pure-form-stacked">
<div class="pure-u-1-2">
<button type="submit" class="pure-button pure-button-primary button">Save and apply</button>
</div>
</div>
<input type="hidden" class="pure-u-1" name="user_id" value="{{selected_client}}"/>
<div class="pure-checkbox">
<p>Allow access to:</p>
{% for server in SERVERS %}
<label class="pure-checkbox" for="option{{loop.index0}}">{{server.info()["name"]}}{% if server.info()['local_server_id'] in client['servers'] %} ( Used {% for key in server.data["keys"] %}{% if key.name == client['name'] %}{{ (key.used_bytes if key.used_bytes else 0) | filesizeformat }}{% endif %}{% endfor %}){%endif%}
<input
{% if server.info()['local_server_id'] in client['servers'] %}checked{%endif%}
type="checkbox" id="option{{loop.index0}}" name="servers" value="{{server.info()['local_server_id']}}"></label>
</fieldset>
</form>
<form action="/del_client" class="pure-form pure-form-stacked" method="POST">
<input type="hidden" name="name" required value="{{client['name']}}" />
<input type="hidden" name="user_id" value="{{selected_client}}" />
<button type="submit" class="pure-button pure-button-primary delete-button button">Delete
Client</button>
<input type="checkbox" id="agree" name="agree" required>
</form>
{% endfor %}
</div>
</div>
<button type="submit" class="pure-button pure-input-1 pure-button-primary">Save and apply</button>
</fieldset>
</form>
<div>
<h3>Invite text</h3><hr>
<div>
<h3>Invite text</h3>
<hr>
<p>Install Outline VPN. Copy and paste the keys below into the Outline client.
The same keys can be used simultaneously on multiple devices.</p>
The same keys can be used simultaneously on multiple devices.</p>
{% for server in SERVERS -%}
{% if server.info()['local_server_id'] in client['servers'] %}
{% set salt = bcrypt.gensalt() %}
{% set secret_string = server.info()['local_server_id'] + selected_client %}
{% set hash_secret = bcrypt.hashpw(
password=secret_string.encode('utf-8'),
salt=salt).decode('utf-8') %}
<p><b>Server location:</b> {{server.info()['name']}}</p>
<p><b>Client link:</b> {% for key in server.data["keys"] %}{% if key.key_id == client['name'] %}ssconf://{{ dynamic_hostname }}/dynamic/{{server.info()['local_server_id'][0:SECRET_LINK_LENGTH]}}{{selected_client[0:SECRET_LINK_LENGTH]}}{{hash_secret[SECRET_LINK_PREFIX|length:]}}#{{server.info()['comment']}}{% endif %}{% endfor %}</p>
{% endif %}
{%- endfor -%}
</div>
<hr>
<div>
<div class="pure-u-1">
<h3>Dynamic Access Keys</h3>
<table class="pure-table">
<thead>
<tr>
<th>Server</th>
<th>Dynamic</th>
</tr>
</thead>
<tbody>
{% for server in SERVERS %}
{% if server.info()['local_server_id'] in client['servers'] %}
{% set salt = bcrypt.gensalt() %}
{% set secret_string = server.info()['local_server_id'] + selected_client %}
{% set hash_secret = bcrypt.hashpw(
password=secret_string.encode('utf-8'),
salt=salt).decode('utf-8') %}
<tr>
<td>{{ server.info()['name'] }}</td>
<td>
<p style="font-size: 10pt">{% for key in server.data["keys"] %}{% if key.key_id == client['name'] %}ssconf://{{ dynamic_hostname }}/dynamic/{{server.info()['local_server_id'][0:SECRET_LINK_LENGTH]}}{{selected_client[0:SECRET_LINK_LENGTH]}}{{hash_secret[SECRET_LINK_PREFIX|length:]}}#{{server.info()['comment']}}{% endif %}{% endfor %}</p>
</td>
</tr>
password=secret_string.encode('utf-8'),
salt=salt).decode('utf-8') %}
<p><b>Server location:</b> {{server.info()['name']}}</p>
<p><b>Client link:</b> {% for key in server.data["keys"] %}{% if key.key_id == client['name']
%}ssconf://{{ dynamic_hostname
}}/dynamic/{{server.info()['local_server_id'][0:SECRET_LINK_LENGTH]}}{{selected_client[0:SECRET_LINK_LENGTH]}}{{hash_secret[SECRET_LINK_PREFIX|length:]}}#{{server.info()['comment']}}{%
endif %}{% endfor %}</p>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
<div class="pure-u-1 pure-u-md-1">
<h3>SS Links</h3>
<table class="pure-table">
<thead>
<tr>
<th>Server</th>
<th>SSlink</th>
</tr>
</thead>
<tbody>
{% for server in SERVERS %}
{% if server.info()['local_server_id'] in client['servers'] %}
<tr>
<td>{{ server.info()['name'] }}</td>
<td>
<pre style="font-size: 10pt">{% for key in server.data["keys"] %}{% if key.key_id == client['name'] %}{{ key.access_url }}{% endif %}{% endfor %}</pre>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
<hr>
</div>
<form action="/del_client" class="pure-form pure-form-stacked" method="POST">
<input type="hidden" class="pure-u-1" name="name" required value="{{client['name']}}"/>
<input type="hidden" class="pure-u-1" name="user_id" value="{{selected_client}}"/>
<button type="submit" class="pure-button button-error pure-input-1 ">Delete</button>
</form>
</div>
{%- endfor -%}
</div>
</div>
</div>
</div>
{% endif %}
{% endblock %}
{% endblock %}