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

156 lines
4.1 KiB
JavaScript
Raw Normal View History

2017-10-04 22:36:09 +00:00
// @flow
2016-12-12 01:02:50 +00:00
import React, { Component } from 'react';
2019-03-19 15:42:25 +00:00
import type { Dispatch } from 'redux';
2016-12-12 01:02:50 +00:00
import { setPassword } from '../../base/conference';
import { InputDialog } from '../../base/dialog';
2019-03-21 16:38:29 +00:00
import { connect } from '../../base/redux';
import { _cancelPasswordRequiredPrompt } from '../actions';
2016-12-12 01:02:50 +00:00
/**
2017-10-04 22:36:09 +00:00
* {@code PasswordRequiredPrompt}'s React {@code Component} prop types.
*/
type Props = {
2019-07-10 08:19:00 +00:00
/**
* The previously entered password, if any.
*/
_password: ?string,
2017-10-04 22:36:09 +00:00
/**
* The {@code JitsiConference} which requires a password.
*
* @type {JitsiConference}
*/
conference: { join: Function },
/**
* The redux dispatch function.
*/
2019-03-19 15:42:25 +00:00
dispatch: Dispatch<any>
};
2019-07-10 08:19:00 +00:00
type State = {
/**
* The previously entered password, if any.
*/
password: ?string
}
2017-10-04 22:36:09 +00:00
/**
* Implements a React {@code Component} which prompts the user when a password
* is required to join a conference.
2016-12-12 01:02:50 +00:00
*/
2019-07-10 08:19:00 +00:00
class PasswordRequiredPrompt extends Component<Props, State> {
2016-12-12 01:02:50 +00:00
/**
2017-10-04 22:36:09 +00:00
* Initializes a new {@code PasswordRequiredPrompt} instance.
2016-12-12 01:02:50 +00:00
*
2017-10-04 22:36:09 +00:00
* @param {Props} props - The read-only React {@code Component} props with
* which the new instance is to be initialized.
2016-12-12 01:02:50 +00:00
*/
2017-10-04 22:36:09 +00:00
constructor(props: Props) {
2016-12-12 01:02:50 +00:00
super(props);
2019-07-10 08:19:00 +00:00
this.state = {
password: props._password
};
2017-10-04 22:36:09 +00:00
// Bind event handlers so they are only bound once per instance.
2016-12-12 01:02:50 +00:00
this._onCancel = this._onCancel.bind(this);
this._onSubmit = this._onSubmit.bind(this);
}
2019-07-10 08:19:00 +00:00
/**
* 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 losing the
2019-07-10 08:19:00 +00:00
// 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
});
}
}
2016-12-12 01:02:50 +00:00
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
2019-07-10 08:19:00 +00:00
const { password } = this.state;
2016-12-12 01:02:50 +00:00
return (
<InputDialog
2022-02-04 10:20:47 +00:00
descriptionKey = 'dialog.passwordLabel'
2019-07-10 08:19:00 +00:00
initialValue = { password }
messageKey = { password ? 'dialog.incorrectRoomLockPassword' : undefined }
2016-12-12 01:02:50 +00:00
onCancel = { this._onCancel }
onSubmit = { this._onSubmit }
textInputProps = {{
secureTextEntry: true
2022-02-04 10:20:47 +00:00
}}
titleKey = 'dialog.password' />
2016-12-12 01:02:50 +00:00
);
}
2017-10-04 22:36:09 +00:00
_onCancel: () => boolean;
2016-12-12 01:02:50 +00:00
/**
* Notifies this prompt that it has been dismissed by cancel.
*
* @private
2017-10-04 22:36:09 +00:00
* @returns {boolean} If this prompt is to be closed/hidden, {@code true};
* otherwise, {@code false}.
2016-12-12 01:02:50 +00:00
*/
_onCancel() {
this.props.dispatch(
_cancelPasswordRequiredPrompt(this.props.conference));
return true;
2016-12-12 01:02:50 +00:00
}
2017-10-04 22:36:09 +00:00
_onSubmit: (?string) => boolean;
2016-12-12 01:02:50 +00:00
/**
* Notifies this prompt that it has been dismissed by submitting a specific
* value.
*
2017-10-04 22:36:09 +00:00
* @param {string|undefined} value - The submitted value.
2016-12-12 01:02:50 +00:00
* @private
2017-10-04 22:36:09 +00:00
* @returns {boolean} If this prompt is to be closed/hidden, {@code true};
* otherwise, {@code false}.
2016-12-12 01:02:50 +00:00
*/
2017-10-04 22:36:09 +00:00
_onSubmit(value: ?string) {
const { conference }: { conference: { join: Function } } = this.props;
2016-12-12 01:02:50 +00:00
this.props.dispatch(setPassword(conference, conference.join, value));
return true;
2016-12-12 01:02:50 +00:00
}
}
2019-07-10 08:19:00 +00:00
/**
* 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);