feat: enhance public VPN invite UI with improved styling and auto-refresh for logout

This commit is contained in:
Eduardo Silva 2025-03-01 12:09:18 -03:00
parent d42fae8cf3
commit ab281b7c7e

View File

@ -29,42 +29,39 @@
} }
form { form {
margin-top: 20px; margin-top: 20px;
text-align: center;
}
form label,
form input[type="password"],
form button[type="submit"] {
display: block;
margin: 0 auto 15px auto; /* superior: 0, horizontal: auto, inferior: 15px */
} }
label { label {
display: block;
margin-bottom: 8px;
font-weight: bold; font-weight: bold;
color: #555; color: #555;
text-align: center;
} }
input[type="password"] { input[type="password"] {
width: 80%; width: 80%;
padding: 8px; padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
font-size: 16px; font-size: 16px;
display: block;
margin-left: auto;
margin-right: auto;
} }
.btn { .btn {
display: inline-block;
padding: 10px 20px; padding: 10px 20px;
margin: 5px 0;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
color: #fff;
} }
.btn-primary { .btn-primary {
background-color: #007BFF; background-color: #007BFF;
color: white;
} }
.btn-secondary { .btn-secondary {
background-color: #6c757d; background-color: #6c757d;
color: white;
} }
.instructions { .instructions {
margin-top: 20px; margin-top: 20px;
@ -133,7 +130,7 @@
{% endif %} {% endif %}
</div> </div>
<div class="button-group"> <div class="button-group">
<a href="/invite/download_config/?token={{ peer_invite.uuid }}&amp;password={{ password }}" target="_blank" class="btn btn-primary">Download Config</a> <a href="/invite/download_config/?token={{ peer_invite.uuid }}&password={{ password }}" target="_blank" class="btn btn-primary">Download Config</a>
<a href="#" id="viewQrButton" class="btn btn-secondary">View QR Code</a> <a href="#" id="viewQrButton" class="btn btn-secondary">View QR Code</a>
</div> </div>
<div class="qr-code" id="qrCodeContainer"> <div class="qr-code" id="qrCodeContainer">
@ -141,6 +138,13 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
<script>
setTimeout(function() {
window.location.reload();
}, 10000);
</script>
{% if authenticated %} {% if authenticated %}
<script> <script>
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
@ -162,7 +166,6 @@
}); });
}); });
</script> </script>
{% endif %} {% endif %}
</body> </body>
</html> </html>