Improved wg ui formatting
Cloud9 gf4 www
parent
2e9b57f1dc
commit
60e22362cd
|
|
@ -43,15 +43,33 @@ html {
|
|||
}
|
||||
a { color: #a8d; }
|
||||
body {
|
||||
margin: 1vw;
|
||||
font-size: calc(1em + 1vw);
|
||||
margin: 4vw;
|
||||
font-size: calc(.7em + .8vw);
|
||||
background: url('/space.jpg') repeat-y fixed 0 0/100%;
|
||||
}
|
||||
main {
|
||||
background-color: rgba(2,2,2,.8);
|
||||
margin: 3vw;
|
||||
margin: auto;
|
||||
padding: calc(1em + 2vw);
|
||||
max-width: 1000px;
|
||||
font-family: monospace;
|
||||
}
|
||||
input, button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
border: 1px solid var(--gray);
|
||||
background-color: rgba(2,2,2,.7);
|
||||
color: var(--purple);
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
table {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
th { text-align: left; }
|
||||
|
||||
/* Fort */
|
||||
body::after {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -7,20 +7,39 @@ layout: base.njk
|
|||
|
||||
<p>Use this console to edit your network-connected devices. </p>
|
||||
|
||||
<div id="add">
|
||||
<input type="text" id="add-name" text="hostname"></input>
|
||||
<h2>Your peers</h2>
|
||||
|
||||
<p>IP addresses have been truncated. v4 addresses should be prefixed with "10.4". v6 addresses should be prefixed with "fd69:1337:0:420:f4:f4". Domain names are set to <hostname>.<username>.gf4.</p>
|
||||
|
||||
<p>Click "Delete" to delete a peer. You can not delete the device you are using.</p>
|
||||
|
||||
<table id="peers" style="max-width:600px"></table>
|
||||
|
||||
<h2>Add a peer</h2>
|
||||
|
||||
<p>To add a new peer, type in a hostname and click add. The hostname is case insensitive and can include letters, numbers, underscores and dashes but no other symbols. Keep it short for your own sake!</p>
|
||||
|
||||
<div id="add" style="margin:calc(1em + 1.5vw) auto;display:flex;max-width:600px">
|
||||
<input type="text" id="add-name" placeholder="mypc1" style="flex-grow:1;margin-right:calc(10px + 2vw)"></input>
|
||||
<button onclick="addPeer()">Add</button>
|
||||
</div>
|
||||
|
||||
<ul id="peers"></ul>
|
||||
<p>After clicking "Add", the new peer's config will appear below. Copy and paste it into your wireguard client and start the service. If you lose the config, you will need to delete the peer and recreate it. This configuration will not be stored or displayed again!</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<pre id='newconfig'></pre>
|
||||
|
||||
<script>
|
||||
/* global window fetch */
|
||||
|
||||
const add_name_el = document.getElementById('add-name')
|
||||
const newconfig_el = document.getElementById('newconfig')
|
||||
const peers_el = document.getElementById('peers')
|
||||
|
||||
// Get user object
|
||||
let user; (async (url) => {
|
||||
let user; const getUser = async (url) => {
|
||||
// Query server
|
||||
try {
|
||||
const res = await fetch(url)
|
||||
user = await res.json()
|
||||
|
|
@ -28,21 +47,51 @@ layout: base.njk
|
|||
console.error(`Failed to fetch ${url}`)
|
||||
if (err) console.error(err)
|
||||
} console.log(`Retrieved ${user.name} from ${url}`)
|
||||
|
||||
// Populate page with peers
|
||||
// peers_el.innerHTML = ''
|
||||
peers_el.innerHTML = `<tr>
|
||||
<th>Host</th>
|
||||
<th>IPv4</th>
|
||||
<th>IPv6</th>
|
||||
</tr>`
|
||||
for (const peer of user.peers) {
|
||||
peers_el.innerHTML += `<li><a href="//${peer.name}.${user.name}.gf4/">${peer.name}</a>: ${peer.ipv4} ${peer.ipv6} <button onclick="delPeer('${peer.name}')">Delete</button></li>\n`
|
||||
const short_ipv4 = `.${peer.ipv4.split('.').slice(-2).join('.')}`
|
||||
const short_ipv6 = `:${peer.ipv6.split(':').slice(-2).join(':')}`
|
||||
peers_el.innerHTML += `<tr>
|
||||
<td><a href="//${peer.name}.${user.name}.gf4/">${peer.name}</a></td>
|
||||
<td>${short_ipv4}</td>
|
||||
<td>${short_ipv6}</td>
|
||||
<td><button style="float:right" onclick="delPeer('${peer.name}')">Delete</button></td>
|
||||
</tr>\n`
|
||||
}
|
||||
|
||||
})('https://wgapi.ksn.gf4/list')
|
||||
|
||||
// Edit peers
|
||||
const addPeer = () => {
|
||||
console.log(`Going to https://wgapi.ksn.gf4/add?name=${add_name_el.value}&token=${user.token}`)
|
||||
window.location.href = `https://wgapi.ksn.gf4/add?name=${add_name_el.value}&token=${user.token}`
|
||||
}
|
||||
const delPeer = (name) => {
|
||||
window.location.href = `https://wgapi.ksn.gf4/del?name=${name}&token=${user.token}`
|
||||
// Run on start too
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
getUser('https://wgapi.ksn.gf4/list')
|
||||
})
|
||||
|
||||
// New peer
|
||||
const addPeer = async () => {
|
||||
try {
|
||||
newconfig_el.innerHTML = await (await fetch(`https://wgapi.ksn.gf4/add?name=${add_name_el.value}&token=${user.token}`)).text()
|
||||
} catch (err) {
|
||||
console.error(`Failed to add ${add_name_el.value}`)
|
||||
if (err) console.error(err)
|
||||
}
|
||||
console.log(`Added ${add_name_el.value}`)
|
||||
getUser('https://wgapi.ksn.gf4/list')
|
||||
}
|
||||
|
||||
// Delete peer
|
||||
const delPeer = async (name) => {
|
||||
let res; try {
|
||||
res = await fetch(`https://wgapi.ksn.gf4/del?name=${name}&token=${user.token}`)
|
||||
} catch (err) {
|
||||
console.error(`Failed to delete ${name}`)
|
||||
if (err) console.error(err)
|
||||
}
|
||||
console.log(`Deleted ${name}: ${res}`)
|
||||
getUser('https://wgapi.ksn.gf4/list')
|
||||
}
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue