homeio

1"use client";
2
3import {
4  InfoBanner,
5  SectionDivider,
6  Toggle,
7} from "@/modules/settings/components/panel/controls";
8import { SETTINGS_PANEL_INSET } from "@/modules/settings/components/panel/surface";
9import type {
10  SecuritySettingsDraft,
11  SettingsBackend,
12} from "@/modules/settings/components/panel/types";
13import type { SystemSecurityPolicy } from "@/lib/shared/contracts/system";
14import { Lock } from "@/components/icons/platform-icons";
15import { cn } from "@/lib/utils";
16
17type SecuritySectionProps = {
18  data: SettingsBackend["security"];
19  draft: SecuritySettingsDraft;
20  isDemoMode?: boolean;
21  onChange: (patch: Partial<SecuritySettingsDraft>) => void;
22};
23
24const selectCls =
25  "h-8 w-36 cursor-pointer appearance-none rounded-lg border border-glass-border bg-background/55 px-3 text-xs text-foreground focus:border-primary/40 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50";
26
27function PreferenceRow({
28  label,
29  description,
30  children,
31}: {
32  label: string;
33  description?: string;
34  children: React.ReactNode;
35}) {
36  return (
37    <div className={cn(SETTINGS_PANEL_INSET, "flex items-center justify-between gap-4 px-4 py-3")}>
38      <div className="min-w-0">
39        <div className="text-sm text-foreground">{label}</div>
40        {description && (
41          <div className="mt-0.5 text-[11px] text-muted-foreground/70">{description}</div>
42        )}
43      </div>
44      {children}
45    </div>
46  );
47}
48
49export function SecuritySection({
50  data,
51  draft,
52  isDemoMode = false,
53  onChange,
54}: SecuritySectionProps) {
55  const isDisabled = isDemoMode || data.isLoading || data.isSaving;
56
57  if (isDemoMode) {
58    return (
59      <div className="flex flex-col gap-1">
60        <div className={cn(SETTINGS_PANEL_INSET, "flex flex-col items-center justify-center gap-3 px-6 py-10 text-center")}>
61          <div className="flex size-9 items-center justify-center rounded-lg border border-glass-border bg-background/55">
62            <Lock className="size-4 text-muted-foreground" />
63          </div>
64          <div>
65            <p className="text-sm font-medium text-foreground">Security settings are locked</p>
66            <p className="mt-1 text-xs text-muted-foreground">
67              Firewall and intrusion prevention controls are disabled in demo mode.
68            </p>
69          </div>
70        </div>
71      </div>
72    );
73  }
74
75  return (
76    <div className="flex flex-col gap-1">
77      {data.error && (
78        <InfoBanner text={data.error} variant={data.unavailable ? "warning" : "info"} />
79      )}
80
81      {/* ── Firewall ── */}
82      <SectionDivider title="Firewall" />
83      <div className="flex flex-col gap-1.5">
84        <div className={cn(SETTINGS_PANEL_INSET, "px-4 py-1")}>
85          <Toggle
86            label="UFW Firewall"
87            description="Uncomplicated Firewall for managing inbound and outbound rules"
88            enabled={draft.firewallEnabled}
89            onToggle={() => onChange({ firewallEnabled: !draft.firewallEnabled })}
90            disabled={isDisabled}
91          />
92        </div>
93
94        <PreferenceRow label="Default incoming policy" description="Action for unsolicited inbound connections">
95          <select
96            value={draft.firewallIncomingPolicy}
97            onChange={(e) => onChange({ firewallIncomingPolicy: e.target.value as SystemSecurityPolicy })}
98            disabled={isDisabled}
99            className={selectCls}
100          >
101            {data.firewall.policyOptions.map((opt) => (
102              <option key={opt} value={opt}>{opt.charAt(0).toUpperCase() + opt.slice(1)}</option>
103            ))}
104          </select>
105        </PreferenceRow>
106
107        <PreferenceRow label="Default outgoing policy" description="Action for unsolicited outbound connections">
108          <select
109            value={draft.firewallOutgoingPolicy}
110            onChange={(e) => onChange({ firewallOutgoingPolicy: e.target.value as SystemSecurityPolicy })}
111            disabled={isDisabled}
112            className={selectCls}
113          >
114            {data.firewall.policyOptions.map((opt) => (
115              <option key={opt} value={opt}>{opt.charAt(0).toUpperCase() + opt.slice(1)}</option>
116            ))}
117          </select>
118        </PreferenceRow>
119      </div>
120
121      {/* ── Intrusion Prevention ── */}
122      <SectionDivider title="Intrusion Prevention" />
123      <div className="flex flex-col gap-1.5">
124        <div className={cn(SETTINGS_PANEL_INSET, "px-4 py-1")}>
125          <Toggle
126            label="Fail2Ban"
127            description="Automatically ban IPs with repeated failed login attempts"
128            enabled={draft.fail2banEnabled}
129            onToggle={() => onChange({ fail2banEnabled: !draft.fail2banEnabled })}
130            disabled={isDisabled}
131          />
132        </div>
133
134        <PreferenceRow label="Max retries" description="Failed attempts before banning an IP">
135          <input
136            value={draft.fail2banMaxRetries}
137            onChange={(e) => onChange({ fail2banMaxRetries: e.target.value })}
138            type="number"
139            min={1}
140            disabled={isDisabled}
141            className="h-8 w-36 rounded-lg border border-glass-border bg-background/55 px-3 text-xs text-foreground focus:border-primary/40 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
142          />
143        </PreferenceRow>
144
145        <PreferenceRow label="Ban duration" description="Seconds to keep the IP blocked (3600 = 1 hr)">
146          <input
147            value={draft.fail2banBanDurationSeconds}
148            onChange={(e) => onChange({ fail2banBanDurationSeconds: e.target.value })}
149            type="number"
150            min={60}
151            disabled={isDisabled}
152            className="h-8 w-36 rounded-lg border border-glass-border bg-background/55 px-3 text-xs text-foreground focus:border-primary/40 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
153          />
154        </PreferenceRow>
155      </div>
156    </div>
157  );
158}
159