236 lines
9.1 KiB
HTML
236 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Telebit Setup</title>
|
|
</head>
|
|
<body>
|
|
<script>document.body.hidden = true;</script>
|
|
|
|
<div class="v-app">
|
|
<h1>Telebit (Remote) Setup v{{ config.version }}</h1>
|
|
|
|
<section v-if="views.flash.error">
|
|
{{ views.flash.error }}
|
|
</section>
|
|
|
|
<section v-if="views.section.loading">
|
|
Loading...
|
|
</section>
|
|
|
|
<section v-if="views.section.setup">
|
|
<h2>Create Account</h2>
|
|
<form v-on:submit.stop.prevent="initialize">
|
|
|
|
<label for="-email">Email:</label>
|
|
<input id="-email" v-model="init.email" type="text" placeholder="john@example.com" required>
|
|
<br>
|
|
|
|
<label for="-teletos"><input id="-teletos" v-model="init.teletos" type="checkbox" required>
|
|
Accept Telebit Terms of Service</label>
|
|
<br>
|
|
|
|
<label for="-letos"><input id="-letos" v-model="init.letos" type="checkbox" required>
|
|
Accept Let's Encrypt Terms of Service</label>
|
|
<br>
|
|
|
|
<label for="-notifications">Notification Preferences</label>
|
|
<select id="-notifications" v-model="init.notifications">
|
|
<option value="newsletter">Occassional Newsletter</option>
|
|
<option value="important" default><strong>Important Messages Only</strong></option>
|
|
<option value="required">Required Only</option>
|
|
</select>
|
|
|
|
<small>
|
|
<p v-if="'newsletter' == init.notifications">
|
|
You'll receive a friendly note now and then in addition to the important updates.
|
|
</p>
|
|
<p v-if="'important' == init.notifications">
|
|
You'll only receive updates that we believe will be of the most value to you, and the required updates.
|
|
</p>
|
|
<p v-if="'required' == init.notifications">
|
|
You'll only receive security updates, transactional and account-related messages, and legal notices.
|
|
</p>
|
|
</small>
|
|
|
|
<details><summary><small>Advanced</small></summary>
|
|
|
|
<label for="-relay">Relay:</label>
|
|
<input id="-relay" v-model="init.relay" type="text" placeholder="telebit.cloud">
|
|
<br>
|
|
<button type="button" v-on:click="defaultRelay">Use Default</button>
|
|
<button type="button" v-on:click="betaRelay">Use Beta</button>
|
|
<br>
|
|
<br>
|
|
|
|
<label for="-acme-server">ACME (Let's Encrypt) Server:</label>
|
|
<input id="-acme-server" v-model="init.acmeServer" type="text" placeholder="https://acme-v02.api.letsencrypt.org/directory">
|
|
<br>
|
|
<button type="button" v-on:click="productionAcme">Use Production</button>
|
|
<button type="button" v-on:click="stagingAcme">Use Staging</button>
|
|
<br>
|
|
<br>
|
|
|
|
</details>
|
|
|
|
<button type="submit">Accept & Continue</button>
|
|
|
|
</form>
|
|
<pre><code>{{ init }}</code></pre>
|
|
</section>
|
|
|
|
<section v-if="views.section.advanced">
|
|
<h2>Advanced Setup for {{ init.relay }}</h2>
|
|
<form v-on:submit.stop.prevent="advance">
|
|
|
|
<strong><label for="-secret">Relay Shared Secret:</label></strong>
|
|
<input id="-secret" v-model="init.secret" type="text" placeholder="ex: xxxxxxxxxxxx">
|
|
<br>
|
|
|
|
<strong><label for="-domains">Domains:</label></strong>
|
|
<br>
|
|
<small>(comma separated list of domains to use for http, tls, https, etc)</small>
|
|
<br>
|
|
<input id="-domains" v-model="init.domains" type="text" placeholder="ex: whatever.com, example.com">
|
|
<br>
|
|
|
|
<strong><label for="-ports">TCP Ports:</label></strong>
|
|
<br>
|
|
<small>(comman separated list of ports, excluding 80 and 443, typically port over 1024)</small>
|
|
<br>
|
|
<input id="-ports" v-model="init.ports" type="text" placeholder="ex: 5050, 3000, 8080">
|
|
<br>
|
|
|
|
<label for="-telemetry"><input id="-telemetry" v-model="init.telemetry" type="checkbox">
|
|
Contribute to Telebit by sharing telemetry</label>
|
|
<br>
|
|
|
|
<button type="submit">Finish</button>
|
|
|
|
</form>
|
|
<pre><code>{{ init }}</code></pre>
|
|
</section>
|
|
|
|
<section v-if="views.section.otp">
|
|
<pre><code><h2>{{ init.otp }}</h2></code></pre>
|
|
</section>
|
|
|
|
<section v-if="views.section.status">
|
|
http://localhost:{{ status.port }}
|
|
<br>
|
|
<br>
|
|
|
|
<section v-if="views.section.status_chooser">
|
|
<button v-on:click.prevent.stop="changeState('status/share')">Share Files & Folders</button>
|
|
<button v-on:click.prevent.stop="changeState('status/host')">Host a Website or Webapp</button>
|
|
<button v-on:click.prevent.stop="changeState('status/access')">Remote Access via SSH</button>
|
|
</section>
|
|
|
|
<section v-if="views.section.status_access">
|
|
SSH:
|
|
<span v-if="status.ssh">{{ status.ssh }}
|
|
<button v-on:click="ssh(-1)">Disable SSH</button></span>
|
|
<span v-if="!status.ssh"><input type="text" v-model="state.ssh" placeholder="22">
|
|
<button v-on:click="ssh(state.ssh)">Enable SSH</button></span>
|
|
<br>
|
|
<br>
|
|
<div v-if="state.ssh_active">SSH is currently running</div>
|
|
<div v-if="!state.ssh_active">SSH is not currently running</div>
|
|
<br>
|
|
<div v-if="state.ssh_insecure">Password Authentication is NOT disabled.
|
|
Please consider updating your <code>sshd_config</code> and restarting ssh.
|
|
<pre><code>{{ status }}</code></pre>
|
|
</div>
|
|
<div v-if="!state.ssh_insecure">Key-Only Authentication is enabled :)</div>
|
|
<br>
|
|
<div class="alert alert-info">
|
|
<strong>Important:</strong> Accessing this device with other SSH clients:
|
|
<br>
|
|
In order to use your other ssh clients with telebit you will need to put them into
|
|
<strong>ssh+https mode</strong>.
|
|
|
|
We recommend downloading <code><a href="https://telebit.cloud/sclient/" target="_blank">sclient</a></code>
|
|
to do so, because it makes it as simple as adding <code>-o ProxyCommand="sclient %h"</code> to your
|
|
ssh command to enable ssh+https:
|
|
<pre><code>ssh -o ProxyCommand="sclient %h" {{ newHttp.name }}</code></pre>
|
|
<br>
|
|
However, most clients can also use <code>openssl s_client</code>, which does the same thing, but is
|
|
more difficult to remember:
|
|
<pre><code>proxy_cmd='openssl s_client -connect %h:443 -servername %h -quiet'
|
|
ssh -o ProxyCommand="$proxy_cmd" hot-skunk-45.telebit.io</code></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="views.section.status_share">
|
|
Path Hosting:
|
|
<ul>
|
|
<li v-for="domain in status.pathHosting">
|
|
<form v-on:submit.prevent.stop="changePathHost(domain, domain.path)">
|
|
{{ domain.name }}
|
|
<input type="text" v-model="domain.path" v-bind:placeholder="domain.handler">
|
|
<button type="submit"
|
|
v-if="domain.handler == domain.path">Save</button>
|
|
<button type="button" v-on:click="deletePathHost(domain)">X</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
<form v-on:submit.prevent.stop="createShare(newHttp.sub, newHttp.name, newHttp.handler)">
|
|
<input v-model="newHttp.sub" type="text" placeholder="subdomain (ex: pub)">
|
|
<select v-model="newHttp.name">
|
|
<option v-for="w in status.wildDomains" v-bind:value="w.name">{{ w.name }}</option>
|
|
</select>
|
|
<input v-model="newHttp.handler" type="text" placeholder="path (ex: ~/Public)" required>
|
|
<button>Add</button>
|
|
</form>
|
|
<br>
|
|
</section>
|
|
|
|
<section v-if="views.section.status_host">
|
|
Port Forwarding:
|
|
<ul>
|
|
<li v-for="domain in status.portForwards">
|
|
<form v-on:submit.prevent.stop="changePortForward(domain, domain._port)">
|
|
{{ domain.name }}
|
|
<input type="text" v-model="domain._port" v-bind:placeholder="domain.handler">
|
|
<button type="submit"
|
|
v-if="domain.handler == domain._port">Save</button>
|
|
<button type="button" v-on:click="deletePortForward(domain)">X</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
<form v-on:submit="createHost(newHttp.sub, newHttp.name, newHttp.handler)">
|
|
<input v-model="newHttp.sub" type="text" placeholder="subdomain (ex: api)">
|
|
<select v-model="newHttp.name">
|
|
<option v-for="w in status.wildDomains" v-bind:value="w.name">{{ w.name }}</option>
|
|
</select>
|
|
<input v-model="newHttp.handler" type="number" placeholder="port (ex: 3000)" required>
|
|
<button>Add</button>
|
|
</form>
|
|
</section>
|
|
|
|
<br>
|
|
Uptime: {{ statusUptime }}
|
|
<br>
|
|
Runtime: {{ statusRuntime }}
|
|
<br>
|
|
Reconnects: {{ status.reconnects }}
|
|
|
|
<details><summary><small>Advanced</small></summary>
|
|
<button v-if="!status.enabled" v-on:click="enable">Enable Traffic</button>
|
|
<button v-if="status.enabled" v-on:click="disable">Disable Traffic</button>
|
|
<br>
|
|
<br>
|
|
|
|
<pre><code>{{ status }}</code></pre>
|
|
</details>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script src="/js/vue.js"></script>
|
|
<script src="/js/bluecrypt-acme.js"></script>
|
|
<script src="/js/telebit.js"></script>
|
|
<script src="/js/telebit-token.js"></script>
|
|
<script src="/js/app.js"></script>
|
|
</body>
|
|
</html>
|