From 4975f1534505f1736d7a07462c7aeec208d9cbcc Mon Sep 17 00:00:00 2001
From: Vlad Piersec <vlad.piersec@8x8.com>
Date: Tue, 19 May 2020 10:52:57 +0300
Subject: [PATCH] fix(prejoin_page): Always show 'join without audio' & add
 disabled button.

* The prejoin page always displays the 'join without audio' option.
* The join button will be disabled if there is no input.
* Fix some CSS for the case when the user is not anonymous.
---
 css/_prejoin.scss                             | 22 ++++++++++++++++++
 react/features/prejoin/components/Prejoin.js  | 23 ++++++++++---------
 .../components/buttons/ActionButton.js        | 23 +++++++++++++++----
 .../components/preview/ParticipantName.js     |  2 +-
 react/features/prejoin/functions.js           |  4 ++--
 5 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/css/_prejoin.scss b/css/_prejoin.scss
index 83f1de9d3..e98a30623 100644
--- a/css/_prejoin.scss
+++ b/css/_prejoin.scss
@@ -55,6 +55,23 @@
             margin: 0;
             padding: 0;
         }
+
+        &--disabled {
+            background: #5E6D7A;
+            border: 1px solid #5E6D7A;
+            color: #AFB6BC;
+            cursor: initial;
+
+            .prejoin-btn-icon {
+                & > svg {
+                    fill: #AFB6BC;
+                }
+            }
+
+            .prejoin-btn-options {
+                border-left: 1px solid #AFB6BC;
+            }
+        }
     }
 
     &-btn-options {
@@ -150,6 +167,11 @@
                 @include name-placeholder;
             }
         }
