projects/fipamo
1
0
Fork 1
Code Issues 24 Pull requests 1 Projects 1 Releases 22 Packages Wiki Activity

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

Browse source
This commit is contained in:
Ro 2021-06-09 13:36:08 -07:00
parent 2f1f6678b7
commit 3df2720009
12 changed files with 246 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
brain/App.inc.php
View file

@ -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));

3
brain/controller/DashControl.inc.php
View file

@ -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(),

1
brain/data/Settings.inc.php
View file

@ -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"]);

51
brain/utility/HandleCors.inc.php Normal file
View file

@ -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";
}
}
}

23
brain/views/dash/settings.twig
View file

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

36
public/assets/css/dash.css
View file

@ -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 {

8
public/assets/scripts/dash.min.js vendored
View file

File diff suppressed because one or more lines are too long

1
public/index.php
View file

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

133
src/com/actions/SettingsActions.js
View file

@ -1,67 +1,72 @@
export default class SettingsActions {
//--------------------------
// constructor
//--------------------------
constructor() {}
//--------------------------
// methods
//--------------------------
getInfo() {
let handle = document.getElementById('settings-handle').value;
let email = document.getElementById('settings-email').value;
let url = document.getElementById('settings-url').value;
let title = document.getElementById('settings-title').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 background = document.getElementById('background').src;
let selected = '';
let selects = document.querySelectorAll('.theme-select');
let smtpDomain = document.getElementById('smtp-domain').value;
let smtpEmail = document.getElementById('smtp-email').value;
let smtpPass = document.getElementById('smtp-pass').value;
let mgDomain = document.getElementById('mg-domain').value;
let mgKey = document.getElementById('mg-key').value;
let mailActive = '';
let mailOptions = document.querySelectorAll('.mail-option');
var i, count;
for (i = 0, count = selects.length; i < count; i++) {
if (selects[i].getAttribute('data-enabled') == 'true') selected = selects[i].id;
}
//--------------------------
// constructor
//--------------------------
constructor() {}
//--------------------------
// methods
//--------------------------
getInfo() {
let handle = document.getElementById("settings-handle").value;
let email = document.getElementById("settings-email").value;
let url = document.getElementById("settings-url").value;
let title = document.getElementById("settings-title").value;
let desc = document.getElementById("settings-desc").value;
//let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
let render = false; //document.getElementById("render-toggle").getAttribute("data-render");
let background = document.getElementById("background").src;
let selected = "";
let selects = document.querySelectorAll(".theme-select");
let smtpDomain = document.getElementById("smtp-domain").value;
let smtpEmail = document.getElementById("smtp-email").value;
let smtpPass = document.getElementById("smtp-pass").value;
let mgDomain = document.getElementById("mg-domain").value;
let mgKey = document.getElementById("mg-key").value;
let mailActive = "";
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;
}
for (i = 0, count = mailOptions.length; i < count; i++) {
if (mailOptions[i].getAttribute('data-enabled') == 'true')
mailActive = mailOptions[i].id;
}
let settingsData = {
global: {
base_url: url,
title: title,
descriptions: desc,
background: background,
private: false,
renderOnSave: render,
theme: selected
},
member: { handle: handle, email: email },
email: {
active: mailActive,
smtp: {
domain: smtpDomain,
email: smtpEmail,
password: smtpPass
},
mailgun: {
domain: mgDomain,
key: mgKey
}
}
};
return new Promise(function (resolve) {
resolve(settingsData);
});
}
//--------------------------
// event handlers
//--------------------------
for (i = 0, count = mailOptions.length; i < count; i++) {
if (mailOptions[i].getAttribute("data-enabled") == "true")
mailActive = mailOptions[i].id;
}
let settingsData = {
global: {
base_url: url,
title: title,
descriptions: desc,
background: background,
private: false,
renderOnSave: render,
theme: selected,
externalAPI: apiStatus
},
member: { handle: handle, email: email },
email: {
active: mailActive,
smtp: {
domain: smtpDomain,
email: smtpEmail,
password: smtpPass
},
mailgun: {
domain: mgDomain,
key: mgKey
}
}
};
return new Promise(function (resolve) {
resolve(settingsData);
});
}
//--------------------------
// event handlers
//--------------------------
}

23
src/com/controllers/SettingsIndex.js
View file

@ -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));

15
src/libraries/FipamoAPI.js
View file

@ -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:

29
src/styles/main/_settings.sass
View file

@ -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)