feat(site): add descriptions for each auth method to the selection menu

aslilac · aslilac · commit 616d8abe2a43 · 2023-08-22T17:54:00.000Z
diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
@@ -14,6 +14,10 @@ import { Stack } from "../Stack/Stack"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
 import { hasApiFieldErrors, isApiError } from "api/errors"
 import MenuItem from "@mui/material/MenuItem"
+import { makeStyles } from "@mui/styles"
+import { Theme } from "@mui/material/styles"
+import { Link } from "@mui/material"
+import { Link as RouterLink } from "react-router-dom"
 
 export const Language = {
   emailLabel: "Email",
@@ -26,6 +30,38 @@ export const Language = {
   cancel: "Cancel",
 }
 
+export const authMethodLanguage = {
+  password: {
+    displayName: "Password",
+    description: "Use an email address and password to login",
+  },
+  oidc: {
+    displayName: "OpenID Connect",
+    description: "Use an OpenID Connect provider for authentication",
+  },
+  github: {
+    displayName: "Github",
+    description: "Use Github OAuth for authentication",
+  },
+  none: {
+    displayName: "None",
+    description: (
+      <>
+        Disable authentication for this user (See the{" "}
+        <Link
+          component={RouterLink}
+          target="_blank"
+          rel="noopener"
+          to="https://coder.com/docs/v2/latest/admin/auth#disable-built-in-authentication"
+        >
+          documentation
+        </Link>{" "}
+        for more details)
+      </>
+    ),
+  },
+}
+
 export interface CreateUserFormProps {
   onSubmit: (user: TypesGen.CreateUserRequest) => void
   onCancel: () => void
@@ -46,22 +82,9 @@ const validationSchema = Yup.object({
     otherwise: (schema) => schema,
   }),
   username: nameValidator(Language.usernameLabel),
+  login_type: Yup.string().oneOf(Object.keys(authMethodLanguage)),
 })
 
-const authMethodSelect = (
-  title: string,
-  value: string,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- future will use this
-  description: string,
-) => {
-  return (
-    <MenuItem key="value" id={"item-" + value} value={value}>
-      {title}
-      {/* TODO: Add description */}
-    </MenuItem>
-  )
-}
-
 export const CreateUserForm: FC<
   React.PropsWithChildren<CreateUserFormProps>
 > = ({ onSubmit, onCancel, error, isLoading, myOrgId, authMethods }) => {
@@ -73,7 +96,7 @@ export const CreateUserForm: FC<
         username: "",
         organization_id: myOrgId,
         disable_login: false,
-        login_type: "password",
+        login_type: "",
       },
       validationSchema,
       onSubmit,
@@ -83,41 +106,34 @@ export const CreateUserForm: FC<
     error,
   )
 
+  const styles = useStyles()
+  // This, unfortunately, cannot be an actual component because mui requires
+  // that all `MenuItem`s but be direct children of the `Select` the belong to
+  const authMethodSelect = (value: keyof typeof authMethodLanguage) => {
+    const language = authMethodLanguage[value]
+    return (
+      <MenuItem key={value} id={"item-" + value} value={value}>
+        <Stack spacing={0} maxWidth={400}>
+          {language.displayName}
+          <span className={styles.labelDescription}>
+            {language.description}
+          </span>
+        </Stack>
+      </MenuItem>
+    )
+  }
+
   const methods = []
   if (authMethods?.password.enabled) {
-    methods.push(
-      authMethodSelect(
-        "Password",
-        "password",
-        "User can provide their email and password to login.",
-      ),
-    )
+    methods.push(authMethodSelect("password"))
   }
   if (authMethods?.oidc.enabled) {
-    methods.push(
-      authMethodSelect(
-        "OpenID Connect",
-        "oidc",
-        "Uses an OpenID connect provider to authenticate the user.",
-      ),
-    )
+    methods.push(authMethodSelect("oidc"))
   }
   if (authMethods?.github.enabled) {
-    methods.push(
-      authMethodSelect(
-        "Github",
-        "github",
-        "Uses github oauth to authenticate the user.",
-      ),
-    )
+    methods.push(authMethodSelect("github"))
   }
-  methods.push(
-    authMethodSelect(
-      "None",
-      "none",
-      "User authentication is disabled. This user an only be used if an api token is created for them.",
-    ),
-  )
+  methods.push(authMethodSelect("none"))
 
   return (
     <FullPageForm title="Create user">
@@ -141,21 +157,6 @@ export const CreateUserForm: FC<
             fullWidth
             label={Language.emailLabel}
           />
-          <TextField
-            {...getFieldHelpers(
-              "password",
-              form.values.login_type === "password"
-                ? ""
-                : "No password required for this login type",
-            )}
-            autoComplete="current-password"
-            fullWidth
-            id="password"
-            data-testid="password-input"
-            disabled={form.values.login_type !== "password"}
-            label={Language.passwordLabel}
-            type="password"
-          />
           <TextField
             {...getFieldHelpers(
               "login_type",
@@ -172,12 +173,41 @@ export const CreateUserForm: FC<
               }
               await form.setFieldValue("login_type", e.target.value)
             }}
+            SelectProps={{
+              renderValue: (selected: unknown) =>
+                authMethodLanguage[selected as keyof typeof authMethodLanguage]
+                  ?.displayName ?? "",
+            }}
           >
             {methods}
           </TextField>
+          <TextField
+            {...getFieldHelpers(
+              "password",
+              form.values.login_type === "password"
+                ? ""
+                : "No password required for this login type",
+            )}
+            autoComplete="current-password"
+            fullWidth
+            id="password"
+            data-testid="password-input"
+            disabled={form.values.login_type !== "password"}
+            label={Language.passwordLabel}
+            type="password"
+          />
         </Stack>
         <FormFooter onCancel={onCancel} isLoading={isLoading} />
       </form>
     </FullPageForm>
   )
 }
+
+const useStyles = makeStyles<Theme>((theme) => ({
+  labelDescription: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+    wordWrap: "normal",
+    whiteSpace: "break-spaces",
+  },
+}))
