wagon/front/admin.html

58 lines
3.0 KiB
HTML

<html>
<head>
<title>Wireguard Admin</title>
</head>
<body>
<h2>Add user</h2>
<p>To add a new user, type in the user's first device name and a username and click 'add'. The hostname and username must each be 3-10 lowercase letters and numbers <code>/[a-z0-9]{3,10}/</code>. </p>
<p data-bind="hidden:isLoaded"><code>Loading...</code></p>
<div data-bind="visible:isLoaded">
<input type="text" data-bind="textInput:newUserHostname,event:{keypress:addUserKeyPress}" placeholder="pc1"></input>
<input type="text" data-bind="textInput:newUsername,event:{keypress:addUserKeyPress}" placeholder="joe"></input>
<button data-bind="click:addUser,disable:isAddingUser,text:addUserText">Add</button>
</div>
<p>After clicking "Add", the new user's first peer config will appear below. Copy and paste it into your wireguard client and start the service. <b>This configuration will not be shown again!</b> If you lose the config, you will need to delete the peer and recreate it. </p>
<h2>Delete User</h2>
<p>To delete a user, select the username from the list below and click 'Delete'. This will delete the user and all their peers. </p>
<p data-bind="hidden:isLoaded"><code>Loading...</code></p>
<div data-bind="visible:isLoaded">
<select data-bind="options:users,optionsText:'name',value:userToDelete,optionsCaption:'(user)'"></select>
<button data-bind="click:delUser,disable:isDeletingUser,text:deleteUserText">Delete</button>
</div>
<br><hr>
<h2>Peers</h2>
<p data-bind="hidden:isLoaded"><code>Loading...</code></p>
<table data-bind="visible:isLoaded">
<thead><tr>
<th>Host</th><th>IPv4</th><th></th>
</tr></thead>
<tbody data-bind="foreach:peers"><tr>
<td data-bind="text:domain"></td>
<td data-bind="text:ipv4"></td>
<td><button style="float:right" data-bind="click:$parent.delPeer,disable:$data.cantDelete||$data.isDeleting,text:deleteText">Delete</button></td>
</tr></tbody>
</table>
<h2>Add peer</h2>
<p>To add a new peer, type in a hostname and select a user. The hostname must be 3-10 lowercase letters and numbers <code>/[a-z0-9]{3,10}/</code>. </p>
<p data-bind="hidden:isLoaded"><code>Loading...</code></p>
<div data-bind="visible:isLoaded">
<input type="text" data-bind="textInput:newPeerHostname,event:{keypress:addPeerKeyPress}" placeholder="phone"></input>
<select data-bind="options:users,optionsText:'name',value:newPeerUser,optionsCaption:'(user)'"></select>
<button data-bind="click:addPeer,disable:isAddingPeer,text:addPeerText">Add</button>
</div>
<p>After clicking "Add", the new peer's config will appear below. Copy and paste it into your wireguard client and start the service. <b>This configuration will not be shown again!</b> If you lose the config, you will need to delete the peer and recreate it. </p>
<br><hr>
<pre data-bind="text:newConfigText"></pre>
<div id="qrcode"></div>
<script src="/knockout.min.js" integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw=="></script>
<script src="/admin.js"></script>
</body>
</html>