From 4f00c6b9943800d1c0357bfb06425ac551088704 Mon Sep 17 00:00:00 2001
From: Joao Siebel <joaos_desenv@imdt.com.br>
Date: Mon, 9 Sep 2019 11:21:54 -0300
Subject: [PATCH] Update lock viewers modal

With this changes you need to click apply button
in order to lock have effect, also update the lock text.

close #7766
---
 .../server/methods/toggleLockSettings.js      |  34 +++--
 .../methods/toggleWebcamsOnlyForModerator.js  |   6 +-
 .../ui/components/lock-viewers/component.jsx  | 127 +++++++++++++-----
 .../ui/components/lock-viewers/container.jsx  |  14 +-
 .../ui/components/lock-viewers/service.js     |  14 +-
 .../ui/components/lock-viewers/styles.scss    |  27 ++++
 bigbluebutton-html5/private/locales/en.json   |  23 ++--
 7 files changed, 169 insertions(+), 76 deletions(-)

diff --git a/bigbluebutton-html5/imports/api/meetings/server/methods/toggleLockSettings.js b/bigbluebutton-html5/imports/api/meetings/server/methods/toggleLockSettings.js
index e8d14fa370..8238403207 100755
--- a/bigbluebutton-html5/imports/api/meetings/server/methods/toggleLockSettings.js
+++ b/bigbluebutton-html5/imports/api/meetings/server/methods/toggleLockSettings.js
@@ -2,7 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import { check } from 'meteor/check';
 import RedisPubSub from '/imports/startup/server/redis';
 
