From a60a2327f82b1d63ba400f4a74a7e19ee8db8256 Mon Sep 17 00:00:00 2001
From: dblythy <daniel-blyth@live.com.au>
Date: Thu, 29 Jun 2023 18:10:54 +1000
Subject: [PATCH 1/5] feat: add security checks page

---
 src/components/Field/Field.react.js           |   2 +-
 src/components/Field/Field.scss               |  14 +--
 src/components/Label/Label.react.js           |   2 +-
 src/dashboard/Dashboard.js                    |   2 +
 src/dashboard/DashboardView.react.js          |   3 +
 .../Settings/Security/Security.react.js       | 108 ++++++++++++++++++
 src/dashboard/Settings/Security/Security.scss |  15 +++
 7 files changed, 134 insertions(+), 12 deletions(-)
 create mode 100644 src/dashboard/Settings/Security/Security.react.js
 create mode 100644 src/dashboard/Settings/Security/Security.scss

diff --git a/src/components/Field/Field.react.js b/src/components/Field/Field.react.js
index 53706bd2b9..d4faf6d5eb 100644
--- a/src/components/Field/Field.react.js
+++ b/src/components/Field/Field.react.js
@@ -26,7 +26,7 @@ let 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>
diff --git a/src/components/Field/Field.scss b/src/components/Field/Field.scss
index 116a490828..2978470710 100644
--- a/src/components/Field/Field.scss
+++ b/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
 }
 
 
diff --git a/src/components/Label/Label.react.js b/src/components/Label/Label.react.js
index efc32129f2..88b2aeb204 100644
--- a/src/components/Label/Label.react.js
+++ b/src/components/Label/Label.react.js
@@ -15,7 +15,7 @@ let 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>
diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js
index 516133dead..f74461c0bd 100644
--- a/src/dashboard/Dashboard.js
+++ b/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.
 
@@ -201,6 +202,7 @@ export default class Dashboard extends React.Component {
     const SettingsRoute = (
       <Route element={<SettingsData />}>
         <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 />} />
diff --git a/src/dashboard/DashboardView.react.js b/src/dashboard/DashboardView.react.js
index b224ac6778..6ded0c57f4 100644
--- a/src/dashboard/DashboardView.react.js
+++ b/src/dashboard/DashboardView.react.js
@@ -201,6 +201,9 @@ export default class DashboardView extends React.Component {
     const settingsSections = [{
       name: 'Dashboard',
       link: '/settings/dashboard'
+    }, {
+      name: 'Security',
+      link: '/settings/security',
     }];
 
     // Settings - nothing remotely like this in parse-server yet. Maybe it will arrive soon.
diff --git a/src/dashboard/Settings/Security/Security.react.js b/src/dashboard/Settings/Security/Security.react.js
new file mode 100644
index 0000000000..0becd09246
--- /dev/null
+++ b/src/dashboard/Settings/Security/Security.react.js
@@ -0,0 +1,108 @@
+import DashboardView from 'dashboard/DashboardView.react';
+import Button from 'components/Button/Button.react';
+import EmptyState from 'components/EmptyState/EmptyState.react';
+import Label from 'components/Label/Label.react';
+import React from 'react';
+import Toolbar from 'components/Toolbar/Toolbar.react';
+import LoaderContainer from 'components/LoaderContainer/LoaderContainer.react';
+import styles from './Security.scss';
+import Field from 'components/Field/Field.react';
+import Fieldset from 'components/Fieldset/Fieldset.react';
+import Parse from 'parse';
+
+export default class Security extends DashboardView {
+  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>
+    );
+  }
+
+  renderDiv() {
+    if (this.state.error) {
+      return <EmptyState title="Security" description={<span>{this.state.error}</span>} icon="gears" cta="Reload" action={() => this.reload()} />;
+    }
+    if (this.state.loading) {
+      return (
+        <LoaderContainer loading={this.state.loading}>
+          <div style={{ minHeight: '100vh' }} className={styles.content} />
+        </LoaderContainer>
+      );
+    }
+    return (
+      <div>
+        <Fieldset legend="Result">
+          <Field labelWidth={30} label={<Label text="Status" />} input={<Label text={this.state.data.state} style={{ color: this.state.data.state === 'fail' ? 'red' : 'green' }} />} />
+          <Field labelWidth={30} label={<Label text="Version" />} input={<Label text={this.state.data.version} />} />
+        </Fieldset>
+        {this.state.data.groups &&
+          this.state.data.groups.map((check) => (
+            <Fieldset legend={check.name} key={JSON.stringify(check)}>
+              <Field labelWidth={30} label={<Label text="Status" />} input={<Label text={check.state} style={{ color: check.state === 'fail' ? 'red' : '' }} />} />
+              {check.checks.map((subCheck) => (
+                <Field
+                  key={JSON.stringify(subCheck)}
+                  label={<Label text={subCheck.title} />}
+                  labelWidth={30}
+                  input={
+                    <Label
+                      text={
+                        <div className={styles.state} style={{ color: subCheck.state === 'fail' ? 'red' : 'green' }}>
+                          {subCheck.state}
+                        </div>
+                      }
+                      description={
+                        <div className={styles.result}>
+                          <div>{subCheck.warning}</div>
+                          <Label text={subCheck.solution} />
+                        </div>
+                      }
+                    />
+                  }
+                />
+              ))}
+            </Fieldset>
+          ))}
+      </div>
+    );
+  }
+
+  renderContent() {
+    return (
+      <div className={styles.content}>
+        {this.renderToolbar()}
+        {this.renderDiv()}
+      </div>
+    );
+  }
+
+  async reload() {
+    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 || {} });
+  }
+}
diff --git a/src/dashboard/Settings/Security/Security.scss b/src/dashboard/Settings/Security/Security.scss
new file mode 100644
index 0000000000..c5deb9fd2a
--- /dev/null
+++ b/src/dashboard/Settings/Security/Security.scss
@@ -0,0 +1,15 @@
+ @import 'stylesheets/globals.scss';
+.content {
+  padding: 120px 0px;
+}
+.state {
+  text-align: center;
+  margin: 10px;
+}
+.result {
+  text-align: center;
+  margin: 14px;
+  div {
+    margin: 10px;
+  }
+}

