haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Robert Pintilii 2022-08-10 09:25:31 +03:00 committed by GitHub
parent f5649efa49
commit fb20786b65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
react/features/authentication/components/web/LoginDialog.js → react/features/authentication/components/web/LoginDialog.tsx
View File

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

65
react/features/chat/components/web/DisplayNameForm.js → react/features/chat/components/web/DisplayNameForm.tsx
View File

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