ref: move e2ee field into security menu

This commit is contained in:
Bettenbuk Zoltan 2020-06-17 12:53:46 +02:00 committed by Zoltan Bettenbuk
parent e936c6dc2c
commit 28e5edfb50
15 changed files with 120 additions and 124 deletions

35
css/_e2ee.scss Normal file
View File

@ -0,0 +1,35 @@
#e2ee-section {
.title {
font-weight: 700;
}
.description {
font-size: .8em;
margin: 15px 0;
}
.key-field {
align-items: center;
display: flex;
flex-direction: row;
label {
font-weight: 700;
}
input {
background-color: inherit;
border: none;
color: inherit;
flex: 1;
padding: 0 5px;
}
a {
color: #6FB1EA;
cursor: pointer;
font-size: 14px;
text-decoration: none;
}
}
}

View File

@ -98,5 +98,6 @@ $flagsImagePath: "../images/";
@import 'modals/invite/invite_more';
@import 'modals/security/security';
@import 'premeeting-screens';
@import 'e2ee';
/* Modules END */

View File

@ -49,8 +49,7 @@ var interfaceConfig = {
'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone',
'e2ee', 'security'
'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone', 'security'
],
SETTINGS_SECTIONS: [ 'devices', 'language', 'moderator', 'profile', 'calendar' ],

View File

@ -178,7 +178,7 @@
"e2eeDescription": "<p>Η από άκρη σε άκρη κρυπτογράφηση είναι σήμερα <strong>σε ΠΕΙΡΑΜΑΤΙΚΟ στάδιο</strong>. Παρακαλώ δείτε <a href='https://jitsi.org/blog/e2ee/' target='_blank'>αυτήν την ανάρτηση</a> για λεπτομέρειες.</p><br/><p>Παρακαλώ να έχετε κατά νου ότι η ενεργοποίηση της από άκρη σε άκρη κρυπτογράφησης θα απενεργοποιήσει από την πλευρά του διακομιστή υπηρεσίες όπως: καταγραφή, live streaming και συμμετοχή μέσω τηλεφώνου. Επίσης, να έχετε κατά νου ότι η συνάντηση θα λειτουργήσει μόνο για τους ανθρώπους που συνδέονται από φυλλομετρητές με υποστήριξη για insertable streams.</p>",
"e2eeLabel": "Κλειδί",
"e2eeTitle": "Από άκρη σε άκρη κρυπτογράφηση",
"e2eeWarning": "<br /><p><strong>ΠΡΟΕΙΔΟΠΟΊΗΣΗ:</strong> Δε φαίνεται να έχουν όλοι οι συμμετέχοντες στη συνάντηση αυτή υποστήριξη για από άκρη σε άκρη κρυπτογράφηση. Αν την ενεργοποιήσετε, δεν θα μπορέσουν να σας δουν ούτε να σας ακούσουν.</p>",
"e2eeWarning": "ΠΡΟΕΙΔΟΠΟΊΗΣΗ: Δε φαίνεται να έχουν όλοι οι συμμετέχοντες στη συνάντηση αυτή υποστήριξη για από άκρη σε άκρη κρυπτογράφηση. Αν την ενεργοποιήσετε, δεν θα μπορέσουν να σας δουν ούτε να σας ακούσουν.",
"enterDisplayName": "Παρακαλώ εισάγετε το όνομά σας εδώ",
"error": "Σφάλμα",
"externalInstallationMsg": "Θα πρέπει να εγκαταστήσετε την επέκτασή μας για διαμοιρασμό επιφάνειας εργασίας.",

View File

