import React, { Component } from 'react'; import { WithTranslation } from 'react-i18next'; import { translate } from '../../../../base/i18n/functions'; import Input from '../../../../base/ui/components/web/Input'; // eslint-disable-next-line lines-around-comment // @ts-ignore import { LOCKED_LOCALLY } from '../../../../room-lock'; /** * The type of the React {@code Component} props of {@link PasswordForm}. */ interface Props extends WithTranslation { /** * Whether or not to show the password editing field. */ editEnabled: boolean; /** * The value for how the conference is locked (or undefined if not locked) * as defined by room-lock constants. */ locked: string; /** * Callback to invoke when the local participant is submitting a password * set request. */ onSubmit: Function; /** * The current known password for the JitsiConference. */ password: string; /** * The number of digits to be used in the password. */ passwordNumberOfDigits?: number; } /** * The type of the React {@code Component} state of {@link PasswordForm}. */ type State = { /** * The value of the password being entered by the local participant. */ enteredPassword: string; }; /** * React {@code Component} for displaying and editing the conference password. * * @augments Component */ class PasswordForm extends Component { /** * Implements React's {@link Component#getDerivedStateFromProps()}. * * @inheritdoc */ static getDerivedStateFromProps(props: Props, state: State) { return { enteredPassword: props.editEnabled ? state.enteredPassword : '' }; } state = { enteredPassword: '' }; /** * Initializes a new {@code PasswordForm} instance. * * @param {Props} props - The React {@code Component} props to initialize * the new {@code PasswordForm} instance with. */ constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. this._onEnteredPasswordChange = this._onEnteredPasswordChange.bind(this); this._onKeyPress = this._onKeyPress.bind(this); } /** * Implements React's {@link Component#render()}. * * @inheritdoc * @returns {ReactElement} */ render() { return (
{this._renderPassword()} {this._renderPasswordField()}
); } /** ......... * Renders the password if there is any. * * @returns {ReactElement} */ _renderPassword() { const { locked, t } = this.props; return locked && <> {t('info.password')}   {locked === LOCKED_LOCALLY ? (
{this.props.password}
) : (
{this.props.t('passwordSetRemotely')}
) } {this._renderPasswordField()}
; } /** * Returns a ReactElement for showing the current state of the password or * for editing the current password. * * @private * @returns {ReactElement} */ _renderPasswordField() { if (this.props.editEnabled) { let placeHolderText = this.props.t('dialog.password'); if (this.props.passwordNumberOfDigits) { placeHolderText = this.props.t('passwordDigitsOnly', { number: this.props.passwordNumberOfDigits }); } return (
); } } /** * Updates the internal state of entered password. * * @param {string} value - DOM Event for value change. * @private * @returns {void} */ _onEnteredPasswordChange(value: string) { this.setState({ enteredPassword: value }); } /** * Stops the the EnterKey for propagation in order to prevent the dialog * to close. * * @param {Object} event - The key event. * @private * @returns {void} */ _onKeyPress(event: React.KeyboardEvent) { if (event.key === 'Enter') { event.preventDefault(); event.stopPropagation(); this.props.onSubmit(this.state.enteredPassword); } } } export default translate(PasswordForm);