feat: Add security checks page

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>

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,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>

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 />} />

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.

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 || {} });
+  }
+}

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;
+  }
+}