diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
index 28a3ca2381..87dfbdface 100644
--- a/site/src/AppRouter.tsx
+++ b/site/src/AppRouter.tsx
@@ -86,7 +86,10 @@ const AppearanceSettingsPage = lazy(
),
)
const UserAuthSettingsPage = lazy(
- () => import("./pages/DeploySettingsPage/UserAuthSettingsPage"),
+ () =>
+ import(
+ "./pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage"
+ ),
)
const GitAuthSettingsPage = lazy(
() =>
diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage.tsx b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage.tsx
deleted file mode 100644
index 582ddd3021..0000000000
--- a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import {
- Badges,
- DisabledBadge,
- EnabledBadge,
-} from "components/DeploySettingsLayout/Badges"
-import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
-import { Header } from "components/DeploySettingsLayout/Header"
-import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
-import { Stack } from "components/Stack/Stack"
-import React from "react"
-import { Helmet } from "react-helmet-async"
-import { pageTitle } from "util/page"
-
-const UserAuthSettingsPage: React.FC = () => {
- const { deploymentConfig: deploymentConfig } = useDeploySettings()
-
- return (
- <>
-
- {pageTitle("User Authentication Settings")}
-
-
-
-
-
-
-
-
-
- {deploymentConfig.oidc.client_id.value ? (
-
- ) : (
-
- )}
-
-
-
-
-
-
-
-
-
- {deploymentConfig.oauth2.github.client_id.value ? (
-
- ) : (
-
- )}
-
-
-
-
-
-
- )
-}
-
-export default UserAuthSettingsPage
diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx
new file mode 100644
index 0000000000..f88e9217ac
--- /dev/null
+++ b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx
@@ -0,0 +1,21 @@
+import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
+import React from "react"
+import { Helmet } from "react-helmet-async"
+import { pageTitle } from "util/page"
+import { UserAuthSettingsPageView } from "./UserAuthSettingsPageView"
+
+const UserAuthSettingsPage: React.FC = () => {
+ const { deploymentConfig: deploymentConfig } = useDeploySettings()
+
+ return (
+ <>
+
+ {pageTitle("User Authentication Settings")}
+
+
+
+
+ )
+}
+
+export default UserAuthSettingsPage
diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx
new file mode 100644
index 0000000000..c772d0f720
--- /dev/null
+++ b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx
@@ -0,0 +1,81 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import {
+ UserAuthSettingsPageView,
+ UserAuthSettingsPageViewProps,
+} from "./UserAuthSettingsPageView"
+
+export default {
+ title: "pages/UserAuthSettingsPageView",
+ component: UserAuthSettingsPageView,
+ argTypes: {
+ deploymentConfig: {
+ defaultValue: {
+ oidc: {
+ client_id: {
+ name: "OIDC Client ID",
+ usage: "Client ID to use for Login with OIDC.",
+ value: "1234",
+ },
+ allow_signups: {
+ name: "OIDC Allow Signups",
+ usage: "Whether new users can sign up with OIDC.",
+ value: true,
+ },
+ email_domain: {
+ name: "OIDC Email Domain",
+ usage:
+ "Email domains that clients logging in with OIDC must match.",
+ value: "@coder.com",
+ },
+ issuer_url: {
+ name: "OIDC Issuer URL",
+ usage: "Issuer URL to use for Login with OIDC.",
+ value: "https://coder.com",
+ },
+ scopes: {
+ name: "OIDC Scopes",
+ usage: "Scopes to grant when authenticating with OIDC.",
+ value: ["idk"],
+ },
+ },
+ oauth2: {
+ github: {
+ client_id: {
+ name: "OAuth2 GitHub Client ID",
+ usage: "Client ID for Login with GitHub.",
+ value: "1224",
+ },
+ allow_signups: {
+ name: "OAuth2 GitHub Allow Signups",
+ usage: "Whether new users can sign up with GitHub.",
+ value: true,
+ },
+ enterprise_base_url: {
+ name: "OAuth2 GitHub Enterprise Base URL",
+ usage:
+ "Base URL of a GitHub Enterprise deployment to use for Login with GitHub.",
+ value: "https://google.com",
+ },
+ allowed_orgs: {
+ name: "OAuth2 GitHub Allowed Orgs",
+ usage:
+ "Organizations the user must be a member of to Login with GitHub.",
+ value: true,
+ },
+ allowed_teams: {
+ name: "OAuth2 GitHub Allowed Teams",
+ usage:
+ "Teams inside organizations the user must be a member of to Login with GitHub. Structured as: /.",
+ value: true,
+ },
+ },
+ },
+ },
+ },
+ },
+} as ComponentMeta
+
+const Template: Story = (args) => (
+
+)
+export const Page = Template.bind({})
diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx
new file mode 100644
index 0000000000..7d574d4543
--- /dev/null
+++ b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx
@@ -0,0 +1,78 @@
+import { DeploymentConfig } from "api/typesGenerated"
+import {
+ Badges,
+ DisabledBadge,
+ EnabledBadge,
+} from "components/DeploySettingsLayout/Badges"
+import { Header } from "components/DeploySettingsLayout/Header"
+import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
+import { Stack } from "components/Stack/Stack"
+
+export type UserAuthSettingsPageViewProps = {
+ deploymentConfig: Pick
+}
+
+export const UserAuthSettingsPageView = ({
+ deploymentConfig,
+}: UserAuthSettingsPageViewProps): JSX.Element => (
+ <>
+
+
+
+
+
+
+
+ {deploymentConfig.oidc.client_id.value ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+ {deploymentConfig.oauth2.github.client_id.value ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+)