Added display of expiration date to the user interface

Also stopped ever displaying creation time and rearranged some CSS
This commit is contained in:
Erik Thuning 2025-03-26 15:34:55 +01:00
parent ca3d536868
commit 670c88c7f3
4 changed files with 39 additions and 27 deletions

@ -157,11 +157,10 @@ class WireGuard:
self.configs_base = Path(config['configs_base'])
self.max_clients = config.getint('user_client_limit', fallback=0)
self.client_validity = 0
client_validity = config.get('user_client_validity', fallback=0)
if client_validity:
self.client_validity = parse_timestring(client_validity)
else:
self.client_validity = 0
self.server_config_base = None
if 'server_extra_config' in config:
@ -326,10 +325,17 @@ class WireGuard:
open(self.meta_filepath(config_id), 'r') as mf:
metadata = json.load(mf)
configdata = cf.read()
creation_date = metadata['created']
expiry_date = None
if self.client_validity:
expiry_date = (datetime.fromisoformat(creation_date)
+ self.client_validity)
expiry_date = expiry_date.strftime('%Y-%m-%d')
return {'id': config_id,
'name': metadata['name'],
'description': metadata['description'],
'created': metadata['created'],
'created': creation_date,
'expires': expiry_date,
'data': configdata}
def delete_config(self, *args) -> None:

@ -48,7 +48,7 @@
<template id="display-config">
<config aria-label="client" role="landmark">
<a class="conffile" href="" download=""></a>
<date aria-label="creation date"></date>
<expires aria-label="expiry date"></expires>
<name role="heading" aria-label="client name"></name>
<description aria-label="client description"></description>
<data></data>

@ -79,10 +79,15 @@
qr.setAttribute('aria-label', 'QR code');
config.id = 'config-' + config_id;
config.querySelector('name').textContent = data.name;
config.querySelector('date').textContent = data.created;
config.querySelector('description').textContent = data.description;
config.querySelector('data').textContent = data.data;
config.querySelector('qrcode').replaceWith(qr);
const expires = config.querySelector('expires');
if(data.expires) {
expires.textContent = data.expires;
} else {
config.removeChild(expires);
}
const link = config.querySelector('.conffile');
link.setAttribute('href',
dlprefix + encodeURIComponent(data.data));

@ -97,6 +97,7 @@ config {
background-color: #EBF0F5;
border: 2px solid #DCE4EE;
border-radius: 0.5rem;
gap: 0.2rem;
}
config >*:last-child {
@ -110,16 +111,17 @@ config > name {
config > description {
grid-area: description;
align-self: stretch;
margin-bottom: 0.5rem;
}
config > data {
grid-area: data;
}
config > date {
config > expires {
grid-area: date;
justify-self: end;
align-self: baseline;
width: max-content;
color: #b00020;
}
config > expires:before {
content: 'Expires: ';
}
config > svg {
grid-area: qr;
@ -137,11 +139,6 @@ name {
font-size: 1.5rem;
}
name, description {
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
description, data {
white-space: pre-wrap;
}
@ -189,7 +186,8 @@ h3 {
}
h3, label {
margin-top: 0.4rem;
margin-top: 0.6rem;
margin-bottom: 0.2rem;
}
input, textarea {
@ -273,11 +271,12 @@ button.delete:hover {
}
config {
grid-template-areas:
"name date"
"description description"
"qr qr"
"footer footer";
grid-template-rows: min-content auto 280px 2.8rem;
"name"
"date"
"description"
"qr"
"footer";
grid-template-rows: min-content auto auto 280px 2.8rem;
}
config > svg {
justify-self: center;
@ -289,10 +288,11 @@ button.delete:hover {
@media (width >= 60rem), (width < 44rem) {
config {
grid-template-areas:
"name date"
"name name"
"date date"
"description description"
"qr footer";
grid-template-rows: min-content auto 240px;
grid-template-rows: min-content auto auto 240px;
}
config > svg {
justify-self: start;
@ -313,11 +313,12 @@ button.delete:hover {
@media (width < 30rem) {
config {
grid-template-areas:
"name date"
"description description"
"qr qr"
"footer footer";
grid-template-rows: min-content auto 280px 2.8rem;
"name"
"date"
"description"
"qr"
"footer";
grid-template-rows: min-content auto auto 280px 2.8rem;
}
config > svg {
justify-self: center;