PeachCloud
/
peach-workspace
3
2
Fork 1
Code Issues 17 Pull Requests Projects Releases Wiki Activity

Fix broken JS and tweak styling (CSS & HTML) #33

Merged
glyph merged 10 commits from js_and_style_fixes into main 2021-11-24 09:15:51 +00:00
Conversation 3 Commits 10 Files Changed 17 +137 -433
17 changed files with 137 additions and 433 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
peach-web/static/css/peachcloud.css
View File

@ -220,12 +220,18 @@ body {
} }
.capsule-container { .capsule-container {
margin-left: 2rem; margin-left: 1rem;
margin-right: 2rem; margin-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@media only screen and (min-width: 600px) {
.capsule-container {
margin-left: 0;
margin-right: 0;
}
}
/* /*
* CARDS * CARDS
*/ */
@ -235,6 +241,7 @@ body {
max-height: 90vh; max-height: 90vh;
position: relative; position: relative;
width: 100%; width: 100%;
margin-top: 1rem;
} }
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
@ -248,8 +255,6 @@ body {
.card-container { .card-container {
justify-content: center; justify-content: center;
padding: 0.5rem; padding: 0.5rem;
/* padding-top: 1rem; */
/* padding-bottom: 1rem; */
} }
.form-container { .form-container {
@ -560,6 +565,7 @@ html {
font-size: var(--font-size-6); font-size: var(--font-size-6);
margin-left: 2rem; margin-left: 2rem;
margin-right: 2rem; margin-right: 2rem;
margin-top: 1rem;
} }
/* /*

26
peach-web/static/js/change_password.js
View File

@ -1,16 +1,28 @@
/* /*
* behavioural layer for the `change_password.html.tera` template,
*/ behavioural layer for the `change_password.html.tera` template
- intercept button click for save (form submission of passwords)
- perform json api call
- update the dom
methods:
PEACH_AUTH.changePassword();
*/
var PEACH_AUTH = {};
// catch click of 'Save' button and make POST request // catch click of 'Save' button and make POST request
PEACH.add = function() { PEACH_AUTH.changePassword = function() {
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('submit', function(e) { document.body.addEventListener('submit', function(e) {
// prevent redirect on button press (default behavior) // prevent redirect on button press (default behavior)
e.preventDefault(); e.preventDefault();
// capture form data // capture form data
var formElement = document.querySelector("form"); var formElement = document.querySelector("form");
// create form data object from the wifiCreds form element // create form data object from the changePassword form element
var formData = new FormData(formElement); var formData = new FormData(formElement);
var object = {}; var object = {};
// assign values from form // assign values from form
@ -22,7 +34,7 @@ PEACH.add = function() {
var jsonData = JSON.stringify(object); var jsonData = JSON.stringify(object);
// write in-progress status message to ui // write in-progress status message to ui
PEACH.flashMsg("info", "Saving new password."); PEACH.flashMsg("info", "Saving new password.");
// send add_wifi POST request // send change_password POST request
fetch("/api/v1/admin/change_password", { fetch("/api/v1/admin/change_password", {
method: "post", method: "post",
headers: { headers: {
@ -41,5 +53,5 @@ PEACH.add = function() {
}); });
} }
var addInstance = PEACH; var changePassInstance = PEACH_AUTH;
addInstance.add(); changePassInstance.changePassword();

3
peach-web/static/js/common.js
View File

@ -43,5 +43,4 @@ PEACH.flashMsg = function(status, msg) {
} }
} }
var addInstance = PEACH; var commonInstance = PEACH;
addInstance.add();

55
peach-web/static/js/configure_dns.js
View File

@ -1,9 +1,9 @@
/* /*
behavioural layer for the `configure_dns.html.tera` template, behavioural layer for the `configure_dns.html.tera` template,
corresponding to the web route `/network/dns` corresponding to the web route `/settings/network/dns`
- intercept button click for add (form submission of credentials) - intercept button click for save (form submission of dns settings)
- perform json api call - perform json api call
- update the dom - update the dom
@ -12,14 +12,14 @@ corresponding to the web route `/network/dns`
var PEACH_DNS = {}; var PEACH_DNS = {};
// catch click of 'Add' button and make POST request // catch click of 'Add' button and make POST request
PEACH_DNS.add = function() { PEACH_DNS.configureDns = function() {
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('submit', function(e) { document.body.addEventListener('submit', function(e) {
// prevent redirect on button press (default behavior) // prevent redirect on button press (default behavior)
e.preventDefault(); e.preventDefault();
// capture form data // capture form data
var formElement = document.querySelector("form"); var formElement = document.querySelector("form");
// create form data object from the wifiCreds form element // create form data object from the configureDNS form element
var formData = new FormData(formElement); var formData = new FormData(formElement);
var object = {}; var object = {};
// set checkbox to false (the value is only passed to formData if it is "on") // set checkbox to false (the value is only passed to formData if it is "on")
@ -36,7 +36,7 @@ PEACH_DNS.add = function() {
console.log(object); console.log(object);
var jsonData = JSON.stringify(object); var jsonData = JSON.stringify(object);
// write in-progress status message to ui // write in-progress status message to ui
PEACH_DNS.flashMsg("info", "Saving new DNS configurations"); PEACH.flashMsg("info", "Saving new DNS configurations");
// send add_wifi POST request // send add_wifi POST request
fetch("/api/v1/network/dns/configure", { fetch("/api/v1/network/dns/configure", {
method: "post", method: "post",
@ -50,49 +50,14 @@ PEACH_DNS.add = function() {
}) })
.then( (jsonData) => { .then( (jsonData) => {
// write json response message to ui // write json response message to ui
PEACH_DNS.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
let statusIndicator = document.getElementById("dyndns-status-indicator"); let statusIndicator = document.getElementById("dyndns-status-indicator");
statusIndicator.remove(); // only remove the "dyndns-status-indicator" element if it exists
if (statusIndicator != null ) statusIndicator.remove();
}) })
}, false); }, false);
}); });
} }
// display a message by appending a paragraph element var configureDnsInstance = PEACH_DNS;
PEACH_DNS.flashMsg = function(status, msg) { configureDnsInstance.configureDns();
// set the class of the element according to status
var elementClass;
if (status === "success") {
elementClass = "capsule center-text flash-message font-success";
} else if (status === "info") {
elementClass = "capsule center-text flash-message font-info";
} else {
elementClass = "capsule center-text flash-message font-failure";
};
var flashElement = document.getElementById("flashMsg");
// if flashElement exists, update the class & text
if (flashElement) {
flashElement.className = elementClass;
flashElement.innerText = msg;
// if flashElement does not exist, create it, set id, class, text & append
} else {
// create new div for flash message
var flashDiv = document.createElement("DIV");
// set div attributes
flashDiv.id = "flashMsg";
flashDiv.className = elementClass;
// add json response message to flash message div
var flashMsg = document.createTextNode(msg);
flashDiv.appendChild(flashMsg);
// insert the flash message div below the button div
var buttonDiv = document.getElementById("buttonDiv");
// flashDiv will be added to the end since buttonDiv is the last
// child within the parent element (card-container div)
buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
}
}
var addInstance = PEACH_DNS;
addInstance.add();

40
peach-web/static/js/network_add.js
View File

@ -10,7 +10,6 @@ corresponding to the web route `/network/wifi/add`
methods: methods:
PEACH_NETWORK.add(); PEACH_NETWORK.add();
PEACH_NETWORK.flashMsg(status, msg);
*/ */
@ -34,7 +33,7 @@ PEACH_NETWORK.add = function() {
// perform json serialization // perform json serialization
var jsonData = JSON.stringify(object); var jsonData = JSON.stringify(object);
// write in-progress status message to ui // write in-progress status message to ui
PEACH_NETWORK.flashMsg("info", "Adding WiFi credentials..."); PEACH.flashMsg("info", "Adding WiFi credentials...");
// send add_wifi POST request // send add_wifi POST request
fetch("/api/v1/network/wifi", { fetch("/api/v1/network/wifi", {
method: "post", method: "post",
@ -48,46 +47,11 @@ PEACH_NETWORK.add = function() {
}) })
.then( (jsonData) => { .then( (jsonData) => {
// write json response message to ui // write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
}) })
}, false); }, false);
}); });
} }
// display a message by appending a paragraph element
PEACH_NETWORK.flashMsg = function(status, msg) {
// set the class of the element according to status
var elementClass;
if (status === "success") {
elementClass = "capsule center-text flash-message font-success";
} else if (status === "info") {
elementClass = "capsule center-text flash-message font-info";
} else {
elementClass = "capsule center-text flash-message font-failure";
};
var flashElement = document.getElementById("flashMsg");
// if flashElement exists, update the class & text
if (flashElement) {
flashElement.className = elementClass;
flashElement.innerText = msg;
// if flashElement does not exist, create it, set id, class, text & append
} else {
// create new div for flash message
var flashDiv = document.createElement("DIV");
// set div attributes
flashDiv.id = "flashMsg";
flashDiv.className = elementClass;
// add json response message to flash message div
var flashMsg = document.createTextNode(msg);
flashDiv.appendChild(flashMsg);
// insert the flash message div below the button div
var buttonDiv = document.getElementById("buttonDiv");
// flashDiv will be added to the end since buttonDiv is the last
// child within the parent element (card-container div)
buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
}
}
var addInstance = PEACH_NETWORK; var addInstance = PEACH_NETWORK;
addInstance.add(); addInstance.add();

