103 lines
3.1 KiB
HTML
103 lines
3.1 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">
|
|
<script type="text/javascript" src="static/script.js"></script>
|
|
<script type="text/javascript" src="static/qrcode.min.js"></script>
|
|
<title>WG-selfserve</title>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Your VPN Clients</h1>
|
|
<user id="banner-userid"></user>
|
|
</header>
|
|
<topbox>
|
|
<details class="instructions" open>
|
|
<summary>Instructions</summary>
|
|
<ol>
|
|
<li>
|
|
<a href="https://serviceportalen.su.se/sv-se/article/1319269" target="_blank">
|
|
Install WireGuard (opens in a new tab) on the client device.
|
|
</a>
|
|
</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>
|
|
<a class="conffile" href="" download=""></a>
|
|
<date></date>
|
|
<name></name>
|
|
<description></description>
|
|
<data></data>
|
|
<qrcode></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>
|
|
<input type="text" name="name" placeholder="Name" required/>
|
|
<textarea name="description" placeholder="Description"></textarea>
|
|
<footer>
|
|
<right>
|
|
<button class="save">Create</button>
|
|
</right>
|
|
<left>
|
|
<button class="cancel">Cancel</button>
|
|
</left>
|
|
</footer>
|
|
</form>
|
|
</template>
|
|
<template id="update-form">
|
|
<form>
|
|
<h3>Edit a client</h3>
|
|
<input type="text" name="name" placeholder="Name"/>
|
|
<textarea name="description" placeholder="Description"></textarea>
|
|
<footer>
|
|
<right>
|
|
<button class="save">Save</button>
|
|
<button class="delete">Delete</button>
|
|
</right>
|
|
<left>
|
|
<button class="cancel">Cancel</button>
|
|
</left>
|
|
</footer>
|
|
</form>
|
|
</template>
|
|
</body>
|
|
</html>
|