mirror of
https://github.com/towalink/wgfrontend.git
synced 2025-10-04 07:26:17 +00:00
Major improvements incl. CSS
This commit is contained in:
Henri
@@ -1,15 +1,20 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
|
||||
<title>Towalink WireGuard Frontend</title>
|
||||
<link rel='stylesheet' media='screen' href='/static/layout.css' />
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
<div class='header'>
|
||||
{% include 'part_header.html' %}
|
||||
</div>
|
||||
<div class='content'>{% block content %}{% endblock %}</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Towalink WireGuard Frontend</title>
|
||||
<link rel="stylesheet" media="screen" href="/static/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
{% include 'part_header.html' %}
|
||||
<section>
|
||||
<div class="content">
|
||||
{%- block content %}{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="https://github.com/towalink/wgfrontend/" target="_blank">Powered by the open source "Towalink WireGuard Frontend"</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,24 +1,29 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block content %}
|
||||
<h3>Client Config</h3>
|
||||
<div class='instructions'>
|
||||
<a href='https://www.wireguard.com/install/' target="_blank">WireGuard client installation instructions</a>
|
||||
</div>
|
||||
<div class='span-18 last'>
|
||||
<form method="get" action="download">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
{{ peerdata['Description'] }}<br>
|
||||
{{ peerdata['Address'] }}
|
||||
</td>
|
||||
<td>
|
||||
<img src="/configs/{{ peerdata['Id'] }}.png" alt="QR Code">
|
||||
<button type="submit" name="id" value="{{ peerdata['Id'] }}">Download Config</button>
|
||||
<button type="submit" formaction=".." }}">Return</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
<h3>Client Config</h3>
|
||||
<div class='form'>
|
||||
<form method="get" action="download">
|
||||
<div class="buttonrow">
|
||||
<button class="button buttonhighlight" type="submit" name="action" value="list" formaction="..">Return to List</button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell bordertop">
|
||||
{{ peerdata['Description'] }}<br>
|
||||
<small>{{ peerdata['Address'] }}</small><br>
|
||||
</div>
|
||||
<div class="table-cell twobuttoncell bordertop2">
|
||||
<button class="button" type="submit" name="id" value="{{ peerdata['Id'] }}" formaction="edit">Edit Client</button>
|
||||
<button class="button" type="submit" name="id" value="{{ peerdata['Id'] }}" formaction="download">Download Config</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" style="text-align: center;">
|
||||
<img class="qrcode" src="/configs/{{ peerdata['Id'] }}.png" alt="QR Code">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class='instructions'>
|
||||
See the <a href='https://www.wireguard.com/install/' target="_blank">WireGuard client installation instructions</a>.
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,22 +1,28 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block content %}
|
||||
<h3>Configured Clients</h3>
|
||||
<div class='span-18 last'>
|
||||
<form method="get" action="edit">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="hidden" name="id" value="{{ peerdata['Id'] }}" />
|
||||
<input type="text" name="description" value="{{ peerdata['Description'] }}" size="40" /><br>
|
||||
{{ peerdata['Address'] }}
|
||||
</td>
|
||||
<td>
|
||||
<button type="submit" name="action" value="save">Save Data</button>
|
||||
<button type="submit" name="action" value="delete" formaction="/" onclick="return confirm('Do you really want to delete this client?')">Delete Client</button>
|
||||
<button type="submit" formaction="/">Return to List</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
<h3>{% if peerdata['Id'] %}Edit{% else %}New{% endif %} Client</h3>
|
||||
<div class='form'>
|
||||
<form method="get" action="..">
|
||||
<div class="buttonrow">
|
||||
<button class="button buttonhighlight" type="submit" name="action" value="list">Return to List</button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell bordertop">
|
||||
<input type="hidden" name="id" value="{{ peerdata['Id'] }}" />
|
||||
<input class="inputtext" type="text" name="description" value="{{ peerdata['Description'] }}" size="40" /><br>
|
||||
<small>{{ peerdata['Address'] }}</small>
|
||||
</div>
|
||||
<div class="table-cell twobuttoncell bordertop2">
|
||||
<button class="button" type="submit" name="action" value="save" formaction="config">{% if peerdata['Id'] %}Save Changes{% else %}Save{%endif %}</button>
|
||||
{%- if peerdata['Id'] %}
|
||||
<button class="button" type="submit" name="action" value="delete" onclick="return confirm('Do you really want to delete this client?')">Delete Client</button>
|
||||
{%- else %}
|
||||
<button class="button" type="submit" name="action" value="list")">Cancel</button>
|
||||
{%- endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,23 +1,35 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block content %}
|
||||
<h3>Configured Clients</h3>
|
||||
<div class='span-18 last'>
|
||||
<form method="get" action="edit">
|
||||
<button type="submit" name="action" value="new">Add Client</button>
|
||||
<table>
|
||||
{%- for peer, peerdata in peers.items()|sort(attribute='1.Description') %}
|
||||
<tr>
|
||||
<td>
|
||||
{{ peerdata['Description'] }}<br>
|
||||
{{ peerdata['Address'] }}
|
||||
</td>
|
||||
<td>
|
||||
<button type="submit" name="id" value="{{ peerdata['Id'] }}">Edit Client</button>
|
||||
<button type="submit" name="id" value="{{ peerdata['Id'] }}" formaction="config">Get Config</button>
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
<h3>Configured Clients</h3>
|
||||
<div class='form'>
|
||||
<form method="get" action="edit">
|
||||
<div class="buttonrow">
|
||||
<button class="button buttonhighlight" type="submit" name="action" value="new">Add Client</button>
|
||||
</div>
|
||||
<div class="table">
|
||||
{%- for peer, peerdata in peers.items()|sort(attribute='1.Description') %}
|
||||
<div class="line"></div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell bordertop">
|
||||
{{ peerdata['Description'] }}<br>
|
||||
<small>{{ peerdata['Address'] }}</small>
|
||||
</div>
|
||||
<div class="table-cell twobuttoncell bordertop2">
|
||||
<button class="button" type="submit" name="id" value="{{ peerdata['Id'] }}">Edit Client</button>
|
||||
<button class="button" type="submit" name="id" value="{{ peerdata['Id'] }}" formaction="config">Get Config</button>
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor %}
|
||||
{% if not peers %}
|
||||
<div class="table">
|
||||
<div class="line"></div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell bordertop">
|
||||
There is no client configured up to now.
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
39
src/templates/login.html
Normal file
39
src/templates/login.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Towalink WireGuard Frontend - Login</title>
|
||||
<link rel="stylesheet" media="screen" href="/static/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="loginform">
|
||||
<form method="post" action="do_login">
|
||||
<div class=loginerror>{{ error_msg }}</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
User:
|
||||
</td>
|
||||
<td>
|
||||
<input class="logininput" type="text" name="username" value="{{ username }}" size="40" />
|
||||
</td>
|
||||
<tr>
|
||||
<td>
|
||||
Password:
|
||||
</td>
|
||||
<td>
|
||||
<input class="logininput" type="password" name="password" size="40" />
|
||||
<input type="hidden" name="from_page" value="{{ from_page }}" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 align=right>
|
||||
<input class="button loginmargin" type="submit" value="Login" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,3 +1,9 @@
|
||||
<div class='heading'>
|
||||
<h2><a href='/'>Towalink WireGuard Frontend</a></h2>
|
||||
</div>
|
||||
<header>
|
||||
<h2><a href="/"><img src="static/logo.svg" alt="Towalink logo"><span>Towalink WireGuard Frontend</span></a></h2>
|
||||
<div class="user">
|
||||
<p>{% if sessiondata['username'] %}{{ sessiondata['username'] }}{% else %}not logged in{%endif %}</p>
|
||||
<form action="/logout">
|
||||
<input class="button" type="submit" value="Logout" />
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user