mirror of
https://github.com/trailofbits/algo.git
synced 2025-07-14 09:42:54 +02:00
222 lines
10 KiB
HTML
222 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html class="h-100">
|
|
<head>
|
|
<title>Algo VPN</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.css"
|
|
integrity="sha256-uTIrmf95e6IHlacC0wpDaPS58eWF314UC7OgdrD6AdU=" crossorigin="anonymous"/>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"
|
|
integrity="sha256-chlNFSVx3TdcQ2Xlw7SvnbLAavAQLO0Y/LBiWX04viY=" crossorigin="anonymous"></script>
|
|
<style>
|
|
.console {
|
|
background: black;
|
|
color: white;
|
|
padding: 4px;
|
|
border-radius: 2px;
|
|
white-space: pre-line;
|
|
padding-left: 2em;
|
|
position: relative;
|
|
}
|
|
.console::before {
|
|
content: "$";
|
|
position: absolute;
|
|
left: 1em;
|
|
}
|
|
.backdrop {
|
|
position: fixed;
|
|
background: white;
|
|
opacity: 0.6;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
}
|
|
.footer .container {
|
|
position: relative;
|
|
z-index: 101;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="d-flex flex-column h-100">
|
|
<div style="overflow: auto">
|
|
<div class="container">
|
|
<h1 class="mb-5 text-center">Algo VPN Setup</h1>
|
|
<div class="row">
|
|
<div class="col-md-4 order-md-2 mb-4" id="users_app">
|
|
<h2>Users</h2>
|
|
<section class="my-3">
|
|
<h4>Set up user list</h4>
|
|
<ul class="list-group">
|
|
<li class="list-group-item"
|
|
v-for="(user, index) in config.users"
|
|
:key="user"
|
|
>
|
|
{{ user }}
|
|
<button type="button" class="btn btn-secondary btn-sm float-right"
|
|
@click="remove_user(index)">
|
|
Remove
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<div class="my-3 form-group">
|
|
<label for="id_new_user">Add new user</label>
|
|
<div class="input-group">
|
|
|
|
<input type="text" id="id_new_user" class="form-control" placeholder="username"
|
|
v-model="new_user">
|
|
<div class="input-group-append">
|
|
<button @click="add_user" class="btn btn-outline-primary" type="button"
|
|
id="button-addon2">
|
|
Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div>
|
|
<button @click="save_config" v-bind:disabled="loading" class="btn btn-secondary" type="button">Save
|
|
</button>
|
|
<span v-if="save_config_message"
|
|
v-bind:class="{ 'text-success': ok, 'text-danged': !ok }">{{save_config_message}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 order-md-1" id="options_app">
|
|
<h2>VPN Options</h2>
|
|
<section class="my-3">
|
|
<div class="form-group">
|
|
<label>Name the vpn server</label>
|
|
<input type="text" class="form-control" placeholder="server name"
|
|
v-model="extra_args.server_name"/>
|
|
</div>
|
|
<label>MacOS/iOS IPsec clients to enable Connect On Demand:</label>
|
|
<div class="form-check">
|
|
<label title="MacOS/iOS IPsec clients to enable Connect On Demand when connected to cellular
|
|
networks?">
|
|
<input class="form-check-input" type="checkbox" name="ondemand_cellular"
|
|
v-model="extra_args.ondemand_cellular">
|
|
when connected to cellular networks
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<label title="MacOS/iOS IPsec clients to enable Connect On Demand when connected to Wi-Fi?">
|
|
<input class="form-check-input" type="checkbox" name="ondemand_wifi"
|
|
v-model="extra_args.ondemand_wifi">
|
|
when connected to WiFi
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="id_ondemand_wifi_exclude">Trusted Wi-Fi networks</label>
|
|
<input type="text" class="form-control" id="id_ondemand_wifi_exclude"
|
|
name="ondemand_wifi_exclude"
|
|
placeholder="HomeNet,OfficeWifi,AlgoWiFi"
|
|
v-model="extra_args.ondemand_wifi_exclude"/>
|
|
<small class="form-text text-muted">
|
|
List the names of any trusted Wi-Fi networks where
|
|
macOS/iOS
|
|
IPsec clients should not use "Connect On Demand"
|
|
(e.g., your home network. Comma-separated value, e.g.,
|
|
HomeNet,OfficeWifi,AlgoWiFi)
|
|
</small>
|
|
</div>
|
|
<label>Retain the PKI</label>
|
|
<div class="form-check">
|
|
<label>
|
|
<input class="form-check-input" type="checkbox" name="store_pki"
|
|
v-model="extra_args.store_pki">
|
|
Do you want to retain the keys (PKI)?
|
|
<small class="form-text text-muted">required to add users in the future, but less
|
|
secure</small>
|
|
</label>
|
|
|
|
</div>
|
|
<label>DNS adblocking</label>
|
|
<div class="form-check">
|
|
<label>
|
|
<input class="form-check-input" type="checkbox" name="dns_adblocking"
|
|
v-model="extra_args.dns_adblocking">
|
|
Enable DNS ad blocking on this VPN server
|
|
</label>
|
|
</div>
|
|
<label>SSH tunneling</label>
|
|
<div class="form-check">
|
|
<label>
|
|
<input class="form-check-input" type="checkbox" name="ssh_tunneling"
|
|
v-model="extra_args.ssh_tunneling">
|
|
Each user will have their own account for SSH tunneling
|
|
</label>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<hr class="my-3">
|
|
<section class="my-3" id="provider_app">
|
|
<h2>Select cloud provider</h2>
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<ul class="nav flex-column nav-pills">
|
|
<li class="nav-item"
|
|
v-for="provider in providers_map">
|
|
<a class="nav-link" href="#"
|
|
v-bind:class="{ active: provider.alias === extra_args.provider }"
|
|
@click="set_provider(provider.alias)">{{provider.name}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="my-3" v-if="extra_args.provider === 'digitalocean'">
|
|
<h4>Digital Ocean Options</h4>
|
|
<div class="form-group">
|
|
<label for="id_do_token">Enter your API token. The token must have read and write permissions
|
|
(https://cloud.digitalocean.com/settings/api/tokens):</label>
|
|
<input type="text" class="form-control" id="id_do_token" name="do_token"
|
|
v-model="extra_args.do_token"
|
|
@blur="load_do_regions"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="id_region">What region should the server be located in?</label>
|
|
<select name="region" id="id_region" class="form-control" v-model="extra_args.region">
|
|
<option value="" disabled>Select region</option>
|
|
<option
|
|
v-for="(region, index) in do_regions"
|
|
v-bind:value="region.slug">
|
|
{{region.name}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<footer class="footer mt-auto py-3" id="status_app">
|
|
<div class="backdrop d-flex flex-column align-items-center justify-content-center" v-if="show_backdrop">
|
|
<span class="spinner-border" role="status" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="container">
|
|
<div v-if="!status || status === 'cancelled'">
|
|
<pre class="console">{{cli_preview}}</pre>
|
|
<button @click="run" class="btn btn-primary" type="button">Install</button>
|
|
</div>
|
|
<div v-if="status === 'running'">
|
|
<pre class="console">{{program.join(' ')}}</pre>
|
|
<button class="btn btn-danger" type="button" @click="stop">Stop</button>
|
|
<button class="btn btn-primary" type="button" disabled>
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
Running...
|
|
</button>
|
|
</div>
|
|
<div v-if="status === 'done'">
|
|
<pre class="console">{{program.join(' ')}}</pre>
|
|
<div class="text-success">Done!</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="./static/app.js"></script>
|
|
</body>
|
|
</html>
|