jiti-meet/react/features/security/components/security-dialog/SecurityDialog.js

142 lines
3.7 KiB
JavaScript
Raw Normal View History

// @flow
import React, { useState, useEffect } from 'react';
import { setPassword as setPass } from '../../../base/conference';
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { isLocalParticipantModerator } from '../../../base/participants';
import { connect } from '../../../base/redux';
import { E2EESection } from '../../../e2ee/components';
2020-05-20 08:25:31 +00:00
import { LobbySection } from '../../../lobby';
import Header from './Header';
import PasswordSection from './PasswordSection';
type Props = {
/**
* Whether or not the current user can modify the current password.
*/
_canEditPassword: boolean,
/**
* The JitsiConference for which to display a lock state and change the
* password.
*/
_conference: Object,
/**
* The value for how the conference is locked (or undefined if not locked)
* as defined by room-lock constants.
*/
_locked: string,
/**
* The current known password for the JitsiConference.
*/
_password: string,
/**
* The number of digits to be used in the password.
*/
_passwordNumberOfDigits: ?number,
2020-06-18 17:25:49 +00:00
/**
* Indicates whether e2ee will be displayed or not.
*/
_showE2ee: boolean,
/**
* Action that sets the conference password.
*/
setPassword: Function,
/**
* Invoked to obtain translated strings.
*/
t: Function
};
/**
* Component that renders the security options dialog.
*
* @returns {React$Element<any>}
*/
function SecurityDialog({
_canEditPassword,
_conference,
_locked,
_password,
_passwordNumberOfDigits,
2020-06-18 17:25:49 +00:00
_showE2ee,
2020-05-20 08:25:31 +00:00
setPassword
}: Props) {
const [ passwordEditEnabled, setPasswordEditEnabled ] = useState(false);
useEffect(() => {
if (passwordEditEnabled && _password) {
setPasswordEditEnabled(false);
}
}, [ _password ]);
return (
<Dialog
customHeader = { Header }
hideCancelButton = { true }
submitDisabled = { true }
titleKey = 'security.securityOptions'
width = { 'small' }>
<div className = 'security-dialog'>
2020-05-20 08:25:31 +00:00
<LobbySection />
<PasswordSection
canEditPassword = { _canEditPassword }
conference = { _conference }
locked = { _locked }
password = { _password }
passwordEditEnabled = { passwordEditEnabled }
passwordNumberOfDigits = { _passwordNumberOfDigits }
setPassword = { setPassword }
setPasswordEditEnabled = { setPasswordEditEnabled } />
2020-06-18 17:25:49 +00:00
{
_showE2ee ? <>
<div className = 'separator-line' />
<E2EESection />
</> : null
}
</div>
</Dialog>
);
}
/**
* Maps (parts of) the Redux state to the associated props for the
* {@code SecurityDialog} component.
*
* @param {Object} state - The Redux state.
* @private
* @returns {Props}
*/
function mapStateToProps(state) {
const {
conference,
2020-06-18 17:25:49 +00:00
e2eeSupported,
locked,
password
} = state['features/base/conference'];
return {
_canEditPassword: isLocalParticipantModerator(state, state['features/base/config'].lockRoomGuestEnabled),
_conference: conference,
_dialIn: state['features/invite'],
_locked: locked,
2020-06-18 17:25:49 +00:00
_password: password,
_showE2ee: Boolean(e2eeSupported)
};
}
const mapDispatchToProps = { setPassword: setPass };
export default translate(connect(mapStateToProps, mapDispatchToProps)(SecurityDialog));