diff --git a/css/_e2ee.scss b/css/_e2ee.scss new file mode 100644 index 0000000000..9a33da3b44 --- /dev/null +++ b/css/_e2ee.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 8dded2d6f7..826fb9932a 100644 --- a/css/main.scss +++ b/css/main.scss @@ -98,5 +98,6 @@ $flagsImagePath: "../images/"; @import 'modals/invite/invite_more'; @import 'modals/security/security'; @import 'premeeting-screens'; +@import 'e2ee'; /* Modules END */ diff --git a/interface_config.js b/interface_config.js index 0a9ebfb7f3..0adbdc6506 100644 --- a/interface_config.js +++ b/interface_config.js @@ -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' ], diff --git a/lang/main-el.json b/lang/main-el.json index 43119be8a4..c67b026e57 100644 --- a/lang/main-el.json +++ b/lang/main-el.json @@ -178,7 +178,7 @@ "e2eeDescription": "

Η από άκρη σε άκρη κρυπτογράφηση είναι σήμερα σε ΠΕΙΡΑΜΑΤΙΚΟ στάδιο. Παρακαλώ δείτε αυτήν την ανάρτηση για λεπτομέρειες.


Παρακαλώ να έχετε κατά νου ότι η ενεργοποίηση της από άκρη σε άκρη κρυπτογράφησης θα απενεργοποιήσει από την πλευρά του διακομιστή υπηρεσίες όπως: καταγραφή, live streaming και συμμετοχή μέσω τηλεφώνου. Επίσης, να έχετε κατά νου ότι η συνάντηση θα λειτουργήσει μόνο για τους ανθρώπους που συνδέονται από φυλλομετρητές με υποστήριξη για insertable streams.

", "e2eeLabel": "Κλειδί", "e2eeTitle": "Από άκρη σε άκρη κρυπτογράφηση", - "e2eeWarning": "

ΠΡΟΕΙΔΟΠΟΊΗΣΗ: Δε φαίνεται να έχουν όλοι οι συμμετέχοντες στη συνάντηση αυτή υποστήριξη για από άκρη σε άκρη κρυπτογράφηση. Αν την ενεργοποιήσετε, δεν θα μπορέσουν να σας δουν ούτε να σας ακούσουν.

", + "e2eeWarning": "ΠΡΟΕΙΔΟΠΟΊΗΣΗ: Δε φαίνεται να έχουν όλοι οι συμμετέχοντες στη συνάντηση αυτή υποστήριξη για από άκρη σε άκρη κρυπτογράφηση. Αν την ενεργοποιήσετε, δεν θα μπορέσουν να σας δουν ούτε να σας ακούσουν.", "enterDisplayName": "Παρακαλώ εισάγετε το όνομά σας εδώ", "error": "Σφάλμα", "externalInstallationMsg": "Θα πρέπει να εγκαταστήσετε την επέκτασή μας για διαμοιρασμό επιφάνειας εργασίας.", diff --git a/lang/main-es.json b/lang/main-es.json index c797b1f8f8..d8a8aa6587 100644 --- a/lang/main-es.json +++ b/lang/main-es.json @@ -198,7 +198,7 @@ "e2eeDescription": "

El cifrado Extremo-a-Extremo es actualmente EXPERIMENTAL. Por favor leaeste artículo para más detalles.


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.

", "e2eeLabel": "Clave", "e2eeTitle": "Cifrado Extremo-a-Extremo", - "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.

", + "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.", diff --git a/lang/main-esUS.json b/lang/main-esUS.json index 35f5da1ecb..d0d08a488b 100644 --- a/lang/main-esUS.json +++ b/lang/main-esUS.json @@ -197,7 +197,7 @@ "e2eeDescription": "

El cifrado Extremo-a-Extremo es actualmente EXPERIMENTAL. Por favor leaeste artículo para más detalles.


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.

", "e2eeLabel": "Clave", "e2eeTitle": "Cifrado Extremo-a-Exremo", - "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.

", + "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.", diff --git a/lang/main-mr.json b/lang/main-mr.json index 994a7398a7..161b321c1c 100644 --- a/lang/main-mr.json +++ b/lang/main-mr.json @@ -178,7 +178,7 @@ "e2eeDescription": "

एंड-टू-एंड एनक्रिप्शन सध्या आहे प्रायोगिक. कृपया पहा this postतपशीलांसाठी.


कृपया लक्षात ठेवा की एंड-टू-एंड एन्क्रिप्शन चालू केल्याने सर्व्हर-साइड प्रदान सेवा प्रभावीपणे अक्षम होईल: रेकॉर्डिंग, थेट प्रवाह आणि फोन सहभाग. हे देखील लक्षात ठेवा की मीटिंग केवळ समाविष्ट करण्यायोग्य प्रवाहांसाठी समर्थन असलेल्या ब्राउझरमधून सामील झालेल्या लोकांसाठीच कार्य करेल.

", "e2eeLabel": "Key", "e2eeTitle": "एंड-टू-एंड एनक्रिप्शन", - "e2eeWarning": "

चेतावणी:या बैठकीतील सर्व सहभागींना एंड-टू-एंड एनक्रिप्शनसाठी समर्थन असल्याचे दिसत नाही. आपण सक्षम केल्यास ते आपल्याला पाहण्यास किंवा ऐकण्यास सक्षम राहणार नाहीत.

