feat: add room lock pwd error message

roy-loomy · Jul 10, 2019 · a53a86e · a53a86e
1 parent 598b6f0
commit a53a86e
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 4 deletions.
diff --git a/lang/main.json b/lang/main.json
@@ -189,6 +189,7 @@
         "gracefulShutdown": "Our service is currently down for maintenance. Please try again later.",
         "hungUp": "You hung up",
         "IamHost": "I am the host",
+        "incorrectRoomLockPassword": "Incorrect password",
         "incorrectPassword": "Incorrect username or password",
         "inlineInstallationMsg": "You need to install our desktop sharing extension.",
         "inlineInstallExtension": "Install now",

diff --git a/react/features/base/dialog/components/native/InputDialog.js b/react/features/base/dialog/components/native/InputDialog.js
@@ -30,6 +30,16 @@ type Props = BaseProps & {
      */
     contentKey: string,
 
+    /**
+     * An optional initial value to initiate the field with.
+     */
+    initialValue?: ?string,
+
+    /**
+     * A message key to be shown for the user (e.g. an error that is defined after submitting the form).
+     */
+    messageKey?: string,
+
     t: Function,
 
     textInputProps: ?Object,
@@ -62,7 +72,7 @@ class InputDialog extends BaseDialog<Props, State> {
         super(props);
 
         this.state = {
-            fieldValue: undefined
+            fieldValue: props.initialValue
         };
 
         this._onChangeText = this._onChangeText.bind(this);
@@ -75,7 +85,7 @@ class InputDialog extends BaseDialog<Props, State> {
      * @inheritdoc
      */
     _renderContent() {
-        const { _dialogStyles, okDisabled, t } = this.props;
+        const { _dialogStyles, messageKey, okDisabled, t } = this.props;
 
         return (
             <View>
@@ -93,6 +103,13 @@ class InputDialog extends BaseDialog<Props, State> {
                         underlineColorAndroid = { FIELD_UNDERLINE }
                         value = { this.state.fieldValue }
                         { ...this.props.textInputProps } />
+                    { messageKey && (<Text
+                        style = { [
+                            styles.formMessage,
+                            _dialogStyles.text
+                        ] }>
+                        { t(messageKey) }
+                    </Text>) }
                 </View>
                 <View style = { brandedDialog.buttonWrapper }>
                     <TouchableOpacity

diff --git a/react/features/base/dialog/components/native/styles.js b/react/features/base/dialog/components/native/styles.js
@@ -115,6 +115,12 @@ export const inputDialog = createStyleSheet({
     fieldWrapper: {
         ...brandedDialog.mainWrapper,
         paddingBottom: BoxModel.padding * 2
+    },
+
+    formMessage: {
+        alignSelf: 'flex-start',
+        fontStyle: 'italic',
+        margin: BoxModel.margin
     }
 });
 

diff --git a/react/features/room-lock/components/PasswordRequiredPrompt.native.js b/react/features/room-lock/components/PasswordRequiredPrompt.native.js
@@ -14,6 +14,11 @@ import { _cancelPasswordRequiredPrompt } from '../actions';
  */
 type Props = {
 
+    /**
+     * The previously entered password, if any.
+     */
+    _password: ?string,
+
     /**
      * The {@code JitsiConference} which requires a password.
      *
@@ -27,11 +32,19 @@ type Props = {
     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> {
+class PasswordRequiredPrompt extends Component<Props, State> {
     /**
      * Initializes a new {@code PasswordRequiredPrompt} instance.
      *
@@ -41,21 +54,48 @@ class PasswordRequiredPrompt extends Component<Props> {
     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 = {{
@@ -100,4 +140,16 @@ class PasswordRequiredPrompt extends Component<Props> {
     }
 }
 
-export default connect()(PasswordRequiredPrompt);
+/**
+ * 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);