feat(prejoin) show error when trying to join and name is required

.gitignore

@@ -84,3 +84,4 @@ android/app/google-services.json
 ios/app/dropbox.key
 ios/app/GoogleService-Info.plist
 
+.vscode

css/_prejoin.scss

@@ -39,6 +39,16 @@
         margin-bottom: 14px;
         width: 100%;
     }
+
+    &-error {
+        color: white;
+        background-color: rgba(229, 75, 75, 0.5);
+        width: 100%;
+        padding: 3px;
+        margin-top: 4px;
+        font-size: 13px;
+        text-align: center;
+    }
 }
 
 @mixin name-placeholder {

lang/main.json

@@ -520,6 +520,7 @@
         "errorDialOutDisconnected": "Could not dial out. Disconnected",
         "errorDialOutFailed": "Could not dial out. Call failed",
         "errorDialOutStatus": "Error getting dial out status",
+        "errorMissingName": "Please enter your name to join the meeting",
         "errorStatusCode": "Error dialing out, status code: {{status}}",
         "errorValidation": "Number validation failed",
         "iWantToDialIn": "I want to dial in",

react/features/prejoin/components/Prejoin.js

@@ -48,11 +48,6 @@ type Props = {
      */
     hasJoinByPhoneButton: boolean,
 
-    /**
-     * If join button is disabled or not.
-     */
-    joinButtonDisabled: boolean,
-
     /**
      * Joins the current meeting.
      */
@@ -98,6 +93,11 @@ type Props = {
      */
     showCameraPreview: boolean,
 
+    /**
+     * If should show an error when joining without a name.
+     */
+    showErrorOnJoin: boolean,
+
     /**
      * Flag signaling the visibility of join label, input and buttons
      */
@@ -131,6 +131,11 @@ type Props = {
 
 type State = {
 
+    /**
+     * Flag controlling the visibility of the error label.
+     */
+    showError: boolean,
+
     /**
      * Flag controlling the visibility of the 'join by phone' buttons.
      */
@@ -161,16 +166,38 @@ class Prejoin extends Component<Props, State> {
         super(props);
 
         this.state = {
+            showError: false,
             showJoinByPhoneButtons: false
         };
 
         this._closeDialog = this._closeDialog.bind(this);
         this._showDialog = this._showDialog.bind(this);
+        this._onJoinButtonClick = this._onJoinButtonClick.bind(this);
         this._onToggleButtonClick = this._onToggleButtonClick.bind(this);
         this._onDropdownClose = this._onDropdownClose.bind(this);
         this._onOptionsClick = this._onOptionsClick.bind(this);
         this._setName = this._setName.bind(this);
     }
+    _onJoinButtonClick: () => void;
+
+    /**
+     * Handler for the join button.
+     *
+     * @param {Object} e - The synthetic event.
+     * @returns {void}
+     */
+    _onJoinButtonClick() {
+        if (this.props.showErrorOnJoin) {
+            this.setState({
+                showError: true
+            });
+
+            return;
+        }
+
+        this.setState({ showError: false });
+        this.props.joinConference();
+    }
 
     _onToggleButtonClick: () => void;
 
@@ -258,7 +285,6 @@ class Prejoin extends Component<Props, State> {
      */
     render() {
         const {
-            joinButtonDisabled,
             hasJoinByPhoneButton,
             joinConference,
             joinConferenceWithoutAudio,
@@ -272,8 +298,8 @@ class Prejoin extends Component<Props, State> {
             videoTrack
         } = this.props;
 
-        const { _closeDialog, _onDropdownClose, _onOptionsClick, _setName, _showDialog } = this;
-        const { showJoinByPhoneButtons } = this.state;
+        const { _closeDialog, _onDropdownClose, _onJoinButtonClick, _onOptionsClick, _setName, _showDialog } = this;
+        const { showJoinByPhoneButtons, showError } = this.state;
 
         return (
             <PreMeetingScreen
@@ -294,6 +320,10 @@ class Prejoin extends Component<Props, State> {
                                 placeHolder = { t('dialog.enterDisplayName') }
                                 value = { name } />
 
+                            {showError && <div
+                                className = 'prejoin-error'
+                                data-testid = 'prejoin.errorMessage'>{t('prejoin.errorMissingName')}</div>}
+
                             <div className = 'prejoin-preview-dropdown-container'>
                                 <InlineDialog
                                     content = { <div className = 'prejoin-preview-dropdown-btns'>
@@ -319,9 +349,8 @@ class Prejoin extends Component<Props, State> {
                                     isOpen = { showJoinByPhoneButtons }
                                     onClose = { _onDropdownClose }>
                                     <ActionButton
-                                        disabled = { joinButtonDisabled }
                                         hasOptions = { true }
-                                        onClick = { joinConference }
+                                        onClick = { _onJoinButtonClick }
                                         onOptionsClick = { _onOptionsClick }
                                         testId = 'prejoin.joinMeeting'
                                         type = 'primary'>
@@ -383,7 +412,7 @@ class Prejoin extends Component<Props, State> {
  */
 function mapStateToProps(state, ownProps): Object {
     const name = getDisplayName(state);
-    const joinButtonDisabled = isDisplayNameRequired(state) && !name;
+    const showErrorOnJoin = isDisplayNameRequired(state) && !name;
     const { showJoinActions } = ownProps;
     const isInviteButtonEnabled = isButtonEnabled('invite');
 
@@ -397,11 +426,11 @@ function mapStateToProps(state, ownProps): Object {
 
     return {
         buttonIsToggled: isPrejoinSkipped(state),
-        joinButtonDisabled,
         name,
         deviceStatusVisible: isDeviceStatusVisible(state),
         roomName: getRoomName(state),
         showDialog: isJoinByPhoneDialogVisible(state),
+        showErrorOnJoin,
         hasJoinByPhoneButton: isJoinByPhoneButtonVisible(state),
         showCameraPreview: !isVideoMutedByUser(state),
         showConferenceInfo,