jiti-meet/react/features/room-lock/components/PasswordRequiredPrompt.nati...

155 lines
4.0 KiB
JavaScript

// @flow
import React, { Component } from 'react';
import type { Dispatch } from 'redux';
import { setPassword } from '../../base/conference';
import { InputDialog } from '../../base/dialog';
import { connect } from '../../base/redux';
import { _cancelPasswordRequiredPrompt } from '../actions';
/**
* {@code PasswordRequiredPrompt}'s React {@code Component} prop types.
*/
type Props = {
/**
* The previously entered password, if any.
*/
_password: ?string,
/**
* The {@code JitsiConference} which requires a password.
*
* @type {JitsiConference}
*/
conference: { join: Function },
/**
* The redux dispatch function.
*/
dispatch: Dispatch<any>
};
type State = {
/**
* The previously entered password, if any.
*/
password: ?string
}
/**
* Implements a React {@code Component} which prompts the user when a password
* is required to join a conference.
*/
class PasswordRequiredPrompt extends Component<Props, State> {
/**
* Initializes a new {@code PasswordRequiredPrompt} instance.
*
* @param {Props} props - The read-only React {@code Component} props with
* which the new instance is to be initialized.
*/
constructor(props: Props) {
super(props);
this.state = {
password: props._password
};
// Bind event handlers so they are only bound once per instance.
this._onCancel = this._onCancel.bind(this);
this._onSubmit = this._onSubmit.bind(this);
}
/**
* Implements {@code Component#componentDidUpdate}.
*
* @inheritdoc
*/
componentDidUpdate() {
const { _password } = this.props;
// The previous password in Redux gets cleared after the dialog appears and it ends up breaking the dialog
// logic. We move the prop into state and only update it if it has an actual value, avoiding loosing the
// previously received value when Redux updates.
if (_password && _password !== this.state.password) {
// eslint-disable-next-line react/no-did-update-set-state
this.setState({
password: _password
});
}
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { password } = this.state;
return (
<InputDialog
contentKey = 'dialog.passwordLabel'
initialValue = { password }
messageKey = { password ? 'dialog.incorrectRoomLockPassword' : undefined }
onCancel = { this._onCancel }
onSubmit = { this._onSubmit }
textInputProps = {{
secureTextEntry: true
}} />
);
}
_onCancel: () => boolean;
/**
* Notifies this prompt that it has been dismissed by cancel.
*
* @private
* @returns {boolean} If this prompt is to be closed/hidden, {@code true};
* otherwise, {@code false}.
*/
_onCancel() {
this.props.dispatch(
_cancelPasswordRequiredPrompt(this.props.conference));
return true;
}
_onSubmit: (?string) => boolean;
/**
* Notifies this prompt that it has been dismissed by submitting a specific
* value.
*
* @param {string|undefined} value - The submitted value.
* @private
* @returns {boolean} If this prompt is to be closed/hidden, {@code true};
* otherwise, {@code false}.
*/
_onSubmit(value: ?string) {
const { conference }: { conference: { join: Function } } = this.props;
this.props.dispatch(setPassword(conference, conference.join, value));
return true;
}
}
/**
* Maps part of the Redux state to the props of this component.
*
* @param {Object} state - The Redux state.
* @returns {Props}
*/
function _mapStateToProps(state) {
return {
_password: state['features/base/conference'].password
};
}
export default connect(_mapStateToProps)(PasswordRequiredPrompt);