128
peach-web/static/js/network_card.js
View File

@ -1,7 +1,7 @@
/* /*
behavioural layer for the `network_card.html.tera` template, behavioural layer for the `network_card.html.tera` template,
corresponding to the web route `/network` corresponding to the web route `/settings/network`
- intercept form submissions - intercept form submissions
- perform json api calls - perform json api calls
@ -11,10 +11,8 @@ methods:
PEACH_NETWORK.activateAp(); PEACH_NETWORK.activateAp();
PEACH_NETWORK.activateClient(); PEACH_NETWORK.activateClient();
PEACH_NETWORK.apOnline(); PEACH_NETWORK.apMode();
PEACH_NETWORK.clientOffline(); PEACH_NETWORK.clientMode();
PEACH_NETWORK.clientOnline();
PEACH_NETWORK.flashMsg(status, msg);
*/ */
@ -29,7 +27,7 @@ PEACH_NETWORK.activateAp = function() {
// prevent form submission (default behavior) // prevent form submission (default behavior)
e.preventDefault(); e.preventDefault();
// write in-progress status message to ui // write in-progress status message to ui
PEACH_NETWORK.flashMsg("info", "Deploying access point..."); PEACH.flashMsg("info", "Deploying access point...");
// send activate_ap POST request // send activate_ap POST request
fetch("/api/v1/network/activate_ap", { fetch("/api/v1/network/activate_ap", {
method: "post", method: "post",
@ -44,10 +42,10 @@ PEACH_NETWORK.activateAp = function() {
.then( (jsonData) => { .then( (jsonData) => {
console.log(jsonData.msg); console.log(jsonData.msg);
// write json response message to ui // write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
// if ap activation is successful, update the ui // if ap activation is successful, update the ui
if (jsonData.status === "success") { if (jsonData.status === "success") {
PEACH_NETWORK.apOnline(); PEACH_NETWORK.apMode();
} }
}) })
}, false); }, false);
@ -64,7 +62,7 @@ PEACH_NETWORK.activateClient = function() {
// prevent form submission (default behavior) // prevent form submission (default behavior)
e.preventDefault(); e.preventDefault();
// write in-progress status message to ui // write in-progress status message to ui
PEACH_NETWORK.flashMsg("info", "Enabling WiFi client..."); PEACH.flashMsg("info", "Enabling WiFi client...");
// send activate_ap POST request // send activate_ap POST request
fetch("/api/v1/network/activate_client", { fetch("/api/v1/network/activate_client", {
method: "post", method: "post",
@ -79,10 +77,10 @@ PEACH_NETWORK.activateClient = function() {
.then( (jsonData) => { .then( (jsonData) => {
console.log(jsonData.msg); console.log(jsonData.msg);
// write json response message to ui // write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
// if client activation is successful, update the ui // if client activation is successful, update the ui
if (jsonData.status === "success") { if (jsonData.status === "success") {
PEACH_NETWORK.clientOnline(); PEACH_NETWORK.clientMode();
} }
}) })
}, false); }, false);
@ -90,21 +88,12 @@ PEACH_NETWORK.activateClient = function() {
}); });
} }
// update ui for access point mode (status: online) // replace 'Deploy Access Point' button with 'Enable WiFi' button
PEACH_NETWORK.apOnline = function() { PEACH_NETWORK.apMode = function() {
console.log('Activating AP Mode');
// update network mode and status (icon & label)
let i = document.getElementById("netModeIcon");
i.className = "center icon icon-active";
i.src = "icons/router.svg";
let l = document.getElementById("netModeLabel");
l.textContent = "ONLINE";
// create Enable WiFi button and add it to button div // create Enable WiFi button and add it to button div
var wifiButton = document.createElement("A"); var wifiButton = document.createElement("A");
wifiButton.className = "button center"; wifiButton.className = "button center";
wifiButton.href = "/network/wifi/activate"; wifiButton.href = "/settings/network/wifi/activate";
wifiButton.id = "connectWifi"; wifiButton.id = "connectWifi";
var label = "Enable WiFi"; var label = "Enable WiFi";
var buttonText = document.createTextNode(label); var buttonText = document.createTextNode(label);
@ -114,88 +103,31 @@ PEACH_NETWORK.apOnline = function() {
let buttons = document.getElementById("buttons"); let buttons = document.getElementById("buttons");
buttons.appendChild(wifiButton); buttons.appendChild(wifiButton);
// remove the old 'Activate Access Point' button // remove the old 'Deploy Access Point' button
let apButton = document.getElementById("deployAccessPoint"); let apButton = document.getElementById("deployAccessPoint");
apButton.style = "display: none;"; apButton.remove();
} }
// update ui for wifi client mode (status: online) // replace 'Enable WiFi' button with 'Deploy Access Point' button
PEACH_NETWORK.clientOnline = function() { PEACH_NETWORK.clientMode = function() {
console.log('Activating Client Mode'); // create Deploy Access Point button and add it to button div
var apButton = document.createElement("A");
apButton.className = "button center";
apButton.href = "/settings/network/ap/activate";
apButton.id = "deployAccessPoint";
var label = "Deploy Access Point";
var buttonText = document.createTextNode(label);
apButton.appendChild(buttonText);
// update network mode and status (icon & label) // append the new button to the buttons div
let i = document.getElementById("netModeIcon"); let buttons = document.getElementById("buttons");
i.className = "center icon icon-active"; buttons.appendChild(apButton);
i.src = "icons/wifi.svg";
let l = document.getElementById("netModeLabel");
l.textContent = "ONLINE";
// TODO: think about updates for buttons (transition from ap mode) // remove the old 'Enable Wifi' button
} let wifiButton = document.getElementById("connectWifi");
wifiButton.remove();
// update ui for wifi client mode (status: offline)
PEACH_NETWORK.clientOffline = function() {
console.log('Activating Client Mode');
// update network mode and status (icon & label)
let i = document.getElementById("netModeIcon");
i.className = "center icon icon-inactive";
i.src = "icons/wifi.svg";
let l = document.getElementById("netModeLabel");
l.textContent = "OFFLINE";
// TODO: think about updates for buttons (transition from ap mode)
}
// display a message by appending a paragraph element
PEACH_NETWORK.flashMsg = function(status, msg) {
// set the class of the element according to status
var elementClass;
if (status === "success") {
elementClass = "capsule center-text flash-message font-success";
} else if (status === "info") {
elementClass = "capsule center-text flash-message font-info";
} else {
elementClass = "capsule center-text flash-message font-failure";
};
var flashElement = document.getElementById("flashMsg");
// if flashElement exists, update the class & text
if (flashElement) {
flashElement.className = elementClass;
flashElement.innerText = msg;
// if flashElement does not exist, create it, set id, class, text & append
} else {
// create new div for flash message
var flashDiv = document.createElement("DIV");
// set div attributes
flashDiv.id = "flashMsg";
flashDiv.className = elementClass;
// add json response message to flash message div
var flashMsg = document.createTextNode(msg);
flashDiv.appendChild(flashMsg);
// insert the flash message div above the three icon grid div
var gridDiv = document.getElementById("gridDiv");
gridDiv.parentNode.insertBefore(flashDiv, gridDiv);
}
} }
var networkInstance = PEACH_NETWORK; var networkInstance = PEACH_NETWORK;
networkInstance.activateAp(); networkInstance.activateAp();
networkInstance.activateClient(); networkInstance.activateClient();
/*
async function exampleFetch() {
const response = await fetch('/api/v1/network/state');
const myJson = await response.json();
//const jsonData = JSON.parse(myJson);
console.log(myJson.data.wlan0);
//var state = document.createElement("P");
//state.innerText = ""jsonData.wlan0;
//document.body.appendChild(state);
}
exampleFetch()
*/

50
peach-web/static/js/network_detail.js
View File

@ -1,7 +1,7 @@
/* /*
behavioural layer for the `network_detail.html.tera` template, behavioural layer for the `network_detail.html.tera` template,
corresponding to the web route `/network/wifi?<ssid>` corresponding to the web route `/settings/network/wifi?<ssid>`
- intercept button clicks for connect, disconnect and forget - intercept button clicks for connect, disconnect and forget
- perform json api call - perform json api call
@ -12,7 +12,6 @@ methods:
PEACH_NETWORK.connect(); PEACH_NETWORK.connect();
PEACH_NETWORK.disconnect(); PEACH_NETWORK.disconnect();
PEACH_NETWORK.forget(); PEACH_NETWORK.forget();
PEACH_NETWORK.flashMsg(status, msg);
*/ */
@ -33,7 +32,7 @@ PEACH_NETWORK.connect = function() {
// perform json serialization // perform json serialization
var jsonData = JSON.stringify(ssidData); var jsonData = JSON.stringify(ssidData);
// write in-progress status message to ui // write in-progress status message to ui
PEACH_NETWORK.flashMsg("info", "Connecting to access point..."); PEACH.flashMsg("info", "Connecting to access point...");
// send add_wifi POST request // send add_wifi POST request
fetch("/api/v1/network/wifi/connect", { fetch("/api/v1/network/wifi/connect", {
method: "post", method: "post",
@ -47,7 +46,7 @@ PEACH_NETWORK.connect = function() {
}) })
.then( (jsonData) => { .then( (jsonData) => {
// write json response message to ui // write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
}) })
}, false); }, false);
}; };
@ -69,7 +68,7 @@ PEACH_NETWORK.disconnect = function() {
// perform json serialization // perform json serialization
var jsonData = JSON.stringify(ssidData); var jsonData = JSON.stringify(ssidData);
// write in-progress status message to ui // write in-progress status message to ui
PEACH_NETWORK.flashMsg("info", "Disconnecting from access point..."); PEACH.flashMsg("info", "Disconnecting from access point...");
// send disconnect_wifi POST request // send disconnect_wifi POST request
fetch("/api/v1/network/wifi/disconnect", { fetch("/api/v1/network/wifi/disconnect", {
method: "post", method: "post",
@ -83,7 +82,7 @@ PEACH_NETWORK.disconnect = function() {
}) })
.then( (jsonData) => { .then( (jsonData) => {
// write json response message to ui // write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
}) })
}, false); }, false);
}; };
@ -105,7 +104,7 @@ PEACH_NETWORK.forget = function() {
// perform json serialization // perform json serialization
var jsonData = JSON.stringify(ssidData); var jsonData = JSON.stringify(ssidData);
// write in-progress status message to ui // write in-progress status message to ui
PEACH_NETWORK.flashMsg("info", "Removing credentials for access point..."); PEACH.flashMsg("info", "Removing credentials for access point...");
// send forget_ap POST request // send forget_ap POST request
fetch("/api/v1/network/wifi/forget", { fetch("/api/v1/network/wifi/forget", {
method: "post", method: "post",
@ -119,48 +118,13 @@ PEACH_NETWORK.forget = function() {
}) })
.then( (jsonData) => { .then( (jsonData) => {
// write json response message to ui // write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
}) })
}, false); }, false);
}; };
}); });
} }
// display a message by appending a paragraph element
PEACH_NETWORK.flashMsg = function(status, msg) {
// set the class of the element according to status
var elementClass;
if (status === "success") {
elementClass = "capsule center-text flash-message font-success";
} else if (status === "info") {
elementClass = "capsule center-text flash-message font-info";
} else {
elementClass = "capsule center-text flash-message font-failure";
};
var flashElement = document.getElementById("flashMsg");
// if flashElement exists, update the class & text
if (flashElement) {
flashElement.className = elementClass;
flashElement.innerText = msg;
// if flashElement does not exist, create it, set id, class, text & append
} else {
// create new div for flash message
var flashDiv = document.createElement("DIV");
// set div attributes
flashDiv.id = "flashMsg";
flashDiv.className = elementClass;
// add json response message to flash message div
var flashMsg = document.createTextNode(msg);
flashDiv.appendChild(flashMsg);
// insert the flash message div below the button div
var buttonDiv = document.getElementById("buttonDiv");
// flashDiv will be added to the end since buttonDiv is the last
// child within the parent element (card-container div)
buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
}
}
var detailInstance = PEACH_NETWORK; var detailInstance = PEACH_NETWORK;
detailInstance.connect(); detailInstance.connect();
detailInstance.disconnect(); detailInstance.disconnect();

