feat: Add security checks page (#2491)

Author: dblythy

README.md

@@ -540,6 +540,24 @@ var dashboard = new ParseDashboard({
 });
 ```
 
+## Security Checks
+
+You can view the security status of your Parse Server by enabling the dashboard option `enableSecurityChecks`, and visiting App Settings > Security.
+
+```javascript
+const dashboard = new ParseDashboard({
+  "apps": [
+    {
+      "serverURL": "http://localhost:1337/parse",
+      "appId": "myAppId",
+      "masterKey": "myMasterKey",
+      "appName": "MyApp"
+      "enableSecurityChecks": true
+    }
+  ],
+});
+```
+
 
 
 ### Configuring Basic Authentication

src/components/Field/Field.react.js

@@ -26,7 +26,7 @@ const Field = ({ label, input, labelWidth = 50, labelPadding, height, className
       <div className={styles.left} style={{ width: labelWidth + '% ', height: height }}>
         {label}
       </div>
-      <div className={styles.right} style={{ marginLeft: labelWidth + '%', height: height }}>
+      <div className={styles.right} style={{ height: height }}>
         {input}
       </div>
     </div>

src/components/Field/Field.scss

@@ -14,6 +14,7 @@
   border-width: 1px 1px 0 1px;
   min-height: 80px;
   background: white;
+  display: flex;
 
   &:last-of-type {
     border-bottom-width: 1px;
@@ -25,16 +26,8 @@
 }
 
 .left {
-  position: absolute;
-  left: 0;
-  height: 100%;
-}
-
-.centered {
-  @include transform(translateY(-50%));
-  position: absolute;
-  width: 100%;
-  top: 50%;
+  display: flex;
+  align-items: center;
 }
 
 .right {
@@ -46,6 +39,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  flex: 1
 }
 
 

src/components/Label/Label.react.js

@@ -15,8 +15,7 @@ const Label = props => {
   return (
     <div
       className={[styles.label, fieldStyles.centered].join(' ')}
-      style={{ padding: '0 ' + padding }}
-    >
+      style={{ padding: '0 ' + padding, ...props.style }}>
       <div className={styles.text}>{props.text}</div>
       {props.description ? <div className={styles.description}>{props.description}</div> : null}
     </div>

src/dashboard/Dashboard.js

@@ -52,6 +52,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import Playground from './Data/Playground/Playground.react';
 import DashboardSettings from './Settings/DashboardSettings/DashboardSettings.react';
+import Security           from './Settings/Security/Security.react';
 
 const ShowSchemaOverview = false; //In progress features. Change false to true to work on this feature.
 
@@ -213,13 +214,14 @@ export default class Dashboard extends React.Component {
 
     const SettingsRoute = (
       <Route element={<SettingsData />}>
-        <Route path="dashboard" element={<DashboardSettings />} />
-        <Route path="general" element={<GeneralSettings />} />
-        <Route path="keys" element={<SecuritySettings />} />
-        <Route path="users" element={<UsersSettings />} />
-        <Route path="push" element={<PushSettings />} />
-        <Route path="hosting" element={<HostingSettings />} />
-        <Route index element={<Navigate replace to="dashboard" />} />
+        <Route path='dashboard' element={<DashboardSettings />} />
+        <Route path='security' element={<Security />} />
+        <Route path='general' element={<GeneralSettings />} />
+        <Route path='keys' element={<SecuritySettings />} />
+        <Route path='users' element={<UsersSettings />} />
+        <Route path='push' element={<PushSettings />} />
+        <Route path='hosting' element={<HostingSettings />} />
+        <Route index element={<Navigate replace to='dashboard' />} />
       </Route>
     );
 

src/dashboard/DashboardView.react.js

@@ -195,12 +195,17 @@ export default class DashboardView extends React.Component {
     }
     */
 
-    const settingsSections = [
-      {
-        name: 'Dashboard',
-        link: '/settings/dashboard',
-      },
-    ];
+    const settingsSections = [{
+      name: 'Dashboard',
+      link: '/settings/dashboard'
+    }];
+
+    if (this.context.enableSecurityChecks) {
+      settingsSections.push({
+        name: 'Security',
+        link: '/settings/security',
+      })
+    }
 
     // Settings - nothing remotely like this in parse-server yet. Maybe it will arrive soon.
     /*

src/dashboard/Settings/Security/Security.react.js

@@ -0,0 +1,125 @@
+import TableView from 'dashboard/TableView.react';
+import Button from 'components/Button/Button.react';
+import EmptyState from 'components/EmptyState/EmptyState.react';
+import React from 'react';
+import Toolbar from 'components/Toolbar/Toolbar.react';
+import styles from './Security.scss';
+import Parse from 'parse';
+import TableHeader from 'components/Table/TableHeader.react';
+
+export default class Security extends TableView {
+  constructor() {
+    super();
+    this.section = 'App Settings';
+    this.subsection = 'Security';
+    this.state = {
+      loading: false,
+      data: {},
+      error: '',
+    };
+  }
+
+  componentWillMount() {
+    this.reload();
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (this.context !== nextContext) {
+      this.reload();
+    }
+  }
+
+  renderToolbar() {
+    return (
+      <Toolbar section="Settings" subsection="Security">
+        <Button color="white" value="Reload" onClick={() => this.reload()} />
+      </Toolbar>
+    );
+  }
+
+  renderRow(security) {
+    return (
+      <tr key={JSON.stringify(security)}>
+        <td className={styles.tableData} style={security.header ? {fontWeight: 'bold'} : {}}  width={'20%'}>
+          {security.check}
+        </td>
+        <td className={styles.tableData} width={'5%'}>
+          {security.i !== undefined ? '' : (security.status === 'success' ? '✅' : '❌')}
+        </td>
+        <td className={styles.tableData} width={'37.5%'}>
+          {security.issue}
+        </td>
+        <td className={styles.tableData}  width={'37.5%'}>
+          {security.solution}
+        </td>
+      </tr>
+    );
+  }
+
+  renderHeaders() {
+    return [
+      <TableHeader width={20} key="Check">
+        Check
+      </TableHeader>,
+      <TableHeader width={5} key="Status">
+        Status
+      </TableHeader>,
+      <TableHeader width={37.5} key="Issue">
+        Issue
+      </TableHeader>,
+      <TableHeader width={37.5} key="Solution">
+        Solution
+      </TableHeader>,
+    ];
+  }
+
+  renderEmpty() {
+    return <EmptyState title="Security" description={<span>{this.state.error}</span>} icon="gears" cta="Reload" action={() => this.reload()} />;
+  }
+
+  tableData() {
+    const data = [];
+    if (this.state.data.state) {
+      data.push({
+        check: 'Overall status',
+        status: this.state.data.state,
+        header: true
+      }),
+      data.push({i: -1})
+    }
+    for (let i = 0; i < this.state.data?.groups?.length; i++) {
+      const group = this.state.data.groups[i]
+      data.push({
+        check: group.name,
+        status: group.state,
+        issue: '',
+        solution: '',
+        header: true
+      });
+      for (const check of group.checks) {
+        data.push({
+          check: check.title,
+          status: check.state,
+          issue: check.warning,
+          solution: check.solution,
+        });
+      }
+      if (i !== this.state.data.groups.length - 1) {
+        data.push({i});
+      }
+    }
+    return data;
+  }
+
+  async reload() {
+    if (!this.context.enableSecurityChecks) {
+      this.setState({ error: 'Enable Dashboard option `enableSecurityChecks` to run security check.' });
+      return;
+    }
+    this.setState({ loading: true });
+    const result = await Parse._request('GET', 'security', {}, { useMasterKey: true }).catch((e) => {
+      this.setState({ error: e?.message || e });
+    });
+    this.setState({ loading: false, data: result?.report || {} });
+  }
+}

src/dashboard/Settings/Security/Security.scss

@@ -0,0 +1,4 @@
+ @import 'stylesheets/globals.scss';
+.tableData {
+  white-space: normal !important;
+}

src/lib/ParseApp.js

@@ -48,6 +48,7 @@ export default class ParseApp {
     columnPreference,
     scripts,
     classPreference,
+    enableSecurityChecks
   }) {
     this.name = appName;
     this.createdAt = created_at ? new Date(created_at) : new Date();
@@ -75,6 +76,7 @@ export default class ParseApp {
     this.graphQLServerURL = graphQLServerURL;
     this.columnPreference = columnPreference;
     this.scripts = scripts;
+    this.enableSecurityChecks = !!enableSecurityChecks;
 
     if (!supportedPushLocales) {
       console.warn(