Moves web password required dialog to react.

react/features/app/components/App.web.js

@@ -1,6 +1,8 @@
 import { appInit } from '../actions';
 import { AbstractApp } from './AbstractApp';
 
+import '../../room-lock';
+
 /**
  * Root application component.
  *

react/features/room-lock/actions.js

@@ -1,4 +1,6 @@
 import { setPassword } from '../base/conference';
+import { openDialog } from '../base/dialog';
+import { PasswordRequiredPrompt } from './components';
 
 import { BEGIN_ROOM_LOCK_REQUEST, END_ROOM_LOCK_REQUEST } from './actionTypes';
 
@@ -53,3 +55,19 @@ export function endRoomLockRequest(conference, password) {
         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: BEGIN_DIALOG_REQUEST,
+ *     component: Component,
+ *     props: React.PropTypes
+ * }}
+ */
+export function _showPasswordDialog(conference) {
+    return openDialog(PasswordRequiredPrompt, { conference });
+}

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

@@ -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/index.js

@@ -1 +1,2 @@
 export { default as RoomLockPrompt } from './RoomLockPrompt';
+export { default as PasswordRequiredPrompt } from './PasswordRequiredPrompt';

react/features/room-lock/index.js

@@ -1,4 +1,5 @@
 export * from './actions';
 export * from './components';
 
+import './middleware';
 import './reducer';

react/features/room-lock/middleware.js

@@ -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);
+});