fix: Can't create public channels with joinCode (#31277)

.changeset/thick-nails-explode.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixed the problem of not being possible to add a join code to a public room

apps/meteor/client/views/room/composer/ComposerContainer.tsx

@@ -1,4 +1,5 @@
 import { isOmnichannelRoom, isRoomFederated, isVoipRoom } from '@rocket.chat/core-typings';
+import { usePermission } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { memo } from 'react';
 
@@ -18,19 +19,14 @@ import { useMessageComposerIsReadOnly } from './hooks/useMessageComposerIsReadOn
 
 const ComposerContainer = ({ children, ...props }: ComposerMessageProps): ReactElement => {
 	const room = useRoom();
-
-	const mustJoinWithCode = !props.subscription && room.joinCodeRequired;
+	const canJoinWithoutCode = usePermission('join-without-join-code');
+	const mustJoinWithCode = !props.subscription && room.joinCodeRequired && !canJoinWithoutCode;
 
 	const isAnonymous = useMessageComposerIsAnonymous();
-
 	const isBlockedOrBlocker = useMessageComposerIsBlocked({ subscription: props.subscription });
-
 	const isReadOnly = useMessageComposerIsReadOnly(room._id, props.subscription);
-
 	const isOmnichannel = isOmnichannelRoom(room);
-
 	const isFederation = isRoomFederated(room);
-
 	const isVoip = isVoipRoom(room);
 
 	if (isOmnichannel) {

apps/meteor/client/views/room/composer/ComposerJoinWithPassword.tsx

@@ -1,53 +1,50 @@
-import { TextInput } from '@rocket.chat/fuselage';
+import { PasswordInput } from '@rocket.chat/fuselage';
 import { MessageFooterCallout, MessageFooterCalloutAction, MessageFooterCalloutContent } from '@rocket.chat/ui-composer';
-import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { ChangeEvent, ReactElement, FormEventHandler } from 'react';
-import React, { useCallback, useState } from 'react';
+import { useTranslation, useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import React from 'react';
+import { Controller, useForm } from 'react-hook-form';
 
 import { useRoom } from '../contexts/RoomContext';
 
 const ComposerJoinWithPassword = (): ReactElement => {
-	const room = useRoom();
-	const [joinCode, setJoinPassword] = useState<string>('');
-
-	const [error, setError] = useState<string>('');
-
 	const t = useTranslation();
-
-	const joinEndpoint = useEndpoint('POST', '/v1/channels.join');
-
-	const join = useCallback<FormEventHandler<HTMLElement>>(
-		async (e) => {
-			e.preventDefault();
-			try {
-				await joinEndpoint({
-					roomId: room._id,
-					joinCode,
-				});
-			} catch (error: any) {
-				setError(error.error);
-			}
-		},
-		[joinEndpoint, room._id, joinCode],
-	);
-
-	const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-		setJoinPassword(e.target.value);
-		setError('');
-	}, []);
+	const room = useRoom();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const joinChannelEndpoint = useEndpoint('POST', '/v1/channels.join');
+	const {
+		control,
+		handleSubmit,
+		setError,
+		formState: { errors, isDirty },
+	} = useForm({ defaultValues: { joinCode: '' } });
+
+	const handleJoinChannel = async ({ joinCode }: { joinCode: string }) => {
+		try {
+			await joinChannelEndpoint({
+				roomId: room._id,
+				joinCode,
+			});
+		} catch (error: any) {
+			setError('joinCode', { type: error.errorType, message: error.error });
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
 
 	return (
-		<MessageFooterCallout is='form' aria-label={t('Join_with_password')} onSubmit={join}>
+		<MessageFooterCallout is='form' aria-label={t('Join_with_password')} onSubmit={handleSubmit(handleJoinChannel)}>
 			<MessageFooterCalloutContent>{t('you_are_in_preview')}</MessageFooterCalloutContent>
 			<MessageFooterCalloutContent>
-				<TextInput
-					error={error}
-					value={joinCode}
-					onChange={handleChange}
-					placeholder={t('you_are_in_preview_please_insert_the_password')}
+				<Controller
+					name='joinCode'
+					control={control}
+					render={({ field }) => (
+						<PasswordInput error={errors.joinCode?.message} {...field} placeholder={t('you_are_in_preview_please_insert_the_password')} />
+					)}
 				/>
 			</MessageFooterCalloutContent>
-			<MessageFooterCalloutAction type='submit' disabled={Boolean(!joinCode)}>
+			<MessageFooterCalloutAction type='submit' disabled={!isDirty}>
 				{t('Join_with_password')}
 			</MessageFooterCalloutAction>
 		</MessageFooterCallout>

apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx

@@ -2,6 +2,7 @@ import type { IRoomWithRetentionPolicy } from '@rocket.chat/core-typings';
 import { isRoomFederated } from '@rocket.chat/core-typings';
 import type { SelectOption } from '@rocket.chat/fuselage';
 import {
+	FieldError,
 	Field,
 	FieldRow,
 	FieldLabel,
@@ -97,7 +98,7 @@ const EditRoomInfo = ({ room, onClickClose, onClickBack }: EditRoomInfoProps) =>
 
 	const handleArchive = useArchiveRoom(room);
 
-	const handleUpdateRoomData = useMutableCallback(async ({ hideSysMes, ...formData }) => {
+	const handleUpdateRoomData = useMutableCallback(async ({ hideSysMes, joinCodeRequired, ...formData }) => {
 		const data = getDirtyFields(formData, dirtyFields);
 		delete data.archived;
 
@@ -169,7 +170,7 @@ const EditRoomInfo = ({ room, onClickClose, onClickBack }: EditRoomInfoProps) =>
 									render={({ field }) => <TextInput id={roomNameField} {...field} disabled={!canViewName} />}
 								/>
 							</FieldRow>
-							{errors.roomName && <Field.Error>{errors.roomName.message}</Field.Error>}
+							{errors.roomName && <FieldError>{errors.roomName.message}</FieldError>}
 						</Field>
 						{canViewDescription && (
 							<Field>