40
peach-web/static/js/network_modify.js
View File

@ -9,7 +9,6 @@ behavioural layer for the `network_modify.html.tera` template
methods: methods:
PEACH_NETWORK.modify(); PEACH_NETWORK.modify();
PEACH_NETWORK.flashMsg(status, msg);
*/ */
@ -33,7 +32,7 @@ PEACH_NETWORK.modify = function() {
// perform json serialization // perform json serialization
var jsonData = JSON.stringify(object); var jsonData = JSON.stringify(object);
// write in-progress status message to ui // write in-progress status message to ui
PEACH_NETWORK.flashMsg("info", "Updating WiFi password..."); PEACH.flashMsg("info", "Updating WiFi password...");
// send new_password POST request // send new_password POST request
fetch("/api/v1/network/wifi/modify", { fetch("/api/v1/network/wifi/modify", {
method: "post", method: "post",
@ -47,46 +46,11 @@ PEACH_NETWORK.modify = function() {
}) })
.then( (jsonData) => { .then( (jsonData) => {
// write json response message to ui // write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
}) })
}, false); }, false);
}); });
} }
// display a message by appending a paragraph element
PEACH_NETWORK.flashMsg = function(status, msg) {
// set the class of the element according to status
var elementClass;
if (status === "success") {
elementClass = "capsule center-text flash-message font-success";
} else if (status === "info") {
elementClass = "capsule center-text flash-message font-info";
} else {
elementClass = "capsule center-text flash-message font-failure";
};
var flashElement = document.getElementById("flashMsg");
// if flashElement exists, update the class & text
if (flashElement) {
flashElement.className = elementClass;
flashElement.innerText = msg;
// if flashElement does not exist, create it, set id, class, text & append
} else {
// create new div for flash message
var flashDiv = document.createElement("DIV");
// set div attributes
flashDiv.id = "flashMsg";
flashDiv.className = elementClass;
// add json response message to flash message div
var flashMsg = document.createTextNode(msg);
flashDiv.appendChild(flashMsg);
// insert the flash message div below the button div
var buttonDiv = document.getElementById("buttonDiv");
// flashDiv will be added to the end since buttonDiv is the last
// child within the parent element (card-container div)
buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
}
}
var modifyInstance = PEACH_NETWORK; var modifyInstance = PEACH_NETWORK;
modifyInstance.modify(); modifyInstance.modify();