From 9e04b18d237ee7fe45c5ceaefb29cbdb367457bc Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 29 Jun 2023 14:21:10 +0200
Subject: [PATCH 2/5] change headline

Signed-off-by: Manuel <5673677+mtrezza@users.noreply.github.com>
---
 src/dashboard/Settings/Security/Security.react.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dashboard/Settings/Security/Security.react.js b/src/dashboard/Settings/Security/Security.react.js
index 0becd09246..cda06e2fa8 100644
--- a/src/dashboard/Settings/Security/Security.react.js
+++ b/src/dashboard/Settings/Security/Security.react.js
@@ -53,7 +53,7 @@ export default class Security extends DashboardView {
     }
     return (
       <div>
-        <Fieldset legend="Result">
+        <Fieldset legend="Overall Security Status">
           <Field labelWidth={30} label={<Label text="Status" />} input={<Label text={this.state.data.state} style={{ color: this.state.data.state === 'fail' ? 'red' : 'green' }} />} />
           <Field labelWidth={30} label={<Label text="Version" />} input={<Label text={this.state.data.version} />} />
         </Fieldset>

From 25abe4c8e5a592e554f7272b96d9710b20f63ab0 Mon Sep 17 00:00:00 2001
From: dblythy <daniel-blyth@live.com.au>
Date: Mon, 17 Jul 2023 16:34:30 +1000
Subject: [PATCH 3/5] refactor

---
 .../Settings/Security/Security.react.js       | 129 ++++++++++--------
 src/dashboard/Settings/Security/Security.scss |  15 +-
 2 files changed, 73 insertions(+), 71 deletions(-)

diff --git a/src/dashboard/Settings/Security/Security.react.js b/src/dashboard/Settings/Security/Security.react.js
index cda06e2fa8..77ab9bd6c9 100644
--- a/src/dashboard/Settings/Security/Security.react.js
+++ b/src/dashboard/Settings/Security/Security.react.js
@@ -1,16 +1,13 @@
-import DashboardView from 'dashboard/DashboardView.react';
+import TableView from 'dashboard/TableView.react';
 import Button from 'components/Button/Button.react';
 import EmptyState from 'components/EmptyState/EmptyState.react';
-import Label from 'components/Label/Label.react';
 import React from 'react';
 import Toolbar from 'components/Toolbar/Toolbar.react';
-import LoaderContainer from 'components/LoaderContainer/LoaderContainer.react';
 import styles from './Security.scss';
-import Field from 'components/Field/Field.react';
-import Fieldset from 'components/Fieldset/Fieldset.react';
 import Parse from 'parse';
+import TableHeader from 'components/Table/TableHeader.react';
 
-export default class Security extends DashboardView {
+export default class Security extends TableView {
   constructor() {
     super();
     this.section = 'App Settings';
@@ -40,62 +37,78 @@ export default class Security extends DashboardView {
     );
   }
 
-  renderDiv() {
-    if (this.state.error) {
-      return <EmptyState title="Security" description={<span>{this.state.error}</span>} icon="gears" cta="Reload" action={() => this.reload()} />;
-    }
-    if (this.state.loading) {
-      return (
-        <LoaderContainer loading={this.state.loading}>
-          <div style={{ minHeight: '100vh' }} className={styles.content} />
-        </LoaderContainer>
-      );
-    }
+  renderRow(security) {
     return (
-      <div>
-        <Fieldset legend="Overall Security Status">
-          <Field labelWidth={30} label={<Label text="Status" />} input={<Label text={this.state.data.state} style={{ color: this.state.data.state === 'fail' ? 'red' : 'green' }} />} />
-          <Field labelWidth={30} label={<Label text="Version" />} input={<Label text={this.state.data.version} />} />
-        </Fieldset>
-        {this.state.data.groups &&
-          this.state.data.groups.map((check) => (
-            <Fieldset legend={check.name} key={JSON.stringify(check)}>
-              <Field labelWidth={30} label={<Label text="Status" />} input={<Label text={check.state} style={{ color: check.state === 'fail' ? 'red' : '' }} />} />
-              {check.checks.map((subCheck) => (
-                <Field
-                  key={JSON.stringify(subCheck)}
-                  label={<Label text={subCheck.title} />}
-                  labelWidth={30}
-                  input={
-                    <Label
-                      text={
-                        <div className={styles.state} style={{ color: subCheck.state === 'fail' ? 'red' : 'green' }}>
-                          {subCheck.state}
-                        </div>
-                      }
-                      description={
-                        <div className={styles.result}>
-                          <div>{subCheck.warning}</div>
-                          <Label text={subCheck.solution} />
-                        </div>
-                      }
-                    />
-                  }
-                />
-              ))}
-            </Fieldset>
-          ))}
-      </div>
+      <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>
     );
   }
 
-  renderContent() {
-    return (
-      <div className={styles.content}>
-        {this.renderToolbar()}
-        {this.renderDiv()}
-      </div>
-    );
+  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() {
diff --git a/src/dashboard/Settings/Security/Security.scss b/src/dashboard/Settings/Security/Security.scss
index c5deb9fd2a..568c7f5ad7 100644
--- a/src/dashboard/Settings/Security/Security.scss
+++ b/src/dashboard/Settings/Security/Security.scss
@@ -1,15 +1,4 @@
  @import 'stylesheets/globals.scss';
-.content {
-  padding: 120px 0px;
-}
-.state {
-  text-align: center;
-  margin: 10px;
-}
-.result {
-  text-align: center;
-  margin: 14px;
-  div {
-    margin: 10px;
-  }
+.tableData {
+  white-space: normal !important;
 }

From e33be5c429eb26deff55e895d2ab20d8cd40abe0 Mon Sep 17 00:00:00 2001
From: dblythy <daniel-blyth@live.com.au>
Date: Tue, 18 Jul 2023 10:53:06 +1000
Subject: [PATCH 4/5] add option

---
 README.md                                      | 18 ++++++++++++++++++
 src/dashboard/DashboardView.react.js           | 10 +++++++---
 .../Settings/Security/Security.react.js        |  4 ++++
 src/lib/ParseApp.js                            |  2 ++
 4 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c55beb58b9..5c439fbf62 100644
--- a/README.md
+++ b/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
diff --git a/src/dashboard/DashboardView.react.js b/src/dashboard/DashboardView.react.js
index 1f843475a9..00ceb39223 100644
--- a/src/dashboard/DashboardView.react.js
+++ b/src/dashboard/DashboardView.react.js
@@ -198,11 +198,15 @@ export default class DashboardView extends React.Component {
     const settingsSections = [{
       name: 'Dashboard',
       link: '/settings/dashboard'
-    }, {
-      name: 'Security',
-      link: '/settings/security',
     }];
 
+    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.
     /*
     if (features.generalSettings) {
diff --git a/src/dashboard/Settings/Security/Security.react.js b/src/dashboard/Settings/Security/Security.react.js
index 77ab9bd6c9..421a0b568f 100644
--- a/src/dashboard/Settings/Security/Security.react.js
+++ b/src/dashboard/Settings/Security/Security.react.js
@@ -112,6 +112,10 @@ export default class Security extends TableView {
   }
 
   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 });
diff --git a/src/lib/ParseApp.js b/src/lib/ParseApp.js
index 0a0434d158..fdbdc196aa 100644
--- a/src/lib/ParseApp.js
+++ b/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(

From 4e5ab837a8b8ff50acc4acbf0c683139389f3e95 Mon Sep 17 00:00:00 2001
From: dblythy <daniel-blyth@live.com.au>
Date: Tue, 18 Jul 2023 11:04:07 +1000
Subject: [PATCH 5/5] Update Security.react.js

---
 src/dashboard/Settings/Security/Security.react.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/dashboard/Settings/Security/Security.react.js b/src/dashboard/Settings/Security/Security.react.js
index 421a0b568f..19b0f3ad28 100644
--- a/src/dashboard/Settings/Security/Security.react.js
+++ b/src/dashboard/Settings/Security/Security.react.js
@@ -44,13 +44,13 @@ export default class Security extends TableView {
           {security.check}
         </td>
         <td className={styles.tableData} width={'5%'}>
-        {security.i !== undefined ? '' : (security.status === 'success' ? '✅' : '❌')}
+          {security.i !== undefined ? '' : (security.status === 'success' ? '✅' : '❌')}
         </td>
         <td className={styles.tableData} width={'37.5%'}>
-        {security.issue}
+          {security.issue}
         </td>
         <td className={styles.tableData}  width={'37.5%'}>
-        {security.solution}
+          {security.solution}
         </td>
       </tr>
     );