Illegal report by react (#3415)

* illegal report

1, add illegal report at shared file page
2, list all illegal reports at admin page

* add ENABLE_SHARE_LINK_REPORT_ILLEGAL setting

* UserRateThrottle -> AnonRateThrottle

* use to_python_boolean

* frontend by React

* remove illegal report dialog in shared dir view

* add migrations dir

* add illegal_reports migrations

* rename illegal to abuse in api

* rename illegal to abuse in test

* rename illegal to abuse in share file view

* rename illegal to abuse in react

* rename illegal to abuse in Backbone

* add enableShareLinkReportAbuse in templates

* add ReportAbuse

* update ReportAbuse

* update ReportAbuse urls

* update ReportAbuse api-js

* sysadmin_react_app.html

* sysadmin.py

* fix

* fix

* fix

* can not abuse own file

* Contact Information is required.

* fix review

* remove repo icon

frontend/src/components/shared-file-view/shared-file-view.js

@@ -5,6 +5,7 @@ import { gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle
 import { Button } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import SaveSharedFileDialog from '../dialog/save-shared-file-dialog';
+import AddAbuseReportDialog from '../../components/dialog/add-abuse-report-dialog';
 import toaster from '../toast';
 import watermark from 'watermark-dom';
 
@@ -15,14 +16,16 @@ const propTypes = {
 };
 
 let loginUser = window.app.pageOptions.name;
-const { repoID, sharedToken, trafficOverLimit, fileName, fileSize, sharedBy, siteName, enableWatermark, canDownload, zipped, filePath } = window.shared.pageOptions;
+let contactEmail = window.app.pageOptions.contactEmail;
+const { repoID, sharedToken, trafficOverLimit, fileName, fileSize, sharedBy, siteName, enableWatermark, canDownload, zipped, filePath, enableShareLinkReportAbuse } = window.shared.pageOptions;
 
 class SharedFileView extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      showSaveSharedFileDialog: false
+      showSaveSharedFileDialog: false,
+      isAddAbuseReportDialogOpen: false
     };
   }
 
@@ -44,6 +47,12 @@ class SharedFileView extends React.Component {
     });
   }
 
+  toggleAddAbuseReportDialog = () => {
+    this.setState({
+      isAddAbuseReportDialogOpen: !this.state.isAddAbuseReportDialogOpen
+    });
+  }
+
   componentDidMount() {
     if (trafficOverLimit) {
       toaster.danger(gettext('File download is disabled: the share link traffic of owner is used up.'), {
@@ -106,18 +115,21 @@ class SharedFileView extends React.Component {
                 <p className="share-by ellipsis">{gettext('Shared by:')}{'  '}{sharedBy}</p>
               }
             </div>
-            {canDownload &&
-              <div className="float-right">
-                {(loginUser && loginUser !== sharedBy) &&
-                  <Button color="secondary" id="save"
-                    onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
-                  </Button>
-                }{' '}
-                {!trafficOverLimit &&
+            <div className="float-right">
+              {(canDownload && loginUser && (loginUser !== sharedBy)) &&
+                <Button color="secondary" id="save"
+                  onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
+                </Button>
+              }{' '}
+              {(canDownload && !trafficOverLimit) &&
                 <a href={`?${zipped ? 'p=' + encodeURIComponent(filePath) + '&' : ''}dl=1`} className="btn btn-success">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
-                }
-              </div>
-            }
+              }{' '}
+              {(enableShareLinkReportAbuse && (loginUser !== sharedBy)) &&
+                <Button
+                  onClick={this.toggleAddAbuseReportDialog}>{gettext('Report Abuse')}
+                </Button>
+              }
+            </div>
           </div>
           {this.props.content}
         </div>
@@ -129,6 +141,15 @@ class SharedFileView extends React.Component {
             handleSaveSharedFile={this.handleSaveSharedFile}
           />
         }
+        {(this.state.isAddAbuseReportDialogOpen && enableShareLinkReportAbuse) &&
+          <AddAbuseReportDialog
+            sharedToken={sharedToken}
+            filePath={filePath}
+            toggleAddAbuseReportDialog={this.toggleAddAbuseReportDialog}
+            isAddAbuseReportDialogOpen={this.state.isAddAbuseReportDialogOpen}
+            contactEmail={contactEmail}
+          />
+        }
       </div>
     );
   }