Begin FE selector

coder · Emyrk · Aug 11, 2023 · Aug 8, 2023 · Aug 9, 2023 · Aug 9, 2023
commit 3f08b1645deb4fad84ad1b9f7bfe1c5aaea26f4e
diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
@@ -13,6 +13,8 @@ import { FullPageForm } from "../FullPageForm/FullPageForm"
 import { Stack } from "../Stack/Stack"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
 import { hasApiFieldErrors, isApiError } from "api/errors"
+import Select from "@mui/material/Select"
+import MenuItem from "@mui/material/MenuItem"
 
 export const Language = {
   emailLabel: "Email",
@@ -31,6 +33,7 @@ export interface CreateUserFormProps {
   error?: unknown
   isLoading: boolean
   myOrgId: string
+  authMethods?: TypesGen.AuthMethods
 }
 
 const validationSchema = Yup.object({
@@ -42,9 +45,13 @@ const validationSchema = Yup.object({
   username: nameValidator(Language.usernameLabel),
 })
 
+const authMethodSelect = (title: string, value: string) => {
+  return <MenuItem value={value}>{title}</MenuItem>
+}
+
 export const CreateUserForm: FC<
   React.PropsWithChildren<CreateUserFormProps>
-> = ({ onSubmit, onCancel, error, isLoading, myOrgId }) => {
+> = ({ onSubmit, onCancel, error, isLoading, myOrgId, authMethods }) => {
   const form: FormikContextType<TypesGen.CreateUserRequest> =
     useFormik<TypesGen.CreateUserRequest>({
       initialValues: {
@@ -53,7 +60,7 @@ export const CreateUserForm: FC<
         username: "",
         organization_id: myOrgId,
         disable_login: false,
-        login_type: "",
+        login_type: "password",
       },
       validationSchema,
       onSubmit,
@@ -63,6 +70,18 @@ export const CreateUserForm: FC<
     error,
   )
 
+  const methods = []
+  if (authMethods?.password.enabled) {
+    methods.push(authMethodSelect("Password", "password"))
+  }
+  if (authMethods?.oidc.enabled) {
+    methods.push(authMethodSelect("OIDC", "oidc"))
+  }
+  if (authMethods?.github.enabled) {
+    methods.push(authMethodSelect("Github", "github"))
+  }
+  methods.push(authMethodSelect("None", "none"))
+
   return (
     <FullPageForm title="Create user">
       {isApiError(error) && !hasApiFieldErrors(error) && (
@@ -93,6 +112,16 @@ export const CreateUserForm: FC<
             label={Language.passwordLabel}
             type="password"
           />
+          <Select
+            // {...getFieldHelpers("userLoginType", "ss")}
+            labelId="user-login-type"
+            id="login_type"
+            value={form.values.login_type}
+            label="Login Type"
+            onChange={form.handleChange}
+          >
+            {methods}
+          </Select>
         </Stack>
         <FormFooter onCancel={onCancel} isLoading={isLoading} />
       </form>

diff --git a/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx b/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx
@@ -8,6 +8,8 @@ import * as TypesGen from "../../../api/typesGenerated"
 import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"
 import { Margins } from "../../../components/Margins/Margins"
 import { pageTitle } from "../../../utils/page"
+import { getAuthMethods } from "api/api"
+import { useQuery } from "@tanstack/react-query"
 
 export const Language = {
   unknownError: "Oops, an unknown error occurred.",
@@ -25,6 +27,13 @@ export const CreateUserPage: FC = () => {
   })
   const { error } = createUserState.context
 
+  // TODO: We should probably place this somewhere else to reduce the number of calls.
+  // This would be called each time this page is loaded.
+  const { data: authMethods } = useQuery({
+    queryKey: ["authMethods"],
+    queryFn: getAuthMethods,
+  })
+
   return (
     <Margins>
       <Helmet>
@@ -33,6 +42,7 @@ export const CreateUserPage: FC = () => {
 
       <CreateUserForm
         error={error}
+        authMethods={authMethods}
         onSubmit={(user: TypesGen.CreateUserRequest) =>
           createUserSend({ type: "CREATE", user })
         }