serve.zone/dcrouter
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web-ui): standardize settings views for ACME and email security panels

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-12 20:43:57 +00:00
parent 60d095cd78
commit 196e5dfc1b
7 changed files with 71 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
ts_web/elements/domains/ops-view-certificates.ts
View File

@@ -54,51 +54,6 @@ export class OpsViewCertificates extends DeesElement {
gap: 24px;
}
.acmeTileHeader {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 8px 12px;
}
.acmeTileHeading {
font-size: 14px;
font-weight: 600;
}
.acmeEmptyContent {
padding: 16px;
font-size: 13px;
line-height: 1.5;
color: ${cssManager.bdTheme('#78350f', '#fde68a')};
}
.acmeGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px 24px;
padding: 16px;
}
.acmeField {
display: flex;
flex-direction: column;
gap: 2px;
}
.acmeLabel {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.03em;
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
}
.acmeValue {
font-size: 13px;
color: ${cssManager.bdTheme('#111827', '#f3f4f6')};
}
.statusBadge {
display: inline-flex;
align-items: center;
@@ -227,60 +182,26 @@ export class OpsViewCertificates extends DeesElement {
if (!config) {
return html`
<dees-tile .heading=${'ACME Settings'}>
<div slot="header" class="acmeTileHeader">
<span class="acmeTileHeading">ACME Settings</span>
<dees-button
@click=${() => this.showEditAcmeDialog()}
.type=${'highlighted'}
>Configure</dees-button>
</div>
<div class="acmeEmptyContent">
No ACME configuration yet. Click <strong>Configure</strong> to set up automated TLS
certificate issuance via Let's Encrypt. You'll also need at least one DNS provider
under <strong>Domains &gt; Providers</strong>.
</div>
</dees-tile>
<dees-settings
.heading=${'ACME Settings'}
.description=${'No ACME configuration yet. Click Configure to set up automated TLS certificate issuance via Let\'s Encrypt. You\'ll also need at least one DNS provider under Domains > Providers.'}
.actions=${[{ name: 'Configure', action: () => this.showEditAcmeDialog() }]}
></dees-settings>
`;
}
return html`
<dees-tile>
<div slot="header" class="acmeTileHeader">
<span class="acmeTileHeading">ACME Settings</span>
<dees-button @click=${() => this.showEditAcmeDialog()}>Edit</dees-button>
</div>
<div class="acmeGrid">
<div class="acmeField">
<span class="acmeLabel">Account email</span>
<span class="acmeValue">${config.accountEmail || '(not set)'}</span>
</div>
<div class="acmeField">
<span class="acmeLabel">Status</span>
<span class="acmeValue">
<span class="statusBadge ${config.enabled ? 'valid' : 'unknown'}">
${config.enabled ? 'enabled' : 'disabled'}
</span>
</span>
</div>
<div class="acmeField">
<span class="acmeLabel">Mode</span>
<span class="acmeValue">
<span class="statusBadge ${config.useProduction ? 'valid' : 'provisioning'}">
${config.useProduction ? 'production' : 'staging'}
</span>
</span>
</div>
<div class="acmeField">
<span class="acmeLabel">Auto-renew</span>
<span class="acmeValue">${config.autoRenew ? 'on' : 'off'}</span>
</div>
<div class="acmeField">
<span class="acmeLabel">Renewal threshold</span>
<span class="acmeValue">${config.renewThresholdDays} days</span>
</div>
</div>
</dees-tile>
<dees-settings
.heading=${'ACME Settings'}
.settingsFields=${[
{ key: 'email', label: 'Account email', value: config.accountEmail || '(not set)' },
{ key: 'status', label: 'Status', value: config.enabled ? 'enabled' : 'disabled' },
{ key: 'mode', label: 'Mode', value: config.useProduction ? 'production' : 'staging' },
{ key: 'autoRenew', label: 'Auto-renew', value: config.autoRenew ? 'on' : 'off' },
{ key: 'threshold', label: 'Renewal threshold', value: `${config.renewThresholdDays} days` },
]}
.actions=${[{ name: 'Edit', action: () => this.showEditAcmeDialog() }]}
></dees-settings>
`;
}