@ -198,7 +198,7 @@
"e2eeDescription": "<p>El cifrado Extremo-a-Extremo es actualmente <strong>EXPERIMENTAL</strong>. Por favor lea<a href='https://jitsi.org/blog/e2ee/' target='_blank'>este artículo</a> para más detalles.</p><br/><p>Tenga en cuenta que activar el cifrado extremo-a-extremo puede deshabilitar servicios en el servidor como: grabación, transmisión en vivo y participación telefónica. Sin embargo tenga en cuenta que esta reunion solo funcionará con personas que se unan usando un navegador.</p>",
"e2eeLabel": "Clave",
"e2eeTitle": "Cifrado Extremo-a-Extremo",
"e2eeWarning": "<br /><p><strong>ATENCION:</strong> No todos los participantes de esta reunión soportan cifrado Extremo-a-Extremo. Si usted habilita el cifrado ellos no podrán verlo ni oirlo.</p>",
"e2eeWarning": "ATENCION: No todos los participantes de esta reunión soportan cifrado Extremo-a-Extremo. Si usted habilita el cifrado ellos no podrán verlo ni oirlo.",
"enterDisplayName": "Por favor ingresa tu nombre aquí",
"error": "Error",
"externalInstallationMsg": "Necesita instalar nuestra extensión para compartir escritorio.",

View File

@ -197,7 +197,7 @@
"e2eeDescription": "<p>El cifrado Extremo-a-Extremo es actualmente <strong>EXPERIMENTAL</strong>. Por favor lea<a href='https://jitsi.org/blog/e2ee/' target='_blank'>este artículo</a> para más detalles.</p><br/><p>Tenga en cuenta que activar el cifrado extremo-a-extremo puede deshabilitar servicios en el servidor como: grabación, transmisión en vivo y participación telefónica. Sin embargo tenga en cuenta que esta reunion solo funcionará con personas que se unan usando un navegador.</p>",
"e2eeLabel": "Clave",
"e2eeTitle": "Cifrado Extremo-a-Exremo",
"e2eeWarning": "<br /><p><strong>ATENCION:</strong> No todos los participantes de esta reunión soportan cifrado Extremo-a-Extremo. Si usted habilita el cifrado ellos no podrán verlo ni oirlo.</p>",
"e2eeWarning": "ATENCION: No todos los participantes de esta reunión soportan cifrado Extremo-a-Extremo. Si usted habilita el cifrado ellos no podrán verlo ni oirlo.",
"enterDisplayName": "Por favor ingresa tu nombre aquí",
"error": "Error",
"externalInstallationMsg": "Necesita instalar nuestra extensión para compartir escritorio.",

View File

@ -178,7 +178,7 @@
"e2eeDescription": "<p>एंड-टू-एंड एनक्रिप्शन सध्या आहे <strong>प्रायोगिक</strong>. कृपया पहा <a href='https://jitsi.org/blog/e2ee/' target='_blank'>this post</a>तपशीलांसाठी.</p><br/><p>कृपया लक्षात ठेवा की एंड-टू-एंड एन्क्रिप्शन चालू केल्याने सर्व्हर-साइड प्रदान सेवा प्रभावीपणे अक्षम होईल: रेकॉर्डिंग, थेट प्रवाह आणि फोन सहभाग. हे देखील लक्षात ठेवा की मीटिंग केवळ समाविष्ट करण्यायोग्य प्रवाहांसाठी समर्थन असलेल्या ब्राउझरमधून सामील झालेल्या लोकांसाठीच कार्य करेल.</p>",
"e2eeLabel": "Key",
"e2eeTitle": "एंड-टू-एंड एनक्रिप्शन",
"e2eeWarning": "<br /><p><strong>चेतावणी:</strong>या बैठकीतील सर्व सहभागींना एंड-टू-एंड एनक्रिप्शनसाठी समर्थन असल्याचे दिसत नाही. आपण सक्षम केल्यास ते आपल्याला पाहण्यास किंवा ऐकण्यास सक्षम राहणार नाहीत.</p>",
"e2eeWarning": "चेतावणी:या बैठकीतील सर्व सहभागींना एंड-टू-एंड एनक्रिप्शनसाठी समर्थन असल्याचे दिसत नाही. आपण सक्षम केल्यास ते आपल्याला पाहण्यास किंवा ऐकण्यास सक्षम राहणार नाहीत.",
"enterDisplayName": "कृपया आपले नाव येथे प्रविष्ट करा",
"error": "त्रुटी",
"externalInstallationMsg": "आपल्याला आमचा डेस्कटॉप सामायिकरण विस्तार स्थापित करणे आवश्यक आहे.",

