coder · Emyrk · Jun 28, 2023 · Jun 21, 2023 · Jun 21, 2023 · Jun 22, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -211,6 +211,5 @@
   "go.testFlags": ["-short", "-coverpkg=./..."],
   // We often use a version of TypeScript that's ahead of the version shipped
   // with VS Code.
-  "typescript.tsdk": "./site/node_modules/typescript/lib",
-  "prettier.prettierPath": "./node_modules/prettier"
+  "typescript.tsdk": "./site/node_modules/typescript/lib"
 }
diff --git a/coderd/userauth.go b/coderd/userauth.go
@@ -840,7 +840,7 @@ func (api *API) userOIDC(rw http.ResponseWriter, r *http.Request) {
 			// Convert the []interface{} we get to a []string.
 			groupsInterface, ok := groupsRaw.([]interface{})
 			if ok {
-				logger.Debug(ctx, "groups returned in oidc claims",
+				api.Logger.Debug(ctx, "groups returned in oidc claims",
 					slog.F("len", len(groupsInterface)),
 					slog.F("groups", groupsInterface),
 				)
@@ -861,7 +861,7 @@ func (api *API) userOIDC(rw http.ResponseWriter, r *http.Request) {
 					groups = append(groups, group)
 				}
 			} else {
-				logger.Debug(ctx, "groups field was an unknown type",
+				api.Logger.Debug(ctx, "groups field was an unknown type",
 					slog.F("type", fmt.Sprintf("%T", groupsRaw)),
 				)
 			}

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -108,33 +108,12 @@ export const login = async (
   return response.data
 }
 
-export const convertToOauth = async (
-  email: string,
-  password: string,
-  to_login_type: string,
-): Promise<TypesGen.OauthConversionResponse | undefined> => {
-  const payload = JSON.stringify({
-    email,
-    password,
-    to_login_type,
-  })
-
-  try {
-    const response = await axios.post<TypesGen.OauthConversionResponse>(
-      "/api/v2/users/convert-login",
-      payload,
-      {
-        headers: { ...CONTENT_TYPE_JSON },
-      },
-    )
-    return response.data
-  } catch (error) {
-    if (axios.isAxiosError(error) && error.response?.status === 401) {
-      return undefined
-    }
-
-    throw error
-  }
+export const convertToOAUTH = async (request: TypesGen.ConvertLoginRequest) => {
+  const response = await axios.post<TypesGen.OauthConversionResponse>(
+    "/api/v2/users/convert-login",
+    request,
+  )
+  return response.data
 }
 
 export const logout = async (): Promise<void> => {

diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.test.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.test.tsx
@@ -31,7 +31,7 @@ describe("AccountForm", () => {
       const el = await screen.findByLabelText("Username")
       expect(el).toBeEnabled()
       const btn = await screen.findByRole("button", {
-        name: /Update settings/i,
+        name: /Update account/i,
       })
       expect(btn).toBeEnabled()
     })
@@ -61,7 +61,7 @@ describe("AccountForm", () => {
       const el = await screen.findByLabelText("Username")
       expect(el).toBeDisabled()
       const btn = await screen.findByRole("button", {
-        name: /Update settings/i,
+        name: /Update account/i,
       })
       expect(btn).toBeDisabled()
     })

diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
@@ -8,8 +8,8 @@ import {
   onChangeTrimmed,
 } from "../../utils/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
-import { Stack } from "../Stack/Stack"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
+import { Form, FormFields } from "components/Form/Form"
 
 export interface AccountFormValues {
   username: string
@@ -18,7 +18,7 @@ export interface AccountFormValues {
 export const Language = {
   usernameLabel: "Username",
   emailLabel: "Email",
-  updateSettings: "Update settings",
+  updateSettings: "Update account",
 }
 
 const validationSchema = Yup.object({
@@ -59,8 +59,8 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
 
   return (
     <>
-      <form onSubmit={form.handleSubmit}>
-        <Stack>
+      <Form onSubmit={form.handleSubmit}>
+        <FormFields>
           {Boolean(updateProfileError) && (
             <ErrorAlert error={updateProfileError} />
           )}
@@ -91,8 +91,8 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
               {isLoading ? "" : Language.updateSettings}
             </LoadingButton>
           </div>
-        </Stack>
-      </form>
+        </FormFields>
+      </Form>
     </>
   )
 }
diff --git a/site/src/components/SettingsLayout/Section.tsx b/site/src/components/SettingsLayout/Section.tsx
@@ -6,6 +6,8 @@ import { SectionAction } from "../SectionAction/SectionAction"
 type SectionLayout = "fixed" | "fluid"
 
 export interface SectionProps {
+  // Useful for testing
+  id?: string
   title?: ReactNode | string
   description?: ReactNode
   toolbar?: ReactNode
@@ -20,6 +22,7 @@ type SectionFC = FC<PropsWithChildren<SectionProps>> & {
 }
 
 export const Section: SectionFC = ({
+  id,
   title,
   description,
   toolbar,
@@ -30,12 +33,16 @@ export const Section: SectionFC = ({
 }) => {
   const styles = useStyles({ layout })
   return (
-    <section className={className}>
+    <section className={className} id={id} data-testid={id}>
       <div className={styles.inner}>
         {(title || description) && (
           <div className={styles.header}>
             <div>
-              {title && <Typography variant="h4">{title}</Typography>}
+              {title && (
+                <Typography variant="h4" sx={{ fontSize: 24 }}>
+                  {title}
+                </Typography>
+              )}
               {description && typeof description === "string" && (
                 <Typography className={styles.description}>
                   {description}

diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.stories.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.stories.tsx
@@ -17,12 +17,6 @@ const Template: Story<SecurityFormProps> = (args: SecurityFormProps) => (
 export const Example = Template.bind({})
 Example.args = {
   isLoading: false,
-  initialValues: {
-    old_password: "",
-    password: "",
-    confirm_password: "",
-  },
-  updateSecurityError: undefined,
   onSubmit: () => {
     return Promise.resolve()
   },
@@ -37,7 +31,7 @@ Loading.args = {
 export const WithError = Template.bind({})
 WithError.args = {
   ...Example.args,
-  updateSecurityError: mockApiError({
+  error: mockApiError({
     message: "Old password is incorrect",
     validations: [
       {
@@ -46,7 +40,4 @@ WithError.args = {
       },
     ],
   }),
-  initialTouched: {
-    old_password: true,
-  },
 }
diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
@@ -1,11 +1,12 @@
 import TextField from "@mui/material/TextField"
-import { FormikContextType, FormikTouched, useFormik } from "formik"
+import { FormikContextType, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
 import { getFormHelpers } from "../../utils/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
-import { Stack } from "../Stack/Stack"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
+import { Form, FormFields } from "components/Form/Form"
+import { Alert } from "components/Alert/Alert"
 
 interface SecurityFormValues {
   old_password: string
@@ -41,40 +42,43 @@ const validationSchema = Yup.object({
 })
 
 export interface SecurityFormProps {
+  disabled: boolean
   isLoading: boolean
-  initialValues: SecurityFormValues
   onSubmit: (values: SecurityFormValues) => void
-  updateSecurityError?: Error | unknown
-  // initialTouched is only used for testing the error state of the form.
-  initialTouched?: FormikTouched<SecurityFormValues>
+  error?: unknown
 }
 
 export const SecurityForm: FC<SecurityFormProps> = ({
+  disabled,
   isLoading,
   onSubmit,
-  initialValues,
-  updateSecurityError,
-  initialTouched,
+  error,
 }) => {
   const form: FormikContextType<SecurityFormValues> =
     useFormik<SecurityFormValues>({
-      initialValues,
+      initialValues: {
+        old_password: "",
+        password: "",
+        confirm_password: "",
+      },
       validationSchema,
       onSubmit,
-      initialTouched,
     })
-  const getFieldHelpers = getFormHelpers<SecurityFormValues>(
-    form,
-    updateSecurityError,
-  )
+  const getFieldHelpers = getFormHelpers<SecurityFormValues>(form, error)
+
+  if (disabled) {
+    return (
+      <Alert severity="info">
+        Password changes are only allowed for password based accounts.
+      </Alert>
+    )
+  }
 
   return (
     <>
-      <form onSubmit={form.handleSubmit}>
-        <Stack>
-          {Boolean(updateSecurityError) && (
-            <ErrorAlert error={updateSecurityError} />
-          )}
+      <Form onSubmit={form.handleSubmit}>
+        <FormFields>
+          {Boolean(error) && <ErrorAlert error={error} />}
           <TextField
             {...getFieldHelpers("old_password")}
             autoComplete="old_password"
@@ -106,8 +110,8 @@ export const SecurityForm: FC<SecurityFormProps> = ({
               {isLoading ? "" : Language.updatePassword}
             </LoadingButton>
           </div>
-        </Stack>
-      </form>
+        </FormFields>
+      </Form>
     </>
   )
 }