DeforaNetworks/jitsi-meet
3
0
Fork 0
Code Releases Activity

Merge pull request #1379 from jitsi/base-react-dialogs-2

Browse Source 
Password required dialog (web&native) and native room lock using basic react dialogs.
This commit is contained in:
yanas
2017-04-03 10:52:33 -05:00
committed by GitHub
parent 673dc6e873 309ce43e05
commit 3daae94bca
18 changed files with 214 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/features/app/components/App.web.js
+2
View File
@@ -1,6 +1,8 @@
import { appInit } from '../actions';
import { AbstractApp } from './AbstractApp';
import '../../room-lock';
/**
* Root application component.
*
react/features/conference/components/Conference.native.js
+1 -104
View File
@@ -6,10 +6,8 @@ import { DialogContainer } from '../../base/dialog';
import { Container } from '../../base/react';
import { FilmStrip } from '../../film-strip';
import { LargeVideo } from '../../large-video';
import { RoomLockPrompt } from '../../room-lock';
import { Toolbar } from '../../toolbar';
import PasswordRequiredPrompt from './PasswordRequiredPrompt';
import { styles } from './styles';
/**
@@ -30,23 +28,6 @@ class Conference extends Component {
* @static
*/
static propTypes = {
/**
* The indicator which determines whether a password is required to join
* the conference and has not been provided yet.
*
* @private
* @type {JitsiConference}
*/
_passwordRequired: React.PropTypes.object,
/**
* The indicator which determines whether the user has requested to lock
* the conference/room.
*
* @private
* @type {JitsiConference}
*/
_roomLockRequested: React.PropTypes.object,
dispatch: React.PropTypes.func
}
@@ -128,9 +109,6 @@ class Conference extends Component {
<DialogContainer />
{
this._renderPrompt()
}
</Container>
);
}
@@ -164,56 +142,6 @@ class Conference extends Component {
this._setToolbarTimeout(toolbarVisible);
}
/**
* Renders a prompt if a password is required to join the conference.
*
* @private
* @returns {ReactElement}
*/
_renderPasswordRequiredPrompt() {
const required = this.props._passwordRequired;
if (required) {
return (
<PasswordRequiredPrompt conference = { required } />
);
}
return null;
}
/**
* Renders a prompt if necessary such as when a password is required to join
* the conference or the user has requested to lock the conference/room.
*
* @private
* @returns {ReactElement}
*/
_renderPrompt() {
return (
this._renderPasswordRequiredPrompt()
|| this._renderRoomLockPrompt()
);
}
/**
* Renders a prompt if the user has requested to lock the conference/room.
*
* @private
* @returns {ReactElement}
*/
_renderRoomLockPrompt() {
const requested = this.props._roomLockRequested;
if (requested) {
return (
<RoomLockPrompt conference = { requested } />
);
}
return null;
}
/**
* Triggers the default toolbar timeout.
*
@@ -231,35 +159,4 @@ class Conference extends Component {
}
}
/**
* Maps (parts of) the Redux state to the associated Conference's props.
*
* @param {Object} state - The Redux state.
* @private
* @returns {{
* _passwordRequired: boolean
* }}
*/
function _mapStateToProps(state) {
return {
/**
* The indicator which determines whether a password is required to join
* the conference and has not been provided yet.
*
* @private
* @type {JitsiConference}
*/
_passwordRequired: state['features/base/conference'].passwordRequired,
/**
* The indicator which determines whether the user has requested to lock
* the conference/room.
*
* @private
* @type {JitsiConference}
*/
_roomLockRequested: state['features/room-lock'].requested
};
}
export default reactReduxConnect(_mapStateToProps)(Conference);
export default reactReduxConnect()(Conference);
react/features/room-lock/actionTypes.js
-24
View File
@@ -1,24 +0,0 @@
import { Symbol } from '../base/react';
/**
* The type of Redux action which begins a (user) request to lock a specific
* JitsiConference.
*
* {
* type: BEGIN_ROOM_LOCK_REQUEST,
* conference: JitsiConference
* }
*/
export const BEGIN_ROOM_LOCK_REQUEST = Symbol('BEGIN_ROOM_LOCK_REQUEST');
/**
* The type of Redux action which end a (user) request to lock a specific
* JitsiConference.
*
* {
* type: END_ROOM_LOCK_REQUEST,
* conference: JitsiConference,
* password: string
* }
*/
export const END_ROOM_LOCK_REQUEST = Symbol('END_ROOM_LOCK_REQUEST');
react/features/room-lock/actions.js
+20 -11
View File
@@ -1,6 +1,6 @@
import { setPassword } from '../base/conference';
import { BEGIN_ROOM_LOCK_REQUEST, END_ROOM_LOCK_REQUEST } from './actionTypes';
import { hideDialog, openDialog } from '../base/dialog';
import { PasswordRequiredPrompt, RoomLockPrompt } from './components';
/**
* Begins a (user) request to lock a specific conference/room.
@@ -19,10 +19,7 @@ export function beginRoomLockRequest(conference) {
}
if (conference) {
dispatch({
type: BEGIN_ROOM_LOCK_REQUEST,
conference
});
dispatch(openDialog(RoomLockPrompt, { conference }));
}
};
}
@@ -43,13 +40,25 @@ export function endRoomLockRequest(conference, password) {
? dispatch(setPassword(conference, conference.lock, password))
: Promise.resolve();
const endRoomLockRequest_ = () => {
dispatch({
type: END_ROOM_LOCK_REQUEST,
conference,
password
});
dispatch(hideDialog());
};
setPassword_.then(endRoomLockRequest_, endRoomLockRequest_);
};
}
/**
* Begins a request to enter password for a specific conference/room.
*
* @param {JitsiConference} conference - The JitsiConference
* requesting password.
* @protected
* @returns {{
* type: OPEN_DIALOG,
* component: Component,
* props: React.PropTypes
* }}
*/
export function _showPasswordDialog(conference) {
return openDialog(PasswordRequiredPrompt, { conference });
}
react/features/conference/components/PasswordRequiredPrompt.native.js → react/features/room-lock/components/PasswordRequiredPrompt.native.js
+11 -20
View File
@@ -1,9 +1,8 @@
import React, { Component } from 'react';
import Prompt from 'react-native-prompt';
import { connect } from 'react-redux';
import { Dialog } from '../../base/dialog';
import { setPassword } from '../../base/conference';
import { translate } from '../../base/i18n';
/**
* Implements a React Component which prompts the user when a password is
@@ -22,15 +21,7 @@ class PasswordRequiredPrompt extends Component {
* @type {JitsiConference}
*/
conference: React.PropTypes.object,
dispatch: React.PropTypes.func,
/**
* The function to translate human-readable text.
*
* @public
* @type {Function}
*/
t: React.PropTypes.func
dispatch: React.PropTypes.func
}
/**
@@ -54,15 +45,13 @@ class PasswordRequiredPrompt extends Component {
* @returns {ReactElement}
*/
render() {
const { t } = this.props;
return (
<Prompt
<Dialog
bodyKey = 'dialog.passwordLabel'
onCancel = { this._onCancel }
onSubmit = { this._onSubmit }
placeholder = { t('dialog.passwordLabel') }
title = { t('dialog.passwordRequired') }
visible = { true } />
titleKey = 'dialog.passwordRequired' />
);
}
@@ -70,14 +59,14 @@ class PasswordRequiredPrompt extends Component {
* Notifies this prompt that it has been dismissed by cancel.
*
* @private
* @returns {void}
* @returns {boolean} whether to hide dialog.
*/
_onCancel() {
// XXX The user has canceled this prompt for a password so we are to
// attempt joining the conference without a password. If the conference
// still requires a password to join, the user will be prompted again
// later.
this._onSubmit(undefined);
return this._onSubmit(undefined);
}
/**
@@ -86,13 +75,15 @@ class PasswordRequiredPrompt extends Component {
*
* @param {string} value - The submitted value.
* @private
* @returns {void}
* @returns {boolean} whether to hide dialog.
*/
_onSubmit(value) {
const conference = this.props.conference;
this.props.dispatch(setPassword(conference, conference.join, value));
return true;
}
}
export default translate(connect()(PasswordRequiredPrompt));
export default connect()(PasswordRequiredPrompt);
react/features/room-lock/components/PasswordRequiredPrompt.web.js
+127
View File
@@ -0,0 +1,127 @@
/* global APP */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import AKFieldText from '@atlaskit/field-text';
import { setPassword } from '../../base/conference';
import { Dialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
/**
* Implements a React Component which prompts the user when a password is
* required to join a conference.
*/
class PasswordRequiredPrompt extends Component {
/**
* PasswordRequiredPrompt component's property types.
*
* @static
*/
static propTypes = {
/**
* The JitsiConference which requires a password.
*
* @type {JitsiConference}
*/
conference: React.PropTypes.object,
dispatch: React.PropTypes.func,
t: React.PropTypes.func
}
/**
* Initializes a new PasswordRequiredPrompt instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props) {
super(props);
this.state = { password: '' };
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() {
const { t } = this.props;
return (
<div>
<AKFieldText
compact = { true }
label = { t('dialog.passwordLabel') }
name = 'lockKey'
onChange = { this._onPasswordChanged }
shouldFitContainer = { true }
type = 'text'
value = { this.state.password } />
</div>);
}
/**
* Notifies this dialog that password has changed.
*
* @param {Object} event - The details of the notification/event.
* @private
* @returns {void}
*/
_onPasswordChanged(event) {
this.setState({ password: event.target.value });
}
/**
* Dispatches action to submit value from thus dialog.
*
* @private
* @returns {void}
*/
_onSubmit() {
const conference = this.props.conference;
// we received that password is required, but user is trying
// anyway to login without a password, mark room as not
// locked in case he 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.
if (!this.state.password || this.state.password === '') {
// XXX temporary solution till we move the whole invite logic
// in react
APP.conference.invite.setLockedFromElsewhere(false);
}
this.props.dispatch(setPassword(
conference, conference.join, this.state.password));
// we have used the password lets clean it
this.setState({ password: undefined });
return true;
}
}
export default translate(connect()(PasswordRequiredPrompt));
react/features/room-lock/components/RoomLockPrompt.native.js
+14 -21
View File
@@ -1,8 +1,6 @@
import React, { Component } from 'react';
import Prompt from 'react-native-prompt';
import { connect } from 'react-redux';
import { translate } from '../../base/i18n';
import { Dialog } from '../../base/dialog';
import { endRoomLockRequest } from '../actions';
@@ -23,15 +21,7 @@ class RoomLockPrompt extends Component {
* @type {JitsiConference}
*/
conference: React.PropTypes.object,
dispatch: React.PropTypes.func,
/**
* The function to translate human-readable text.
*
* @public
* @type {Function}
*/
t: React.PropTypes.func
dispatch: React.PropTypes.func
}
/**
@@ -55,15 +45,13 @@ class RoomLockPrompt extends Component {
* @returns {ReactElement}
*/
render() {
const { t } = this.props;
return (
<Prompt
<Dialog
bodyKey = 'dialog.passwordLabel'
onCancel = { this._onCancel }
onSubmit = { this._onSubmit }
placeholder = { t('dialog.passwordLabel') }
title = { t('toolbar.lock') }
visible = { true } />
titleKey = 'toolbar.lock' />
);
}
@@ -71,12 +59,12 @@ class RoomLockPrompt extends Component {
* Notifies this prompt that it has been dismissed by cancel.
*
* @private
* @returns {void}
* @returns {boolean} whether to hide the dialog
*/
_onCancel() {
// An undefined password is understood to cancel the request to lock the
// conference/room.
this._onSubmit(undefined);
return this._onSubmit(undefined);
}
/**
@@ -85,11 +73,16 @@ class RoomLockPrompt extends Component {
*
* @param {string} value - The submitted value.
* @private
* @returns {void}
* @returns {boolean} returns false, we do not want to hide dialog as this
* will be handled inside endRoomLockRequest after setting password is
* resolved.
*/
_onSubmit(value) {
this.props.dispatch(endRoomLockRequest(this.props.conference, value));
// do not hide
return false;
}
}
export default translate(connect()(RoomLockPrompt));
export default connect()(RoomLockPrompt);
react/features/room-lock/components/RoomLockPrompt.web.js
View File
react/features/room-lock/components/index.js
+1
View File
@@ -1 +1,2 @@
export { default as RoomLockPrompt } from './RoomLockPrompt';
export { default as PasswordRequiredPrompt } from './PasswordRequiredPrompt';
react/features/room-lock/index.js
+1 -1
View File
@@ -1,4 +1,4 @@
export * from './actions';
export * from './components';
import './reducer';
import './middleware';
react/features/room-lock/middleware.js
+36
View File
@@ -0,0 +1,36 @@
/* global APP */
import JitsiMeetJS from '../base/lib-jitsi-meet';
import { CONFERENCE_FAILED } from '../base/conference';
import { MiddlewareRegistry } from '../base/redux';
import { _showPasswordDialog } from './actions';
/**
* Middleware that captures conference failed and checks for password required
* error and requests a dialog for user to enter password.
*
* @param {Store} store - Redux store.
* @returns {Function}
*/
MiddlewareRegistry.register(store => next => action => {
switch (action.type) {
case CONFERENCE_FAILED: {
const JitsiConferenceErrors = JitsiMeetJS.errors.conference;
if (action.conference
&& JitsiConferenceErrors.PASSWORD_REQUIRED === action.error) {
// XXX temporary solution till we move the whole invite
// logic in react
if (typeof APP !== 'undefined') {
APP.conference.invite.setLockedFromElsewhere(true);
}
store.dispatch(_showPasswordDialog(action.conference));
}
break;
}
}
return next(action);
});
react/features/room-lock/reducer.js
-33
View File
@@ -1,33 +0,0 @@
import {
CONFERENCE_FAILED,
CONFERENCE_JOINED,
CONFERENCE_LEFT
} from '../base/conference';
import { ReducerRegistry, setStateProperty } from '../base/redux';
import { BEGIN_ROOM_LOCK_REQUEST, END_ROOM_LOCK_REQUEST } from './actionTypes';
ReducerRegistry.register('features/room-lock', (state = {}, action) => {
switch (action.type) {
case BEGIN_ROOM_LOCK_REQUEST:
return setStateProperty(state, 'requested', action.conference);
case CONFERENCE_FAILED:
case CONFERENCE_LEFT:
case END_ROOM_LOCK_REQUEST: {
if (state.requested === action.conference) {
return setStateProperty(state, 'requested', undefined);
}
break;
}
case CONFERENCE_JOINED: {
if (state.requested !== action.conference) {
return setStateProperty(state, 'requested', undefined);
}
break;
}
}
return state;
});