|
@@ -12,6 +12,12 @@ import { SettingsButton, SETTINGS_TABS } from '../../settings';
|
12
|
12
|
import { AbstractWelcomePage, _mapStateToProps } from './AbstractWelcomePage';
|
13
|
13
|
import Tabs from './Tabs';
|
14
|
14
|
|
|
15
|
+/**
|
|
16
|
+ * The pattern used to validate room name.
|
|
17
|
+ * @type {string}
|
|
18
|
+ */
|
|
19
|
+export const ROOM_NAME_VALIDATE_PATTERN_STR = '^[^?&:\u0022\u0027%#]+$';
|
|
20
|
+
|
15
|
21
|
/**
|
16
|
22
|
* The Web container rendering the welcome page.
|
17
|
23
|
*
|
|
@@ -53,6 +59,8 @@ class WelcomePage extends AbstractWelcomePage {
|
53
|
59
|
*/
|
54
|
60
|
this._additionalContentRef = null;
|
55
|
61
|
|
|
62
|
+ this._roomInputRef = null;
|
|
63
|
+
|
56
|
64
|
/**
|
57
|
65
|
* The HTML Element used as the container for additional toolbar content. Used
|
58
|
66
|
* for directly appending the additional content template to the dom.
|
|
@@ -88,6 +96,7 @@ class WelcomePage extends AbstractWelcomePage {
|
88
|
96
|
this._onRoomChange = this._onRoomChange.bind(this);
|
89
|
97
|
this._setAdditionalContentRef
|
90
|
98
|
= this._setAdditionalContentRef.bind(this);
|
|
99
|
+ this._setRoomInputRef = this._setRoomInputRef.bind(this);
|
91
|
100
|
this._setAdditionalToolbarContentRef
|
92
|
101
|
= this._setAdditionalToolbarContentRef.bind(this);
|
93
|
102
|
this._onTabSelected = this._onTabSelected.bind(this);
|
|
@@ -184,9 +193,10 @@ class WelcomePage extends AbstractWelcomePage {
|
184
|
193
|
className = 'enter-room-input'
|
185
|
194
|
id = 'enter_room_field'
|
186
|
195
|
onChange = { this._onRoomChange }
|
187
|
|
- pattern = '^[a-zA-Z0-9=\?]+$'
|
|
196
|
+ pattern = { ROOM_NAME_VALIDATE_PATTERN_STR }
|
188
|
197
|
placeholder = { this.state.roomPlaceholder }
|
189
|
|
- title = { t('welcomepage.onlyAsciiAllowed') }
|
|
198
|
+ ref = { this._setRoomInputRef }
|
|
199
|
+ title = { t('welcomepage.roomNameAllowedChars') }
|
190
|
200
|
type = 'text'
|
191
|
201
|
value = { this.state.room } />
|
192
|
202
|
</form>
|
|
@@ -194,7 +204,7 @@ class WelcomePage extends AbstractWelcomePage {
|
194
|
204
|
<div
|
195
|
205
|
className = 'welcome-page-button'
|
196
|
206
|
id = 'enter_room_button'
|
197
|
|
- onClick = { this._onJoin }>
|
|
207
|
+ onClick = { this._onFormSubmit }>
|
198
|
208
|
{ t('welcomepage.go') }
|
199
|
209
|
</div>
|
200
|
210
|
</div>
|
|
@@ -219,7 +229,9 @@ class WelcomePage extends AbstractWelcomePage {
|
219
|
229
|
_onFormSubmit(event) {
|
220
|
230
|
event.preventDefault();
|
221
|
231
|
|
222
|
|
- this._onJoin();
|
|
232
|
+ if (!this._roomInputRef || this._roomInputRef.reportValidity()) {
|
|
233
|
+ this._onJoin();
|
|
234
|
+ }
|
223
|
235
|
}
|
224
|
236
|
|
225
|
237
|
/**
|
|
@@ -311,6 +323,18 @@ class WelcomePage extends AbstractWelcomePage {
|
311
|
323
|
this._additionalToolbarContentRef = el;
|
312
|
324
|
}
|
313
|
325
|
|
|
326
|
+ /**
|
|
327
|
+ * Sets the internal reference to the HTMLInputElement used to hold the
|
|
328
|
+ * welcome page input room element.
|
|
329
|
+ *
|
|
330
|
+ * @param {HTMLInputElement} el - The HTMLElement for the input of the room name on the welcome page.
|
|
331
|
+ * @private
|
|
332
|
+ * @returns {void}
|
|
333
|
+ */
|
|
334
|
+ _setRoomInputRef(el) {
|
|
335
|
+ this._roomInputRef = el;
|
|
336
|
+ }
|
|
337
|
+
|
314
|
338
|
/**
|
315
|
339
|
* Returns whether or not additional content should be displayed below
|
316
|
340
|
* the welcome page's header for entering a room name.
|