", + "e2eeWarning": "चेतावणी:या बैठकीतील सर्व सहभागींना एंड-टू-एंड एनक्रिप्शनसाठी समर्थन असल्याचे दिसत नाही. आपण सक्षम केल्यास ते आपल्याला पाहण्यास किंवा ऐकण्यास सक्षम राहणार नाहीत.", "enterDisplayName": "कृपया आपले नाव येथे प्रविष्ट करा", "error": "त्रुटी", "externalInstallationMsg": "आपल्याला आमचा डेस्कटॉप सामायिकरण विस्तार स्थापित करणे आवश्यक आहे.", diff --git a/lang/main-sl.json b/lang/main-sl.json index 7b8bd09331..b21a445e63 100644 --- a/lang/main-sl.json +++ b/lang/main-sl.json @@ -192,7 +192,7 @@ "e2eeDescription": "

End-to-End Encryption is currently EXPERIMENTAL. Please see this post 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", "e2eeTitle": "End-to-End Encryption", - "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.

", + "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.", diff --git a/lang/main-uk.json b/lang/main-uk.json index 991d7ff2ee..f59bad42eb 100644 --- a/lang/main-uk.json +++ b/lang/main-uk.json @@ -183,7 +183,7 @@ "e2eeDescription": "

Наскрізне шифрування зараз в режиміТЕСТУВАННЯ. Будь ласка, перегляньте цю публікацію для докладної інформації.


Зверніть увагу, що увімкнення наскрізного шифрування призведе до вимкнення таких служб на стороні сервера: запису, живої трансляції запису в онлайні та участі у конференції за допомогою вхідного телефонного дзвінка. Також, просимо звернути увагу, що приєднання до зустрічі в такому разі буде можливе лише з браузера, який має підтримувати потоки зі вставкою (insertable streams).

", "e2eeLabel": "Ключ", "e2eeTitle": "Наскрізне шифрування", - "e2eeWarning": "

УВАГА: Схоже, що не всі учасники цієї зустрічі мають підтримку технології наскрізного шифрування. Якщо ви увімкнете цю функцію, то вони не зможуть ані чути, ані бачити вас.

", + "e2eeWarning": "УВАГА: Схоже, що не всі учасники цієї зустрічі мають підтримку технології наскрізного шифрування. Якщо ви увімкнете цю функцію, то вони не зможуть ані чути, ані бачити вас.", "enterDisplayName": "Будь ласка, зазначте ваше ім'я", "error": "Помилка", "externalInstallationMsg": "Вам потрібно встановити наше розширення для спільного доступу до стільниці.", diff --git a/lang/main.json b/lang/main.json index d755579de3..449d79ac43 100644 --- a/lang/main.json +++ b/lang/main.json @@ -193,10 +193,13 @@ "dismiss": "Dismiss", "displayNameRequired": "Hi! What’s your name?", "done": "Done", - "e2eeDescription": "

End-to-End Encryption is currently EXPERIMENTAL. Please see this post 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.

", + "e2eeDescription": "End-to-End Encryption is currently EXPERIMENTAL. Please see this post 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": "

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.

", + "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.", diff --git a/react/features/e2ee/components/E2EEButton.js b/react/features/e2ee/components/E2EEButton.js deleted file mode 100644 index f6296e95cd..0000000000 --- a/react/features/e2ee/components/E2EEButton.js +++ /dev/null @@ -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 { - 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 ; - } - - /** - * 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)); diff --git a/react/features/e2ee/components/E2EEDialog.js b/react/features/e2ee/components/E2EESection.js similarity index 54% rename from react/features/e2ee/components/E2EEDialog.js rename to react/features/e2ee/components/E2EESection.js index 46cf1b412c..aca7236c58 100644 --- a/react/features/e2ee/components/E2EEDialog.js +++ b/react/features/e2ee/components/E2EESection.js @@ -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 { +class E2EESection extends Component { + fieldRef: Object; + /** * Initializes a new {@code E2EEDialog } instance. * @@ -59,13 +64,17 @@ class E2EEDialog extends Component { 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 { */ render() { const { _everyoneSupportsE2EE, t } = this.props; + const { editing } = this.state; return ( - -
+
+

+ { t('dialog.e2eeTitle') } +

+

{ translateToHTML(t, 'dialog.e2eeDescription') } -

+

{ !_everyoneSupportsE2EE - &&
- { translateToHTML(t, 'dialog.e2eeWarning') } -
+ && + { t('dialog.e2eeWarning') } + } - -
); +
+ + + { editing && + { t('dialog.e2eeSet') } + } + { !editing && + { t('dialog.e2eeToggleSet') } + } +
+ + ); } _onKeyChange: (Object) => void; @@ -117,21 +137,38 @@ class E2EEDialog extends Component { 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)); diff --git a/react/features/e2ee/components/index.web.js b/react/features/e2ee/components/index.web.js index 97d06650ab..743c617998 100644 --- a/react/features/e2ee/components/index.web.js +++ b/react/features/e2ee/components/index.web.js @@ -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'; diff --git a/react/features/security/components/security-dialog/SecurityDialog.js b/react/features/security/components/security-dialog/SecurityDialog.js index 9a092ffc6f..bcadeb5cfb 100644 --- a/react/features/security/components/security-dialog/SecurityDialog.js +++ b/react/features/security/components/security-dialog/SecurityDialog.js @@ -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 } /> +
+
); diff --git a/react/features/toolbox/components/web/Toolbox.js b/react/features/toolbox/components/web/Toolbox.js index 5aacc46c8a..2c4dfc3363 100644 --- a/react/features/toolbox/components/web/Toolbox.js +++ b/react/features/toolbox/components/web/Toolbox.js @@ -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 { key = 'stats' onClick = { this._onToolbarOpenSpeakerStats } text = { t('toolbar.speakerStats') } />, - this._shouldShowButton('e2ee') - && , this._shouldShowButton('feedback') && _feedbackConfigured &&