40
peach-web/static/js/network_usage.js
View File

@ -1,7 +1,7 @@
/* /*
behavioural layer for the `network_usage.html.tera` template, behavioural layer for the `network_usage.html.tera` template,
corresponding to the web route `/network/wifi/usage` corresponding to the web route `/settings/network/wifi/usage`
- intercept form submissions - intercept form submissions
- perform json api calls - perform json api calls
@ -13,7 +13,6 @@ methods:
PEACH_NETWORK.resetUsage(); PEACH_NETWORK.resetUsage();
PEACH_NETWORK.toggleWarning(); PEACH_NETWORK.toggleWarning();
PEACH_NETWORK.toggleCutoff(); PEACH_NETWORK.toggleCutoff();
PEACH_NETWORK.flashMsg(status, msg);
*/ */
@ -51,7 +50,7 @@ PEACH_NETWORK.updateAlerts = function() {
}) })
.then( (jsonData) => { .then( (jsonData) => {
// write json response message to ui // write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
}) })
}, false); }, false);
}); });
@ -79,7 +78,7 @@ PEACH_NETWORK.resetUsage = function() {
.then( (jsonData) => { .then( (jsonData) => {
console.log(jsonData.msg); console.log(jsonData.msg);
// write json response message to ui // write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
// if reset is successful, update the ui // if reset is successful, update the ui
if (jsonData.status === "success") { if (jsonData.status === "success") {
console.log(jsonData.data); console.log(jsonData.data);
@ -133,39 +132,6 @@ PEACH_NETWORK.toggleCutoff = function() {
}); });
}; };
// display a message by appending a paragraph element
PEACH_NETWORK.flashMsg = function(status, msg) {
// set the class of the element according to status
var elementClass;
if (status === "success") {
elementClass = "capsule center-text flash-message font-success";
} else if (status === "info") {
elementClass = "capsule center-text flash-message font-info";
} else {
elementClass = "capsule center-text flash-message font-failure";
};
var flashElement = document.getElementById("flashMsg");
// if flashElement exists, update the class & text
if (flashElement) {
flashElement.className = elementClass;
flashElement.innerText = msg;
// if flashElement does not exist, create it, set id, class, text & append
} else {
// create new div for flash message
var flashDiv = document.createElement("DIV");
// set div attributes
flashDiv.id = "flashMsg";
flashDiv.className = elementClass;
// add json response message to flash message div
var flashMsg = document.createTextNode(msg);
flashDiv.appendChild(flashMsg);
// insert the flash message div below the button div
var buttonDiv = document.getElementById("buttonDiv");
buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
}
}
var usageInstance = PEACH_NETWORK; var usageInstance = PEACH_NETWORK;
usageInstance.resetUsage(); usageInstance.resetUsage();
usageInstance.toggleWarning(); usageInstance.toggleWarning();

44
peach-web/static/js/power_menu.js
View File

@ -11,7 +11,6 @@ methods:
PEACH_DEVICE.reboot(); PEACH_DEVICE.reboot();
PEACH_DEVICE.shutdown(); PEACH_DEVICE.shutdown();
PEACH_DEVICE.flashMsg(status, msg);
*/ */
@ -26,7 +25,7 @@ PEACH_DEVICE.reboot = function() {
// prevent redirect on button press (default behavior) // prevent redirect on button press (default behavior)
e.preventDefault(); e.preventDefault();
// write reboot flash message // write reboot flash message
PEACH_DEVICE.flashMsg("success", "Rebooting the device..."); PEACH.flashMsg("success", "Rebooting the device...");
// send reboot_device POST request // send reboot_device POST request
fetch("/api/v1/admin/reboot", { fetch("/api/v1/admin/reboot", {
method: "post", method: "post",
@ -41,7 +40,7 @@ PEACH_DEVICE.reboot = function() {
.then( (jsonData) => { .then( (jsonData) => {
console.log(jsonData.msg); console.log(jsonData.msg);
// write json response message to ui // write json response message to ui
PEACH_DEVICE.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
}) })
}, false); }, false);
} }
@ -57,7 +56,7 @@ PEACH_DEVICE.shutdown = function() {
// prevent form submission (default behavior) // prevent form submission (default behavior)
e.preventDefault(); e.preventDefault();
// write shutdown flash message // write shutdown flash message
PEACH_DEVICE.flashMsg("success", "Shutting down the device..."); PEACH.flashMsg("success", "Shutting down the device...");
// send shutdown_device POST request // send shutdown_device POST request
fetch("/api/v1/shutdown", { fetch("/api/v1/shutdown", {
method: "post", method: "post",
@ -72,48 +71,13 @@ PEACH_DEVICE.shutdown = function() {
.then( (jsonData) => { .then( (jsonData) => {
console.log(jsonData.msg); console.log(jsonData.msg);
// write json response message to ui // write json response message to ui
PEACH_DEVICE.flashMsg(jsonData.status, jsonData.msg); PEACH.flashMsg(jsonData.status, jsonData.msg);
}) })
}, false); }, false);
} }
}); });
} }
// display a message by appending a paragraph element
PEACH_DEVICE.flashMsg = function(status, msg) {
// set the class of the element according to status
var elementClass;
if (status === "success") {
elementClass = "capsule center-text flash-message font-success";
} else if (status === "info") {
elementClass = "capsule center-text flash-message font-info";
} else {
elementClass = "capsule center-text flash-message font-failure";
};
var flashElement = document.getElementById("flashMsg");
// if flashElement exists, update the class & text
if (flashElement) {
flashElement.className = elementClass;
flashElement.innerText = msg;
// if flashElement does not exist, create it, set id, class, text & append
} else {
// create new div for flash message
var flashDiv = document.createElement("DIV");
// set div attributes
flashDiv.id = "flashMsg";
flashDiv.className = elementClass;
// add json response message to flash message div
var flashMsg = document.createTextNode(msg);
flashDiv.appendChild(flashMsg);
// insert the flash message div below the button div
var buttonDiv = document.getElementById("buttonDiv");
// flashDiv will be added to the end since buttonDiv is the last
// child within the parent element (card-container div)
buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
}
}
var deviceInstance = PEACH_DEVICE; var deviceInstance = PEACH_DEVICE;
deviceInstance.reboot(); deviceInstance.reboot();
deviceInstance.shutdown(); deviceInstance.shutdown();

