coder · BrunoQuaresma · Sep 20, 2022 · Sep 20, 2022 · Sep 22, 2022 · Sep 22, 2022
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -1,6 +1,7 @@
 import { useSelector } from "@xstate/react"
 import { FeatureNames } from "api/types"
 import { RequirePermission } from "components/RequirePermission/RequirePermission"
+import { OIDCSettingsPage } from "pages/DeploySettingsPage/OIDCSettingsPage"
 import { SetupPage } from "pages/SetupPage/SetupPage"
 import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateSettingsPage"
 import { FC, lazy, Suspense, useContext } from "react"
@@ -152,6 +153,17 @@ export const AppRouter: FC = () => {
           />
         </Route>
 
+        <Route
+          path="settings/deployment/oidc"
+          element={
+            <RequireAuth>
+              <AuthAndFrame>
+                <OIDCSettingsPage />
+              </AuthAndFrame>
+            </RequireAuth>
+          }
+        />
+
         <Route path="settings" element={<SettingsLayout />}>
           <Route path="account" element={<AccountPage />} />
           <Route path="security" element={<SecurityPage />} />

diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
@@ -0,0 +1,246 @@
+import Button from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
+import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
+import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
+import { Margins } from "components/Margins/Margins"
+import { Stack } from "components/Stack/Stack"
+import React, { ElementType, PropsWithChildren, ReactNode } from "react"
+import { NavLink } from "react-router-dom"
+import { combineClasses } from "util/combineClasses"
+
+const Sidebar: React.FC<PropsWithChildren> = ({ children }) => {
+  const styles = useStyles()
+  return <nav className={styles.sidebar}>{children}</nav>
+}
+
+const SidebarNavItem: React.FC<PropsWithChildren<{ href: string; icon: ReactNode }>> = ({
+  children,
+  href,
+  icon,
+}) => {
+  const styles = useStyles()
+  return (
+    <NavLink
+      to={href}
+      className={({ isActive }) =>
+        combineClasses([styles.sidebarNavItem, isActive ? styles.sidebarNavItemActive : undefined])
+      }
+    >
+      <Stack alignItems="center" spacing={1.5} direction="row">
+        {icon}
+        {children}
+      </Stack>
+    </NavLink>
+  )
+}
+
+const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({ icon: Icon }) => {
+  const styles = useStyles()
+  return <Icon className={styles.sidebarNavItemIcon} />
+}
+
+const SidebarCaption: React.FC<PropsWithChildren> = ({ children }) => {
+  const styles = useStyles()
+  return <span className={styles.sidebarCaption}>{children}</span>
+}
+
+export const SettingsHeader: React.FC<{
+  title: string
+  description: string | JSX.Element
+  docsHref: string
+}> = ({ title, description, docsHref }) => {
+  const styles = useStyles()
+
+  return (
+    <Stack alignItems="baseline" direction="row" justifyContent="space-between">
+      <div className={styles.headingGroup}>
+        <h1 className={styles.title}>{title}</h1>
+        <span className={styles.description}>{description}</span>
+      </div>
+
+      <Button
+        size="small"
+        startIcon={<LaunchOutlined />}
+        component="a"
+        href={docsHref}
+        target="_blank"
+        variant="outlined"
+      >
+        Read the docs
+      </Button>
+    </Stack>
+  )
+}
+
+export const SettingsBadges: React.FC<{ isEnterprise?: boolean; isEnabled?: boolean }> = ({
+  isEnterprise,
+  isEnabled,
+}) => {
+  const styles = useStyles()
+
+  return (
+    <Stack direction="row" alignItems="center" className={styles.badges} spacing={1}>
+      {isEnabled ? (
+        <span className={styles.enabledBadge}>Enabled</span>
+      ) : (
+        <span className={styles.disabledBadge}>Enabled</span>
+      )}
+      {isEnterprise ? <span className={styles.enterpriseBadge}>Enterprise</span> : null}
+    </Stack>
+  )
+}
+
+export const DeploySettingsLayout: React.FC<PropsWithChildren> = ({ children }) => {
+  const styles = useStyles()
+
+  return (
+    <Margins>
+      <Stack className={styles.wrapper} direction="row" spacing={5}>
+        <Sidebar>
+          <SidebarNavItem
+            href="/settings/deployment/general"
+            icon={<SidebarNavItemIcon icon={LaunchOutlined} />}
+          >
+            Deployment
+          </SidebarNavItem>
+          <SidebarCaption>Authentication</SidebarCaption>
+          <SidebarNavItem
+            href="/settings/deployment/auth"
+            icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
+          >
+            OAuth
+          </SidebarNavItem>
+          <SidebarNavItem
+            href="/settings/deployment/oidc"
+            icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
+          >
+            OpenID Connect
+          </SidebarNavItem>
+        </Sidebar>
+
+        <main className={styles.content}>{children}</main>
+      </Stack>
+    </Margins>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    padding: theme.spacing(6, 0),
+  },
+
+  sidebar: {
+    width: 245,
+  },
+
+  sidebarNavItem: {
+    color: "inherit",
+    display: "block",
+    fontSize: 16,
+    textDecoration: "none",
+    padding: theme.spacing(1.5, 1.5, 1.5, 3),
+    borderRadius: theme.shape.borderRadius / 2,
+    transition: "background-color 0.15s ease-in-out",
+    marginBottom: 1,
+    position: "relative",
+
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+
+  sidebarNavItemActive: {
+    backgroundColor: theme.palette.action.hover,
+
+    "&:before": {
+      content: '""',
+      display: "block",
+      width: 3,
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      backgroundColor: theme.palette.secondary.dark,
+      borderRadius: theme.shape.borderRadius,
+    },
+  },
+
+  sidebarNavItemIcon: {
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+  },
+
+  sidebarCaption: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+    fontWeight: 600,
+    margin: theme.spacing(2, 0, 1.5, 3),
+    display: "block",
+  },
+
+  content: {
+    maxWidth: 800,
+    width: "100%",
+  },
+
+  headingGroup: {
+    maxWidth: 420,
+  },
+
+  title: {
+    fontSize: 36,
+    fontWeight: 700,
+    display: "flex",
+    alignItems: "center",
+    lineHeight: "initial",
+    margin: 0,
+    marginBottom: theme.spacing(1),
+  },
+
+  description: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+    lineHeight: "160%",
+  },
+
+  badges: {
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(3),
+  },
+
+  enterpriseBadge: {
+    fontSize: 10,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.085em",
+    backgroundColor: theme.palette.info.dark,
+    padding: theme.spacing(0.5, 2),
+    borderRadius: 9999,
+    border: `1px solid ${theme.palette.info.light}`,
+    lineHeight: "160%",
+  },
+
+  enabledBadge: {
+    fontSize: 10,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.085em",
+    backgroundColor: theme.palette.success.dark,
+    padding: theme.spacing(0.5, 2),
+    borderRadius: 9999,
+    border: `1px solid ${theme.palette.success.light}`,
+    lineHeight: "160%",
+  },
+
+  disabledBadge: {
+    fontSize: 10,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.085em",
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(0.5, 2),
+    borderRadius: 9999,
+    border: `1px solid ${theme.palette.divider}`,
+    lineHeight: "160%",
+  },
+}))
diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
@@ -181,7 +181,7 @@ const useStyles = makeStyles((theme) => ({
     fontSize: 16,
     padding: `${theme.spacing(1.5)}px ${theme.spacing(2)}px`,
     textDecoration: "none",
-    transition: "background-color 0.3s ease",
+    transition: "background-color 0.15s ease-in-out",
 
     "&:hover": {
       backgroundColor: theme.palette.action.hover,

diff --git a/site/src/pages/DeploySettingsPage/OIDCSettingsPage.tsx b/site/src/pages/DeploySettingsPage/OIDCSettingsPage.tsx
@@ -0,0 +1,88 @@
+import { makeStyles } from "@material-ui/core/styles"
+import Table from "@material-ui/core/Table"
+import TableBody from "@material-ui/core/TableBody"
+import TableCell from "@material-ui/core/TableCell"
+import TableContainer from "@material-ui/core/TableContainer"
+import TableHead from "@material-ui/core/TableHead"
+import TableRow from "@material-ui/core/TableRow"
+import { useActor } from "@xstate/react"
+import {
+  DeploySettingsLayout,
+  SettingsBadges,
+  SettingsHeader,
+} from "components/DeploySettingsLayout/DeploySettingsLayout"
+import React, { useContext, useEffect } from "react"
+import { MONOSPACE_FONT_FAMILY } from "theme/constants"
+import { XServiceContext } from "../../xServices/StateContext"
+
+export const OIDCSettingsPage: React.FC = () => {
+  const styles = useStyles()
+  const xServices = useContext(XServiceContext)
+  const [authState, authSend] = useActor(xServices.authXService)
+  useEffect(() => {
+    authSend({ type: "GET_AUTH_METHODS" })
+  }, [authSend])
+
+  return (
+    <DeploySettingsLayout>
+      <SettingsHeader
+        title="OpenID Connect"
+        description="Configure external authentication to sign in to Coder. Use the command-line options in our documentation."
+        docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
+      />
+      <SettingsBadges isEnabled={authState.context.methods?.oidc} />
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell width="50%">Option</TableCell>
+              <TableCell width="50%">Value</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>
+                <span className={styles.optionName}>Address</span>
+                <span className={styles.optionDescription}>
+                  The address to serve the API and dashboard.
+                </span>
+              </TableCell>
+
+              <TableCell>
+                <span className={styles.optionValue}>127.0.0.1:3000</span>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <span className={styles.optionName}>Access URL</span>
+                <span className={styles.optionDescription}>
+                  Specifies the external URL to access Coder.
+                </span>
+              </TableCell>
+
+              <TableCell>
+                <span className={styles.optionValue}>https://www.dev.coder.com</span>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </DeploySettingsLayout>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  optionName: {
+    display: "block",
+  },
+  optionDescription: {
+    display: "block",
+    color: theme.palette.text.secondary,
+    fontSize: 14,
+    marginTop: theme.spacing(0.5),
+  },
+  optionValue: {
+    fontSize: 14,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+  },
+}))