upstream-rocketchat/apps/meteor/client/views/room/composer/ComposerJoinWithPassword.tsx

import { PasswordInput } from '@rocket.chat/fuselage';
import { MessageFooterCallout, MessageFooterCalloutAction, MessageFooterCalloutContent } from '@rocket.chat/ui-composer';
import { useTranslation, useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
import { Controller, useForm } from 'react-hook-form';

import { useRoom } from '../contexts/RoomContext';

const ComposerJoinWithPassword = () => {
	const t = useTranslation();
	const room = useRoom();
	const dispatchToastMessage = useToastMessageDispatch();

	const joinChannelEndpoint = useEndpoint('POST', '/v1/rooms.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={handleSubmit(handleJoinChannel)}>
			<MessageFooterCalloutContent>{t('you_are_in_preview')}</MessageFooterCalloutContent>
			<MessageFooterCalloutContent>
				<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={!isDirty}>
				{t('Join_with_password')}
			</MessageFooterCalloutAction>
		</MessageFooterCallout>
	);
};

export default ComposerJoinWithPassword;