10
peach-web/static/js/reset_password.js
View File

@ -2,15 +2,17 @@
* behavioural layer for the `reset_password.html.tera` template, * behavioural layer for the `reset_password.html.tera` template,
*/ */
var PEACH_AUTH = {};
// catch click of 'Save' button and make POST request // catch click of 'Save' button and make POST request
PEACH.add = function() { PEACH_AUTH.resetPassword = function() {
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('submit', function(e) { document.body.addEventListener('submit', function(e) {
// prevent redirect on button press (default behavior) // prevent redirect on button press (default behavior)
e.preventDefault(); e.preventDefault();
// capture form data // capture form data
var formElement = document.querySelector("form"); var formElement = document.querySelector("form");
// create form data object from the wifiCreds form element // create form data object from the changePassword form element
var formData = new FormData(formElement); var formData = new FormData(formElement);
var object = {}; var object = {};
// assign values from form // assign values from form
@ -41,5 +43,5 @@ PEACH.add = function() {
}); });
} }
var addInstance = PEACH; var resetPassInstance = PEACH_AUTH;
addInstance.add(); resetPassInstance.resetPassword();

12
peach-web/templates/catchers/not_found.html.tera
View File

@ -1,9 +1,11 @@
{%- extends "nav" -%} {%- extends "nav" -%}
{%- block card %} {%- block card %}
<div class="card center"> <div class="card center">
<div class="card-container capsule info-border"> <div class="capsule-container">
<p>No PeachCloud resource exists for this URL. Please ensure that the URL in the address bar is correct.</p> <div class="capsule info-border">
<p>Click the back arrow in the top-left or the PeachCloud logo at the bottom of your screen to return Home.</p> <p>No PeachCloud resource exists for this URL. Please ensure that the URL in the address bar is correct.</p>
</div> <p>Click the back arrow in the top-left or the PeachCloud logo at the bottom of your screen to return Home.</p>
</div>
</div> </div>
</div>
{%- endblock card -%} {%- endblock card -%}

41
peach-web/templates/settings/admin/change_password.html.tera
View File

@ -4,47 +4,22 @@
<div class="card center"> <div class="card center">
<div class="form-container"> <div class="form-container">
<form id="changePassword" action="/settings/change_password" method="post"> <form id="changePassword" action="/settings/change_password" method="post">
<div class="input-wrapper"> <!-- input for current password -->
<!-- input for old password --> <input id="currentPassword" class="center input" name="current_password" type="password" placeholder="Current password" title="Current password" autofocus>
<label id="old_password" class="label-small input-label font-near-black"> <!-- input for new password -->
<label class="label-small input-label font-gray" for="old_password" style="padding-top: 0.25rem;">Old Password</label> <input id="newPassword" class="center input" name="new_password1" type="password" placeholder="New password" title="New password">
<input id="old_password" class="form-input" style="margin-bottom: 0;" <!-- input for duplicate new password -->
name="old_password" type="password" title="old password" value=""> <input id="newPasswordDuplicate" class="center input" name="new_password2" type="password" placeholder="Re-enter new password" title="New password duplicate">
</label>
</div>
<div class="input-wrapper">
<!-- input for new password1 -->
<label id="new_password1" class="label-small input-label font-near-black">
<label class="label-small input-label font-gray" for="new_password1" style="padding-top: 0.25rem;">Enter New Password</label>
<input id="new_password1" class="form-input" style="margin-bottom: 0;"
name="new_password1" title="new_password1" type="password" value="">
</label>
</div>
<div class="input-wrapper">
<!-- input for new password2 -->
<label id="new_password2" class="label-small input-label font-near-black">
<label class="label-small input-label font-gray" for="new_password2" style="padding-top: 0.25rem;">Re-Enter New Password</label>
<input id="new_password2" class="form-input" style="margin-bottom: 0;"
name="new_password2" title="new_password2" type="password" value="">
</label>
</div>
<div id="buttonDiv"> <div id="buttonDiv">
<input id="changePasswordButton" class="button button-primary center" title="Add" type="submit" value="Save"> <input id="savePassword" class="button button-primary center" title="Add" type="submit" value="Save">
<a class="button button-secondary center" href="/settings/admin" title="Cancel">Cancel</a>
</div> </div>
<a class="button button-secondary center" href="/settings/admin" title="Cancel">Cancel</a>
</form> </form>
<!-- FLASH MESSAGE --> <!-- FLASH MESSAGE -->
{% include "snippets/flash_message" %} {% include "snippets/flash_message" %}
<!-- NO SCRIPT FOR WHEN JS IS DISABLED --> <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
{% include "snippets/noscript" %} {% include "snippets/noscript" %}
</div> </div>
</div> </div>
<script type="text/javascript" src="/js/change_password.js"></script> <script type="text/javascript" src="/js/change_password.js"></script>
{%- endblock card -%} {%- endblock card -%}

19
peach-web/templates/settings/admin/forgot_password.html.tera
View File

@ -1,25 +1,20 @@
{%- extends "nav" -%} {%- extends "nav" -%}
{%- block card %} {%- block card %}
<!--PUBLIC PAGE FOR SENDING A NEW TEMPORARY PASSWORD TO BE USED TO RESET YOUR PASSWORD --> <!-- PASSWORD RESET REQUEST CARD -->
<div class="card center"> <div class="card center">
<p class="text-notice" style="width: 80%; margin:auto; margin-bottom: 35px; margin-top: 20px;"> <div class="capsule capsule-container info-border">
Click the button below to send a new temporary password which can be used to change your device password. <p class="card-text">Click the button below to send a new temporary password which can be used to change your device password.
<br/><br/> </br></br>
The temporary password will be sent in an SSB private message to the admin of this device. The temporary password will be sent in an SSB private message to the admin of this device.</p>
</p> </div>
<form id="sendPasswordReset" action="/send_password_reset" method="post"> <form id="sendPasswordReset" action="/send_password_reset" method="post">
<div id="buttonDiv"> <div id="buttonDiv">
<input type="submit" class="button center button-secondary" value="Send Password Reset" title="Send Password Reset Link"/> <input class="button button-primary center" style="margin-top: 1rem;" type="submit" value="Send Password Reset" title="Send Password Reset Link"/>
</div> </div>
</form> </form>
<!-- FLASH MESSAGE --> <!-- FLASH MESSAGE -->
{% include "snippets/flash_message" %} {% include "snippets/flash_message" %}
<!-- NO SCRIPT FOR WHEN JS IS DISABLED --> <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
{% include "snippets/noscript" %} {% include "snippets/noscript" %}
</div>
</div> </div>
{%- endblock card -%} {%- endblock card -%}

10
peach-web/templates/settings/admin/menu.html.tera
View File

@ -2,12 +2,10 @@
{%- block card %} {%- block card %}
<!-- ADMIN SETTINGS MENU --> <!-- ADMIN SETTINGS MENU -->
<div class="card center"> <div class="card center">
<div class="card-container"> <!-- BUTTONS -->
<!-- BUTTONS --> <div id="settingsButtons">
<div id="settingsButtons"> <a id="change" class="button button-primary center" href="/settings/admin/change_password" title="Change Password">Change Password</a>
<a id="change" class="button button-primary center" href="/settings/admin/change_password" title="Change Password">Change Password</a> <a id="configure" class="button button-primary center" href="/settings/admin/configure" title="Configure Admin">Configure Admin</a>
<a id="configure" class="button button-primary center" href="/settings/admin/configure" title="Configure Admin">Configure Admin</a>
</div>
</div> </div>
</div> </div>
{%- endblock card -%} {%- endblock card -%}

12
peach-web/templates/settings/menu.html.tera
View File

@ -2,13 +2,11 @@
{%- block card %} {%- block card %}
<!-- SETTINGS MENU --> <!-- SETTINGS MENU -->
<div class="card center"> <div class="card center">
<div class="card-container"> <!-- BUTTONS -->
<!-- BUTTONS --> <div id="settingsButtons">
<div id="settingsButtons"> <a id="network" class="button button-primary center" href="/settings/network" title="Network Settings">Network</a>
<a id="network" class="button button-primary center" href="/settings/network" title="Network Settings">Network</a> <a id="scuttlebutt" class="button button-primary center" href="/settings/scuttlebutt" title="Scuttlebutt Settings">Scuttlebutt</a>
<a id="scuttlebutt" class="button button-primary center" href="/settings/scuttlebutt" title="Scuttlebutt Settings">Scuttlebutt</a> <a id="admin" class="button button-primary center" href="/settings/admin" title="Administrator Settings">Administration</a>
<a id="admin" class="button button-primary center" href="/settings/admin" title="Administrator Settings">Administration</a>
</div>
</div> </div>
</div> </div>
{%- endblock card -%} {%- endblock card -%}

24
peach-web/templates/settings/scuttlebutt.html.tera
View File

@ -2,19 +2,17 @@
{%- block card %} {%- block card %}
<!-- SCUTTLEBUTT SETTINGS MENU --> <!-- SCUTTLEBUTT SETTINGS MENU -->
<div class="card center"> <div class="card center">
<div class="card-container"> <!-- BUTTONS -->
<!-- BUTTONS --> <div id="settingsButtons">
<div id="settingsButtons"> <a id="networkKey" class="button button-primary center" href="/settings/scuttlebutt/network_key" title="Set Network Key">Set Network Key</a>
<a id="networkKey" class="button button-primary center" href="/settings/scuttlebutt/network_key" title="Set Network Key">Set Network Key</a> <a id="replicationHops" class="button button-primary center" href="/settings/scuttlebutt/hops" title="Set Replication Hops">Set Replication Hops</a>
<a id="replicationHops" class="button button-primary center" href="/settings/scuttlebutt/hops" title="Set Replication Hops">Set Replication Hops</a> <a id="removeFeeds" class="button button-primary center" href="/settings/scuttlebutt/remove_feeds" title="Remove Blocked Feeds">Remove Blocked Feeds</a>
<a id="removeFeeds" class="button button-primary center" href="/settings/scuttlebutt/remove_feeds" title="Remove Blocked Feeds">Remove Blocked Feeds</a> <a id="setDirectory" class="button button-primary center" href="/settings/scuttlebutt/set_directory" title="Set Database Directory">Set Database Directory</a>
<a id="setDirectory" class="button button-primary center" href="/settings/scuttlebutt/set_directory" title="Set Database Directory">Set Database Directory</a> <a id="checkFilesystem" class="button button-primary center" href="/settings/scuttlebutt/check_fs" title="Check Filesystem">Check Filesystem</a>
<a id="checkFilesystem" class="button button-primary center" href="/settings/scuttlebutt/check_fs" title="Check Filesystem">Check Filesystem</a> <a id="repairFilesystem" class="button button-primary center" href="/settings/scuttlebutt/repair" title="Repair Filesystem">Repair Filesystem</a>
<a id="repairFilesystem" class="button button-primary center" href="/settings/scuttlebutt/repair" title="Repair Filesystem">Repair Filesystem</a> <a id="disable" class="button button-primary center" href="/settings/scuttlebutt/disable" title="Disable Sbot">Disable Sbot</a>
<a id="disable" class="button button-primary center" href="/settings/scuttlebutt/disable" title="Disable Sbot">Disable Sbot</a> <a id="enable" class="button button-primary center" href="/settings/scuttlebutt/enable" title="Enable Sbot">Enable Sbot</a>
<a id="enable" class="button button-primary center" href="/settings/scuttlebutt/enable" title="Enable Sbot">Enable Sbot</a> <a id="restart" class="button button-primary center" href="/settings/scuttlebutt/restart" title="Restart Sbot">Restart Sbot</a>
<a id="restart" class="button button-primary center" href="/settings/scuttlebutt/restart" title="Restart Sbot">Restart Sbot</a>
</div>
</div> </div>
</div> </div>
{%- endblock card -%} {%- endblock card -%}