Add auth-managed proxy UI improvements

This commit is contained in:
2026-04-03 20:58:54 -04:00
parent 7ed709ad3d
commit f2a246ce6b
9 changed files with 1384 additions and 82 deletions

View File

@ -11,8 +11,11 @@
background-image: url("/static/pub/long-banner.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
width: 100%;
flex: 1 1 auto;
width: 100%;
min-height: 50px;
}
img.banner {
height: 50px;
@ -24,6 +27,15 @@
table {
width: 100%;
}
.allow-from-options {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
margin-top: 0.35rem;
}
.allow-from-options .button {
height: 1.8rem;
}
</style>
</head>
@ -34,6 +46,15 @@
</div>
<div class="banner-container">
<!-- <img class="banner-long" src="/static/pub/long-banner.jpg"/> -->
<div class="navbar-end pr-4">
<div class="navbar-item">
<span class="has-text-white mr-3">Signed in as {{.Username}}</span>
<a class="button is-small is-warning mr-2" href="/users">{{if eq .Role "admin"}}Users{{else}}Account{{end}}</a>
<form method="post" action="/logout" autocomplete="off">
<button class="button is-small is-light" type="submit">Logout</button>
</form>
</div>
</div>
</div>
</nav>
@ -49,6 +70,7 @@
<th>Dest Host/IP</th>
<th>Expiration</th>
<th>Status</th>
<th>Created By</th>
<th></th>
</tr>
</thead>
@ -64,11 +86,15 @@
</div>
</td>
<td>
<input class="input is-link is-small" type="text" form="add-noodle" name="src" list="allow-from-options" placeholder="All or source IP" value="All" autocomplete="off" required/>
<input class="input is-link is-small" type="text" form="add-noodle" name="src" list="allow-from-options" placeholder="All, comma-separated IPs, or CIDRs" value="All" autocomplete="off" required/>
<datalist id="allow-from-options">
<option value="All"></option>
<option value="{{.ClientIP}}"></option>
</datalist>
<div class="allow-from-options">
<button class="button is-small is-white" type="button" onclick="setAllowFromValue('All')">All</button>
<button class="button is-small is-white" type="button" onclick="setAllowFromValue('{{.ClientIP}}')">{{.ClientIP}}</button>
</div>
</td>
<td><input class="input is-link is-small" type="text" form="add-noodle" name="listen_port" placeholder="Listen Port" autocomplete="off" required/></td>
<td><input class="input is-link is-small" type="text" form="add-noodle" name="dest_port" placeholder="Destination Port" autocomplete="off" required/></td>
@ -76,6 +102,8 @@
<td><input class="input is-link is-small" type="text" form="add-noodle" name="expiration" placeholder="30m, 1h15m" autocomplete="off" required/></td>
<td>
</td>
<td>
</td>
<td>
<form id="add-noodle" method="post" action="/add" autocomplete="off">
<button class="button" type="submit">
@ -101,10 +129,14 @@
</label>
</form>
</td>
<td>{{.CreatedBy}}</td>
<td>
<a href="/delete?id={{.Id}}">
<span class="icon has-text-danger"><i class="fas fa-minus"></i></span>
</a>
<form method="post" action="/delete" autocomplete="off" onsubmit="return confirm('Delete this proxy?');">
<input type="hidden" name="id" value="{{.Id}}"/>
<button class="button is-white" type="submit" aria-label="Delete noodle">
<span class="icon has-text-danger"><i class="fas fa-minus"></i></span>
</button>
</form>
</td>
</tr>
{{end}}
@ -114,11 +146,20 @@
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>Infinite-Noodles Network Proxy</strong> - &copy; 2025 Jimmy Allen
<strong>Infinite-Noodles Network Proxy</strong>
</p>
</div>
</footer>
<script>
function setAllowFromValue(value) {
const input = document.querySelector('input[name="src"]');
if (!input) {
return;
}
input.value = value;
input.focus();
}
function formatDuration(ms) {
if (ms <= 0) {
return "0s";