OAuth migration | Use new 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,24 @@ 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 = {
+		publicFields: {
+			username: user.username,
+		},
+	};
+	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) {
@@ -63,7 +60,9 @@ export const PublicProfile = (_: { path?: string }) => {
 	const usernameDisplay = (u: User) => (
 		<>
 			<WithStandardTopMargin>
-				<PageSection title="Username">{u.username}</PageSection>
+				<PageSection title="Username">
+					<span data-cy="username-display">{u.username}</span>
+				</PageSection>
 			</WithStandardTopMargin>
 			<WithStandardTopMargin>
 				<Lines n={1} />
@@ -75,7 +74,7 @@ export const PublicProfile = (_: { path?: string }) => {
 		<>
 			<ProfileFormSection
 				user={u}
-				saveUser={(values) => saveUser(u, values)}
+				saveUser={(values) => setUsername(values)}
 				onError={handleGeneralError}
 				onSuccess={setUser}
 			/>

cypress/lib/signInOkta.ts

@@ -16,6 +16,7 @@ export const signInOkta = () => {
 	cy.visit('/');
 	cy.createTestUser({
 		isUserEmailValidated: true,
+		doNotSetUsername: true,
 	})?.then(({ emailAddress, finalPassword }) => {
 		cy.get('input[name=email]').type(emailAddress);
 		cy.get('input[name=password]').type(finalPassword);

cypress/support/commands.ts

@@ -97,6 +97,7 @@ type IDAPITestUserOptions = {
 	password?: string;
 	deleteAfterMinute?: boolean;
 	isGuestUser?: boolean;
+	doNotSetUsername?: boolean;
 };
 type IDAPITestUserResponse = [
 	{
@@ -128,6 +129,7 @@ export const createTestUser = ({
 	isUserEmailValidated = false,
 	deleteAfterMinute = true,
 	isGuestUser = false,
+	doNotSetUsername = false,
 }: IDAPITestUserOptions) => {
 	// Generate a random email address if none is provided.
 	const finalEmail = primaryEmailAddress || randomMailosaurEmail();
@@ -150,6 +152,7 @@ export const createTestUser = ({
 					password: finalPassword,
 					deleteAfterMinute,
 					isGuestUser,
+					doNotSetUsername,
 				} as IDAPITestUserOptions,
 			})
 			.then((res) => {

cypress/tests/e2e/e2e.cy.ts

@@ -16,9 +16,18 @@ describe('E2E with Okta', () => {
 	});
 
 	context('profile tab', () => {
-		it('should contain a username', () => {
+		it('should allow the user to set a username', () => {
+			const randomUsername = `testuser${Math.floor(
+				Math.random() * 100000,
+			)}`;
 			cy.visit('/public-settings');
-			cy.findByText('Username');
+			cy.get('input[name="username"]').type(randomUsername);
+			cy.findByText('Save changes').click();
+			cy.visit('/public-settings');
+			cy.get('span[data-cy="username-display"]').should(
+				'contain',
+				randomUsername,
+			);
 		});
 	});
 

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') {