142 lines
4.1 KiB
TypeScript
142 lines
4.1 KiB
TypeScript
import * as appstate from '../../appstate.js';
|
|
import { viewHostCss } from '../shared/css.js';
|
|
|
|
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
state,
|
|
css,
|
|
cssManager,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
import { type IStatsTile } from '@design.estate/dees-catalog';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'ops-view-email-security': OpsViewEmailSecurity;
|
|
}
|
|
}
|
|
|
|
@customElement('ops-view-email-security')
|
|
export class OpsViewEmailSecurity extends DeesElement {
|
|
@state()
|
|
accessor statsState: appstate.IStatsState = appstate.statsStatePart.getState()!;
|
|
|
|
constructor() {
|
|
super();
|
|
const sub = appstate.statsStatePart
|
|
.select((s) => s)
|
|
.subscribe((s) => {
|
|
this.statsState = s;
|
|
});
|
|
this.rxSubscriptions.push(sub);
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
viewHostCss,
|
|
css`
|
|
.securityContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
const metrics = this.statsState.securityMetrics;
|
|
|
|
if (!metrics) {
|
|
return html`
|
|
<div class="loadingMessage">
|
|
<p>Loading security metrics...</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const tiles: IStatsTile[] = [
|
|
{
|
|
id: 'malware',
|
|
title: 'Malware Detection',
|
|
value: metrics.malwareDetected,
|
|
type: 'number',
|
|
icon: 'lucide:BugOff',
|
|
color: metrics.malwareDetected > 0 ? '#ef4444' : '#22c55e',
|
|
description: 'Malware detected',
|
|
},
|
|
{
|
|
id: 'phishing',
|
|
title: 'Phishing Detection',
|
|
value: metrics.phishingDetected,
|
|
type: 'number',
|
|
icon: 'lucide:Fish',
|
|
color: metrics.phishingDetected > 0 ? '#ef4444' : '#22c55e',
|
|
description: 'Phishing attempts detected',
|
|
},
|
|
{
|
|
id: 'suspicious',
|
|
title: 'Suspicious Activities',
|
|
value: metrics.suspiciousActivities,
|
|
type: 'number',
|
|
icon: 'lucide:TriangleAlert',
|
|
color: metrics.suspiciousActivities > 5 ? '#ef4444' : '#f59e0b',
|
|
description: 'Suspicious activities detected',
|
|
},
|
|
{
|
|
id: 'spam',
|
|
title: 'Spam Detection',
|
|
value: metrics.spamDetected,
|
|
type: 'number',
|
|
icon: 'lucide:Ban',
|
|
color: '#f59e0b',
|
|
description: 'Spam emails blocked',
|
|
},
|
|
];
|
|
|
|
return html`
|
|
<dees-heading level="3">Email Security</dees-heading>
|
|
|
|
<div class="securityContainer">
|
|
<dees-statsgrid
|
|
.tiles=${tiles}
|
|
.minTileWidth=${200}
|
|
></dees-statsgrid>
|
|
|
|
<dees-settings
|
|
.heading=${'Security Configuration'}
|
|
.settingsFields=${[
|
|
{ key: 'spf', label: 'SPF checking', value: 'enabled' },
|
|
{ key: 'dkim', label: 'DKIM validation', value: 'enabled' },
|
|
{ key: 'dmarc', label: 'DMARC policy', value: 'enabled' },
|
|
{ key: 'spam', label: 'Spam filtering', value: 'enabled' },
|
|
]}
|
|
.actions=${[{ name: 'Edit', action: () => this.showEditSecurityDialog() }]}
|
|
></dees-settings>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private async showEditSecurityDialog() {
|
|
const { DeesModal } = await import('@design.estate/dees-catalog');
|
|
DeesModal.createAndShow({
|
|
heading: 'Edit Security Configuration',
|
|
content: html`
|
|
<dees-form>
|
|
<dees-input-checkbox .key=${'enableSPF'} .label=${'SPF checking'} .value=${true}></dees-input-checkbox>
|
|
<dees-input-checkbox .key=${'enableDKIM'} .label=${'DKIM validation'} .value=${true}></dees-input-checkbox>
|
|
<dees-input-checkbox .key=${'enableDMARC'} .label=${'DMARC policy enforcement'} .value=${true}></dees-input-checkbox>
|
|
<dees-input-checkbox .key=${'enableSpamFilter'} .label=${'Spam filtering'} .value=${true}></dees-input-checkbox>
|
|
</dees-form>
|
|
<p style="margin-top: 12px; font-size: 12px; opacity: 0.7;">
|
|
These settings are read-only for now. Update the dcrouter configuration to change them.
|
|
</p>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Close', action: async (modalArg: any) => modalArg.destroy() },
|
|
],
|
|
});
|
|
}
|
|
}
|