"Fossies" - the Fresh Open Source Software Archive 
Member "jitsi-meet-7319/react/features/security/components/security-dialog/web/PasswordForm.tsx" (6 Jun 2023, 5582 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 "PasswordForm.tsx":
jitsi-meet_8319_vs_jitsi-meet_8615.
1 import React, { Component } from 'react';
2 import { WithTranslation } from 'react-i18next';
3
4 import { translate } from '../../../../base/i18n/functions';
5 import Input from '../../../../base/ui/components/web/Input';
6 import { LOCKED_LOCALLY } from '../../../../room-lock/constants';
7
8 /**
9 * The type of the React {@code Component} props of {@link PasswordForm}.
10 */
11 interface IProps extends WithTranslation {
12
13 /**
14 * Whether or not to show the password editing field.
15 */
16 editEnabled: boolean;
17
18 /**
19 * The value for how the conference is locked (or undefined if not locked)
20 * as defined by room-lock constants.
21 */
22 locked?: string;
23
24 /**
25 * Callback to invoke when the local participant is submitting a password
26 * set request.
27 */
28 onSubmit: Function;
29
30 /**
31 * The current known password for the JitsiConference.
32 */
33 password?: string;
34
35 /**
36 * The number of digits to be used in the password.
37 */
38 passwordNumberOfDigits?: number;
39
40 /**
41 * Whether or not the password should be visible.
42 */
43 visible: boolean;
44 }
45
46 /**
47 * The type of the React {@code Component} state of {@link PasswordForm}.
48 */
49 interface IState {
50
51 /**
52 * The value of the password being entered by the local participant.
53 */
54 enteredPassword: string;
55 }
56
57 /**
58 * React {@code Component} for displaying and editing the conference password.
59 *
60 * @augments Component
61 */
62 class PasswordForm extends Component<IProps, IState> {
63 /**
64 * Implements React's {@link Component#getDerivedStateFromProps()}.
65 *
66 * @inheritdoc
67 */
68 static getDerivedStateFromProps(props: IProps, state: IState) {
69 return {
70 enteredPassword: props.editEnabled ? state.enteredPassword : ''
71 };
72 }
73
74 state = {
75 enteredPassword: ''
76 };
77
78 /**
79 * Initializes a new {@code PasswordForm} instance.
80 *
81 * @param {IProps} props - The React {@code Component} props to initialize
82 * the new {@code PasswordForm} instance with.
83 */
84 constructor(props: IProps) {
85 super(props);
86
87 // Bind event handlers so they are only bound once per instance.
88 this._onEnteredPasswordChange = this._onEnteredPasswordChange.bind(this);
89 this._onKeyPress = this._onKeyPress.bind(this);
90 }
91
92 /**
93 * Implements React's {@link Component#render()}.
94 *
95 * @inheritdoc
96 * @returns {ReactElement}
97 */
98 render() {
99 return (
100 <div className = 'info-password'>
101 {this._renderPassword()}
102 {this._renderPasswordField()}
103 </div>
104 );
105 }
106
107 /** .........
108 * Renders the password if there is any.
109 *
110 * @returns {ReactElement}
111 */
112 _renderPassword() {
113 const { locked, t } = this.props;
114
115 return locked && <>
116 <span className = 'info-label'>
117 {t('info.password')}
118 </span>
119 <span className = 'spacer'> </span>
120 <span className = 'info-password-field info-value'>
121 {locked === LOCKED_LOCALLY ? (
122 <div className = 'info-password-local'>
123 {this.props.visible ? this.props.password : '******' }
124 </div>
125 ) : (
126 <div className = 'info-password-remote'>
127 {this.props.t('passwordSetRemotely')}
128 </div>
129 ) }
130 {this._renderPasswordField()}
131 </span>
132 </>;
133 }
134
135 /**
136 * Returns a ReactElement for showing the current state of the password or
137 * for editing the current password.
138 *
139 * @private
140 * @returns {ReactElement}
141 */
142 _renderPasswordField() {
143 if (this.props.editEnabled) {
144 let placeHolderText = this.props.t('dialog.password');
145
146 if (this.props.passwordNumberOfDigits) {
147 placeHolderText = this.props.t('passwordDigitsOnly', {
148 number: this.props.passwordNumberOfDigits });
149 }
150
151 return (
152 <div
153 className = 'info-password-form'>
154 <Input
155 accessibilityLabel = { this.props.t('info.addPassword') }
156 autoFocus = { true }
157 id = 'info-password-input'
158 maxLength = { this.props.passwordNumberOfDigits }
159 onChange = { this._onEnteredPasswordChange }
160 onKeyPress = { this._onKeyPress }
161 placeholder = { placeHolderText }
162 type = 'password'
163 value = { this.state.enteredPassword } />
164 </div>
165 );
166 }
167 }
168
169 /**
170 * Updates the internal state of entered password.
171 *
172 * @param {string} value - DOM Event for value change.
173 * @private
174 * @returns {void}
175 */
176 _onEnteredPasswordChange(value: string) {
177 this.setState({ enteredPassword: value });
178 }
179
180 /**
181 * Stops the the EnterKey for propagation in order to prevent the dialog
182 * to close.
183 *
184 * @param {Object} event - The key event.
185 * @private
186 * @returns {void}
187 */
188 _onKeyPress(event: React.KeyboardEvent) {
189 if (event.key === 'Enter') {
190 event.preventDefault();
191 event.stopPropagation();
192
193 this.props.onSubmit(this.state.enteredPassword);
194 }
195 }
196 }
197
198 export default translate(PasswordForm);