// @flow import Button from '@atlaskit/button/standard-button'; import { FieldTextStateless } from '@atlaskit/field-text'; import React from 'react'; import UIEvents from '../../../../../service/UI/UIEvents'; import { sendAnalytics, createProfilePanelButtonEvent } from '../../../analytics'; import { AbstractDialogTab } from '../../../base/dialog'; import type { Props as AbstractDialogTabProps } from '../../../base/dialog'; import { translate } from '../../../base/i18n'; import { openLogoutDialog } from '../../actions'; declare var APP: Object; /** * The type of the React {@code Component} props of {@link ProfileTab}. */ export type Props = { ...$Exact, /** * Whether or not server-side authentication is available. */ authEnabled: boolean, /** * The name of the currently (server-side) authenticated user. */ authLogin: string, /** * The display name to display for the local participant. */ displayName: string, /** * The email to display for the local participant. */ email: string, /** * Invoked to obtain translated strings. */ t: Function } /** * React {@code Component} for modifying the local user's profile. * * @extends Component */ class ProfileTab extends AbstractDialogTab { static defaultProps = { displayName: '', email: '' }; /** * Initializes a new {@code ConnectedSettingsDialog} instance. * * @param {Props} props - The React {@code Component} props to initialize * the new {@code ConnectedSettingsDialog} instance with. */ constructor(props: Props) { super(props); // Bind event handlers so they are only bound once for every instance. this._onAuthToggle = this._onAuthToggle.bind(this); this._onDisplayNameChange = this._onDisplayNameChange.bind(this); this._onEmailChange = this._onEmailChange.bind(this); } _onDisplayNameChange: (Object) => void; /** * Changes display name of the user. * * @param {Object} e - The key event to handle. * * @returns {void} */ _onDisplayNameChange({ target: { value } }) { super._onChange({ displayName: value }); } _onEmailChange: (Object) => void; /** * Changes email of the user. * * @param {Object} e - The key event to handle. * * @returns {void} */ _onEmailChange({ target: { value } }) { super._onChange({ email: value }); } /** * Implements React's {@link Component#render()}. * * @inheritdoc * @returns {ReactElement} */ render() { const { authEnabled, displayName, email, t } = this.props; return (
{ authEnabled && this._renderAuth() }
); } _onAuthToggle: () => void; /** * Shows the dialog for logging in or out of a server and closes this * dialog. * * @private * @returns {void} */ _onAuthToggle() { if (this.props.authLogin) { sendAnalytics(createProfilePanelButtonEvent('logout.button')); APP.store.dispatch(openLogoutDialog( () => APP.UI.emitEvent(UIEvents.LOGOUT) )); } else { sendAnalytics(createProfilePanelButtonEvent('login.button')); APP.UI.emitEvent(UIEvents.AUTH_CLICKED); } } /** * Returns a React Element for interacting with server-side authentication. * * @private * @returns {ReactElement} */ _renderAuth() { const { authLogin, t } = this.props; return (

{ t('toolbar.authenticate') }

{ authLogin &&
{ t('settings.loggedIn', { name: authLogin }) }
}
); } } export default translate(ProfileTab);