refactor: use new IDAPI set username route

client/components/mma/identity/idapi/user.ts

@@ -2,6 +2,7 @@ import { get } from 'lodash';
 import {
 	addCSRFToken,
 	fetchWithDefaultParameters,
+	postRequest,
 	putRequest,
 } from '@/client/utilities/fetch';
 import type { User, UserError } from '../models';
@@ -194,3 +195,21 @@ export const read = async (): Promise<User> => {
 	).then((response) => response.json());
 	return toUser(response);
 };
+
+export const setUsername = async (user: Partial<User>): Promise<User> => {
+	const url = '/idapi/user/username';
+	const body = toUserApiRequest(user);
+	console.log('sending', body);
+	try {
+		const response: UserAPIResponse = await fetchWithDefaultParameters(
+			url,
+			addCSRFToken(postRequest(body)),
+		).then((response) => response.json());
+		if (isErrorResponse(response)) {
+			throw toUserError(response);
+		}
+		return toUser(response);
+	} catch (e) {
+		throw isErrorResponse(e) ? toUserError(e) : e;
+	}
+};

client/components/mma/identity/identity.ts

@@ -72,6 +72,9 @@ export const Users: UserCollection = {
 	getChangedFields(original: User, changed: User): Partial<User> {
 		return diffWithCompositeFields(original, changed);
 	},
+	async setUsername(user: User): Promise<User> {
+		return await UserAPI.setUsername(user);
+	},
 };
 
 export const ConsentOptions: ConsentOptionCollection = {

client/components/mma/identity/models.ts

@@ -57,6 +57,7 @@ export interface UserCollection {
 	save: (user: User) => Promise<User>;
 	saveChanges: (original: User, changed: User) => Promise<User>;
 	getChangedFields: (original: User, changed: User) => Partial<User>;
+	setUsername: (user: User) => Promise<User>;
 }
 
 export interface ConsentOption {

client/components/mma/identity/publicProfile/PublicProfile.tsx

@@ -43,10 +43,7 @@ export const PublicProfile = (_: { path?: string }) => {
 			.catch(handleGeneralError);
 	}, []);
 
-	const saveUser = async (originalUser: User, values: User) => {
-		const changedUser = { ...originalUser, ...values };
-		return await Users.saveChanges(originalUser, changedUser);
-	};
+	const setUsername = async (values: User) => await Users.setUsername(values);
 
 	useEffect(() => {
 		if (error && errorRef.current) {
@@ -75,7 +72,7 @@ export const PublicProfile = (_: { path?: string }) => {
 		<>
 			<ProfileFormSection
 				user={u}
-				saveUser={(values) => saveUser(u, values)}
+				saveUser={(values) => setUsername(values)}
 				onError={handleGeneralError}
 				onSuccess={setUser}
 			/>

server/routes/idapi.ts

@@ -99,6 +99,15 @@ router.delete(
 	}),
 );
 
+router.post(
+	'/user/username',
+	csrfValidateMiddleware,
+	idapiProxyHandler({
+		url: '/user/me/username',
+		method: 'POST',
+	}),
+);
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the err argument?
 router.use((err: any, _: Request, res: Response, next: NextFunction) => {
 	if (err.code && err.code === 'EBADCSRFTOKEN') {