upstream-rocketchat/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordRadios.tsx

import { Box, FieldHint, FieldLabel, FieldRow, RadioButton } from '@rocket.chat/fuselage';
import { useId } from 'react';
import type { Control, UseFormSetValue } from 'react-hook-form';
import { Controller } from 'react-hook-form';
import { Trans, useTranslation } from 'react-i18next';

import type { UserFormProps } from './AdminUserForm';

type AdminUserSetRandomPasswordProps = {
	isNewUserPage: boolean | undefined;
	control: Control<UserFormProps, any>;
	isSmtpEnabled: boolean | undefined;
	setRandomPasswordId: string;
	setValue: UseFormSetValue<UserFormProps>;
};

const AdminUserSetRandomPasswordRadios = ({
	isNewUserPage,
	control,
	isSmtpEnabled,
	setRandomPasswordId,
	setValue,
}: AdminUserSetRandomPasswordProps) => {
	const { t } = useTranslation();

	const setPasswordManuallyId = useId();

	const handleSetRandomPasswordChange = (onChange: (...event: any[]) => void, value: boolean) => {
		setValue('requirePasswordChange', value);

		onChange(value);
	};

	return (
		<>
			<Box display='flex' flexDirection='row' alignItems='center' flexGrow={1} marginBlockEnd={8}>
				<FieldRow marginInlineEnd={8}>
					<Controller
						control={control}
						name='setRandomPassword'
						defaultValue={isSmtpEnabled && isNewUserPage}
						render={({ field: { ref, onChange, value } }) => (
							<RadioButton
								ref={ref}
								id={setRandomPasswordId}
								aria-describedby={`${setRandomPasswordId}-hint`}
								checked={value}
								onChange={() => handleSetRandomPasswordChange(onChange, true)}
								disabled={!isSmtpEnabled}
							/>
						)}
					/>
				</FieldRow>
				<FieldLabel htmlFor={setRandomPasswordId} alignSelf='center' fontScale='p2' disabled={!isSmtpEnabled}>
					{t('Set_randomly_and_send_by_email')}
				</FieldLabel>
			</Box>
			{!isSmtpEnabled && (
				<FieldHint id={`${setRandomPasswordId}-hint`} marginBlockEnd={16} marginBlockStart={0}>
					<Trans
						i18nKey='Send_Email_SMTP_Warning'
						components={{
							// eslint-disable-next-line jsx-a11y/anchor-has-content
							a: <a href='/admin/settings/Email' />,
						}}
					/>
				</FieldHint>
			)}
			<Box display='flex' flexDirection='row' alignItems='center' flexGrow={1}>
				<FieldRow marginInlineEnd={8}>
					<Controller
						control={control}
						name='setRandomPassword'
						defaultValue={!isNewUserPage}
						render={({ field: { ref, onChange, value } }) => (
							<RadioButton
								ref={ref}
								id={setPasswordManuallyId}
								aria-describedby={`${setPasswordManuallyId}-hint`}
								checked={!value}
								onChange={() => handleSetRandomPasswordChange(onChange, false)}
							/>
						)}
					/>
				</FieldRow>
				<FieldLabel htmlFor={setPasswordManuallyId} alignSelf='center' fontScale='p2'>
					{t('Set_manually')}
				</FieldLabel>
			</Box>
		</>
	);
};

export default AdminUserSetRandomPasswordRadios;