+
+        &--text {
+            margin: 16px 0;
+            outline: none;
+        }
     }
 
     &-avatar.avatar {
diff --git a/react/features/prejoin/components/Prejoin.js b/react/features/prejoin/components/Prejoin.js
index 900c69cd4..fd06a77cc 100644
--- a/react/features/prejoin/components/Prejoin.js
+++ b/react/features/prejoin/components/Prejoin.js
@@ -15,7 +15,7 @@ import { connect } from '../../base/redux';
 import { getDisplayName, updateSettings } from '../../base/settings';
 import ActionButton from './buttons/ActionButton';
 import {
-    areJoinByPhoneButtonsVisible,
+    isJoinByPhoneButtonVisible,
     isDeviceStatusVisible,
     isJoinByPhoneDialogVisible
 } from '../functions';
@@ -35,6 +35,11 @@ type Props = {
      */
     deviceStatusVisible: boolean,
 
+    /**
+     * If join by phone button should be visible.
+     */
+    hasJoinByPhoneButton: boolean,
+
     /**
      * Flag signaling if a user is logged in or not.
      */
@@ -80,11 +85,6 @@ type Props = {
      */
     showDialog: boolean,
 
-    /**
-     * If join by phone buttons should be visible.
-     */
-    hasJoinByPhoneButtons: boolean,
-
     /**
      * Used for translation.
      */
@@ -210,11 +210,11 @@ class Prejoin extends Component<Props, State> {
     render() {
         const {
             deviceStatusVisible,
+            hasJoinByPhoneButton,
             isAnonymousUser,
             joinConference,
             joinConferenceWithoutAudio,
             name,
-            hasJoinByPhoneButtons,
             showDialog,
             t
         } = this.props;
@@ -251,7 +251,7 @@ class Prejoin extends Component<Props, State> {
                                             src = { IconVolumeOff } />
                                         { t('prejoin.joinWithoutAudio') }
                                     </div>
-                                    <div
+                                    {hasJoinByPhoneButton && <div
                                         className = 'prejoin-preview-dropdown-btn'
                                         onClick = { _showDialog }>
                                         <Icon
@@ -259,12 +259,13 @@ class Prejoin extends Component<Props, State> {
                                             size = { 24 }
                                             src = { IconPhone } />
                                         { t('prejoin.joinAudioByPhone') }
-                                    </div>
+                                    </div>}
                                 </div> }
                                 isOpen = { showJoinByPhoneButtons }
                                 onClose = { _onDropdownClose }>
                                 <ActionButton
-                                    hasOptions = { hasJoinByPhoneButtons }
+                                    disabled = { !name }
+                                    hasOptions = { true }
                                     onClick = { joinConference }
                                     onOptionsClick = { _onOptionsClick }
                                     type = 'primary'>
@@ -312,7 +313,7 @@ function mapStateToProps(state): Object {
         name: getDisplayName(state),
         roomName: getRoomName(state),
         showDialog: isJoinByPhoneDialogVisible(state),
-        hasJoinByPhoneButtons: areJoinByPhoneButtonsVisible(state)
+        hasJoinByPhoneButton: isJoinByPhoneButtonVisible(state)
     };
 }
 
diff --git a/react/features/prejoin/components/buttons/ActionButton.js b/react/features/prejoin/components/buttons/ActionButton.js
index 783e17235..c47715305 100644
--- a/react/features/prejoin/components/buttons/ActionButton.js
+++ b/react/features/prejoin/components/buttons/ActionButton.js
@@ -21,6 +21,11 @@ type Props = {
      */
     className?: string,
 
+    /**
+     * If the button is disabled or not.
+     */
+    disabled?: boolean,
+
     /**
      * If the button has options.
      */
@@ -47,18 +52,28 @@ type Props = {
  *
  * @returns {ReactElement}
  */
-function ActionButton({ children, className, hasOptions, type, onClick, onOptionsClick }: Props) {
-    const ownClassName = `prejoin-btn ${classNameByType[type]}`;
+function ActionButton({ children, className, disabled, hasOptions, type, onClick, onOptionsClick }: Props) {
+    let ownClassName = 'prejoin-btn';
+    let clickHandler = onClick;
+    let optionsClickHandler = onOptionsClick;
+
+    if (disabled) {
+        clickHandler = null;
+        optionsClickHandler = null;
+        ownClassName = `${ownClassName} prejoin-btn--disabled`;
+    } else {
+        ownClassName = `${ownClassName} ${classNameByType[type]}`;
+    }
     const cls = className ? `${className} ${ownClassName}` : ownClassName;
 
     return (
         <div
             className = { cls }
-            onClick = { onClick }>
+            onClick = { clickHandler }>
             {children}
             {hasOptions && <div
                 className = 'prejoin-btn-options'
-                onClick = { onOptionsClick }>
+                onClick = { optionsClickHandler }>
                 <Icon
                     className = 'prejoin-btn-icon'
                     size = { 14 }
diff --git a/react/features/prejoin/components/preview/ParticipantName.js b/react/features/prejoin/components/preview/ParticipantName.js
index 9b10ea7e0..a0f4577c6 100644
--- a/react/features/prejoin/components/preview/ParticipantName.js
+++ b/react/features/prejoin/components/preview/ParticipantName.js
@@ -96,7 +96,7 @@ class ParticipantName extends Component<Props> {
                 value = { value } />
         )
             : <div
-                className = 'prejoin-preview-name'
+                className = 'prejoin-preview-name prejoin-preview-name--text'
                 onKeyDown = { _onKeyDown }
                 tabIndex = '0' >
                 {value}
diff --git a/react/features/prejoin/functions.js b/react/features/prejoin/functions.js
index 2de66c644..167aaae0f 100644
--- a/react/features/prejoin/functions.js
+++ b/react/features/prejoin/functions.js
@@ -23,12 +23,12 @@ function applyMuteOptionsToTrack(track, shouldMute) {
 }
 
 /**
- * Selector for the visibility of the 'join by phone' buttons.
+ * Selector for the visibility of the 'join by phone' button.
  *
  * @param {Object} state - The state of the app.
  * @returns {boolean}
  */
-export function areJoinByPhoneButtonsVisible(state: Object): boolean {
+export function isJoinByPhoneButtonVisible(state: Object): boolean {
     return Boolean(getDialOutUrl(state) && getDialOutStatusUrl(state));
 }