127 lines
3.8 KiB
HTML
127 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="static/style.css?5">
|
|
<script type="text/javascript" src="static/script.js?5"></script>
|
|
<title>WG-selfserve</title>
|
|
</head>
|
|
<body style="display: none;">
|
|
<header>
|
|
<h1>Your VPN Clients</h1>
|
|
<user id="banner-userid" aria-label="logged in as"></user>
|
|
</header>
|
|
<vpnstatus>
|
|
<p>
|
|
Your connection status:
|
|
<span class="result">Checking...</span>
|
|
</p>
|
|
</vpnstatus>
|
|
<topbox>
|
|
<details open>
|
|
<summary>Instructions</summary>
|
|
<ol>
|
|
<li>
|
|
Install WireGuard on the client device.
|
|
</li>
|
|
<li>
|
|
Create a client configuration by clicking the
|
|
'Add a client' button.
|
|
</li>
|
|
<li>
|
|
Download the configuration to your client using the 'Download'
|
|
button, or use the QR-code to transfer it to a mobile device.
|
|
</li>
|
|
<li>
|
|
Start Wireguard on the new device, add the configuration and
|
|
activate the tunnel.
|
|
</li>
|
|
</ol>
|
|
<p>
|
|
<strong>
|
|
Make sure you use a unique client configuration for each device,
|
|
otherwise you will encounter technical issues.
|
|
</strong>
|
|
</p>
|
|
</details>
|
|
<button id="create-config">Add a client</button>
|
|
</topbox>
|
|
<configs>
|
|
<placeholder>Your clients will be displayed here.</placeholder>
|
|
</configs>
|
|
<template id="display-config">
|
|
<config aria-label="client" role="landmark">
|
|
<a class="conffile" href="" download=""></a>
|
|
<expires aria-label="expiry date"></expires>
|
|
<name role="heading" aria-label="client name"></name>
|
|
<description aria-label="client description"></description>
|
|
<data></data>
|
|
<qrcode class="qr"></qrcode>
|
|
<footer>
|
|
<button class="download">Download</button>
|
|
<button class="edit">Edit</button>
|
|
</footer>
|
|
</config>
|
|
</template>
|
|
<template id="modal">
|
|
<backdrop>
|
|
<wrapper>
|
|
</wrapper>
|
|
</backdrop>
|
|
</template>
|
|
<template id="create-form">
|
|
<form>
|
|
<h3>Create new client</h3>
|
|
<label for="create-name">Name</label>
|
|
<input type="text"
|
|
id="create-name"
|
|
name="name"
|
|
placeholder="My laptop"
|
|
required/>
|
|
<label for="create-description">Description</label>
|
|
<textarea id="create-description"
|
|
name="description"
|
|
placeholder="The grey one"></textarea>
|
|
<footer>
|
|
<right>
|
|
<button class="save" type="submit">Create</button>
|
|
</right>
|
|
<left>
|
|
<button class="cancel">Cancel</button>
|
|
</left>
|
|
</footer>
|
|
</form>
|
|
</template>
|
|
<template id="update-form">
|
|
<form>
|
|
<h3>Edit a client</h3>
|
|
<label for="edit-name">Name</label>
|
|
<input type="text"
|
|
id="edit-name"
|
|
name="name"
|
|
placeholder="My laptop"/>
|
|
<label for="edit-description">Description</label>
|
|
<textarea id="edit-description" name="description"></textarea>
|
|
<footer>
|
|
<right>
|
|
<button class="save" type="submit">Save</button>
|
|
<button class="delete" type="button">Delete</button>
|
|
</right>
|
|
<left>
|
|
<button class="cancel">Cancel</button>
|
|
</left>
|
|
</footer>
|
|
</form>
|
|
</template>
|
|
<template id="access-denied">
|
|
<div>
|
|
<h2>Access denied</h2>
|
|
<p>
|
|
You do not have permission to access this site.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</body>
|
|
</html>
|