Hexor/OutFleet
1
0
Fork 0
mirror of https://github.com/house-of-vanity/OutFleet.git synced 2025-07-06 17:14:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

New UI fix

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
main.py
View File

@ -47,7 +47,7 @@ NAMESPACE = k8s.NAMESPACE
SERVERS = list() SERVERS = list()
BROKEN_SERVERS = list() BROKEN_SERVERS = list()
CLIENTS = dict() CLIENTS = dict()
VERSION = '7' VERSION = '8'
SECRET_LINK_LENGTH = 8 SECRET_LINK_LENGTH = 8
SECRET_LINK_PREFIX = '$2b$12$' SECRET_LINK_PREFIX = '$2b$12$'
SS_PREFIX = "\u0005\u00DC\u005F\u00E0\u0001\u0020" SS_PREFIX = "\u0005\u00DC\u005F\u00E0\u0001\u0020"

49
static/layout.css
View File

@ -383,6 +383,7 @@ a {
"menu entety-menu content"; "menu entety-menu content";
height: var(--app-h); height: var(--app-h);
justify-content: left; justify-content: left;
overflow: hidden;
} }
#menu { #menu {
@ -402,9 +403,19 @@ a {
#content { #content {
grid-area: content; grid-area: content;
height: 100%; height: 100%;
overflow: auto;
} }
.srcollable-list-content {
overflow-y: auto;
}
@media (max-width: 60em) { @media (max-width: 60em) {
#entety-menu {
width: 200px;
}
}
@media (max-width: 40em) {
#layout { #layout {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
@ -423,4 +434,42 @@ a {
width: 100vw; width: 100vw;
height: initial; height: initial;
} }
.srcollable-list-content{
display: flex;
overflow-y: auto;
scroll-snap-type: x mandatory;
column-gap: var(--app-space-1);
}
.srcollable-list-content > * {
scroll-snap-align: start;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 250px;
}
}
.hidden {
display: none;
}
.server-checkbox {
display: flex;
}
.server-checkbox input {
margin-right: 8px;
}
.pure-form-message {
padding: 0.2em;
}
#search-form {
padding: var(--app-space-1);
}
#entety-menu-search {
width: 100%;
} }

27
templates/base.html
View File

@ -120,6 +120,33 @@
document.addEventListener('click', handleEvent); document.addEventListener('click', handleEvent);
}); });
</script> </script>
<script>
// Поиск по скписк в подменю
// entety-menu-search
const searchBox = document.getElementById('entety-menu-search')
searchBox.addEventListener('change', (event)=>{
const text = event.target.value
const child = Array.from(document.querySelector('[data-search-box]').children)
child.forEach((element)=>{
if(text.length === 0){
element.classList.remove('hidden')
return
}
const elementSearchData = element.querySelector('[data-search]').textContent
const isEqual = elementSearchData.toLowerCase().includes(text.toLowerCase())
if(isEqual){
element.classList.remove('hidden')
} else {
element.classList.add('hidden')
}
})
})
</script>
{% if nt %} {% if nt %}
<label> <label>
<input type="checkbox" class="alertCheckbox" autocomplete="off" /> <input type="checkbox" class="alertCheckbox" autocomplete="off" />

246
templates/clients.html
View File

