Erik Thuning
2c6b67ef2a
This is to make the content presentation more robust in the face of user-initiated css overrides.
158 lines
4.6 KiB
HTML
158 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-GB">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="static/style.css?6">
|
|
<script src="static/script.js?6"></script>
|
|
<title>WG-selfserve</title>
|
|
</head>
|
|
<body style="display: none;">
|
|
<header>
|
|
<h1>Your VPN Clients</h1>
|
|
<user id="banner-userid"></user>
|
|
</header>
|
|
<main>
|
|
<aside class="vpnstatus">
|
|
<p>
|
|
Your connection status:
|
|
<span class="result">Checking...</span>
|
|
</p>
|
|
</aside>
|
|
<aside class="topbox">
|
|
<details open>
|
|
<summary>
|
|
<h2>Instructions</h2>
|
|
</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>
|
|
</aside>
|
|
<div class="config-intro">
|
|
<h2>Your VPN clients</h2>
|
|
<button id="create-config">Add a client</button>
|
|
</div>
|
|
<configs>
|
|
<placeholder>Your clients will be displayed here.</placeholder>
|
|
</configs>
|
|
</main>
|
|
<footer>
|
|
<div>
|
|
<div class="su-name">
|
|
Stockholm University
|
|
</div>
|
|
<div class="dsv-name">
|
|
Department of Computer and Systems Sciences
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2>Contact</h2>
|
|
<div>
|
|
<a href="mailto:helpdesk@dsv.su.se">Email helpdesk</a>
|
|
</div>
|
|
<div>Phone: 08 - 16 16 48</div>
|
|
</div>
|
|
<div>
|
|
<p class="a11y-text">
|
|
This website attempts to fulfill WCAG 2.1 AA. Please don't
|
|
hesitate to <a href="mailto:helpdesk@dsv.su.se">contact us</a>
|
|
if you experience any issues.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
<template id="display-config">
|
|
<article>
|
|
<h3 class="name"></h3>
|
|
<expires>Expires: <span class="expiry-date"></span></expires>
|
|
<description></description>
|
|
<qrcode class="qr"></qrcode>
|
|
<a class="conffile" href="" download=""></a>
|
|
<data></data>
|
|
<div class="modal-bottom">
|
|
<button class="download">Download</button>
|
|
<button class="edit">Edit</button>
|
|
</div>
|
|
</article>
|
|
</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>
|
|
<div class="modal-bottom">
|
|
<left>
|
|
<button class="cancel">Cancel</button>
|
|
</left>
|
|
<right>
|
|
<button class="save" type="submit">Create</button>
|
|
</right>
|
|
</div>
|
|
</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>
|
|
<div class="modal-bottom">
|
|
<left>
|
|
<button class="cancel">Cancel</button>
|
|
</left>
|
|
<right>
|
|
<button class="delete" type="button">Delete</button>
|
|
<button class="save" type="submit">Save</button>
|
|
</right>
|
|
</div>
|
|
</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>
|