View File

@ -192,7 +192,7 @@
"e2eeDescription": "<p>End-to-End Encryption is currently <strong>EXPERIMENTAL</strong>. Please see <a href='https://jitsi.org/blog/e2ee/' target='_blank'>this post</a> for details.</p><br/><p>Please keep in mind that turning on end-to-end encryption will effectively disable server-side provided services such as: recording, live streaming and phone participation. Also keep in mind that the meeting will only work for people joining from browsers with support for insertable streams.</p>",
"e2eeLabel": "Key",
"e2eeTitle": "End-to-End Encryption",
"e2eeWarning": "<br /><p><strong>WARNING:</strong> Not all participants in this meeting seem to have support for End-to-End encryption. If you enable it they won't be able to see nor hear you.</p>",
"e2eeWarning": "WARNING: Not all participants in this meeting seem to have support for End-to-End encryption. If you enable it they won't be able to see nor hear you.",
"enterDisplayName": "Prosimo vnesite svoje ime",
"error": "Napaka",
"externalInstallationMsg": "Potrebno je namestiti razširitev za deljenje namizja.",

View File

@ -183,7 +183,7 @@
"e2eeDescription": "<p>Наскрізне шифрування зараз в режимі<strong>ТЕСТУВАННЯ</strong>. Будь ласка, перегляньте <a href='https://jitsi.org/blog/e2ee/' target='_blank'>цю публікацію</a> для докладної інформації.</p><br/><p>Зверніть увагу, що увімкнення наскрізного шифрування призведе до вимкнення таких служб на стороні сервера: запису, живої трансляції запису в онлайні та участі у конференції за допомогою вхідного телефонного дзвінка. Також, просимо звернути увагу, що приєднання до зустрічі в такому разі буде можливе лише з браузера, який має підтримувати потоки зі вставкою (insertable streams).</p>",
"e2eeLabel": "Ключ",
"e2eeTitle": "Наскрізне шифрування",
"e2eeWarning": "<br /><p><strong>УВАГА:</strong> Схоже, що не всі учасники цієї зустрічі мають підтримку технології наскрізного шифрування. Якщо ви увімкнете цю функцію, то вони не зможуть ані чути, ані бачити вас.</p>",
"e2eeWarning": "УВАГА: Схоже, що не всі учасники цієї зустрічі мають підтримку технології наскрізного шифрування. Якщо ви увімкнете цю функцію, то вони не зможуть ані чути, ані бачити вас.",
"enterDisplayName": "Будь ласка, зазначте ваше ім'я",
"error": "Помилка",
"externalInstallationMsg": "Вам потрібно встановити наше розширення для спільного доступу до стільниці.",

View File

@ -193,10 +193,13 @@
"dismiss": "Dismiss",
"displayNameRequired": "Hi! Whats your name?",
"done": "Done",
"e2eeDescription": "<p>End-to-End Encryption is currently <strong>EXPERIMENTAL</strong>. Please see <a href='https://jitsi.org/blog/e2ee/' target='_blank'>this post</a> for details.</p><br/><p>Please keep in mind that turning on end-to-end encryption will effectively disable server-side provided services such as: recording, live streaming and phone participation. Also keep in mind that the meeting will only work for people joining from browsers with support for insertable streams.</p>",
"e2eeDescription": "End-to-End Encryption is currently EXPERIMENTAL. Please see <a href='https://jitsi.org/blog/e2ee/' target='_blank'>this post</a> for details. Please keep in mind that turning on end-to-end encryption will effectively disable server-side provided services such as: recording, live streaming and phone participation. Also keep in mind that the meeting will only work for people joining from browsers with support for insertable streams.",
"e2eeLabel": "Key",
"e2eeNoKey": "None",
"e2eeTitle": "End-to-End Encryption",
"e2eeWarning": "<br /><p><strong>WARNING:</strong> Not all participants in this meeting seem to have support for End-to-End encryption. If you enable it they won't be able to see nor hear you.</p>",
"e2eeToggleSet": "Set key",
"e2eeSet": "Set",
"e2eeWarning": "WARNING: Not all participants in this meeting seem to have support for End-to-End encryption. If you enable it they won't be able to see nor hear you.",
"enterDisplayName": "Please enter your name here",
"error": "Error",
"externalInstallationMsg": "You need to install our desktop sharing extension.",

