From eb3aa049ece2e022bb02180667b926d30769f4ca Mon Sep 17 00:00:00 2001
From: Parkreiner <michaelsmith@coder.com>
Date: Thu, 21 Sep 2023 22:03:45 +0000
Subject: [PATCH 1/4] fix: remove needless undefined checks

---
 .../SecurityPage/SingleSignOnSection.tsx      | 122 ++++++++----------
 1 file changed, 57 insertions(+), 65 deletions(-)

diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
index 224ad1422c0d4..d28b8f7ab0f34 100644
--- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
+++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
@@ -8,7 +8,6 @@ import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import { convertToOAUTH } from "api/api";
 import { AuthMethods, LoginType, UserLoginType } from "api/typesGenerated";
-import Skeleton from "@mui/material/Skeleton";
 import { Stack } from "components/Stack/Stack";
 import { useMutation } from "@tanstack/react-query";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
@@ -116,73 +115,66 @@ export const SingleSignOnSection = ({
         description="Authenticate in Coder using one-click"
       >
         <Box display="grid" gap="16px">
-          {authMethods && userLoginType ? (
-            userLoginType.login_type === "password" ? (
-              <>
-                {authMethods.github.enabled && (
-                  <Button
-                    disabled={isUpdating}
-                    onClick={() => openConfirmation("github")}
-                    startIcon={<GitHubIcon sx={{ width: 16, height: 16 }} />}
-                    fullWidth
-                    size="large"
-                  >
-                    GitHub
-                  </Button>
-                )}
-                {authMethods.oidc.enabled && (
-                  <Button
-                    size="large"
-                    startIcon={<OIDCIcon authMethods={authMethods} />}
-                    fullWidth
-                    disabled={isUpdating}
-                    onClick={() => openConfirmation("oidc")}
-                  >
-                    {getOIDCLabel(authMethods)}
-                  </Button>
-                )}
-              </>
-            ) : (
-              <Box
+          {userLoginType.login_type === "password" ? (
+            <>
+              {authMethods.github.enabled && (
+                <Button
+                  disabled={isUpdating}
+                  onClick={() => openConfirmation("github")}
+                  startIcon={<GitHubIcon sx={{ width: 16, height: 16 }} />}
+                  fullWidth
+                  size="large"
+                >
+                  GitHub
+                </Button>
+              )}
+              {authMethods.oidc.enabled && (
+                <Button
+                  size="large"
+                  startIcon={<OIDCIcon authMethods={authMethods} />}
+                  fullWidth
+                  disabled={isUpdating}
+                  onClick={() => openConfirmation("oidc")}
+                >
+                  {getOIDCLabel(authMethods)}
+                </Button>
+              )}
+            </>
+          ) : (
+            <Box
+              sx={{
+                background: (theme) => theme.palette.background.paper,
+                borderRadius: 1,
+                border: (theme) => `1px solid ${theme.palette.divider}`,
+                padding: 2,
+                display: "flex",
+                gap: 2,
+                alignItems: "center",
+                fontSize: 14,
+              }}
+            >
+              <CheckCircleOutlined
                 sx={{
-                  background: (theme) => theme.palette.background.paper,
-                  borderRadius: 1,
-                  border: (theme) => `1px solid ${theme.palette.divider}`,
-                  padding: 2,
-                  display: "flex",
-                  gap: 2,
-                  alignItems: "center",
-                  fontSize: 14,
+                  color: (theme) => theme.palette.success.light,
+                  fontSize: 16,
                 }}
-              >
-                <CheckCircleOutlined
-                  sx={{
-                    color: (theme) => theme.palette.success.light,
-                    fontSize: 16,
-                  }}
-                />
-                <span>
-                  Authenticated with{" "}
-                  <strong>
-                    {userLoginType.login_type === "github"
-                      ? "GitHub"
-                      : getOIDCLabel(authMethods)}
-                  </strong>
-                </span>
-                <Box sx={{ ml: "auto", lineHeight: 1 }}>
-                  {userLoginType.login_type === "github" ? (
-                    <GitHubIcon sx={{ width: 16, height: 16 }} />
-                  ) : (
-                    <OIDCIcon authMethods={authMethods} />
-                  )}
-                </Box>
+              />
+              <span>
+                Authenticated with{" "}
+                <strong>
+                  {userLoginType.login_type === "github"
+                    ? "GitHub"
+                    : getOIDCLabel(authMethods)}
+                </strong>
+              </span>
+              <Box sx={{ ml: "auto", lineHeight: 1 }}>
+                {userLoginType.login_type === "github" ? (
+                  <GitHubIcon sx={{ width: 16, height: 16 }} />
+                ) : (
+                  <OIDCIcon authMethods={authMethods} />
+                )}
               </Box>
-            )
-          ) : (
-            <Skeleton
-              variant="rectangular"
-              sx={{ height: 40, borderRadius: 1 }}
-            />
+            </Box>
           )}
         </Box>
       </Section>

From 1dc79523c9c89bb3b3be689c7778c15500d531ab Mon Sep 17 00:00:00 2001
From: Parkreiner <michaelsmith@coder.com>
Date: Thu, 21 Sep 2023 22:05:40 +0000
Subject: [PATCH 2/4] refactor: clean up button markup

---
 .../UserSettingsPage/SecurityPage/SingleSignOnSection.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
index d28b8f7ab0f34..56b57166cb1d7 100644
--- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
+++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
@@ -119,11 +119,11 @@ export const SingleSignOnSection = ({
             <>
               {authMethods.github.enabled && (
                 <Button
+                  size="large"
+                  fullWidth
                   disabled={isUpdating}
-                  onClick={() => openConfirmation("github")}
                   startIcon={<GitHubIcon sx={{ width: 16, height: 16 }} />}
-                  fullWidth
-                  size="large"
+                  onClick={() => openConfirmation("github")}
                 >
                   GitHub
                 </Button>
@@ -131,9 +131,9 @@ export const SingleSignOnSection = ({
               {authMethods.oidc.enabled && (
                 <Button
                   size="large"
-                  startIcon={<OIDCIcon authMethods={authMethods} />}
                   fullWidth
                   disabled={isUpdating}
+                  startIcon={<OIDCIcon authMethods={authMethods} />}
                   onClick={() => openConfirmation("oidc")}
                 >
                   {getOIDCLabel(authMethods)}

From b6b787b63f7aa6b52bd3c8c76ad92a848d72bb4e Mon Sep 17 00:00:00 2001
From: Parkreiner <michaelsmith@coder.com>
Date: Thu, 21 Sep 2023 22:09:45 +0000
Subject: [PATCH 3/4] refactor: restrict access to full auth in oidc functions

---
 .../SecurityPage/SingleSignOnSection.tsx      | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
index 56b57166cb1d7..957a422c6dbcd 100644
--- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
+++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
@@ -7,7 +7,12 @@ import KeyIcon from "@mui/icons-material/VpnKey";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import { convertToOAUTH } from "api/api";
-import { AuthMethods, LoginType, UserLoginType } from "api/typesGenerated";
+import {
+  AuthMethods,
+  LoginType,
+  OIDCAuthMethod,
+  UserLoginType,
+} from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
 import { useMutation } from "@tanstack/react-query";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
@@ -133,10 +138,10 @@ export const SingleSignOnSection = ({
                   size="large"
                   fullWidth
                   disabled={isUpdating}
-                  startIcon={<OIDCIcon authMethods={authMethods} />}
+                  startIcon={<OIDCIcon oidcAuth={authMethods.oidc} />}
                   onClick={() => openConfirmation("oidc")}
                 >
-                  {getOIDCLabel(authMethods)}
+                  {getOIDCLabel(authMethods.oidc)}
                 </Button>
               )}
             </>
@@ -164,14 +169,14 @@ export const SingleSignOnSection = ({
                 <strong>
                   {userLoginType.login_type === "github"
                     ? "GitHub"
-                    : getOIDCLabel(authMethods)}
+                    : getOIDCLabel(authMethods.oidc)}
                 </strong>
               </span>
               <Box sx={{ ml: "auto", lineHeight: 1 }}>
                 {userLoginType.login_type === "github" ? (
                   <GitHubIcon sx={{ width: 16, height: 16 }} />
                 ) : (
-                  <OIDCIcon authMethods={authMethods} />
+                  <OIDCIcon oidcAuth={authMethods.oidc} />
                 )}
               </Box>
             </Box>
@@ -190,21 +195,23 @@ export const SingleSignOnSection = ({
   );
 };
 
-const OIDCIcon = ({ authMethods }: { authMethods: AuthMethods }) => {
-  return authMethods.oidc.iconUrl ? (
+const OIDCIcon = ({ oidcAuth }: { oidcAuth: OIDCAuthMethod }) => {
+  if (!oidcAuth.iconUrl) {
+    return <KeyIcon sx={{ width: 16, height: 16 }} />;
+  }
+
+  return (
     <Box
       component="img"
       alt="Open ID Connect icon"
-      src={authMethods.oidc.iconUrl}
+      src={oidcAuth.iconUrl}
       sx={{ width: 16, height: 16 }}
     />
-  ) : (
-    <KeyIcon sx={{ width: 16, height: 16 }} />
   );
 };
 
-const getOIDCLabel = (authMethods: AuthMethods) => {
-  return authMethods.oidc.signInText || "OpenID Connect";
+const getOIDCLabel = (oidcAuth: OIDCAuthMethod) => {
+  return oidcAuth.signInText || "OpenID Connect";
 };
 
 const ConfirmLoginTypeChangeModal = ({

From 64c865ca1eafac921f8d6135bfcfc8d6e35abec5 Mon Sep 17 00:00:00 2001
From: Parkreiner <michaelsmith@coder.com>
Date: Thu, 21 Sep 2023 22:11:26 +0000
Subject: [PATCH 4/4] feat: add empty SSO state

---
 .../SecurityPage/SingleSignOnSection.tsx      | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
index 957a422c6dbcd..4b0cecc6ffdc6 100644
--- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
+++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
@@ -18,6 +18,10 @@ import { useMutation } from "@tanstack/react-query";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { getErrorMessage } from "api/errors";
 import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
+import { EmptyState } from "components/EmptyState/EmptyState";
+import { makeStyles } from "@mui/styles";
+import Link from "@mui/material/Link";
+import { docs } from "utils/docs";
 
 type LoginTypeConfirmation =
   | {
@@ -97,6 +101,32 @@ export const useSingleSignOnSection = () => {
   };
 };
 
+const useEmptyStateStyles = makeStyles((theme) => ({
+  root: {
+    minHeight: 0,
+    padding: theme.spacing(6, 4),
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadius,
+  },
+}));
+
+function SSOEmptyState() {
+  const styles = useEmptyStateStyles();
+
+  return (
+    <EmptyState
+      className={styles.root}
+      message="No SSO Providers"
+      description="No SSO providers are configured with this Coder deployment."
+      cta={
+        <Link href={docs("/admin/auth")} target="_blank" rel="noreferrer">
+          Learn how to add a provider
+        </Link>
+      }
+    />
+  );
+}
+
 type SingleSignOnSectionProps = ReturnType<typeof useSingleSignOnSection> & {
   authMethods: AuthMethods;
   userLoginType: UserLoginType;
@@ -112,6 +142,12 @@ export const SingleSignOnSection = ({
   isConfirming,
   error,
 }: SingleSignOnSectionProps) => {
+  const authList = Object.values(
+    authMethods,
+  ) as (typeof authMethods)[keyof typeof authMethods][];
+
+  const noSsoEnabled = !authList.some((method) => method.enabled);
+
   return (
     <>
       <Section
@@ -133,6 +169,7 @@ export const SingleSignOnSection = ({
                   GitHub
                 </Button>
               )}
+
               {authMethods.oidc.enabled && (
                 <Button
                   size="large"
@@ -144,6 +181,8 @@ export const SingleSignOnSection = ({
                   {getOIDCLabel(authMethods.oidc)}
                 </Button>
               )}
+
+              {noSsoEnabled && <SSOEmptyState />}
             </>
           ) : (
             <Box