[MM-14593] Add password type for Interactive Dialogs (#2998)

* Added prop secureTextEntry for password type

* Added test cases for DialogElement

* Fixed issues

app/components/widgets/settings/text_setting.js

@@ -44,6 +44,7 @@ export default class TextSetting extends PureComponent {
             'phone-pad',
             'url',
         ]),
+        secureTextEntry: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -52,6 +53,7 @@ export default class TextSetting extends PureComponent {
         multiline: false,
         showRequiredAsterisk: false,
         keyboardType: 'default',
+        secureTextEntry: false,
     };
 
     onChangeText = (value) => {
@@ -72,6 +74,7 @@ export default class TextSetting extends PureComponent {
             value,
             multiline,
             showRequiredAsterisk,
+            secureTextEntry,
         } = this.props;
         const style = getStyleSheet(theme);
 
@@ -162,6 +165,7 @@ export default class TextSetting extends PureComponent {
                             disableFullscreenUI={true}
                             multiline={multiline}
                             keyboardType={keyboardType}
+                            secureTextEntry={secureTextEntry}
                         />
                     </View>
                 </View>

app/screens/interactive_dialog/dialog_element.js

@@ -77,6 +77,7 @@ export default class DialogElement extends PureComponent {
         if (type === 'text' || type === 'textarea') {
             let keyboardType = 'default';
             let multiline = false;
+            let secureTextEntry = false;
             if (type === 'text') {
                 maxLength = maxLength || TEXT_DEFAULT_MAX_LENGTH;
 
@@ -88,6 +89,8 @@ export default class DialogElement extends PureComponent {
                     keyboardType = 'phone-pad';
                 } else if (subtype === 'url') {
                     keyboardType = 'url';
+                } else if (subtype === 'password') {
+                    secureTextEntry = true;
                 }
             } else {
                 multiline = true;
@@ -110,6 +113,7 @@ export default class DialogElement extends PureComponent {
                     theme={theme}
                     multiline={multiline}
                     keyboardType={keyboardType}
+                    secureTextEntry={secureTextEntry}
                 />
             );
         } else if (type === 'select') {

app/screens/interactive_dialog/dialog_element.test.js

@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import Preferences from 'mattermost-redux/constants/preferences';
+
+import DialogElement from './dialog_element.js';
+
+describe('DialogElement', () => {
+    const baseDialogProps = {
+        displayName: 'Testing',
+        name: 'testing',
+        type: 'text',
+    };
+    const theme = Preferences.THEMES.default;
+    test('secureTextEntry is true and multiline is false when subtype is password', () => {
+        const wrapper = shallow(
+            <DialogElement
+                {...baseDialogProps}
+                theme={theme}
+                subtype='password'
+            />
+        );
+        expect(wrapper.find({secureTextEntry: true}).exists()).toBe(true);
+        expect(wrapper.find({multiline: false}).exists()).toBe(true);
+    });
+    test('secureTextEntry is false when subtype is not password', () => {
+        const wrapper = shallow(
+            <DialogElement
+                {...baseDialogProps}
+                theme={theme}
+                subtype='email'
+            />
+        );
+        expect(wrapper.find({secureTextEntry: false}).exists()).toBe(true);
+    });
+});