mirror of
https://github.com/iFargle/headscale-webui.git
synced 2026-03-23 08:44:46 +01:00
fe7a3667d4
Major part of #73 Unfortunately, it wasn't possible to split it to multiple smaller commits, since the changes touched the entire application substantially. Here is a short list of major changes: 1. Create a separate library (headscale-api), which is used as a convenient abstraction layer providing Pythonic interface with Pydantic. Headscale API is fully asynchronous library, benefitting from improved concurrency for backend requests thus increasing page load speed, e.g., on "Machines" page. 2. Create a common common, validated with flask-pydantic API passthrough layer from GUI to the backend. 3. Move authentication to a separate (auth.py), consolidating the functionality in a single place (with better place for expansion in the future). 4. Move configuration management to a separate module (config.py). Use Pydantic's BaseSettings for reading values from environment, with extensive validation and error reporting. 5. Reduce the number of health checks. - Now, most are performed during server initialization. If any test fails, the server is started in tainted mode, with only the error page exposed (thus reducing the surface of attack in invalid state). - Key checks are implicit in the requests to the backend and guarded by `@headscale.key_check_guard` decorator. - Key renewal is moved to server-side scheduler. 6. Introduce type hints to the level satisfactory for mypy static analysis. Also, enable some other linters in CI and add optional pre-commit hooks. 7. Properly handle some error states. Instead of returning success and handling different responses, if something fails, there is HTTP error code and standard response for it. 8. General formatting, small rewrites for clarity and more idiomatic Python constructs. Signed-off-by: Marek Pikuła <marek.pikula@embevity.com>
85 lines
3.8 KiB
HTML
85 lines
3.8 KiB
HTML
{% extends 'template.html' %}
|
|
{% set page = "Settings" %}
|
|
{% set settings_active = "active" %}
|
|
{% block title %} {{ page }} {% endblock %}
|
|
{% block header %} {{ page }} {% endblock %}
|
|
{% block oidc_nav_dropdown %} {{ oidc_nav_dropdown}} {% endblock %}
|
|
{% block oidc_nav_mobile %} {{ oidc_nav_mobile }} {% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row"><br>
|
|
<div class="col s0 m0 l0 xl3"></div>
|
|
<div class="col s12 m12 l12 xl6">
|
|
<div class="card hoverable">
|
|
<div class="card-content">
|
|
<span class="card-title">Server Information</span>
|
|
<div class="input-field">
|
|
<i class="material-icons prefix">vpn_key</i>
|
|
<input id="api_key" type="password">
|
|
<label for="api_key">API Key</label>
|
|
</div>
|
|
</div>
|
|
<div class="card-action">
|
|
<a href="#test_modal" class="modal-trigger" onclick="save_key()">Save</a>
|
|
<a href="#test_modal" class="modal-trigger" onclick='test_key()'>Test</a>
|
|
<a href="#instructions_modal" class="modal-trigger">Instructions</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s0 m0 l0 xl3"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s0 m0 l0 xl3"></div>
|
|
<div class="col s12 m12 l12 xl6">
|
|
<div class="card hoverable">
|
|
<div class="card-content">
|
|
<span class="card-title">About</span>
|
|
<table class="striped">
|
|
<tbody>
|
|
<tr><td>Compatibility</td><td><a href="https://github.com/juanfont/headscale">Headscale {{ HS_VERSION }}</a></td></tr>
|
|
<tr><td>App Version</td><td>{{ APP_VERSION }}</td></tr>
|
|
<tr><td>Build Date</td><td> {{ BUILD_DATE }}</td></tr>
|
|
<tr><td>Git Commit</td><td><a href='{{ GIT_REPO_URL }}/commit/{{ GIT_COMMIT }}'>{{ GIT_COMMIT[:7] }}</a></td></tr>
|
|
<tr><td>Git Branch</td><td>{{ GIT_BRANCH }}</td></tr>
|
|
<tr><td>Source Code</td><td><a href="{{ GIT_REPO_URL }}/tree/{{ GIT_BRANCH }}">Github</a></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s0 m0 l0 xl3"></div>
|
|
</div>
|
|
<!-- Modals -->
|
|
<div id="instructions_modal" class="modal">
|
|
<div class="modal-content">
|
|
<h4>Instructions</h4>
|
|
<ul class="browser-default">
|
|
<li>To generate your API key, run the command <a class="{{ color_btn }} white-text">headscale apikeys create</a> on your control server. Once you generate your first key, this UI will automatically renew the key near expiration.</li>
|
|
<li>The Headscale server is configured via the <a class="{{ color_btn }} white-text">HS_SERVER</a> environment variable in Docker. Current server: <a class="{{ color_btn }} white-text"> {{url}} </a></li>
|
|
<li>You must configure an encryption key via the <a class="{{ color_btn }} white-text">KEY</a> environment variable in Docker. One can be generated with the command <a class="{{ color_btn }} white-text">openssl rand -base64 32</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#!" class="modal-close btn-flat">Close</a>
|
|
</div>
|
|
</div>
|
|
<div id="test_modal" class="modal">
|
|
<div class="modal-content">
|
|
<h4>Headscale API key Test</h4>
|
|
<span id="test_modal_results"></span>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#!" class="modal-close btn-flat">Close</a>
|
|
</div>
|
|
</div>
|
|
<div id="theme_modal" class="modal">
|
|
<div class="modal-content">
|
|
<h4>Web UI Theme Settings</h4>
|
|
<span id="theme_modal_body"></span>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#!" class="modal-close btn-flat">Close</a>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|