"Fossies" - the Fresh Open Source Software Archive 
Member "jitsi-meet-7319/react/features/settings/components/web/ProfileTab.tsx" (6 Jun 2023, 7127 Bytes) of package /linux/misc/jitsi-meet-7319.tar.gz:
As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TSX (TypeScript with React) source code syntax highlighting (style:
standard) with prefixed line numbers.
Alternatively you can here
view or
download the uninterpreted source code file.
See also the last
Fossies "Diffs" side-by-side code changes report for "ProfileTab.tsx":
jitsi-meet_8319_vs_jitsi-meet_8615.
1 import { Theme } from '@mui/material';
2 import { withStyles } from '@mui/styles';
3 import React from 'react';
4 import { WithTranslation } from 'react-i18next';
5
6 // @ts-expect-error
7 import UIEvents from '../../../../../service/UI/UIEvents';
8 import { createProfilePanelButtonEvent } from '../../../analytics/AnalyticsEvents';
9 import { sendAnalytics } from '../../../analytics/functions';
10 import Avatar from '../../../base/avatar/components/Avatar';
11 import AbstractDialogTab, {
12 IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab';
13 import { translate } from '../../../base/i18n/functions';
14 import { withPixelLineHeight } from '../../../base/styles/functions.web';
15 import Button from '../../../base/ui/components/web/Button';
16 import Input from '../../../base/ui/components/web/Input';
17 import { openLogoutDialog } from '../../actions';
18
19 /**
20 * The type of the React {@code Component} props of {@link ProfileTab}.
21 */
22 export interface IProps extends AbstractDialogTabProps, WithTranslation {
23
24 /**
25 * Whether or not server-side authentication is available.
26 */
27 authEnabled: boolean;
28
29 /**
30 * The name of the currently (server-side) authenticated user.
31 */
32 authLogin: string;
33
34 /**
35 * CSS classes object.
36 */
37 classes: any;
38
39 /**
40 * The display name to display for the local participant.
41 */
42 displayName: string;
43
44 /**
45 * The email to display for the local participant.
46 */
47 email: string;
48
49 /**
50 * Whether to hide the email input in the profile settings.
51 */
52 hideEmailInSettings?: boolean;
53
54 /**
55 * The id of the local participant.
56 */
57 id: string;
58
59 /**
60 * If the display name is read only.
61 */
62 readOnlyName: boolean;
63 }
64
65 const styles = (theme: Theme) => {
66 return {
67 container: {
68 display: 'flex',
69 flexDirection: 'column' as const,
70 width: '100%',
71 padding: '0 2px'
72 },
73
74 avatarContainer: {
75 display: 'flex',
76 width: '100%',
77 justifyContent: 'center',
78 marginBottom: theme.spacing(4)
79 },
80
81 bottomMargin: {
82 marginBottom: theme.spacing(4)
83 },
84
85 label: {
86 color: `${theme.palette.text01} !important`,
87 ...withPixelLineHeight(theme.typography.bodyShortRegular),
88 marginBottom: theme.spacing(2)
89 },
90
91 name: {
92 marginBottom: theme.spacing(1)
93 }
94 };
95 };
96
97 /**
98 * React {@code Component} for modifying the local user's profile.
99 *
100 * @augments Component
101 */
102 class ProfileTab extends AbstractDialogTab<IProps, any> {
103 static defaultProps = {
104 displayName: '',
105 email: ''
106 };
107
108 /**
109 * Initializes a new {@code ConnectedSettingsDialog} instance.
110 *
111 * @param {IProps} props - The React {@code Component} props to initialize
112 * the new {@code ConnectedSettingsDialog} instance with.
113 */
114 constructor(props: IProps) {
115 super(props);
116
117 // Bind event handlers so they are only bound once for every instance.
118 this._onAuthToggle = this._onAuthToggle.bind(this);
119 this._onDisplayNameChange = this._onDisplayNameChange.bind(this);
120 this._onEmailChange = this._onEmailChange.bind(this);
121 }
122
123 /**
124 * Changes display name of the user.
125 *
126 * @param {string} value - The key event to handle.
127 *
128 * @returns {void}
129 */
130 _onDisplayNameChange(value: string) {
131 super._onChange({ displayName: value });
132 }
133
134 /**
135 * Changes email of the user.
136 *
137 * @param {string} value - The key event to handle.
138 *
139 * @returns {void}
140 */
141 _onEmailChange(value: string) {
142 super._onChange({ email: value });
143 }
144
145 /**
146 * Implements React's {@link Component#render()}.
147 *
148 * @inheritdoc
149 * @returns {ReactElement}
150 */
151 render() {
152 const {
153 authEnabled,
154 classes,
155 displayName,
156 email,
157 hideEmailInSettings,
158 id,
159 readOnlyName,
160 t
161 } = this.props;
162
163 return (
164 <div className = { classes.container } >
165 <div className = { classes.avatarContainer }>
166 <Avatar
167 participantId = { id }
168 size = { 60 } />
169 </div>
170 <Input
171 className = { classes.bottomMargin }
172 disabled = { readOnlyName }
173 id = 'setDisplayName'
174 label = { t('profile.setDisplayNameLabel') }
175 name = 'name'
176 onChange = { this._onDisplayNameChange }
177 placeholder = { t('settings.name') }
178 type = 'text'
179 value = { displayName } />
180 {!hideEmailInSettings && <div className = 'profile-edit-field'>
181 <Input
182 className = { classes.bottomMargin }
183 id = 'setEmail'
184 label = { t('profile.setEmailLabel') }
185 name = 'email'
186 onChange = { this._onEmailChange }
187 placeholder = { t('profile.setEmailInput') }
188 type = 'text'
189 value = { email } />
190 </div>}
191 { authEnabled && this._renderAuth() }
192 </div>
193 );
194 }
195
196 /**
197 * Shows the dialog for logging in or out of a server and closes this
198 * dialog.
199 *
200 * @private
201 * @returns {void}
202 */
203 _onAuthToggle() {
204 if (this.props.authLogin) {
205 sendAnalytics(createProfilePanelButtonEvent('logout.button'));
206
207 APP.store.dispatch(openLogoutDialog(
208 () => APP.UI.emitEvent(UIEvents.LOGOUT)
209 ));
210 } else {
211 sendAnalytics(createProfilePanelButtonEvent('login.button'));
212
213 APP.UI.emitEvent(UIEvents.AUTH_CLICKED);
214 }
215 }
216
217 /**
218 * Returns a React Element for interacting with server-side authentication.
219 *
220 * @private
221 * @returns {ReactElement}
222 */
223 _renderAuth() {
224 const {
225 authLogin,
226 classes,
227 t
228 } = this.props;
229
230 return (
231 <div>
232 <h2 className = { classes.label }>
233 { t('toolbar.authenticate') }
234 </h2>
235 { authLogin
236 && <div className = { classes.name }>
237 { t('settings.loggedIn', { name: authLogin }) }
238 </div> }
239 <Button
240 accessibilityLabel = { authLogin ? t('toolbar.logout') : t('toolbar.login') }
241 id = 'login_button'
242 label = { authLogin ? t('toolbar.logout') : t('toolbar.login') }
243 onClick = { this._onAuthToggle } />
244 </div>
245 );
246 }
247 }
248
249 export default withStyles(styles)(translate(ProfileTab));