Add way to report the content of a message

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/context_menus/MessageContextMenu.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector Ltd
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -116,6 +117,14 @@ module.exports = React.createClass({
         this.closeMenu();
     },
 
+    onReportEventClick: function() {
+        const ReportEventDialog = sdk.getComponent("dialogs.ReportEventDialog");
+        Modal.createTrackedDialog('Report Event', '', ReportEventDialog, {
+            mxEvent: this.props.mxEvent,
+        }, 'mx_Dialog_reportEvent');
+        this.closeMenu();
+    },
+
     onViewSourceClick: function() {
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Event Source', '', ViewSource, {
@@ -278,6 +287,8 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        const cli = MatrixClientPeg.get();
+        const me = cli.getUserId();
         const mxEvent = this.props.mxEvent;
         const eventStatus = mxEvent.status;
         const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
@@ -445,6 +456,15 @@ module.exports = React.createClass({
                 </div>;
         }
 
+        let reportEventButton;
+        if (mxEvent.getSender() !== me) {
+            reportEventButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onReportEventClick}>
+                    { _t('Report Content') }
+                </div>
+            );
+        }
+
         return (
             <div className="mx_MessageContextMenu">
                 { resendButton }
@@ -463,6 +483,7 @@ module.exports = React.createClass({
                 { externalURLButton }
                 { collapseReplyThread }
                 { e2eInfo }
+                { reportEventButton }
             </div>
         );
     },

src/components/views/dialogs/ReportEventDialog.js

@@ -0,0 +1,128 @@
+/*
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {PureComponent} from 'react';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import PropTypes from "prop-types";
+import {MatrixEvent} from "matrix-js-sdk";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+
+/*
+ * A dialog for reporting an event.
+ */
+export default class ReportEventDialog extends PureComponent {
+    static propTypes = {
+        mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            reason: "",
+            busy: false,
+            err: null,
+        };
+    }
+
+    _onReasonChange = ({target: {value: reason}}) => {
+        this.setState({ reason });
+    };
+
+    _onCancel = () => {
+        this.props.onFinished(false);
+    };
+
+    _onSubmit = async () => {
+        if (!this.state.reason || !this.state.reason.trim()) {
+            this.setState({
+                err: _t("Please fill why you're reporting."),
+            });
+            return;
+        }
+
+        this.setState({
+            busy: true,
+            err: null,
+        });
+
+        try {
+            const ev = this.props.mxEvent;
+            await MatrixClientPeg.get().reportEvent(ev.getRoomId(), ev.getId(), -100, this.state.reason.trim());
+            this.props.onFinished(true);
+        } catch (e) {
+            this.setState({
+                busy: false,
+                err: e.message,
+            });
+        }
+    };
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const Loader = sdk.getComponent('elements.Spinner');
+        const Field = sdk.getComponent('elements.Field');
+
+        let error = null;
+        if (this.state.err) {
+            error = <div className="error">
+                {this.state.err}
+            </div>;
+        }
+
+        let progress = null;
+        if (this.state.busy) {
+            progress = (
+                <div className="progress">
+                    <Loader />
+                </div>
+            );
+        }
+
+        return (
+            <BaseDialog
+                className="mx_BugReportDialog"
+                onFinished={this.props.onFinished}
+                title={_t('Report Content')}
+                contentId='mx_ReportEventDialog'
+            >
+                <div className="mx_ReportEventDialog" id="mx_ReportEventDialog">
+                    <Field
+                        id="mx_ReportEventDialog_reason"
+                        className="mx_ReportEventDialog_reason"
+                        element="textarea"
+                        label={_t("Reason")}
+                        rows={5}
+                        onChange={this._onReasonChange}
+                        value={this.state.reason}
+                        disabled={this.state.busy}
+                    />
+                    {progress}
+                    {error}
+                </div>
+                <DialogButtons primaryButton={_t("Send report")}
+                               onPrimaryButtonClick={this._onSubmit}
+                               focus={true}
+                               onCancel={this._onCancel}
+                               disabled={this.state.busy}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/i18n/strings/en_EN.json

@@ -1225,6 +1225,9 @@
     "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> if you can't find it.": "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> if you can't find it.",
     "Report bugs & give feedback": "Report bugs & give feedback",
     "Go back": "Go back",
+    "Please fill why you're reporting.": "Please fill why you're reporting.",
+    "Report Content": "Report Content",
+    "Send report": "Send report",
     "Room Settings - %(roomName)s": "Room Settings - %(roomName)s",
     "Failed to upgrade room": "Failed to upgrade room",
     "The room upgrade could not be completed": "The room upgrade could not be completed",