snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/root/MainLayout/RegisterUsername.tsx

@@ -0,0 +1,139 @@
+import type { IUser } from '@rocket.chat/core-typings';
+import { TextInput, ButtonGroup, Button, FieldGroup, Field, FieldLabel, FieldRow, FieldError, Box } from '@rocket.chat/fuselage';
+import { VerticalWizardLayout, Form, FormContainer, FormFooter, FormHeader, FormSubtitle, FormTitle } from '@rocket.chat/layout';
+import { CustomFieldsForm } from '@rocket.chat/ui-client';
+import {
+	useSetting,
+	useTranslation,
+	useLogout,
+	useEndpoint,
+	useUserId,
+	useToastMessageDispatch,
+	useAssetWithDarkModePath,
+	useAccountsCustomFields,
+} from '@rocket.chat/ui-contexts';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useId } from 'react';
+import { useForm } from 'react-hook-form';
+
+import MarkdownText from '../../../components/MarkdownText';
+
+type RegisterUsernamePayload = {
+	username: Exclude<IUser['username'], undefined>;
+} & IUser['customFields'];
+
+const RegisterUsername = () => {
+	const t = useTranslation();
+	const uid = useUserId();
+	const logout = useLogout();
+	const formLabelId = useId();
+	const hideLogo = useSetting('Layout_Login_Hide_Logo', false);
+	const customLogo = useAssetWithDarkModePath('logo');
+	const customBackground = useAssetWithDarkModePath('background');
+	const dispatchToastMessage = useToastMessageDispatch();
+	const customFields = useAccountsCustomFields();
+
+	if (!uid) {
+		throw new Error('Invalid user');
+	}
+
+	const setBasicInfo = useEndpoint('POST', '/v1/users.updateOwnBasicInfo');
+
+	const usernameSuggestion = useEndpoint('GET', '/v1/users.getUsernameSuggestion');
+	const { data, isLoading } = useQuery({
+		queryKey: ['suggestion'],
+		queryFn: async () => usernameSuggestion(),
+	});
+
+	const {
+		register,
+		handleSubmit,
+		setValue,
+		getValues,
+		setError,
+		control,
+		formState: { errors },
+	} = useForm<RegisterUsernamePayload>();
+
+	useEffect(() => {
+		if (data?.result && getValues('username') === '') {
+			setValue('username', data.result);
+		}
+	});
+
+	const queryClient = useQueryClient();
+
+	const registerUsernameMutation = useMutation({
+		mutationFn: async (data: RegisterUsernamePayload) => {
+			const { username, ...customFields } = data;
+			return Promise.all([setBasicInfo({ data: { username }, customFields })]);
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Username_has_been_updated') });
+			queryClient.invalidateQueries({ queryKey: ['users.info'] });
+			// Reload to redo any onLogin request that may have failed without an username
+			location.reload();
+		},
+		onError: (error: any, { username }) => {
+			if ([error.error, error.errorType].includes('error-blocked-username')) {
+				return setError('username', { type: 'error-blocked-username', message: t('error-blocked-username', { field: username }) });
+			}
+
+			if ([error.errorType].includes('error-field-unavailable')) {
+				return setError('username', { type: 'error-field-unavailable', message: t('error-field-unavailable', { field: username }) });
+			}
+
+			if ([error.errorType].includes('')) {
+				return setError('username', { type: 'username-invalid', message: t('Username_invalid', { username }) });
+			}
+
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+	});
+
+	return (
+		<VerticalWizardLayout
+			background={customBackground}
+			logo={!hideLogo && customLogo ? <Box is='img' maxHeight='x40' marginInline='neg-x8' src={customLogo} alt='Logo' /> : <></>}
+		>
+			<Form aria-labelledby={formLabelId} onSubmit={handleSubmit((data) => registerUsernameMutation.mutate(data))}>
+				<FormHeader>
+					<FormTitle id={formLabelId}>{t('Username_title')}</FormTitle>
+					<FormSubtitle>{t('Username_description')}</FormSubtitle>
+				</FormHeader>
+				<FormContainer>
+					{!isLoading && (
+						<FieldGroup>
+							<Field>
+								<FieldLabel id='username-label'>{t('Username')}</FieldLabel>
+								<FieldRow>
+									<TextInput
+										aria-labelledby='username-label'
+										{...register('username', { required: t('Required_field', { field: t('Username') }) })}
+									/>
+								</FieldRow>
+								{errors.username && (
+									<FieldError>
+										<MarkdownText content={errors.username.message} />
+									</FieldError>
+								)}
+							</Field>
+						</FieldGroup>
+					)}
+					{isLoading && t('Loading_suggestion')}
+					<CustomFieldsForm formName='customFields' formControl={control} metadata={customFields} />
+				</FormContainer>
+				<FormFooter>
+					<ButtonGroup stretch vertical>
+						<Button disabled={isLoading} type='submit' primary>
+							{t('Use_this_username')}
+						</Button>
+						<Button onClick={logout}>{t('Logout')}</Button>
+					</ButtonGroup>
+				</FormFooter>
+			</Form>
+		</VerticalWizardLayout>
+	);
+};
+
+export default RegisterUsername;