From fa227be74aa31e48228395358aaaac14df59888a Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Sat, 2 May 2026 00:13:06 +1000
Subject: [PATCH] feat: de-mui `<AccountForm />` (#24859)

This pull-request takes our `<AccountForm />`'s dependencies and removes
the reliance on `@mui/Material/TextField` for the `<AccountForm />`.

| Old | New |
| --- | --- |
| <img width="521" height="392" alt="account_settings_old"
src="https://github.com/user-attachments/assets/3dc4e2d9-7176-438c-a522-5c55d3ad122a"
/> | <img width="520" height="447" alt="account_settings_new"
src="https://github.com/user-attachments/assets/cb9f2da8-d848-4b3e-923a-b212f73e6a1c"
/> |
---
 .../AccountPage/AccountForm.tsx               | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx
index 5ae83bd39a..af88c97210 100644
--- a/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx
+++ b/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx
@@ -1,4 +1,3 @@
-import TextField from "@mui/material/TextField";
 import { type FormikTouched, useFormik } from "formik";
 import type { FC } from "react";
 import * as Yup from "yup";
@@ -6,6 +5,7 @@ import type { UpdateUserProfileRequest } from "#/api/typesGenerated";
 import { ErrorAlert } from "#/components/Alert/ErrorAlert";
 import { Button } from "#/components/Button/Button";
 import { Form, FormFields } from "#/components/Form/Form";
+import { FormField } from "#/components/FormField/FormField";
 import { Spinner } from "#/components/Spinner/Spinner";
 import {
 	getFormHelpers,
@@ -53,28 +53,35 @@ export const AccountForm: FC<AccountFormProps> = ({
 					<ErrorAlert error={updateProfileError} />
 				)}
 
-				<TextField disabled fullWidth label="Email" value={email} />
-				<TextField
-					{...getFieldHelpers("username")}
+				<FormField
+					field={getFieldHelpers("email")}
+					label="Email"
+					value={email}
+					disabled
+				/>
+				<FormField
+					field={getFieldHelpers("username")}
 					onChange={onChangeTrimmed(form)}
 					aria-disabled={!editable}
 					autoComplete="username"
 					disabled={!editable}
-					fullWidth
+					className="w-full"
 					label="Username"
 				/>
-				<TextField
-					{...getFieldHelpers("name")}
-					autoComplete="name"
-					fullWidth
-					onBlur={(e) => {
-						e.target.value = e.target.value.trim();
-						form.handleChange(e);
+				<FormField
+					field={{
+						...getFieldHelpers("name"),
+						helperText:
+							'The human-readable name is optional and can be accessed in a template via the "data.coder_workspace_owner.me.full_name" property.',
 					}}
+					autoComplete="name"
+					className="w-full"
 					label="Name"
-					helperText='The human-readable name is optional and can be accessed in a template via the "data.coder_workspace_owner.me.full_name" property.'
+					onBlur={(event) => {
+						event.target.value = event.target.value.trim();
+						form.handleChange(event);
+					}}
 				/>
-
 				<div>
 					<Button disabled={isLoading} type="submit">
 						<Spinner loading={isLoading} />