mirror of https://github.com/jitsi/jitsi-meet
tmoldovan8x8
3 years ago
committed by
GitHub
parent
1139311809
commit
4c9bfe3d4d
@ -0,0 +1,166 @@ |
||||
import { withStyles } from '@mui/styles'; |
||||
import React, { Component } from 'react'; |
||||
import { WithTranslation } from 'react-i18next'; |
||||
|
||||
import { IReduxState, IStore } from '../../app/types'; |
||||
import { translate } from '../../base/i18n/functions'; |
||||
import { getParticipantById } from '../../base/participants/functions'; |
||||
import { connect } from '../../base/redux/functions'; |
||||
import Dialog from '../../base/ui/components/web/Dialog'; |
||||
import { participantVerified } from '../actions'; |
||||
import { ISas } from '../reducer'; |
||||
|
||||
interface IProps extends WithTranslation { |
||||
classes: any; |
||||
decimal: string; |
||||
dispatch: IStore['dispatch']; |
||||
emoji: string; |
||||
pId: string; |
||||
participantName: string; |
||||
sas: ISas; |
||||
} |
||||
|
||||
/** |
||||
* Creates the styles for the component. |
||||
* |
||||
* @param {Object} theme - The current UI theme. |
||||
* |
||||
* @returns {Object} |
||||
*/ |
||||
const styles = () => { |
||||
return { |
||||
container: { |
||||
display: 'flex', |
||||
flexDirection: 'column', |
||||
margin: '16px' |
||||
}, |
||||
row: { |
||||
alignSelf: 'center', |
||||
display: 'flex' |
||||
}, |
||||
item: { |
||||
textAlign: 'center', |
||||
margin: '16px' |
||||
}, |
||||
emoji: { |
||||
fontSize: '40px', |
||||
margin: '12px' |
||||
} |
||||
}; |
||||
}; |
||||
|
||||
|
||||
/** |
||||
* Class for the dialog displayed for E2EE sas verification. |
||||
*/ |
||||
export class ParticipantVerificationDialog extends Component<IProps> { |
||||
/** |
||||
* Instantiates a new instance. |
||||
* |
||||
* @inheritdoc |
||||
*/ |
||||
constructor(props: IProps) { |
||||
super(props); |
||||
|
||||
this._onConfirmed = this._onConfirmed.bind(this); |
||||
this._onDismissed = this._onDismissed.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const { emoji } = this.props.sas; |
||||
const { participantName } = this.props; |
||||
|
||||
const { classes, t } = this.props; |
||||
|
||||
return ( |
||||
<Dialog |
||||
cancel = {{ translationKey: 'dialog.verifyParticipantDismiss' }} |
||||
ok = {{ translationKey: 'dialog.verifyParticipantConfirm' }} |
||||
onCancel = { this._onDismissed } |
||||
onSubmit = { this._onConfirmed } |
||||
titleKey = 'dialog.verifyParticipantTitle'> |
||||
<div> |
||||
{ t('dialog.verifyParticipantQuestion', { participantName }) } |
||||
</div> |
||||
|
||||
<div className = { classes.container }> |
||||
<div className = { classes.row }> |
||||
{/* @ts-ignore */} |
||||
{emoji.slice(0, 4).map((e: Array<string>) => |
||||
(<div |
||||
className = { classes.item } |
||||
key = { e.toString() }> |
||||
<div className = { classes.emoji }>{ e[0] }</div> |
||||
<div>{ e[1].charAt(0).toUpperCase() + e[1].slice(1) }</div> |
||||
</div>))} |
||||
</div> |
||||
|
||||
<div className = { classes.row }> |
||||
{/* @ts-ignore */} |
||||
{emoji.slice(4, 7).map((e: Array<string>) => |
||||
(<div |
||||
className = { classes.item } |
||||
key = { e.toString() }> |
||||
<div className = { classes.emoji }>{ e[0] } </div> |
||||
<div>{ e[1].charAt(0).toUpperCase() + e[1].slice(1) }</div> |
||||
</div>))} |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</Dialog> |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Notifies this ParticipantVerificationDialog that it has been dismissed by cancel. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onDismissed() { |
||||
this.props.dispatch(participantVerified(this.props.pId, false)); |
||||
|
||||
return true; |
||||
} |
||||
|
||||
/** |
||||
* Notifies this ParticipantVerificationDialog that it has been dismissed with confirmation. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onConfirmed() { |
||||
this.props.dispatch(participantVerified(this.props.pId, true)); |
||||
|
||||
return true; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Maps part of the Redux store to the props of this component. |
||||
* |
||||
* @param {IReduxState} state - The Redux state. |
||||
* @param {IProps} ownProps - The own props of the component. |
||||
* @returns {IProps} |
||||
*/ |
||||
export function _mapStateToProps(state: IReduxState, ownProps: IProps) { |
||||
const participant = getParticipantById(state, ownProps.pId); |
||||
|
||||
return { |
||||
sas: ownProps.sas, |
||||
pId: ownProps.pId, |
||||
participantName: participant?.name |
||||
}; |
||||
} |
||||
|
||||
export default translate(connect(_mapStateToProps)( |
||||
|
||||
// @ts-ignore
|
||||
withStyles(styles)(ParticipantVerificationDialog))); |
||||
@ -0,0 +1,115 @@ |
||||
/* eslint-disable lines-around-comment */ |
||||
import { withStyles } from '@mui/styles'; |
||||
import React, { Component } from 'react'; |
||||
import { WithTranslation } from 'react-i18next'; |
||||
import { connect } from 'react-redux'; |
||||
|
||||
import { IReduxState } from '../../../app/types'; |
||||
import { translate } from '../../../base/i18n/functions'; |
||||
import { IconCheck } from '../../../base/icons/svg'; |
||||
import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; |
||||
import { startVerification } from '../../../e2ee/actions'; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} props of |
||||
* {@link VerifyParticipantButton}. |
||||
*/ |
||||
interface IProps extends WithTranslation { |
||||
/** |
||||
* The redux {@code dispatch} function. |
||||
*/ |
||||
dispatch: Function; |
||||
|
||||
/** |
||||
* The ID of the participant that this button is supposed to verified. |
||||
*/ |
||||
participantID: string; |
||||
} |
||||
|
||||
const styles = () => { |
||||
return { |
||||
triggerButton: { |
||||
padding: '3px !important', |
||||
borderRadius: '4px' |
||||
}, |
||||
|
||||
contextMenu: { |
||||
position: 'relative' as const, |
||||
marginTop: 0, |
||||
right: 'auto', |
||||
marginRight: '4px', |
||||
marginBottom: '4px' |
||||
} |
||||
}; |
||||
}; |
||||
|
||||
/** |
||||
* React {@code Component} for displaying an icon associated with opening the |
||||
* the {@code VideoMenu}. |
||||
* |
||||
* @augments {Component} |
||||
*/ |
||||
class VerifyParticipantButton extends Component<IProps> { |
||||
|
||||
/** |
||||
* Instantiates a new {@code Component}. |
||||
* |
||||
* @inheritdoc |
||||
*/ |
||||
constructor(props: IProps) { |
||||
super(props); |
||||
|
||||
this._handleClick = this._handleClick.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const { participantID, t } = this.props; |
||||
|
||||
return ( |
||||
<ContextMenuItem |
||||
accessibilityLabel = { t('videothumbnail.verify') } |
||||
className = 'verifylink' |
||||
icon = { IconCheck } |
||||
id = { `verifylink_${participantID}` } |
||||
// eslint-disable-next-line react/jsx-handler-names
|
||||
onClick = { this._handleClick } |
||||
text = { t('videothumbnail.verify') } /> |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Handles clicking / pressing the button, and starts the participant verification process. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_handleClick() { |
||||
const { dispatch, participantID } = this.props; |
||||
|
||||
dispatch(startVerification(participantID)); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Maps (parts of) the Redux state to the associated {@code RemoteVideoMenuTriggerButton}'s props. |
||||
* |
||||
* @param {Object} state - The Redux state. |
||||
* @param {Object} ownProps - The own props of the component. |
||||
* @private |
||||
* @returns {IProps} |
||||
*/ |
||||
function _mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) { |
||||
const { participantID } = ownProps; |
||||
|
||||
return { |
||||
_participantID: participantID |
||||
}; |
||||
} |
||||
|
||||
export default translate(connect(_mapStateToProps)(withStyles(styles)(VerifyParticipantButton))); |
||||
Loading…
Reference in new issue