ref: move e2ee field into security menu

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;
+        }
+    }
+}

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 */

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' ],

lang/main-el.json

@@ -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": "Θα πρέπει να εγκαταστήσετε την επέκτασή μας για διαμοιρασμό επιφάνειας εργασίας.",

lang/main-es.json

@@ -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.",

lang/main-esUS.json

@@ -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.",

lang/main-mr.json

@@ -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": "आपल्याला आमचा डेस्कटॉप सामायिकरण विस्तार स्थापित करणे आवश्यक आहे.",

lang/main-sl.json

@@ -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.",

lang/main-uk.json

@@ -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": "Вам потрібно встановити наше розширення для спільного доступу до стільниці.",

lang/main.json

@@ -193,10 +193,13 @@
         "dismiss": "Dismiss",
         "displayNameRequired": "Hi! What’s 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.",

react/features/e2ee/components/E2EEButton.js

@@ -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));

react/features/e2ee/components/E2EEDialog.js → 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<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));

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';

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 } />
+                <div className = 'separator-line' />
+                <E2EESection />
             </div>
         </Dialog>
     );

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<Props, State> {
                     key = 'stats'
                     onClick = { this._onToolbarOpenSpeakerStats }
                     text = { t('toolbar.speakerStats') } />,
-            this._shouldShowButton('e2ee')
-                && <E2EEButton
-                    key = 'e2ee'
-                    showLabel = { true } />,
             this._shouldShowButton('feedback')
                 && _feedbackConfigured
                 && <OverflowMenuItem