ref(ui-components) Replace inputs with new component (#11964)

react/features/authentication/components/web/LoginDialog.tsx

@@ -1,24 +1,29 @@
-// @flow
-
-import { FieldTextStateless as TextField } from '@atlaskit/field-text';
+/* eslint-disable lines-around-comment */
 import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 import type { Dispatch } from 'redux';
 
+// @ts-ignore
 import { connect } from '../../../../../connection';
+// @ts-ignore
 import { toJid } from '../../../base/connection/functions';
+// @ts-ignore
 import { Dialog } from '../../../base/dialog';
-import { translate, translateToHTML } from '../../../base/i18n';
+import { translate, translateToHTML } from '../../../base/i18n/functions';
+// @ts-ignore
 import { JitsiConnectionErrors } from '../../../base/lib-jitsi-meet';
-import { connect as reduxConnect } from '../../../base/redux';
+import { connect as reduxConnect } from '../../../base/redux/functions';
+import Input from '../../../base/ui/components/web/Input';
 import {
     authenticateAndUpgradeRole,
     cancelLogin
+    // @ts-ignore
 } from '../../actions.web';
 
 /**
  * The type of the React {@code Component} props of {@link LoginDialog}.
  */
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * {@link JitsiConference} That needs authentication - will hold a valid
@@ -39,7 +44,7 @@ type Props = {
     /**
      * The error which occurred during login/authentication.
      */
-    _error: Object,
+    _error: any,
 
     /**
      * The progress in the floating range between 0 and 1 of the authenticating
@@ -60,12 +65,7 @@ type Props = {
     /**
      * Conference room name.
      */
-    roomName: string,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
+    roomName: string
 }
 
 /**
@@ -74,19 +74,19 @@ type Props = {
 type State = {
 
     /**
-     * The user entered password for the conference.
+     * Authentication process starts before joining the conference room.
      */
-    password: string,
+    loginStarted: boolean,
 
     /**
-     * The user entered local participant name.
+     * The user entered password for the conference.
      */
-    username: string,
+    password: string,
 
     /**
-     * Authentication process starts before joining the conference room.
+     * The user entered local participant name.
      */
-    loginStarted: boolean
+    username: string
 }
 
 /**
@@ -111,11 +111,10 @@ class LoginDialog extends Component<Props, State> {
 
         this._onCancelLogin = this._onCancelLogin.bind(this);
         this._onLogin = this._onLogin.bind(this);
-        this._onChange = this._onChange.bind(this);
+        this._onUsernameChange = this._onUsernameChange.bind(this);
+        this._onPasswordChange = this._onPasswordChange.bind(this);
     }
 
-    _onCancelLogin: () => void;
-
     /**
      * Called when the cancel button is clicked.
      *
@@ -128,8 +127,6 @@ class LoginDialog extends Component<Props, State> {
         dispatch(cancelLogin());
     }
 
-    _onLogin: () => void;
-
     /**
      * Notifies this LoginDialog that the login button (OK) has been pressed by
      * the user.
@@ -156,7 +153,7 @@ class LoginDialog extends Component<Props, State> {
             });
 
             connect(jid, password, roomName)
-                .then(connection => {
+                .then((connection: any) => {
                     onSuccess && onSuccess(connection);
                 })
                 .catch(() => {
@@ -167,17 +164,27 @@ class LoginDialog extends Component<Props, State> {
         }
     }
 
-    _onChange: Object => void;
-
     /**
      * Callback for the onChange event of the field.
      *
-     * @param {Object} evt - The static event.
+     * @param {string} value - The static event.
+     * @returns {void}
+     */
+    _onPasswordChange(value: string) {
+        this.setState({
+            password: value
+        });
+    }
+
+    /**
+     * Callback for the onChange event of the username input.
+     *
+     * @param {string} value - The new value.
      * @returns {void}
      */
