jiti-meet/react/features/room-lock/components/PasswordRequiredPrompt.web.js

153 lines
3.8 KiB
JavaScript

// @flow
import { FieldTextStateless as TextField } from '@atlaskit/field-text';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import type { Dispatch } from 'redux';
import { setPassword } from '../../base/conference';
import { Dialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
/**
* The type of the React {@code Component} props of
* {@link PasswordRequiredPrompt}.
*/
type Props = {
/**
* The JitsiConference which requires a password.
*/
conference: Object,
/**
* The redux store's {@code dispatch} function.
*/
dispatch: Dispatch<any>,
/**
* The translate function.
*/
t: Function
};
/**
* The type of the React {@code Component} state of
* {@link PasswordRequiredPrompt}.
*/
type State = {
/**
* The password entered by the local participant.
*/
password: string
}
/**
* Implements a React Component which prompts the user when a password is
* required to join a conference.
*/
class PasswordRequiredPrompt extends Component<Props, State> {
state = {
password: ''
};
/**
* Initializes a new PasswordRequiredPrompt instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props: Props) {
super(props);
// Bind event handlers so they are only bound once per instance.
this._onPasswordChanged = this._onPasswordChanged.bind(this);
this._onSubmit = this._onSubmit.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return (
<Dialog
isModal = { true }
onSubmit = { this._onSubmit }
titleKey = 'dialog.passwordRequired'
width = 'small'>
{ this._renderBody() }
</Dialog>
);
}
/**
* Display component in dialog body.
*
* @returns {ReactElement}
* @protected
*/
_renderBody() {
return (
<div>
<TextField
autoFocus = { true }
compact = { true }
label = { this.props.t('dialog.passwordLabel') }
name = 'lockKey'
onChange = { this._onPasswordChanged }
shouldFitContainer = { true }
type = 'text'
value = { this.state.password } />
</div>
);
}
_onPasswordChanged: ({ target: { value: * }}) => void;
/**
* Notifies this dialog that password has changed.
*
* @param {Object} event - The details of the notification/event.
* @private
* @returns {void}
*/
_onPasswordChanged({ target: { value } }) {
this.setState({
password: value
});
}
_onSubmit: () => boolean;
/**
* Dispatches action to submit value from this dialog.
*
* @private
* @returns {boolean}
*/
_onSubmit() {
const { conference } = this.props;
// We received that password is required, but user is trying anyway to
// login without a password. Mark the room as not locked in case she
// succeeds (maybe someone removed the password meanwhile). If it is
// still locked, another password required will be received and the room
// again will be marked as locked.
this.props.dispatch(
setPassword(conference, conference.join, this.state.password));
// We have used the password so let's clean it.
this.setState({
password: undefined
});
return true;
}
}
export default translate(connect()(PasswordRequiredPrompt));