@ -3,23 +3,31 @@
{% block content %} {% block content %}
<div id="entety-menu"> <div id="entety-menu">
<div id="list"> <div id="list">
<h1 class="server-content-title">Clients</h1> <h1 class="server-content-title">Clients</h1>
{% for client, values in CLIENTS.items() %} <form id="search-form" class="pure-form">
<div class="server-item server-item-{% if client == selected_client %}unread{% else %}selected{% endif %} pure-g"> <input placeholder="&#128269;" type="text" id="entety-menu-search" />
<div class="" onclick="location.href='/clients?selected_client={{ client }}';"> </form>
<h5 class="server-name">{{ values["name"] }}</h5> <div data-search-box class="srcollable-list-content">
<h4 class="server-info">Allowed {{ values["servers"]|length }} server{% if values["servers"]|length >1 %}s{%endif%}</h4> {% 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>
</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 class="pure-u-1">
+ +
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% if add_client %} {% if add_client %}
@ -31,38 +39,43 @@
</div> </div>
</div> </div>
<div class="server-content-body"> <div class="server-content-body">
<form action="/add_client" class="pure-form pure-form-stacked" method="POST"> <form action="/add_client" class="pure-form pure-form-stacked" method="POST">
<fieldset> <fieldset>
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-1 "> <div class="pure-u-1 ">
<input type="text" class="" name="name" required placeholder="Name"/> <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>
<div class="pure-u-1 "> <button type="submit" class="pure-button pure-input-1 pure-button-primary">Add</button>
<input type="text" class="" name="comment" placeholder="Comment"/> </fieldset>
</div> </form>
<div class="pure-checkbox"> </div>
{% 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>
</div> </div>
</div> </div>
{% endif %} {% endif %}
{% if selected_client and not add_client %} {% 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="">
<div class="server-content-header pure-g"> <div class="server-content-header pure-g">
<div class=""> <div class="">
@ -73,115 +86,82 @@
</div> </div>
</div> </div>
<div class="server-content-body"> <div class="server-content-body">
<form action="/add_client" class="pure-form pure-form-stacked" method="POST"> <form action="/add_client" class="pure-form pure-form-stacked" method="POST">
<fieldset> <fieldset>
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-1 "> <div class="pure-u-1 ">
<input type="text" class="pure-u-1" name="name" required value="{{client['name']}}"/> <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']}}"/> <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>
<div class="pure-u-1 "> <div class="pure-g pure-form pure-form-stacked">
<input type="text" class="pure-u-1" name="comment" value="{{client['comment']}}"/> <div class="pure-u-1-2">
<button type="submit" class="pure-button pure-button-primary button">Save and apply</button>
</div>
</div> </div>
<input type="hidden" class="pure-u-1" name="user_id" value="{{selected_client}}"/>
<div class="pure-checkbox"> </fieldset>
<p>Allow access to:</p> </form>
{% for server in SERVERS %} <form action="/del_client" class="pure-form pure-form-stacked" method="POST">
<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 type="hidden" name="name" required value="{{client['name']}}" />
<input <input type="hidden" name="user_id" value="{{selected_client}}" />
{% if server.info()['local_server_id'] in client['servers'] %}checked{%endif%} <button type="submit" class="pure-button pure-button-primary delete-button button">Delete
type="checkbox" id="option{{loop.index0}}" name="servers" value="{{server.info()['local_server_id']}}"></label> Client</button>
<input type="checkbox" id="agree" name="agree" required>
</form>
{% endfor %} <div>
<h3>Invite text</h3>
</div> <hr>
</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>
<p>Install Outline VPN. Copy and paste the keys below into the Outline client. <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 -%} {% 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'] %} {% if server.info()['local_server_id'] in client['servers'] %}
{% set salt = bcrypt.gensalt() %} {% set salt = bcrypt.gensalt() %}
{% set secret_string = server.info()['local_server_id'] + selected_client %} {% set secret_string = server.info()['local_server_id'] + selected_client %}
{% set hash_secret = bcrypt.hashpw( {% set hash_secret = bcrypt.hashpw(
password=secret_string.encode('utf-8'), password=secret_string.encode('utf-8'),
salt=salt).decode('utf-8') %} salt=salt).decode('utf-8') %}
<tr>
<td>{{ server.info()['name'] }}</td> <p><b>Server location:</b> {{server.info()['name']}}</p>
<td> <p><b>Client link:</b> {% for key in server.data["keys"] %}{% if key.key_id == client['name']
<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> %}ssconf://{{ dynamic_hostname
</td> }}/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']}}{%
</tr> endif %}{% endfor %}</p>
{% endif %} {% endif %}
{% endfor %} {%- endfor -%}
</tbody> </div>
</table>
</div> </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>
</div> </div>
</div> </div>
{% endif %} {% endif %}
{% endblock %} {% endblock %}

42
templates/index.html
View File

