coder · jsjoeio · Jan 9, 2023 · Jan 6, 2023 · Jan 6, 2023 · Jan 6, 2023
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -77,7 +77,10 @@ const GeneralSettingsPage = lazy(
     ),
 )
 const SecuritySettingsPage = lazy(
-  () => import("./pages/DeploySettingsPage/SecuritySettingsPage"),
+  () =>
+    import(
+      "./pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage"
+    ),
 )
 const AppearanceSettingsPage = lazy(
   () =>

diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage.tsx b/site/src/pages/DeploySettingsPage/SecuritySettingsPage.tsx
diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx b/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx
@@ -0,0 +1,37 @@
+import { useActor } from "@xstate/react"
+import { FeatureNames } from "api/types"
+import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
+import React, { useContext } from "react"
+import { Helmet } from "react-helmet-async"
+import { pageTitle } from "util/page"
+import { XServiceContext } from "xServices/StateContext"
+import { SecuritySettingsPageView } from "./SecuritySettingsPageView"
+
+const SecuritySettingsPage: React.FC = () => {
+  const { deploymentConfig: deploymentConfig } = useDeploySettings()
+  const xServices = useContext(XServiceContext)
+  const [entitlementsState] = useActor(xServices.entitlementsXService)
+
+  return (
+    <>
+      <Helmet>
+        <title>{pageTitle("Security Settings")}</title>
+      </Helmet>
+
+      <SecuritySettingsPageView
+        deploymentConfig={deploymentConfig}
+        featureAuditLogEnabled={
+          entitlementsState.context.entitlements.features[FeatureNames.AuditLog]
+            .enabled
+        }
+        featureBrowserOnlyEnabled={
+          entitlementsState.context.entitlements.features[
+            FeatureNames.BrowserOnly
+          ].enabled
+        }
+      />
+    </>
+  )
+}
+
+export default SecuritySettingsPage
diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx
@@ -0,0 +1,59 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import {
+  SecuritySettingsPageView,
+  SecuritySettingsPageViewProps,
+} from "./SecuritySettingsPageView"
+
+export default {
+  title: "pages/SecuritySettingsPageView",
+  component: SecuritySettingsPageView,
+  argTypes: {
+    deploymentConfig: {
+      defaultValue: {
+        ssh_keygen_algorithm: {
+          name: "key",
+          usage: "something",
+          value: "1234",
+        },
+        secure_auth_cookie: {
+          name: "key",
+          usage: "something",
+          value: "1234",
+        },
+        tls: {
+          enable: {
+            name: "yes or no",
+            usage: "something",
+            value: true,
+          },
+          cert_file: {
+            name: "yes or no",
+            usage: "something",
+            value: ["something"],
+          },
+          key_file: {
+            name: "yes or no",
+            usage: "something",
+            value: ["something"],
+          },
+          min_version: {
+            name: "yes or no",
+            usage: "something",
+            value: "something",
+          },
+        },
+      },
+    },
+    featureAuditLogEnabled: {
+      defaultValue: true,
+    },
+    featureBrowserOnlyEnabled: {
+      defaultValue: true,
+    },
+  },
+} as ComponentMeta<typeof SecuritySettingsPageView>
+
+const Template: Story<SecuritySettingsPageViewProps> = (args) => (
+  <SecuritySettingsPageView {...args} />
+)
+export const Page = Template.bind({})
diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx b/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx
@@ -0,0 +1,87 @@
+import { DeploymentConfig } from "api/typesGenerated"
+import {
+  Badges,
+  DisabledBadge,
+  EnabledBadge,
+  EnterpriseBadge,
+} from "components/DeploySettingsLayout/Badges"
+import { Header } from "components/DeploySettingsLayout/Header"
+import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
+import { Stack } from "components/Stack/Stack"
+
+export type SecuritySettingsPageViewProps = {
+  deploymentConfig: Pick<
+    DeploymentConfig,
+    "tls" | "ssh_keygen_algorithm" | "secure_auth_cookie"
+  >
+  featureAuditLogEnabled: boolean
+  featureBrowserOnlyEnabled: boolean
+}
+export const SecuritySettingsPageView = ({
+  deploymentConfig,
+  featureAuditLogEnabled,
+  featureBrowserOnlyEnabled,
+}: SecuritySettingsPageViewProps): JSX.Element => (
+  <>
+    <Stack direction="column" spacing={6}>
+      <div>
+        <Header
+          title="Security"
+          description="Ensure your Coder deployment is secure."
+        />
+
+        <OptionsTable
+          options={{
+            ssh_keygen_algorithm: deploymentConfig.ssh_keygen_algorithm,
+            secure_auth_cookie: deploymentConfig.secure_auth_cookie,
+          }}
+        />
+      </div>
+
+      <div>
+        <Header
+          title="Audit Logging"
+          secondary
+          description="Allow auditors to monitor user operations in your deployment."
+          docsHref="https://coder.com/docs/coder-oss/latest/admin/audit-logs"
+        />
+
+        <Badges>
+          {featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
+          <EnterpriseBadge />
+        </Badges>
+      </div>
+
+      <div>
+        <Header
+          title="Browser Only Connections"
+          secondary
+          description="Block all workspace access via SSH, port forward, and other non-browser connections."
+          docsHref="https://coder.com/docs/coder-oss/latest/networking#browser-only-connections-enterprise"
+        />
+
+        <Badges>
+          {featureBrowserOnlyEnabled ? <EnabledBadge /> : <DisabledBadge />}
+          <EnterpriseBadge />
+        </Badges>
+      </div>
+
+      <div>
+        <Header
+          title="TLS"
+          secondary
+          description="Ensure TLS is properly configured for your Coder deployment."
+        />
+
+        <OptionsTable
+          options={{
+            tls_enable: deploymentConfig.tls.enable,
+            tls_cert_files: deploymentConfig.tls.cert_file,
+            tls_key_files: deploymentConfig.tls.key_file,
+            tls_min_version: deploymentConfig.tls.min_version,
+          }}
+        />
+      </div>
+    </Stack>
+  </>
+)