mirror of
https://github.com/iFargle/headscale-webui.git
synced 2026-03-14 01:23:39 +01:00
86 lines
3.9 KiB
HTML
86 lines
3.9 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>{{ GIT_COMMIT }}</td></tr>
|
|
<tr><td>Git Branch</td><td>{{ GIT_BRANCH }}</td></tr>
|
|
<tr><td>Source Code</td><td><a href="https://github.com/iFargle/headscale-webui">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>
|
|
<li>Enter the API key generated by headscale, press "Save" then "Test". Saving before using the "Test" button is important.</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 %}
|