added CORS handling, added external API access toggle to settings UI and updated front end script

brain/App.inc.php

@@ -19,11 +19,14 @@ include "../brain/utility/Sorting.inc.php";
 include "../brain/utility/Setup.inc.php";
 include "../brain/utility/Maintenance.inc.php";
 include "../brain/utility/Mailer.inc.php";
+include "../brain/utility/HandleCors.inc.php";
 
 class App
 {
   public function __construct()
   {
+    // set up cors
+    new HandleCors();
     $app = AppFactory::create();
     $twig = Twig::create("../brain/views/");
     $app->add(TwigMiddleware::create($app, $twig));

brain/controller/DashControl.inc.php

@@ -37,6 +37,9 @@ class DashControl
               "lastBackup" => $updated->format("Y M D d"),
               "currentTheme" => $settings["global"]["theme"],
               "themes" => $themes,
+              "apiStatus" => isset($settings["global"]["externalAPI"])
+                ? $settings["global"]["externalAPI"]
+                : "false",
               "mailOption" => $settings["email"]["active"],
               "mailConfig" => $settings["email"],
               "status" => Session::active(),

brain/data/Settings.inc.php

@@ -38,6 +38,7 @@ class Settings
     $settings["global"]["private"] = $data["global"]["private"];
     $settings["global"]["renderOnSave"] = $data["global"]["renderOnSave"];
     $settings["global"]["theme"] = $data["global"]["theme"];
+    $settings["global"]["externalAPI"] = $data["global"]["externalAPI"];
 
     Member::updateData("handle", $data["member"]["handle"]);
     Member::updateData("email", $data["member"]["email"]);

brain/utility/HandleCors.inc.php

@@ -0,0 +1,51 @@
+<?php
+
+class handleCors
+{
+  public function __construct()
+  {
+    //check settings to see if external api access is allowed
+    $config = new Settings();
+    $settings = $config->getSettings();
+    if ($settings["global"]["externalAPI"]) {
+      //echo "API STATUS: " . $settings["global"]["externalAPI"];
+      if ($settings["global"]["externalAPI"] == "true") {
+        //echo "API ACCESS ACTIVE";
+        // checks to see if origin is set
+        if (isset($_SERVER["HTTP_ORIGIN"])) {
+          // You can decide if the origin in $_SERVER['HTTP_ORIGIN'] is something you want to allow, or as we do here, just allow all
+          header("Access-Control-Allow-Origin: {$_SERVER["HTTP_ORIGIN"]}");
+        } else {
+          //No HTTP_ORIGIN set, so we allow any. You can disallow if needed here
+          //never allow just any domain, so turn CORS off if no No HTTP_ORIGIN is set
+          //header("Access-Control-Allow-Origin: *");
+        }
+
+        header("Access-Control-Allow-Credentials: true");
+        header("Access-Control-Max-Age: 600"); // cache for 10 minutes
+
+        if ($_SERVER["REQUEST_METHOD"] == "OPTIONS") {
+          if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_METHOD"])) {
+            header(
+              "Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT"
+            );
+          } //Make sure you remove those you do not want to support
+
+          if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"])) {
+            header(
+              "Access-Control-Allow-Headers: {$_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"]}"
+            );
+          }
+
+          //Just exit with 200 OK with the above headers for OPTIONS method
+          exit(0);
+        }
+      } else {
+        //echo "API ACCESS ACTIVE";
+      }
+    } else {
+      //value doesn't exist, so whatevs
+      //echo "API ACCESS VALUE NOT PRESENT";
+    }
+  }
+}

brain/views/dash/settings.twig

@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block stylesheets %}
-	<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfdvcvb">
+	<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfdf">
 	{% endblock %}
 
 	{% block mainContent %}
@@ -115,6 +115,27 @@
 						  {{ include("dash/partials/mailforms.twig") }}
 						{% endapply %} 
 						<button id="send-mail">TEST MAIL</button>
