Merge pull request #2025 from matrix-org/luke/fix-status-bar-consent-error

Improve status bar errors (namely the consent error)

res/css/structures/_RoomStatusBar.scss

@@ -113,6 +113,8 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_connectionLostBar {
+    display: flex;
+
     margin-top: 19px;
     min-height: 58px;
 }
@@ -132,6 +134,7 @@ limitations under the License.
     color: $primary-fg-color;
     font-size: 13px;
     opacity: 0.5;
+    padding-bottom: 20px;
 }
 
 .mx_RoomStatusBar_resend_link {

src/components/structures/RoomStatusBar.js

@@ -308,7 +308,26 @@ module.exports = React.createClass({
                 },
             );
         } else {
-            if (
+            let consentError = null;
+            for (const m of unsentMessages) {
+                if (m.error && m.error.errcode === 'M_CONSENT_NOT_GIVEN') {
+                    consentError = m.error;
+                    break;
+                }
+            }
+            if (consentError) {
+                title = _t(
+                    "You can't send any messages until you review and agree to " +
+                    "<consentLink>our terms and conditions</consentLink>.",
+                    {},
+                    {
+                        'consentLink': (sub) =>
+                            <a href={consentError.data && consentError.data.consent_uri} target="_blank">
+                                { sub }
+                            </a>,
+                    },
+                );
+            } else if (
                 unsentMessages.length === 1 &&
                 unsentMessages[0].error &&
                 unsentMessages[0].error.data &&
@@ -332,11 +351,13 @@ module.exports = React.createClass({
 
         return <div className="mx_RoomStatusBar_connectionLostBar">
             <img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt={_t("Warning")} />
-            <div className="mx_RoomStatusBar_connectionLostBar_title">
-                { title }
-            </div>
-            <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                { content }
+            <div>
+                <div className="mx_RoomStatusBar_connectionLostBar_title">
+                    { title }
+                </div>
+                <div className="mx_RoomStatusBar_connectionLostBar_desc">
+                    { content }
+                </div>
             </div>
         </div>;
     },

src/i18n/strings/en_EN.json

@@ -1030,6 +1030,7 @@
     "Scroll to bottom of page": "Scroll to bottom of page",
     "Message not sent due to unknown devices being present": "Message not sent due to unknown devices being present",
     "<showDevicesText>Show devices</showDevicesText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.": "<showDevicesText>Show devices</showDevicesText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.",
+    "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.": "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.",
     "%(count)s of your messages have not been sent.|other": "Some of your messages have not been sent.",
     "%(count)s of your messages have not been sent.|one": "Your message was not sent.",
     "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|other": "<resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.",