DweebUI/views/settings.html
2024-10-27 17:55:40 -07:00

292 lines
No EOL
13 KiB
HTML

<!doctype html>
<!--Tabler - version 1.0.0-beta20 - Copyright 2018-2023 The Tabler Authors - Copyright 2018-2023 codecalm.net Paweł Kuna - Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Settings - DweebUI.</title>
<!-- CSS files -->
<link href="/css/tabler.min.css?1692870487" rel="stylesheet"/>
<link href="/css/demo.min.css?1692870487" rel="stylesheet"/>
<link href="/css/dweebui.css" rel="stylesheet"/>
</head>
<body >
<div class="page">
<!-- EJS -->
<%- navbar %>
<div class="page-wrapper">
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
<div class="card">
<div class="row g-0">
<!-- EJS -->
<%- sidebar %>
<div class="col-12 col-md-9 d-flex flex-column">
<div class="card-body">
<!-- HTMX - Submits the form and replaces the target with the response. Replaces the submit button with "Updated" -->
<form id="settings" hx-post="/settings/action/update" hx-target="#submit" hx-swap="outerHTML">
<h1 class="">Settings</h1>
<label class="text-muted mb-3">Configure server settings. Admin only.</label>
<div class="table-group-divider mt-6"></div>
<h3 class="card-title mt-4">User Registration</h3>
<p class="card-subtitle mb-3">Enable registration and choose a secret.</p>
<div class="row align-items-center">
<div class="col-auto">
<label class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" name="user_registration" <%= user_registration %>>
<span class="form-check-label form-check-label-on text-success">
Enabled
</span>
<span class="form-check-label form-check-label-off text-danger">
Disabled
</span>
</label>
</div>
<div class="col-5">
<input type="text" class="form-control" name="registration_secret" placeholder="multiple-words-strong-passphrase" value="<%= registration_secret %>">
</div>
</div>
<div class="table-group-divider mt-3"></div>
<h3 class="card-title mt-4">Container Port Links</h3>
<p class="card-subtitle mb-3">Choose the base URL for the container card port links. Link can include 'http://' or 'https://'.</p>
<div class="row align-items-center">
<div class="col-auto">
<label class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" name="custom_link" <%= custom_link %>>
<span class="form-check-label form-check-label-on text-warning">
Custom
</span>
<span class="form-check-label form-check-label-off text-success">
Localhost
</span>
</label>
</div>
<div class="col-5">
<input type="text" class="form-control" name="link_url" placeholder="IP Address or Domain" value="<%= link_url %>">
</div>
</div>
<div class="table-group-divider mt-3"></div>
<h3 class="card-title mt-4">Authentication</h3>
<p class="card-subtitle mb-3">Change authentication settings. Only the default, Username and Password, supports multiple users.</p>
<div class="row align-items-center">
<div class="col-auto">
<select class="form-select" name="authentication">
<option value="default">Username and Password - Default</option>
<option value="localhost">Localhost</option>
<option value="no_auth">Disabled - No Authentication</option>
</select>
</div>
</div>
<div class="table-group-divider mt-3"></div>
<h3 class="card-title mt-4">Default Language</h3>
<p class="card-subtitle">Default language for the server.</p>
<div class="row g-2">
<div class="col-3">
<select class="form-control form-select" name="language_input">
<option value="english" selected="" hidden="">English</option>
<%- selected %>
<option value="english">English</option>
<option value="chinese">Chinese</option>
</select>
</div>
<div class="col-auto">
<button class="btn" aria-label="button" name="check_languages" id="check_languages" value="true" hx-post="/update_languages" hx-swap="outerHTML" hx-target="#check_languages">Update Language Files</button>
</div>
</div>
<!-- <div class="table-group-divider mt-3"></div>
<h3 class="card-title mt-4">HTTP / HTTPS</h3>
<p class="card-subtitle">Requires restarting DweebUI.</p>
<div class="row g-2">
<div class="col-3">
<select class="form-control form-select" name="language_input">
<option value="HTTP" selected="" hidden="">HTTP</option>
<option value="HTTP">HTTP</option>
<option value="HTTPS">HTTPS</option>
</select>
</div>
<div class="col-auto">
<button class="btn" aria-label="button">Restart DweebUI</button>
</div>
</div>
<div class="table-group-divider mt-3"></div>
<h3 class="card-title mt-4">Port</h3>
<p class="card-subtitle">Requires restarting DweebUI.</p>
<div class="row g-2">
<div class="col-3">
<input type="text" class="form-control" name="port" placeholder="Port" value="8000">
</div>
<div class="col-auto">
<button class="btn" aria-label="button">Restart DweebUI</button>
</div>
</div> -->
<div class="table-group-divider mt-4"></div>
<h3 class="mt-4">Hosts</h3>
<label class="text-muted mb-2">Host #1</label>
<div class="row align-items-center">
<div class="col-auto">
<label class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" name="host1" checked disabled>
<span class="form-check-label form-check-label-on text-success">
Enabled
</span>
<span class="form-check-label form-check-label-off text-danger">
Disabled
</span>
</label>
</div>
<div class="col-2">
<input type="text" class="form-control" placeholder="Host 1" readonly>
</div>
<div class="col-4">
<input type="text" class="form-control" placeholder="/var/run/docker.sock" readonly>
</div>
<div class="col-2">
<input type="text" class="form-control" readonly>
</div>
</div>
<label class="text-muted mb-2">Host #2</label>
<div class="row align-items-center">
<div class="col-auto">
<label class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" name="host2" <%= host2_toggle %> >
<span class="form-check-label form-check-label-on text-success">
Enabled
</span>
<span class="form-check-label form-check-label-off text-danger">
Disabled
</span>
</label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="tag2" value="<%= host2_tag %>" placeholder="Tag">
</div>
<div class="col-4">
<input type="text" class="form-control" name="ip2" value="<%= host2_ip %>" placeholder="Host IP">
</div>
<div class="col-2">
<input type="text" class="form-control" name="port2" value="<%= host2_port %>" placeholder="PORT">
</div>
</div>
<label class="text-muted mb-2">Host #3</label>
<div class="row align-items-center">
<div class="col-auto">
<label class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" name="host3" <%= host3_toggle %> >
<span class="form-check-label form-check-label-on text-success">
Enabled
</span>
<span class="form-check-label form-check-label-off text-danger">
Disabled
</span>
</label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="tag3" value="<%= host3_tag %>" placeholder="Tag">
</div>
<div class="col-4">
<input type="text" class="form-control" name="ip3" value="<%= host3_ip %>" placeholder="Host IP">
</div>
<div class="col-2">
<input type="text" class="form-control" name="port3" value="<%= host3_port %>" placeholder="PORT">
</div>
</div>
<label class="text-muted mb-2">Host #4</label>
<div class="row align-items-center">
<div class="col-auto">
<label class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" name="host4" <%= host4_toggle %> >
<span class="form-check-label form-check-label-on text-success">
Enabled
</span>
<span class="form-check-label form-check-label-off text-danger">
Disabled
</span>
</label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="tag4" value="<%= host4_tag %>" placeholder="Tag">
</div>
<div class="col-4">
<input type="text" class="form-control" name="ip4" value="<%= host4_ip %>" placeholder="Host IP">
</div>
<div class="col-2">
<input type="text" class="form-control" name="port4" value="<%= host4_port %>" placeholder="PORT">
</div>
</div>
</div>
<div class="card-footer bg-transparent mt-auto">
<div class="btn-list justify-content-end">
<a href="#" class="btn">
Cancel
</a>
<button class="btn btn-primary" id="submit">
Update
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- EJS -->
<%- footer %>
</div>
</div>
<script src="/js/dweebui.js" defer></script>
<script src="/js/htmx.min.js"></script>
<!-- Tabler Core -->
<script src="/js/tabler.min.js?1692870487" defer></script>
<script src="/js/demo.min.js?1692870487" defer></script>
</body>
</html>