fix(lobby) Make password hidden by default (#12295)

css/modals/security/_security.scss

@@ -28,7 +28,7 @@
                         color: #6FB1EA;
                     }
 
-                    & > :first-child:not(:last-child) {
+                    & > :not(:last-child) {
                         margin-right: 24px;
                     }
                 }

lang/main.json

@@ -270,6 +270,7 @@
         "gracefulShutdown": "Our service is currently down for maintenance. Please try again later.",
         "grantModeratorDialog": "Are you sure you want to grant moderator rights to {{participantName}}?",
         "grantModeratorTitle": "Grant moderator rights",
+        "hide": "Hide",
         "hideShareAudioHelper": "Don't show this dialog again",
         "incorrectPassword": "Incorrect username or password",
         "incorrectRoomLockPassword": "Incorrect password",
@@ -387,6 +388,7 @@
         "shareYourScreenDisabled": "Screen sharing disabled.",
         "sharedVideoDialogError": "Error: Invalid URL",
         "sharedVideoLinkPlaceholder": "YouTube link or direct video link",
+        "show": "Show",
         "start": "Start ",
         "startLiveStreaming": "Start live stream",
         "startRecording": "Start recording",

react/features/security/components/security-dialog/web/PasswordForm.tsx

@@ -38,6 +38,11 @@ interface Props extends WithTranslation {
      * The number of digits to be used in the password.
      */
     passwordNumberOfDigits?: number;
+
+    /**
+     * Whether or not the password should be visible.
+     */
+    visible: boolean;
 }
 
 /**
@@ -117,7 +122,7 @@ class PasswordForm extends Component<Props, State> {
             <span className = 'info-password-field info-value'>
                 {locked === LOCKED_LOCALLY ? (
                     <div className = 'info-password-local'>
-                        {this.props.password}
+                        {this.props.visible ? this.props.password : '******' }
                     </div>
                 ) : (
                     <div className = 'info-password-remote'>
@@ -156,6 +161,7 @@ class PasswordForm extends Component<Props, State> {
                         onChange = { this._onEnteredPasswordChange }
                         onKeyPress = { this._onKeyPress }
                         placeholder = { placeHolderText }
+                        type = 'password'
                         value = { this.state.enteredPassword } />
                 </div>
             );

react/features/security/components/security-dialog/web/PasswordSection.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react/jsx-no-bind */
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { WithTranslation } from 'react-i18next';
 
 import { translate } from '../../../../base/i18n/functions';
 import { copyText } from '../../../../base/util/copyText';
+import { LOCKED_LOCALLY } from '../../../../room-lock/constants';
 import { NOTIFY_CLICK_MODE } from '../../../../toolbox/constants';
 
 import PasswordForm from './PasswordForm';
@@ -82,6 +83,7 @@ function PasswordSection({
     t }: Props) {
 
     const formRef = useRef<HTMLDivElement>(null);
+    const [ passwordVisible, setPasswordVisible ] = useState(false);
 
     /**
      * Callback invoked to set a password on the current JitsiConference.
@@ -229,6 +231,52 @@ function PasswordSection({
         }
     }
 
+    /**
+     * Callback invoked to show the current password.
+     *
+     * @returns {void}
+     */
+    function onPasswordShow() {
+        setPasswordVisible(true);
+    }
+
+    /**
+     * Callback invoked to show the current password.
+     *
+     * @param {Object} e - The key event to handle.
+     *
+     * @returns {void}
+     */
+    function onPasswordShowKeyPressHandler(e: React.KeyboardEvent) {
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            setPasswordVisible(true);
+        }
+    }
+
+    /**
+     * Callback invoked to hide the current password.
+     *
+     * @returns {void}
+     */
+    function onPasswordHide() {
+        setPasswordVisible(false);
+    }
+
+    /**
+     * Callback invoked to hide the current password.
+     *
+     * @param {Object} e - The key event to handle.
+     *
+     * @returns {void}
+     */
+    function onPasswordHideKeyPressHandler(e: React.KeyboardEvent) {
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            setPasswordVisible(false);
+        }
+    }
+
     /**
      * Method that renders the password action(s) based on the current
      * locked-status of the conference.
@@ -282,6 +330,17 @@ function PasswordSection({
                                 tabIndex = { 0 }>{ t('dialog.copy') }</a>
                         </> : null
                     }
+                    {locked === LOCKED_LOCALLY && (
+                        <a
+                            aria-label = { t(passwordVisible ? 'dialog.hide' : 'dialog.show') }
+                            onClick = { passwordVisible ? onPasswordHide : onPasswordShow }
+                            onKeyPress = { passwordVisible
+                                ? onPasswordHideKeyPressHandler
+                                : onPasswordShowKeyPressHandler
+                            }
+                            role = 'button'
+                            tabIndex = { 0 }>{t(passwordVisible ? 'dialog.hide' : 'dialog.show')}</a>
+                    )}
                 </>
             );
         }
@@ -311,7 +370,8 @@ function PasswordSection({
                         locked = { locked }
                         onSubmit = { onPasswordSubmit }
                         password = { password }
-                        passwordNumberOfDigits = { passwordNumberOfDigits } />
+                        passwordNumberOfDigits = { passwordNumberOfDigits }
+                        visible = { passwordVisible } />
                 </div>
                 <div className = 'security-dialog password-actions'>
                     { renderPasswordActions() }