From 31dcd85c08c3f625b4950a353909c80347104114 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 22 May 2018 15:45:58 +0100 Subject: [PATCH 1/3] Add customisable cancel button to QuestionDialog --- src/components/views/dialogs/QuestionDialog.js | 1 + src/components/views/elements/DialogButtons.js | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/views/dialogs/QuestionDialog.js b/src/components/views/dialogs/QuestionDialog.js index 7e11677310..21d3a54bc2 100644 --- a/src/components/views/dialogs/QuestionDialog.js +++ b/src/components/views/dialogs/QuestionDialog.js @@ -67,6 +67,7 @@ export default React.createClass({ { this.props.description } - { _t("Cancel") } + { this.props.cancelButton || _t("Cancel") } ; } return ( From e602213806980f775e941a1b458fceb7212e962b Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 22 May 2018 15:47:05 +0100 Subject: [PATCH 2/3] Add concept of priority modal to modal manager --- src/Modal.js | 44 +++++++++++++++++++++++++++++++++----------- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/src/Modal.js b/src/Modal.js index 2565d5c73b..06a96824a7 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -81,7 +81,11 @@ class ModalManager { constructor() { this._counter = 0; - /** list of the modals we have stacked up, with the most recent at [0] */ + // The modal to prioritise over all others. If this is set, only show + // this modal. Remove all other modals from the stack when this modal + // is closed. + this._priorityModal = null; + // A list of the modals we have stacked up, with the most recent at [0] this._modals = [ /* { elem: React component for this dialog @@ -105,18 +109,18 @@ class ModalManager { return container; } - createTrackedDialog(analyticsAction, analyticsInfo, Element, props, className) { + createTrackedDialog(analyticsAction, analyticsInfo, ...rest) { Analytics.trackEvent('Modal', analyticsAction, analyticsInfo); - return this.createDialog(Element, props, className); + return this.createDialog(...rest); } - createDialog(Element, props, className) { - return this.createDialogAsync((cb) => {cb(Element);}, props, className); + createDialog(Element, ...rest) { + return this.createDialogAsync((cb) => {cb(Element);}, ...rest); } - createTrackedDialogAsync(analyticsAction, analyticsInfo, loader, props, className) { + createTrackedDialogAsync(analyticsAction, analyticsInfo, ...rest) { Analytics.trackEvent('Modal', analyticsAction, analyticsInfo); - return this.createDialogAsync(loader, props, className); + return this.createDialogAsync(...rest); } /** @@ -137,8 +141,13 @@ class ModalManager { * component. (We will also pass an 'onFinished' property.) * * @param {String} className CSS class to apply to the modal wrapper + * + * @param {boolean} isPriorityModal if true, this modal will be displayed regardless + * of other modals that are currently in the stack. + * Also, when closed, all modals will be removed + * from the stack. */ - createDialogAsync(loader, props, className) { + createDialogAsync(loader, props, className, isPriorityModal) { const self = this; const modal = {}; @@ -151,6 +160,14 @@ class ModalManager { if (i >= 0) { self._modals.splice(i, 1); } + + if (self._priorityModal === modal) { + self._priorityModal = null; + + // XXX: This is destructive + self._modals = []; + } + self._reRender(); }; @@ -167,7 +184,12 @@ class ModalManager { modal.onFinished = props ? props.onFinished : null; modal.className = className; - this._modals.unshift(modal); + if (isPriorityModal) { + // XXX: This is destructive + this._priorityModal = modal; + } else { + this._modals.unshift(modal); + } this._reRender(); return {close: closeDialog}; @@ -188,7 +210,7 @@ class ModalManager { } _reRender() { - if (this._modals.length == 0) { + if (this._modals.length == 0 && !this._priorityModal) { // If there is no modal to render, make all of Riot available // to screen reader users again dis.dispatch({ @@ -205,7 +227,7 @@ class ModalManager { action: 'aria_hide_main_app', }); - const modal = this._modals[0]; + const modal = this._priorityModal ? this._priorityModal : this._modals[0]; const dialog = (
From 658e88c30f5521c087f63be5b1e132522e92fdab Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 22 May 2018 15:47:31 +0100 Subject: [PATCH 3/3] Implement consent/terms and conditions dialog for /_matrix/consent flow --- src/components/structures/MatrixChat.js | 22 ++++++++++++++++++++++ src/i18n/strings/en_EN.json | 3 +++ 2 files changed, 25 insertions(+) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 91d5ee8970..96e721f7ca 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -1232,6 +1232,28 @@ export default React.createClass({ action: 'logout', }); }); + cli.on('no_consent', function(message, consentUri) { + const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); + Modal.createTrackedDialog('No Consent Dialog', '', QuestionDialog, { + title: _t('Terms and Conditions'), + description:
+

{ _t( + 'To continue using the %(homeserverDomain)s homeserver ' + + 'you must review and agree to our terms and conditions.', + { homeserverDomain: cli.getDomain() }, + ) } +

+
, + button: _t('Review terms and conditions'), + cancelButton: _t('Dismiss'), + onFinished: (confirmed) => { + if (confirmed) { + window.open(consentUri, '_blank'); + } + }, + }, null, true); + }); + cli.on("accountData", function(ev) { if (ev.getType() === 'im.vector.web.settings') { if (ev.getContent() && ev.getContent().theme) { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 239b45c32e..f3e3d6b097 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -943,6 +943,9 @@ "Failed to leave room": "Failed to leave room", "Signed Out": "Signed Out", "For security, this session has been signed out. Please sign in again.": "For security, this session has been signed out. Please sign in again.", + "Terms and Conditions": "Terms and Conditions", + "To continue using the %(homeserverDomain)s homeserver you must review and agree to our terms and conditions.": "To continue using the %(homeserverDomain)s homeserver you must review and agree to our terms and conditions.", + "Review terms and conditions": "Review terms and conditions", "Old cryptography data detected": "Old cryptography data detected", "Data from an older version of Riot has been detected. This will have caused end-to-end cryptography to malfunction in the older version. End-to-end encrypted messages exchanged recently whilst using the older version may not be decryptable in this version. This may also cause messages exchanged with this version to fail. If you experience problems, log out and back in again. To retain message history, export and re-import your keys.": "Data from an older version of Riot has been detected. This will have caused end-to-end cryptography to malfunction in the older version. End-to-end encrypted messages exchanged recently whilst using the older version may not be decryptable in this version. This may also cause messages exchanged with this version to fail. If you experience problems, log out and back in again. To retain message history, export and re-import your keys.", "Logout": "Logout",