bitinflow/expose
1
0
Fork 0
mirror of https://github.com/bitinflow/expose.git synced 2026-03-13 13:35:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add ability to expose TCP connections (#123)

Browse Source
This commit is contained in:
Marcel Pociot
2020-09-08 16:27:39 +02:00
committed by GitHub
parent c8cfe7b8b4
commit 2f57fa1952
29 changed files with 1430 additions and 1159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/views/server/layouts/app.twig
View File

@@ -27,6 +27,12 @@
ml-8 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out">
Shared sites
</a>
<a href="/tcp"
class="
{% if request.is('tcp') %} border-indigo-500 focus:border-indigo-700 text-gray-900 {% else %} border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300{% endif %}
ml-8 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out">
TCP connections
</a>
<a href="/settings"
class="
{% if request.is('settings') %} border-indigo-500 focus:border-indigo-700 text-gray-900 {% else %} border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300{% endif %}

73
resources/views/server/tcp/index.twig Normal file
View File

@@ -0,0 +1,73 @@
{% extends "app" %}
{% block title %}TCP Connections{% endblock %}
{% block content %}
<div class="flex flex-col py-8">
<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
<div
class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
<table class="min-w-full" v-if="connections.length > 0">
<thead>
<tr>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Local Port
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Expose Port
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Shared At
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
</tr>
</thead>
<tbody class="bg-white">
<tr v-for="connection in connections">
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium text-gray-900">
@{ connection.port }
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
@{ connection.shared_port }
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
@{ connection.shared_at }
</td>
<td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-200 text-sm leading-5 font-medium">
<a href="#"
@click.prevent="disconnectConnection(connection.client_id)"
class="pl-2 text-red-600 hover:text-red-900">Disconnect</a>
</td>
</tr>
</tbody>
</table>
<div class="flex items-center justify-center text-gray-900 p-4" v-else>
<span class="text-xl">There are no TCP connections shared with this server yet.</span>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
new Vue({
el: '#app',
delimiters: ['@{', '}'],
data: {
connections: {{ connections|json_encode|raw }}
},
methods: {
disconnectConnection(id) {
fetch('/api/tcp/' + id, {
method: 'DELETE',
}).then((response) => {
return response.json();
}).then((data) => {
this.connections = data.connections;
});
}
}
})
</script>
{% endblock %}

34
resources/views/server/users/index.twig
View File

@@ -43,6 +43,25 @@
</div>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
<label for="can_share_tcp_ports"
class="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
Can share TCP ports
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-2 flex items-center justify-between">
<div class="flex items-center">
<input id="can_share_tcp_ports"
v-model="userForm.can_share_tcp_ports"
name="can_share_tcp_ports"
value="1" type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
<label for="can_share_tcp_ports" class="ml-2 block text-sm leading-5 text-gray-900">
Yes
</label>
</div>
</div>
</div>
</div>
</div>
<div class="mt-8 border-t border-gray-200 pt-5">
<div class="flex justify-end">
@@ -73,6 +92,9 @@
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Custom Subdomains
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
TCP ports
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Created At
</th>
@@ -95,6 +117,14 @@
Yes
</span>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
<span v-if="user.can_share_tcp_ports === 0">
No
</span>
<span v-else>
Yes
</span>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
@{ user.created_at }
</td>
@@ -144,6 +174,7 @@
userForm: {
name: '',
can_specify_subdomains: true,
can_share_tcp_ports: true,
errors: {},
},
paginated: {{ paginated|json_encode|raw }}
@@ -186,7 +217,8 @@
}).then((data) => {
if (data.user) {
this.userForm.name = '';
this.userForm.can_specify_subdomains = 0;
this.userForm.can_specify_subdomains = true;
this.userForm.can_share_tcp_ports = true;
this.userForm.errors = {};
this.users.unshift(data.user);
}