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

196 lines
4.9 KiB
JavaScript

/* eslint-disable react/no-multi-comp */
// @flow
import React, { useRef } from 'react';
import { translate } from '../../../base/i18n';
import { copyText } from '../../../base/util';
import PasswordForm from './PasswordForm';
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,
/**
* Whether or not to show the password in editing mode.
*/
passwordEditEnabled: boolean,
/**
* The number of digits to be used in the password.
*/
passwordNumberOfDigits: ?number,
/**
* Action that sets the conference password.
*/
setPassword: Function,
/**
* Method that sets whether the password editing is enabled or not.
*/
setPasswordEditEnabled: Function,
/**
* Invoked to obtain translated strings.
*/
t: Function
};
/**
* Component that handles the password manipulation from the invite dialog.
*
* @returns {React$Element<any>}
*/
function PasswordSection({
canEditPassword,
conference,
locked,
password,
passwordEditEnabled,
passwordNumberOfDigits,
setPassword,
setPasswordEditEnabled,
t }: Props) {
const formRef: Object = useRef(null);
/**
* Callback invoked to set a password on the current JitsiConference.
*
* @param {string} enteredPassword - The new password to be used to lock the
* current JitsiConference.
* @private
* @returns {void}
*/
function onPasswordSubmit(enteredPassword) {
setPassword(conference, conference.lock, enteredPassword);
}
/**
* Toggles whether or not the password should currently be shown as being
* edited locally.
*
* @private
* @returns {void}
*/
function onTogglePasswordEditState() {
setPasswordEditEnabled(!passwordEditEnabled);
}
/**
* Method to remotely submit the password from outside of the password form.
*
* @returns {void}
*/
function onPasswordSave() {
if (formRef.current) {
formRef.current.querySelector('form').requestSubmit();
}
}
/**
* Callback invoked to unlock the current JitsiConference.
*
* @returns {void}
*/
function onPasswordRemove() {
onPasswordSubmit('');
}
/**
* Copies the password to the clipboard.
*
* @returns {void}
*/
function onPasswordCopy() {
copyText(password);
}
/**
* Method that renders the password action(s) based on the current
* locked-status of the conference.
*
* @returns {React$Element<any>}
*/
function renderPasswordActions() {
if (!canEditPassword) {
return null;
}
if (passwordEditEnabled) {
return (
<>
<a onClick = { onTogglePasswordEditState }>{ t('dialog.Cancel') }</a>
<a onClick = { onPasswordSave }>{ t('dialog.add') }</a>
</>
);
}
if (locked) {
return (
<>
<a
className = 'remove-password'
onClick = { onPasswordRemove }>{ t('dialog.Remove') }</a>
<a
className = 'copy-password'
onClick = { onPasswordCopy }>{ t('dialog.copy') }</a>
</>
);
}
return (
<a
className = 'add-password'
onClick = { onTogglePasswordEditState }>{ t('info.addPassword') }</a>
);
}
return (
<div className = 'security-dialog password-section'>
<p className = 'description'>
{ t(canEditPassword ? 'security.about' : 'security.aboutReadOnly') }
</p>
<div className = 'security-dialog password'>
<div
className = 'info-dialog info-dialog-column info-dialog-password'
ref = { formRef }>
<PasswordForm
editEnabled = { passwordEditEnabled }
locked = { locked }
onSubmit = { onPasswordSubmit }
password = { password }
passwordNumberOfDigits = { passwordNumberOfDigits } />
</div>
<div className = 'security-dialog password-actions'>
{ renderPasswordActions() }
</div>
</div>
</div>
);
}
export default translate(PasswordSection);