View File

@ -1,76 +0,0 @@
// @flow
import React from 'react';
import { createE2EEEvent, sendAnalytics } from '../../analytics';
import { openDialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import { IconRoomUnlock } from '../../base/icons';
import { connect } from '../../base/redux';
import { AbstractButton, BetaTag } from '../../base/toolbox';
import type { AbstractButtonProps } from '../../base/toolbox';
import E2EEDialog from './E2EEDialog';
type Props = AbstractButtonProps & {
/**
* The redux {@code dispatch} function.
*/
dispatch: Function
};
/**
* Button that open a dialog to set the E2EE key.
*/
class E2EEButton extends AbstractButton<Props, *> {
accessibilityLabel = 'toolbar.accessibilityLabel.e2ee';
icon = IconRoomUnlock;
label = 'toolbar.e2ee';
tooltip = 'toolbar.e2ee';
/**
* Helper function to be implemented by subclasses, which returns
* a React Element to display (a beta tag) at the end of the button.
*
* @override
* @protected
* @returns {ReactElement}
*/
_getElementAfter() {
return <BetaTag />;
}
/**
* Handles clicking / pressing the button, and opens the E2EE dialog.
*
* @protected
* @returns {void}
*/
_handleClick() {
sendAnalytics(createE2EEEvent('dialog.open'));
this.props.dispatch(openDialog(E2EEDialog));
}
}
/**
* Maps (parts of) the redux state to the associated props for this component.
*
* @param {Object} state - The Redux state.
* @param {Props} ownProps - The own props of the Component.
* @private
* @returns {Props}
*/
export function mapStateToProps(state: Object, ownProps: Props) {
const { e2eeSupported } = state['features/base/conference'];
const { visible = Boolean(e2eeSupported) } = ownProps;
return {
visible
};
}
export default translate(connect(mapStateToProps)(E2EEButton));

View File

@ -1,11 +1,9 @@
/* @flow */
import { FieldTextStateless as TextField } from '@atlaskit/field-text';
import React, { Component } from 'react';
import type { Dispatch } from 'redux';
import { createE2EEEvent, sendAnalytics } from '../../analytics';
import { Dialog } from '../../base/dialog';
import { translate, translateToHTML } from '../../base/i18n';
import { getParticipants } from '../../base/participants';
import { connect } from '../../base/redux';
@ -37,6 +35,11 @@ type Props = {
type State = {
/**
* True if the key is being edited.
*/
editing: boolean,
/**
* The current E2EE key.
*/
@ -44,12 +47,14 @@ type State = {
};
/**
* Implements a React {@code Component} for displaying a dialog with a field
* Implements a React {@code Component} for displaying a security dialog section with a field
* for setting the E2EE key.
*
* @extends Component
*/
class E2EEDialog extends Component<Props, State> {
class E2EESection extends Component<Props, State> {
fieldRef: Object;
/**
* Initializes a new {@code E2EEDialog } instance.
*
@ -59,13 +64,17 @@ class E2EEDialog extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.fieldRef = React.createRef();
this.state = {
editing: false,
key: this.props._key
};
// Bind event handlers so they are only bound once for every instance.
this._onKeyChange = this._onKeyChange.bind(this);
this._onSubmit = this._onSubmit.bind(this);
this._onSet = this._onSet.bind(this);
this._onToggleSetKey = this._onToggleSetKey.bind(this);
}
/**
@ -76,32 +85,43 @@ class E2EEDialog extends Component<Props, State> {
*/
render() {
const { _everyoneSupportsE2EE, t } = this.props;
const { editing } = this.state;
return (
<Dialog
isModal = { false }
onSubmit = { this._onSubmit }
titleKey = 'dialog.e2eeTitle'
width = 'small'>
<div className = 'e2ee-destription'>
<div id = 'e2ee-section'>
<p className = 'title'>
{ t('dialog.e2eeTitle') }
</p>
<p className = 'description'>
{ translateToHTML(t, 'dialog.e2eeDescription') }
</div>
</p>
{
!_everyoneSupportsE2EE
&& <div className = 'e2ee-warn'>
{ translateToHTML(t, 'dialog.e2eeWarning') }
</div>
&& <span className = 'warning'>
{ t('dialog.e2eeWarning') }
</span>
}
<TextField
autoFocus = { true }
compact = { true }
label = { t('dialog.e2eeLabel') }
name = 'e2eeKey'
onChange = { this._onKeyChange }
shouldFitContainer = { true }
type = 'password'
value = { this.state.key } />
</Dialog>);
<div className = 'key-field'>
<label>
{ t('dialog.e2eeLabel') }:
</label>
<input
disabled = { !editing }
name = 'e2eeKey'
onChange = { this._onKeyChange }
placeholder = { t('dialog.e2eeNoKey') }
ref = { this.fieldRef }
type = 'password'
value = { this.state.key } />
{ editing && <a onClick = { this._onSet }>
{ t('dialog.e2eeSet') }
</a> }
{ !editing && <a onClick = { this._onToggleSetKey }>
{ t('dialog.e2eeToggleSet') }
</a> }
</div>
</div>
);
}
_onKeyChange: (Object) => void;
@ -117,21 +137,38 @@ class E2EEDialog extends Component<Props, State> {
this.setState({ key: event.target.value.trim() });
}
_onSubmit: () => boolean;
_onSet: () => void;
/**
* Dispatches an action to update the E2EE key.
* Dispatches an action to set/unset the E2EE key.
*
* @private
* @returns {boolean}
* @returns {void}
*/
_onSubmit() {
_onSet() {
const { key } = this.state;
sendAnalytics(createE2EEEvent(`key.${key ? 'set' : 'unset'}`));
this.props.dispatch(setE2EEKey(key));
return true;
this.setState({
editing: false
});
}
_onToggleSetKey: () => void;
/**
* Sets the section into edit mode so then the user can set the key.
*
* @returns {void}
*/
_onToggleSetKey() {
this.setState({
editing: true
}, () => {
this.fieldRef.current.focus();
});
}
}
@ -152,4 +189,4 @@ function mapStateToProps(state) {
};
}
export default translate(connect(mapStateToProps)(E2EEDialog));
export default translate(connect(mapStateToProps)(E2EESection));

View File

@ -1,3 +1,2 @@
export { default as E2EEButton } from './E2EEButton';
export { default as E2EEDialog } from './E2EEDialog';
export { default as E2EESection } from './E2EESection';
export { default as E2EELabel } from './E2EELabel';

View File

@ -7,6 +7,7 @@ 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';
import { LobbySection } from '../../../lobby';
import Header from './Header';
@ -92,6 +93,8 @@ function SecurityDialog({
passwordNumberOfDigits = { _passwordNumberOfDigits }
setPassword = { setPassword }
setPasswordEditEnabled = { setPasswordEditEnabled } />
<div className = 'separator-line' />
<E2EESection />
</div>
</Dialog>
);

View File

@ -33,7 +33,6 @@ import { OverflowMenuItem } from '../../../base/toolbox';
import { getLocalVideoTrack, toggleScreensharing } from '../../../base/tracks';
import { VideoBlurButton } from '../../../blur';
import { ChatCounter, toggleChat } from '../../../chat';
import { E2EEButton } from '../../../e2ee';
import { SharedDocumentButton } from '../../../etherpad';
import { openFeedbackDialog } from '../../../feedback';
import { beginAddPeople } from '../../../invite';
@ -1009,10 +1008,6 @@ class Toolbox extends Component<Props, State> {
key = 'stats'
onClick = { this._onToolbarOpenSpeakerStats }
text = { t('toolbar.speakerStats') } />,
this._shouldShowButton('e2ee')
&& <E2EEButton
key = 'e2ee'
showLabel = { true } />,
this._shouldShowButton('feedback')
&& _feedbackConfigured
&& <OverflowMenuItem