-export default function toggleLockSettings(credentials, meeting) {
+export default function toggleLockSettings(credentials, lockSettingsProps) {
   const REDIS_CONFIG = Meteor.settings.private.redis;
   const CHANNEL = REDIS_CONFIG.channels.toAkkaApps;
   const EVENT_NAME = 'ChangeLockSettingsInMeetingCmdMsg';
@@ -11,7 +11,7 @@ export default function toggleLockSettings(credentials, meeting) {
 
   check(meetingId, String);
   check(requesterUserId, String);
-  check(meeting.lockSettingsProps, {
+  check(lockSettingsProps, {
     disableCam: Boolean,
     disableMic: Boolean,
     disablePrivateChat: Boolean,
@@ -24,16 +24,28 @@ export default function toggleLockSettings(credentials, meeting) {
     setBy: Match.Maybe(String),
   });
 
+  const {
+    disableCam,
+    disableMic,
+    disablePrivateChat: disablePrivChat,
+    disablePublicChat: disablePubChat,
+    disableNote,
+    hideUserList,
+    lockedLayout,
+    lockOnJoin,
+    lockOnJoinConfigurable,
+  } = lockSettingsProps;
+
   const payload = {
-    disableCam: meeting.lockSettingsProps.disableCam,
-    disableMic: meeting.lockSettingsProps.disableMic,
-    disablePrivChat: meeting.lockSettingsProps.disablePrivateChat,
-    disablePubChat: meeting.lockSettingsProps.disablePublicChat,
-    disableNote: meeting.lockSettingsProps.disableNote,
-    hideUserList: meeting.lockSettingsProps.hideUserList,
-    lockedLayout: meeting.lockSettingsProps.lockedLayout,
-    lockOnJoin: meeting.lockSettingsProps.lockOnJoin,
-    lockOnJoinConfigurable: meeting.lockSettingsProps.lockOnJoinConfigurable,
+    disableCam,
+    disableMic,
+    disablePrivChat,
+    disablePubChat,
+    disableNote,
+    hideUserList,
+    lockedLayout,
+    lockOnJoin,
+    lockOnJoinConfigurable,
     setBy: requesterUserId,
   };
 
diff --git a/bigbluebutton-html5/imports/api/meetings/server/methods/toggleWebcamsOnlyForModerator.js b/bigbluebutton-html5/imports/api/meetings/server/methods/toggleWebcamsOnlyForModerator.js
index 75f052de76..94935c51a7 100755
--- a/bigbluebutton-html5/imports/api/meetings/server/methods/toggleWebcamsOnlyForModerator.js
+++ b/bigbluebutton-html5/imports/api/meetings/server/methods/toggleWebcamsOnlyForModerator.js
@@ -2,7 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import { check } from 'meteor/check';
 import RedisPubSub from '/imports/startup/server/redis';
 
-export default function toggleWebcamsOnlyForModerator(credentials, meeting) {
+export default function toggleWebcamsOnlyForModerator(credentials, webcamsOnlyForModerator) {
   const REDIS_CONFIG = Meteor.settings.private.redis;
   const CHANNEL = REDIS_CONFIG.channels.toAkkaApps;
   const EVENT_NAME = 'UpdateWebcamsOnlyForModeratorCmdMsg';
@@ -11,10 +11,10 @@ export default function toggleWebcamsOnlyForModerator(credentials, meeting) {
 
   check(meetingId, String);
   check(requesterUserId, String);
-  check(meeting.usersProp.webcamsOnlyForModerator, Boolean);
+  check(webcamsOnlyForModerator, Boolean);
 
   const payload = {
-    webcamsOnlyForModerator: meeting.usersProp.webcamsOnlyForModerator,
+    webcamsOnlyForModerator,
     setBy: requesterUserId,
   };
 
diff --git a/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx b/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx
index d2c6e52e4c..ee3a20f8a8 100755
--- a/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx
@@ -1,11 +1,15 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, PureComponent } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
-import Toggle from '/imports/ui/components/switch/component';
+import PropTypes from 'prop-types';
 import cx from 'classnames';
+import Toggle from '/imports/ui/components/switch/component';
 import Modal from '/imports/ui/components/modal/simple/component';
 import NoteService from '/imports/ui/components/note/service';
+import Button from '/imports/ui/components/button/component';
 import { styles } from './styles';
 
+const CHAT_ENABLED = Meteor.settings.public.chat.enabled;
+
 const intlMessages = defineMessages({
   lockViewersTitle: {
     id: 'app.lock-viewers.title',
@@ -63,30 +67,79 @@ const intlMessages = defineMessages({
     id: 'app.lock-viewers.ariaTitle',
     description: 'aria label for modal title',
   },
+  buttonApply: {
+    id: 'app.lock-viewers.button.apply',
+    description: 'label for apply button',
+  },
+  buttonCancel: {
+    id: 'app.lock-viewers.button.cancel',
+    description: 'label for cancel button',
+  },
 });
 
-const CHAT_ENABLED = Meteor.settings.public.chat.enabled;
+const propTypes = {
+  closeModal: PropTypes.func.isRequired,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
+  meeting: PropTypes.object.isRequired,
+  updateLockSettings: PropTypes.func.isRequired,
+  updateWebcamsOnlyForModerator: PropTypes.func.isRequired,
+};
+
+class LockViewersComponent extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    const { meeting: { lockSettingsProps, usersProp } } = this.props;
+
+    this.state = {
+      lockSettingsProps,
+      usersProp,
+    };
+  }
+
+  toggleLockSettings(property) {
+    const { lockSettingsProps } = this.state;
+
+    lockSettingsProps[property] = !lockSettingsProps[property];
+
+    this.setState({
+      lockSettingsProps,
+    });
+  }
+
+  toggleUserProps(property) {
+    const { usersProp } = this.state;
+
+    usersProp[property] = !usersProp[property];
+
+    this.setState({
+      usersProp,
+    });
+  }
 
-class LockViewersComponent extends React.PureComponent {
   render() {
     const {
       intl,
-      meeting,
       closeModal,
-      toggleLockSettings,
-      toggleWebcamsOnlyForModerator,
+      updateLockSettings,
+      updateWebcamsOnlyForModerator,
     } = this.props;
 
+    const { lockSettingsProps, usersProp } = this.state;
+
     return (
       <Modal
         overlayClassName={styles.overlay}
         className={styles.modal}
         onRequestClose={closeModal}
         hideBorder
+        shouldShowCloseButton={false}
         contentLabel={intl.formatMessage(intlMessages.ariaModalTitle)}
       >
 
-        <div className={styles.container}>
+        <div className={styles.containetoggleLockSettingsr}>
           <div className={styles.header}>
             <h2 className={styles.title}>{intl.formatMessage(intlMessages.lockViewersTitle)}</h2>
           </div>
@@ -111,10 +164,9 @@ class LockViewersComponent extends React.PureComponent {
                 <div className={cx(styles.formElement, styles.pullContentRight)}>
                   <Toggle
                     icons={false}
-                    defaultChecked={meeting.lockSettingsProps.disableCam}
+                    defaultChecked={lockSettingsProps.disableCam}
                     onChange={() => {
-                      meeting.lockSettingsProps.disableCam = !meeting.lockSettingsProps.disableCam;
-                      toggleLockSettings(meeting);
+                      this.toggleLockSettings('disableCam');
                     }}
                     ariaLabel={intl.formatMessage(intlMessages.webcamLabel)}
                   />
@@ -133,10 +185,9 @@ class LockViewersComponent extends React.PureComponent {
                 <div className={cx(styles.formElement, styles.pullContentRight)}>
                   <Toggle
                     icons={false}
-                    defaultChecked={meeting.usersProp.webcamsOnlyForModerator}
+                    defaultChecked={usersProp.webcamsOnlyForModerator}
                     onChange={() => {
-                      meeting.usersProp.webcamsOnlyForModerator = !meeting.usersProp.webcamsOnlyForModerator;
-                      toggleWebcamsOnlyForModerator(meeting);
+                      this.toggleUserProps('webcamsOnlyForModerator');
                     }}
                     ariaLabel={intl.formatMessage(intlMessages.otherViewersWebcamLabel)}
                   />
@@ -155,10 +206,9 @@ class LockViewersComponent extends React.PureComponent {
                 <div className={cx(styles.formElement, styles.pullContentRight)}>
                   <Toggle
                     icons={false}
-                    defaultChecked={meeting.lockSettingsProps.disableMic}
+                    defaultChecked={lockSettingsProps.disableMic}
                     onChange={() => {
-                      meeting.lockSettingsProps.disableMic = !meeting.lockSettingsProps.disableMic;
-                      toggleLockSettings(meeting);
+                      this.toggleLockSettings('disableMic');
                     }}
                     ariaLabel={intl.formatMessage(intlMessages.microphoneLable)}
                   />
@@ -180,10 +230,9 @@ class LockViewersComponent extends React.PureComponent {
                     <div className={cx(styles.formElement, styles.pullContentRight)}>
                       <Toggle
                         icons={false}
-                        defaultChecked={meeting.lockSettingsProps.disablePublicChat}
+                        defaultChecked={lockSettingsProps.disablePublicChat}
                         onChange={() => {
-                          meeting.lockSettingsProps.disablePublicChat = !meeting.lockSettingsProps.disablePublicChat;
-                          toggleLockSettings(meeting);
+                          this.toggleLockSettings('disablePublicChat');
                         }}
                         ariaLabel={intl.formatMessage(intlMessages.publicChatLabel)}
                       />
@@ -202,10 +251,9 @@ class LockViewersComponent extends React.PureComponent {
                     <div className={cx(styles.formElement, styles.pullContentRight)}>
                       <Toggle
                         icons={false}
-                        defaultChecked={meeting.lockSettingsProps.disablePrivateChat}
+                        defaultChecked={lockSettingsProps.disablePrivateChat}
                         onChange={() => {
-                          meeting.lockSettingsProps.disablePrivateChat = !meeting.lockSettingsProps.disablePrivateChat;
-                          toggleLockSettings(meeting);
+                          this.toggleLockSettings('disablePrivateChat');
                         }}
                         ariaLabel={intl.formatMessage(intlMessages.privateChatLable)}
                       />
@@ -215,8 +263,7 @@ class LockViewersComponent extends React.PureComponent {
               </Fragment>
             ) : null
             }
-
-            { NoteService.isEnabled()
+            {NoteService.isEnabled()
               ? (
                 <div className={styles.row}>
                   <div className={styles.col} aria-hidden="true">
@@ -230,10 +277,9 @@ class LockViewersComponent extends React.PureComponent {
                     <div className={cx(styles.formElement, styles.pullContentRight)}>
                       <Toggle
                         icons={false}
-                        defaultChecked={meeting.lockSettingsProps.disableNote}
+                        defaultChecked={lockSettingsProps.disableNote}
                         onChange={() => {
-                          meeting.lockSettingsProps.disableNote = !meeting.lockSettingsProps.disableNote;
-                          toggleLockSettings(meeting);
+                          this.toggleLockSettings('disableNote');
                         }}
                         ariaLabel={intl.formatMessage(intlMessages.notesLabel)}
                       />
@@ -243,7 +289,6 @@ class LockViewersComponent extends React.PureComponent {
               )
               : null
             }
-
             <div className={styles.row}>
               <div className={styles.col} aria-hidden="true">
                 <div className={styles.formElement}>
@@ -256,10 +301,9 @@ class LockViewersComponent extends React.PureComponent {
                 <div className={cx(styles.formElement, styles.pullContentRight)}>
                   <Toggle
                     icons={false}
-                    defaultChecked={meeting.lockSettingsProps.hideUserList}
+                    defaultChecked={lockSettingsProps.hideUserList}
                     onChange={() => {
-                      meeting.lockSettingsProps.hideUserList = !meeting.lockSettingsProps.hideUserList;
-                      toggleLockSettings(meeting);
+                      this.toggleLockSettings('hideUserList');
                     }}
                     ariaLabel={intl.formatMessage(intlMessages.userListLabel)}
                   />
@@ -268,9 +312,28 @@ class LockViewersComponent extends React.PureComponent {
             </div>
           </div>
         </div>
+        <div className={styles.footer}>
+          <div className={styles.actions}>
+            <Button
+              label={intl.formatMessage(intlMessages.buttonCancel)}
+              onClick={closeModal}
+            />
+            <Button
+              color="primary"
+              label={intl.formatMessage(intlMessages.buttonApply)}
+              onClick={() => {
+                updateLockSettings(lockSettingsProps);
+                updateWebcamsOnlyForModerator(usersProp.webcamsOnlyForModerator);
+                closeModal();
+              }}
+            />
+          </div>
+        </div>
       </Modal>
     );
   }
 }
 
+LockViewersComponent.propTypes = propTypes;
+
 export default injectIntl(LockViewersComponent);
diff --git a/bigbluebutton-html5/imports/ui/components/lock-viewers/container.jsx b/bigbluebutton-html5/imports/ui/components/lock-viewers/container.jsx
index 674b5b5616..43e12525ad 100755
--- a/bigbluebutton-html5/imports/ui/components/lock-viewers/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/container.jsx
@@ -1,22 +1,16 @@
 import React from 'react';
 import { withTracker } from 'meteor/react-meteor-data';
 import { withModalMounter } from '/imports/ui/components/modal/service';
-import { makeCall } from '/imports/ui/services/api';
 import Meetings from '/imports/api/meetings';
 import Auth from '/imports/ui/services/auth';
 import LockViewersComponent from './component';
+import { updateLockSettings, updateWebcamsOnlyForModerator } from './service';
 
 const LockViewersContainer = props => <LockViewersComponent {...props} />;
 
 export default withModalMounter(withTracker(({ mountModal }) => ({
-  closeModal() {
-    mountModal(null);
-  },
-  toggleLockSettings(meeting) {
-    makeCall('toggleLockSettings', meeting);
-  },
-  toggleWebcamsOnlyForModerator(meeting) {
-    makeCall('toggleWebcamsOnlyForModerator', meeting);
-  },
+  closeModal: () => mountModal(null),
   meeting: Meetings.findOne({ meetingId: Auth.meetingID }),
+  updateLockSettings,
+  updateWebcamsOnlyForModerator,
 }))(LockViewersContainer));
diff --git a/bigbluebutton-html5/imports/ui/components/lock-viewers/service.js b/bigbluebutton-html5/imports/ui/components/lock-viewers/service.js
index 2f9ae0d30c..6126d27d11 100644
--- a/bigbluebutton-html5/imports/ui/components/lock-viewers/service.js
+++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/service.js
@@ -1,14 +1,10 @@
 import { makeCall } from '/imports/ui/services/api';
-import Meetings from '/imports/api/meetings';
-import Auth from '/imports/ui/services/auth';
 
-const getCurrentMeeting = () => Meetings.findOne({ meetingId: Auth.meetingID });
+const updateLockSettings = lockProps => makeCall('toggleLockSettings', lockProps);
 
-const toggleLockSettings = () => makeCall('toggleLockSettings', getCurrentMeeting());
+const updateWebcamsOnlyForModerator = webcamsOnlyForModerator => makeCall('toggleWebcamsOnlyForModerator', webcamsOnlyForModerator);
 
-const toggleWebcamsOnlyForModerator = () => makeCall('toggleWebcamsOnlyForModerator', getCurrentMeeting());
-
-export default {
-  toggleLockSettings,
-  toggleWebcamsOnlyForModerator,
+export {
+  updateLockSettings,
+  updateWebcamsOnlyForModerator,
 };
diff --git a/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss b/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss
index 04eed241c2..4be57e9f43 100755
--- a/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss
@@ -25,6 +25,7 @@
 .form {
   display: flex;
   flex-flow: column;
+  border-bottom: 1px solid var(--color-gray-lighter);
 }
 
 .container {
@@ -132,3 +133,29 @@
   line-height: var(--title-position-left);
   margin-bottom: var(--lg-padding-y);
 }
+
+.footer {
+  display: flex;
+  margin-top: var(--sm-padding-x);
+}
+
+.actions {
+  margin-left: auto;
+  margin-right: 3px;
+
+
+  [dir="rtl"] & {
+    margin-right: auto;
+    margin-left: 3px;
+  }
+
+  :first-child {
+    margin-right: 3px;
+    margin-left: inherit;
+
+    [dir="rtl"] & {
+      margin-right: inherit;
+      margin-left: 3px;
+    }
+  }
+}
diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
index 990a2caea2..fbde1ca5f9 100755
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/bigbluebutton-html5/private/locales/en.json
@@ -91,7 +91,7 @@
     "app.userList.userOptions.muteAllExceptPresenterDesc": "Mutes all users in the meeting except the presenter",
     "app.userList.userOptions.unmuteAllLabel": "Turn off meeting mute",
     "app.userList.userOptions.unmuteAllDesc": "Unmutes the meeting",
-    "app.userList.userOptions.lockViewersLabel": "Lock viewers",
+    "app.userList.userOptions.lockViewersLabel": "Lock Viewers Settings",
     "app.userList.userOptions.lockViewersDesc": "Lock certain functionalities for attendees of the meeting",
     "app.userList.userOptions.disableCam": "Viewers' webcams are disabled",
     "app.userList.userOptions.disableMic": "Viewers' microphones are disabled",
@@ -495,19 +495,20 @@
     "app.shortcut-help.togglePan": "Activate Pan tool (Presenter)",
     "app.shortcut-help.nextSlideDesc": "Next slide (Presenter)",
     "app.shortcut-help.previousSlideDesc": "Previous slide (Presenter)",
-    "app.lock-viewers.title": "Lock viewers",
+    "app.lock-viewers.title": "Lock Viewers Settings",
     "app.lock-viewers.description": "These options enable you to restrict viewers from using specific features.  (These lock settings do not apply to moderators.)",
     "app.lock-viewers.featuresLable": "Feature",
     "app.lock-viewers.lockStatusLabel": "Locked status",
-    "app.lock-viewers.webcamLabel": "Webcam",
-    "app.lock-viewers.otherViewersWebcamLabel": "See other viewers webcams",
-    "app.lock-viewers.microphoneLable": "Microphone",
-    "app.lock-viewers.PublicChatLabel": "Public chat",
-    "app.lock-viewers.PrivateChatLable": "Private chat",
-    "app.lock-viewers.notesLabel": "Shared notes",
-    "app.lock-viewers.userListLabel": "User list",
-    "app.lock-viewers.Layout": "Layout",
-    "app.lock-viewers.ariaTitle": "Lock viewers modal",
+    "app.lock-viewers.webcamLabel": "Disable viewers webcam",
+    "app.lock-viewers.otherViewersWebcamLabel": "Seeing other viewers webcams",
+    "app.lock-viewers.microphoneLable": "Microphone capabilities",
+    "app.lock-viewers.PublicChatLabel": "Sending Public chat messages",
+    "app.lock-viewers.PrivateChatLable": "Sending Private chat messages",
+    "app.lock-viewers.notesLabel": "Using Shared notes",
+    "app.lock-viewers.userListLabel": "See other viewers in the user's list",
+    "app.lock-viewers.ariaTitle": "Lock viewers settings modal",
+    "app.lock-viewers.button.apply": "Apply",
+    "app.lock-viewers.button.cancel": "Cancel",
     "app.recording.startTitle": "Start recording",
     "app.recording.stopTitle": "Pause recording",
     "app.recording.resumeTitle": "Resume recording",