+						<br  /><br  />
+						<label>API SETTINGS</label><br  />
+						<div id="settings-api">
+							{% if apiStatus is defined and apiStatus == "true" %}
+								<button id="api-access-toggle" title="allow external api" data-enabled="true">
+									<svg id="api-access-toggle" class="icons">
+										<use id="api-access-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>		
+									</svg>
+								</button>
+								<span id="api-status">EXTERNAL API ACCESS ENABLED</span>
+							{% else  %}
+								<button id="api-access-toggle" title="allow external api" data-enabled="false">
+									<svg id="api-access-toggle" class="icons">
+										<use id="api-access-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-landline"/>		
+									</svg>
+								</button>
+								<span id="api-status">EXTERNAL API ACCESS NOT ENABLED</span>
+							{% endif  %}
+							
+						</div>
+						
 					</div>
 				</div>
 				

public/assets/css/dash.css

@@ -2585,6 +2585,42 @@ svg.icons {
   display: none;
   visibility: hidden;
 }
+#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api {
+  background: #1D3040;
+  border-radius: 3px;
+  padding: 10px;
+}
+#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api span {
+  color: #EFEBE3 !important;
+  margin: -13px 0 0 5px;
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+  font-weight: bold;
+}
+#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button {
+  color: #EFEBE3;
+  border-radius: 3px;
+  width: 40px;
+  margin: 0;
+}
+#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button svg {
+  width: 25px;
+  height: 20px;
+  fill: #EFEBE3;
+}
+#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button[data-enabled=false] {
+  background: #b2cce5;
+}
+#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button[data-enabled=false] svg {
+  fill: #1D3040;
+}
+#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button[data-enabled=true] {
+  background: #fc6399;
+}
+#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button[data-enabled=true] svg {
+  fill: #EFEBE3;
+}
 
 @media only screen and (max-width: 480px) {
   #settings-actions {

public/index.php

@@ -1,4 +1,5 @@
 <?php
+
 require "../vendor/autoload.php";
 include "../brain/App.inc.php";
 new App();

src/com/actions/SettingsActions.js

@@ -7,30 +7,34 @@ export default class SettingsActions {
   // methods
   //--------------------------
   getInfo() {
-		let handle = document.getElementById('settings-handle').value;
+    let handle = document.getElementById("settings-handle").value;
-		let email = document.getElementById('settings-email').value;
+    let email = document.getElementById("settings-email").value;
-		let url = document.getElementById('settings-url').value;
+    let url = document.getElementById("settings-url").value;
-		let title = document.getElementById('settings-title').value;
+    let title = document.getElementById("settings-title").value;
-		let desc = document.getElementById('settings-desc').value;
+    let desc = document.getElementById("settings-desc").value;
     //let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
-		let render = document.getElementById('render-toggle').getAttribute('data-render');
+    let render = false; //document.getElementById("render-toggle").getAttribute("data-render");
-		let background = document.getElementById('background').src;
+    let background = document.getElementById("background").src;
-		let selected = '';
+    let selected = "";
-		let selects = document.querySelectorAll('.theme-select');
+    let selects = document.querySelectorAll(".theme-select");
-		let smtpDomain = document.getElementById('smtp-domain').value;
+    let smtpDomain = document.getElementById("smtp-domain").value;
-		let smtpEmail = document.getElementById('smtp-email').value;
+    let smtpEmail = document.getElementById("smtp-email").value;
-		let smtpPass = document.getElementById('smtp-pass').value;
+    let smtpPass = document.getElementById("smtp-pass").value;
-		let mgDomain = document.getElementById('mg-domain').value;
+    let mgDomain = document.getElementById("mg-domain").value;
-		let mgKey = document.getElementById('mg-key').value;
+    let mgKey = document.getElementById("mg-key").value;
-		let mailActive = '';
+    let mailActive = "";
-		let mailOptions = document.querySelectorAll('.mail-option');
+    let mailOptions = document.querySelectorAll(".mail-option");
+    let apiStatus = document
+      .getElementById("api-access-toggle")
+      .getAttribute("data-enabled");
     var i, count;
     for (i = 0, count = selects.length; i < count; i++) {
-			if (selects[i].getAttribute('data-enabled') == 'true') selected = selects[i].id;
+      if (selects[i].getAttribute("data-enabled") == "true")
+        selected = selects[i].id;
     }
 
     for (i = 0, count = mailOptions.length; i < count; i++) {
-			if (mailOptions[i].getAttribute('data-enabled') == 'true')
+      if (mailOptions[i].getAttribute("data-enabled") == "true")
         mailActive = mailOptions[i].id;
     }
     let settingsData = {
@@ -41,7 +45,8 @@ export default class SettingsActions {
         background: background,
         private: false,
         renderOnSave: render,
-				theme: selected
+        theme: selected,
+        externalAPI: apiStatus
       },
       member: { handle: handle, email: email },
       email: {

src/com/controllers/SettingsIndex.js

@@ -57,16 +57,21 @@ export default class SettingsIndex {
       },
       false
     );
+    //handle api access toggle
+    var apiButton = document.getElementById("api-access-toggle");
+    var apiStatus = document.getElementById("api-status");
+    apiButton.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (apiButton.getAttribute("data-enabled") == "false") {
+        apiButton.setAttribute("data-enabled", "true");
+        apiStatus.innerHTML = "EXTERNAL API ACCESS IS ENABLED";
+      } else {
+        apiButton.setAttribute("data-enabled", "false");
+        apiStatus.innerHTML = "EXTERNAL API ACCESS IS NOT ENABLED";
+      }
+    });
 
-    //handle privacy toggle
-    //document
-    //.getElementById('privacy-toggle')
-    //.addEventListener('click', e => this.togglePrivacy(e));
-    /*
-    document
-      .getElementById("render-toggle")
-      .addEventListener("click", (e) => this.toggleRender(e));
-    */
     document
       .getElementById("send-mail")
       .addEventListener("click", (e) => this.handleMailer(e));

src/libraries/FipamoAPI.js

@@ -27,7 +27,12 @@ export default class FipamoAPI {
   //--------------------------
   // constructor
   //--------------------------
-  constructor() {}
+  constructor(baseURL = null) {
+    this.baseURL = null;
+    if (baseURL) {
+      this.baseURL = baseURL;
+    }
+  }
   //--------------------------
   // methods
   //--------------------------
@@ -36,7 +41,7 @@ export default class FipamoAPI {
   login(data) {
     return new Promise((resolve, reject) => {
       this._request(
-        API_LOGIN,
+        this.baseURL ? this.baseURL + API_LOGIN : API_LOGIN,
         AUTH_STATUS,
         REQUEST_TYPE_POST,
         CONTENT_TYPE_JSON,
@@ -189,6 +194,12 @@ export default class FipamoAPI {
               "Content-type",
               "application/" + contentType
             );
+            /**
+            request.setRequestHeader(
+              "Access-Control-Allow-Origin",
+              self.baseURL
+            );
+            **/
             request.send(JSON.stringify(requestData));
             break;
           case CONTENT_TYPE_FORM:

src/styles/main/_settings.sass

@@ -189,6 +189,35 @@
                 div[data-enabled='false']
                     display: none
                     visibility: hidden
+                #settings-api
+                    background: $primary
+                    border-radius: 3px
+                    padding: 10px
+                    span 
+                        color: $white !important
+                        margin: -13px 0 0 5px
+                        position: relative
+                        vertical-align: middle
+                        display: inline-block
+                        font-weight: bold
+        
+                    button
+                        color: $white
+                        border-radius: 3px
+                        width: 40px
+                        margin: 0
+                        svg
+                            width: 25px
+                            height: 20px
+                            fill: $white
+                    button[data-enabled='false']
+                        background: $secondary
+                        svg
+                            fill: $primary
+                    button[data-enabled='true']
+                       background: $highlight
+                       svg
+                           fill: $white
                     
 // responsive                    
 @media only screen and (max-width: 480px)