feat(settings) removed openTwoButtonDialog from UI module and created react LogoutDialog component

modules/UI/util/MessageHandler.js

@@ -1,8 +1,5 @@
 /* global $, APP */
 
-import { jitsiLocalStorage } from '@jitsi/js-utils';
-import Logger from 'jitsi-meet-logger';
-
 import {
     NOTIFICATION_TIMEOUT,
     showErrorNotification,
@@ -10,223 +7,10 @@ import {
     showWarningNotification
 } from '../../../react/features/notifications';
 
-const logger = Logger.getLogger(__filename);
-
-/**
- * Currently displayed two button dialog.
- * @type {null}
- */
-let twoButtonDialog = null;
-
-/**
- * Generates html for dont show again checkbox.
- * @param {object} options options
- * @param {string} options.id the id of the checkbox.
- * @param {string} options.textKey the key for the text displayed next to
- * checkbox
- * @param {boolean} options.checked if true the checkbox is foing to be checked
- * by default.
- * @returns {string}
- */
-function generateDontShowCheckbox(options) {
-    if (!isDontShowAgainEnabled(options)) {
-        return '';
-    }
-
-    const checked
-        = options.checked === true ? 'checked' : '';
-
-
-    return `<br />
-        <label>
-            <input type='checkbox' ${checked} id='${options.id}' />
-            <span data-i18n='${options.textKey}'></span>
-        </label>`;
-}
-
-/**
- * Checks whether the dont show again checkbox was checked before.
- * @param {object} options - options for dont show again checkbox.
- * @param {string} options.id the id of the checkbox.
- * @param {string} options.localStorageKey the key for the local storage. if
- * not provided options.id will be used.
- * @returns {boolean} true if the dialog mustn't be displayed and
- * false otherwise.
- */
-function dontShowTheDialog(options) {
-    if (isDontShowAgainEnabled(options)) {
-        if (jitsiLocalStorage.getItem(options.localStorageKey || options.id)
-            === 'true') {
-            return true;
-        }
-    }
-
-    return false;
-}
-
-/**
- * Wraps the submit function to process the dont show again status and store
- * it.
- * @param {object} options - options for dont show again checkbox.
- * @param {string} options.id the id of the checkbox.
- * @param {Array} options.buttonValues The button values that will trigger
- * storing he checkbox value
- * @param {string} options.localStorageKey the key for the local storage. if
- * not provided options.id will be used.
- * @param {Function} submitFunction the submit function to be wrapped
- * @returns {Function} wrapped function
- */
-function dontShowAgainSubmitFunctionWrapper(options, submitFunction) {
-    if (isDontShowAgainEnabled(options)) {
-        return (...args) => {
-            logger.debug(args, options.buttonValues);
-
-            // args[1] is the value associated with the pressed button
-            if (!options.buttonValues || options.buttonValues.length === 0
-                || options.buttonValues.indexOf(args[1]) !== -1) {
-                const checkbox = $(`#${options.id}`);
-
-                if (checkbox.length) {
-                    jitsiLocalStorage.setItem(
-                        options.localStorageKey || options.id,
-                        checkbox.prop('checked'));
-                }
-            }
-            submitFunction(...args);
-        };
-    }
-
-    return submitFunction;
-
-}
-
-/**
- * Check whether dont show again checkbox is enabled or not.
- * @param {object} options - options for dont show again checkbox.
- * @returns {boolean} true if enabled and false if not.
- */
-function isDontShowAgainEnabled(options) {
-    return typeof options === 'object';
-}
-
 const messageHandler = {
     OK: 'dialog.OK',
     CANCEL: 'dialog.Cancel',
 
-    /**
-     * Shows a message to the user with two buttons: first is given as a
-     * parameter and the second is Cancel.
-     *
-     * @param titleKey the key for the title of the message
-     * @param msgKey the key for the message
-     * @param msgString the text of the message
-     * @param persistent boolean value which determines whether the message is
-     *        persistent or not
-     * @param leftButton the fist button's text
-     * @param submitFunction function to be called on submit
-     * @param loadedFunction function to be called after the prompt is fully
-     *        loaded
-     * @param closeFunction function to be called after the prompt is closed
-     * @param focus optional focus selector or button index to be focused after
-     *        the dialog is opened
-     * @param defaultButton index of default button which will be activated when
-     *        the user press 'enter'. Indexed from 0.
-     * @param {object} dontShowAgain - options for dont show again checkbox.
-     * @param {string} dontShowAgain.id the id of the checkbox.
-     * @param {string} dontShowAgain.textKey the key for the text displayed
-     * next to checkbox
-     * @param {boolean} dontShowAgain.checked if true the checkbox is foing to
-     * be checked
-     * @param {Array} dontShowAgain.buttonValues The button values that will
-     * trigger storing the checkbox value
-     * @param {string} dontShowAgain.localStorageKey the key for the local
-     * storage. if not provided dontShowAgain.id will be used.
-     * @return the prompt that was created, or null
-     */
-    openTwoButtonDialog(options) {
-        const {
-            titleKey,
-            msgKey,
-            msgString,
-            leftButtonKey,
-            submitFunction,
-            loadedFunction,
-            closeFunction,
-            focus,
-            size,
-            defaultButton,
-            wrapperClass,
-            dontShowAgain
-        } = options;
-
-        let { classes } = options;
-
-        if (twoButtonDialog) {
-            return null;
-        }
-
-        if (dontShowTheDialog(dontShowAgain)) {
-            // Maybe we should pass some parameters here? I'm not sure
-            // and currently we don't need any parameters.
-            submitFunction();
-
-            return null;
-        }
-
-        const buttons = [];
-
-        const leftButton = leftButtonKey
-            ? APP.translation.generateTranslationHTML(leftButtonKey)
-            : APP.translation.generateTranslationHTML('dialog.Submit');
-
-        buttons.push({ title: leftButton,
-            value: true });
-
-        const cancelButton
-            = APP.translation.generateTranslationHTML('dialog.Cancel');
-
-        buttons.push({ title: cancelButton,
-            value: false });
-
-        let message = msgString;
-
-        if (msgKey) {
-            message = APP.translation.generateTranslationHTML(msgKey);
-        }
-        message += generateDontShowCheckbox(dontShowAgain);
-        classes = classes || this._getDialogClasses(size);
-        if (wrapperClass) {
-            classes.prompt += ` ${wrapperClass}`;
-        }
-
-        twoButtonDialog = $.prompt(message, {
-            title: this._getFormattedTitleString(titleKey),
-            persistent: false,
-            buttons,
-            defaultButton,
-            focus,
-            loaded: loadedFunction,
-            promptspeed: 0,
-            classes,
-            submit: dontShowAgainSubmitFunctionWrapper(dontShowAgain,
-                (e, v, m, f) => { // eslint-disable-line max-params
-                    twoButtonDialog = null;
-                    if (v && submitFunction) {
-                        submitFunction(e, v, m, f);
-                    }
-                }),
-            close(e, v, m, f) { // eslint-disable-line max-params
-                twoButtonDialog = null;
-                if (closeFunction) {
-                    closeFunction(e, v, m, f);
-                }
-            }
-        });
-        APP.translation.translateElement(twoButtonDialog);
-
-        return $.prompt.getApi();
-    },
-
     /**
      * Returns the formatted title string.
      *

react/features/settings/actions.js

@@ -10,11 +10,22 @@ import {
     SET_AUDIO_SETTINGS_VISIBILITY,
     SET_VIDEO_SETTINGS_VISIBILITY
 } from './actionTypes';
-import { SettingsDialog } from './components';
+import { LogoutDialog, SettingsDialog } from './components';
 import { getMoreTabProps, getProfileTabProps } from './functions';
 
 declare var APP: Object;
 
+/**
+ * Opens {@code LogoutDialog}.
+ *
+ * @param {Function} onLogout - The event in {@code LogoutDialog} that should be
+ *  enabled on click.
+ * @returns {Function}
+ */
+export function openLogoutDialog(onLogout: Function) {
+    return openDialog(LogoutDialog, { onLogout });
+}
+
 /**
  * Opens {@code SettingsDialog}.
  *

react/features/settings/components/web/LogoutDialog.js

@@ -0,0 +1,48 @@
+// @flow
+
+import React from 'react';
+
+import { Dialog } from '../../../base/dialog';
+import { translate } from '../../../base/i18n';
+import { connect } from '../../../base/redux';
+
+/**
+ * The type of {@link LogoutDialog}'s React {@code Component} props.
+ */
+type Props = {
+
+    /**
+     * Logout handler.
+     */
+    onLogout: Function,
+
+    /**
+     * Function to be used to translate i18n labels.
+     */
+    t: Function
+};
+
+/**
+ * Implements the Logout dialog.
+ *
+ * @param {Object} props - The props of the component.
+ * @returns {React$Element}.
+ */
+function LogoutDialog(props: Props) {
+    const { onLogout, t } = props;
+
+    return (
+        <Dialog
+            hideCancelButton = { false }
+            okKey = { t('dialog.Yes') }
+            onSubmit = { onLogout }
+            titleKey = { t('dialog.logoutTitle') }
+            width = { 'small' }>
+            <div>
+                { t('dialog.logoutQuestion') }
+            </div>
+        </Dialog>
+    );
+}
+
+export default translate(connect()(LogoutDialog));

react/features/settings/components/web/ProfileTab.js

@@ -12,6 +12,7 @@ import {
 import { AbstractDialogTab } from '../../../base/dialog';
 import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
+import { openLogoutDialog } from '../../actions';
 
 declare var APP: Object;
 
@@ -138,23 +139,14 @@ class ProfileTab extends AbstractDialogTab<Props> {
         if (this.props.authLogin) {
             sendAnalytics(createProfilePanelButtonEvent('logout.button'));
 
-            APP.UI.messageHandler.openTwoButtonDialog({
-                leftButtonKey: 'dialog.Yes',
-                msgKey: 'dialog.logoutQuestion',
-                submitFunction(evt, yes) {
-                    if (yes) {
-                        APP.UI.emitEvent(UIEvents.LOGOUT);
-                    }
-                },
-                titleKey: 'dialog.logoutTitle'
-            });
+            APP.store.dispatch(openLogoutDialog(
+                () => APP.UI.emitEvent(UIEvents.LOGOUT)
+            ));
         } else {
             sendAnalytics(createProfilePanelButtonEvent('login.button'));
 
             APP.UI.emitEvent(UIEvents.AUTH_CLICKED);
         }
-
-        this.props.closeDialog();
     }
 
     /**

react/features/settings/components/web/index.js

@@ -1,3 +1,4 @@
+export { default as LogoutDialog } from './LogoutDialog';
 export { default as SettingsButton } from './SettingsButton';
 export { default as SettingsDialog } from './SettingsDialog';
 export { default as AudioSettingsPopup } from './audio/AudioSettingsPopup';