Allow users to specify custom hostnames

This commit is contained in:
Marcel Pociot
2020-11-01 22:40:17 +01:00
parent 5b7a80bb0c
commit cec52c4229
28 changed files with 913 additions and 63 deletions

View File

@@ -9,10 +9,10 @@
<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">
Host
Local Host
</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">
Subdomain
Expose Host
</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
@@ -26,13 +26,13 @@
@{ site.host }
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
@{ site.subdomain }.{{ configuration.hostname()}}:{{ configuration.port() }}
@{ getUrl(site) }
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
@{ site.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="'{{ scheme|raw }}://'+site.subdomain+'.{{ configuration.hostname()}}:{{ configuration.port() }}'" target="_blank"
<a :href="'{{ scheme|raw }}://'+getUrl(site)" target="_blank"
class="text-indigo-600 hover:text-indigo-900">Visit</a>
<a href="#"
@click.prevent="disconnectSite(site.client_id)"
@@ -60,6 +60,12 @@
},
methods: {
getUrl(site) {
if (site.hostname !== '' && site.hostname !== null) {
return site.hostname;
}
return `${site.subdomain}.{{ configuration.hostname()}}:{{ configuration.port() }}`;
},
disconnectSite(id) {
fetch('/api/sites/' + id, {
method: 'DELETE',

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_specify_hostnames"
class="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
Can specify custom hostnames
</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_specify_hostnames"
v-model="userForm.can_specify_hostnames"
name="can_specify_hostnames"
value="1" type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
<label for="can_specify_hostnames" class="ml-2 block text-sm leading-5 text-gray-900">
Yes
</label>
</div>
</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">
@@ -92,6 +111,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">
Custom Hostnames
</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>
@@ -117,6 +139,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_specify_hostnames === 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">
<span v-if="user.can_share_tcp_ports === 0">
No
@@ -174,6 +204,7 @@
userForm: {
name: '',
can_specify_subdomains: true,
can_specify_hostnames: true,
can_share_tcp_ports: true,
errors: {},
},
@@ -218,6 +249,7 @@
if (data.user) {
this.userForm.name = '';
this.userForm.can_specify_subdomains = true;
this.userForm.can_specify_hostnames = true;
this.userForm.can_share_tcp_ports = true;
this.userForm.errors = {};
this.users.unshift(data.user);