@ -7,6 +7,7 @@
<div id="entety-menu"> <div id="entety-menu">
<div> <div>
<h1 class="server-content-title">Servers</h1> <h1 class="server-content-title">Servers</h1>
<div class="srcollable-list-content">
{% for server in SERVERS %} {% for server in SERVERS %}
{% set total_traffic = namespace(total_bytes=0) %} {% set total_traffic = namespace(total_bytes=0) %}
{% for key in server.data["keys"] %} {% for key in server.data["keys"] %}
@ -28,6 +29,7 @@
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div>
<div onclick="location.href='/?add_server=True';" class="server-item server-add pure-g"> <div onclick="location.href='/?add_server=True';" class="server-item server-add pure-g">
<div class="pure-u-1"> <div class="pure-u-1">
+ +
@ -49,15 +51,14 @@
<form action="/add_server" class="pure-form pure-form-stacked" method="POST"> <form action="/add_server" class="pure-form pure-form-stacked" method="POST">
<fieldset> <fieldset>
<div > <div >
<div > <label for="url">Server management URL</label>
<input type="text" name="url" placeholder="Server management URL"/> <input type="text" class="pure-u-1" name="url" placeholder="https://example.com:5743/KSsdywe6Sdb..."/>
</div> <label for="cert">Server management Certificate</label>
<div > <input type="text" class="pure-u-1" name="cert" placeholder="B5DD2443DAF..."/>
<input type="text" name="cert" placeholder="Certificate"/> <label for="cert">Server Comment
</div> <span class="pure-form-message">This will be exposed to client and will be used as "Server name" in client Outline app</span>
<div > </label>
<input type="text" name="comment" placeholder="Comment"/> <input type="text" class="pure-u-1" name="comment" placeholder="e.g. server location"/>
</div>
</div> </div>
<button type="submit" class="pure-button pure-input-1 pure-button-primary">Add</button> <button type="submit" class="pure-button pure-input-1 pure-button-primary">Add</button>
</fieldset> </fieldset>
@ -75,7 +76,7 @@
{% set server = SERVERS[selected_server|int] %} {% set server = SERVERS[selected_server|int] %}
{% endif %} {% endif %}
<div id="content"> <div id="content">
<div id="main" > <div >
<div class="server-content"> <div class="server-content">
<div class="server-content-header pure-g"> <div class="server-content-header pure-g">
<div> <div>
@ -100,32 +101,35 @@
<fieldset> <fieldset>
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-1 "> <div class="pure-u-1 ">
<label for="name">Server Name</br>This will not be exposed to client</label> <label for="name">Server Name
<input type="text" id="name" class="" name="name" value="{{server.info()['name']}}"/> <span class="pure-form-message">This will not be exposed to client</span>
</label>
<input type="text" id="name" class="pure-u-1" name="name" value="{{server.info()['name']}}"/>
</div> </div>
<div class="pure-u-1 "> <div class="pure-u-1 ">
<label for="comment">Comment</br>This will be exposed to client and will be used as "Server name" in client Outline app</label> <label for="comment">Comment</br>
<input type="text" id="comment" class="" name="comment" value="{{server.info()['comment']}}"/> <span class="pure-form-message">This will be exposed to client and will be used as "Server name" in client Outline app</span></label>
<input type="text" id="comment" class="pure-u-1" name="comment" value="{{server.info()['comment']}}"/>
</div> </div>
<div class="pure-u-1"> <div class="pure-u-1">
<label for="port_for_new_access_keys">Port For New Access Keys</label> <label for="port_for_new_access_keys">Port For New Access Keys</label>
<input type="text" id="port_for_new_access_keys" name="port_for_new_access_keys" value="{{server.info()['port_for_new_access_keys']}}"/> <input type="text" id="port_for_new_access_keys" class="pure-u-1" name="port_for_new_access_keys" value="{{server.info()['port_for_new_access_keys']}}"/>
</div> </div>
<div class="pure-u-1 "> <div class="pure-u-1 ">
<label for="hostname_for_access_keys">Hostname For Access Keys</label> <label for="hostname_for_access_keys">Hostname For Access Keys</label>
<input type="text" id="hostname_for_access_keys" name="hostname_for_access_keys" value="{{server.info()['hostname_for_access_keys']}}"/> <input type="text" id="hostname_for_access_keys" class="pure-u-1" name="hostname_for_access_keys" value="{{server.info()['hostname_for_access_keys']}}"/>
</div> </div>
<div class="pure-u-1 "> <div class="pure-u-1 ">
<label for="url">Server URL</label> <label for="url">Server URL</label>
<input type="text" readonly id="url" name="url" value="{{server.info()['url']}}"/> <input type="text" readonly id="url" class="pure-u-1" name="url" value="{{server.info()['url']}}"/>
</div> </div>
<div class="pure-u-1 "> <div class="pure-u-1 ">
<label for="cert">Server Access Certificate</label> <label for="cert">Server Access Certificate</label>
<input type="text" readonly id="cert" name="cert" value="{{server.info()['cert']}}"/> <input type="text" readonly id="cert" class="pure-u-1" name="cert" value="{{server.info()['cert']}}"/>
</div> </div>
<div class="pure-u-1 "> <div class="pure-u-1 ">
<label for="created_timestamp_ms">Created</label> <label for="created_timestamp_ms">Created</label>
<input type="text" readonly id="created_timestamp_ms" name="created_timestamp_ms" value="{{format_timestamp(server.info()['created_timestamp_ms']) }}"/> <input type="text" readonly id="created_timestamp_ms" class="pure-u-1" name="created_timestamp_ms" value="{{format_timestamp(server.info()['created_timestamp_ms']) }}"/>
</div> </div>
<input type="hidden" readonly id="server_id" name="server_id" value="{{server.info()['local_server_id']}}"/> <input type="hidden" readonly id="server_id" name="server_id" value="{{server.info()['local_server_id']}}"/>
</div> </div>