-    _onChange(evt: Object) {
+    _onUsernameChange(value: string) {
         this.setState({
-            [evt.target.name]: evt.target.value
+            username: value
         });
     }
 
@@ -196,7 +203,7 @@ class LoginDialog extends Component<Props, State> {
             t
         } = this.props;
         const { username, password } = this.state;
-        const messageOptions = {};
+        const messageOptions: any = {};
         let messageKey;
 
         if (progress && progress < 1) {
@@ -258,25 +265,20 @@ class LoginDialog extends Component<Props, State> {
                 onSubmit = { this._onLogin }
                 titleKey = { t('dialog.authenticationRequired') }
                 width = { 'small' }>
-                <TextField
+                <Input
                     autoFocus = { true }
-                    className = 'input-control'
-                    compact = { false }
                     label = { t('dialog.user') }
                     name = 'username'
-                    onChange = { this._onChange }
+                    onChange = { this._onUsernameChange }
                     placeholder = { t('dialog.userIdentifier') }
-                    shouldFitContainer = { true }
                     type = 'text'
                     value = { username } />
-                <TextField
-                    className = 'input-control'
-                    compact = { false }
+                <br />
+                <Input
                     label = { t('dialog.userPassword') }
                     name = 'password'
-                    onChange = { this._onChange }
+                    onChange = { this._onPasswordChange }
                     placeholder = { t('dialog.password') }
-                    shouldFitContainer = { true }
                     type = 'password'
                     value = { password } />
                 { this.renderMessage() }
@@ -293,7 +295,7 @@ class LoginDialog extends Component<Props, State> {
  * @private
  * @returns {Props}
  */
-function mapStateToProps(state) {
+function mapStateToProps(state: any) {
     const {
         error: authenticateAndUpgradeRoleError,
         progress,

react/features/chat/components/web/DisplayNameForm.tsx

@@ -1,19 +1,22 @@
-// @flow
-
-import { FieldTextStateless } from '@atlaskit/field-text';
 import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 import type { Dispatch } from 'redux';
 
-import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
+import { translate } from '../../../base/i18n/functions';
+import { connect } from '../../../base/redux/functions';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { updateSettings } from '../../../base/settings';
+import { Button } from '../../../base/ui/components/web';
+import Input from '../../../base/ui/components/web/Input';
 
+// @ts-ignore
 import KeyboardAvoider from './KeyboardAvoider';
 
 /**
  * The type of the React {@code Component} props of {@DisplayNameForm}.
  */
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * Invoked to set the local participant display name.
@@ -23,13 +26,8 @@ type Props = {
     /**
      * Whether the polls feature is enabled or not.
      */
-    isPollsEnabled: boolean,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-};
+    isPollsEnabled: boolean
+}
 
 /**
  * The type of the React {@code Component} state of {@DisplayNameForm}.
@@ -79,47 +77,40 @@ class DisplayNameForm extends Component<Props, State> {
         return (
             <div id = 'nickname'>
                 <form onSubmit = { this._onSubmit }>
-                    <FieldTextStateless
-                        aria-describedby = 'nickname-title'
-                        autoComplete = 'name'
+                    <Input
+                        accessibilityLabel = { t('chat.nickname.title') }
                         autoFocus = { true }
-                        compact = { true }
                         id = 'nickinput'
                         label = { t(isPollsEnabled ? 'chat.nickname.titleWithPolls' : 'chat.nickname.title') }
+                        name = 'name'
                         onChange = { this._onDisplayNameChange }
                         placeholder = { t('chat.nickname.popover') }
-                        shouldFitContainer = { true }
                         type = 'text'
                         value = { this.state.displayName } />
                 </form>
-                <div
-                    className = { `enter-chat${this.state.displayName.trim() ? '' : ' disabled'}` }
-                    onClick = { this._onSubmit }
-                    onKeyPress = { this._onKeyPress }
-                    role = 'button'
-                    tabIndex = { 0 }>
-                    { t('chat.enter') }
-                </div>
+                <br />
+                <Button
+                    accessibilityLabel = { t('chat.enter') }
+                    disabled = { !this.state.displayName.trim() }
+                    fullWidth = { true }
+                    label = { t('chat.enter') }
+                    onClick = { this._onSubmit } />
                 <KeyboardAvoider />
             </div>
         );
     }
 
-    _onDisplayNameChange: (Object) => void;
-
     /**
      * Dispatches an action update the entered display name.
      *
-     * @param {event} event - Keyboard event.
+     * @param {string} value - Keyboard event.
      * @private
      * @returns {void}
      */
-    _onDisplayNameChange(event: Object) {
-        this.setState({ displayName: event.target.value });
+    _onDisplayNameChange(value: string) {
+        this.setState({ displayName: value });
     }
 
-    _onSubmit: (Object) => void;
-
     /**
      * Dispatches an action to hit enter to change your display name.
      *
@@ -128,8 +119,8 @@ class DisplayNameForm extends Component<Props, State> {
      * @private
      * @returns {void}
      */
-    _onSubmit(event: Object) {
-        event.preventDefault();
+    _onSubmit(event: any) {
+        event?.preventDefault && event.preventDefault();
 
         // Store display name in settings
         this.props.dispatch(updateSettings({
@@ -137,8 +128,6 @@ class DisplayNameForm extends Component<Props, State> {
         }));
     }
 
-    _onKeyPress: (Object) => void;
-
     /**
      * KeyPress handler for accessibility.
      *
@@ -146,7 +135,7 @@ class DisplayNameForm extends Component<Props, State> {
      *
      * @returns {void}
      */
-    _onKeyPress(e) {
+    _onKeyPress(e: React.KeyboardEvent) {
         if (e.key === ' ' || e.key === 'Enter') {
             this._onSubmit(e);
         }