fix: validate username availability against API in Setup Wizard admin step

packages/ui-client/src/views/setupWizard/contexts/SetupWizardContext.tsx

@@ -34,6 +34,7 @@ type SetupWizarContextValue = {
 	saveOrganizationData: (data: SetupWizardData['organizationData']) => Promise<void>;
 	completeSetupWizard: () => Promise<void>;
 	maxSteps: number;
+	checkUsernameAvailability: (username: string) => Promise<boolean>;
 };
 
 export const SetupWizardContext = createContext<SetupWizarContextValue>({
@@ -67,6 +68,7 @@ export const SetupWizardContext = createContext<SetupWizarContextValue>({
 	currentStep: 1,
 	completeSetupWizard: async () => undefined,
 	maxSteps: 4,
+	checkUsernameAvailability: async () => true,
 });
 
 export const useSetupWizardContext = (): SetupWizarContextValue => useContext(SetupWizardContext);

packages/ui-client/src/views/setupWizard/providers/SetupWizardProvider.tsx

@@ -52,6 +52,7 @@ const SetupWizardProvider = ({ children }: { children: ReactElement }): ReactEle
 	const loginWithPassword = useLoginWithPassword();
 	const setForceLogin = useSessionDispatch('forceLogin');
 	const createRegistrationIntent = useEndpoint('POST', '/v1/cloud.createRegistrationIntent');
+	const checkUsernameAvailabilityEndpoint = useEndpoint('GET', '/v1/users.checkUsernameAvailability');
 
 	const goToPreviousStep = useCallback(() => setCurrentStep((currentStep) => currentStep - 1), [setCurrentStep]);
 	const goToNextStep = useCallback(() => setCurrentStep((currentStep) => currentStep + 1), [setCurrentStep]);
@@ -68,6 +69,18 @@ const SetupWizardProvider = ({ children }: { children: ReactElement }): ReactEle
 		[t],
 	);
 
+	const checkUsernameAvailability = useCallback(
+		async (username: string): Promise<boolean> => {
+			try {
+				const { result } = await checkUsernameAvailabilityEndpoint({ username });
+				return result;
+			} catch {
+				return false;
+			}
+		},
+		[checkUsernameAvailabilityEndpoint],
+	);
+
 	const registerAdminUser = useCallback(
 		async ({
 			fullname,
@@ -207,6 +220,7 @@ const SetupWizardProvider = ({ children }: { children: ReactElement }): ReactEle
 			saveOrganizationData,
 			completeSetupWizard,
 			maxSteps: data.serverAlreadyRegistered ? 2 : 4,
+			checkUsernameAvailability,
 		}),
 		[
 			setupWizardData,
@@ -224,6 +238,7 @@ const SetupWizardProvider = ({ children }: { children: ReactElement }): ReactEle
 			saveWorkspaceData,
 			saveOrganizationData,
 			completeSetupWizard,
+			checkUsernameAvailability,
 		],
 	);
 

packages/ui-client/src/views/setupWizard/steps/AdminInfoStep.tsx

@@ -17,7 +17,7 @@ const AdminInfoStep = (): ReactElement => {
 	const regexpForUsernameValidation = useSetting('UTF8_User_Names_Validation');
 	const usernameRegExp = new RegExp(`^${regexpForUsernameValidation}$`);
 
-	const { currentStep, validateEmail, registerAdminUser, maxSteps } = useSetupWizardContext();
+	const { currentStep, validateEmail, registerAdminUser, maxSteps, checkUsernameAvailability } = useSetupWizardContext();
 
 	const passwordPolicyOptions = usePasswordPolicyOptions();
 	const validatePasswordPolicy = usePasswordPolicy(passwordPolicyOptions);
@@ -39,12 +39,16 @@ const AdminInfoStep = (): ReactElement => {
 			.join(', ');
 	}, [passwordPolicyValidations.validations, t]);
 
-	// TODO: check if username exists
-	const validateUsername = (username: string): boolean | string => {
+	const validateUsername = async (username: string): Promise<boolean | string> => {
 		if (!usernameRegExp.test(username) || hasBlockedName(username)) {
 			return t('Invalid_username');
 		}
 
+		const isAvailable = await checkUsernameAvailability(username);
+		if (!isAvailable) {
+			return t('Username_already_exist');
+		}
+
 		return true;
 	};