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

Merge pull request 'Fix broken JS and tweak styling (CSS & HTML)' (#33) from js_and_style_fixes into main 

Reviewed-on: #33
This commit is contained in:
glyph 2021-11-24 09:15:50 +00:00
parent 6fb5b58d6c 7e3c500b1e
commit b3c6138e03
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 {
margin-left: 2rem;
margin-right: 2rem;
padding-top: 1rem;
margin-left: 1rem;
margin-right: 1rem;
padding-bottom: 1rem;
}
@media only screen and (min-width: 600px) {
.capsule-container {
margin-left: 0;
margin-right: 0;
}
}
/*
* CARDS
*/
@ -235,6 +241,7 @@ body {
max-height: 90vh;
position: relative;
width: 100%;
margin-top: 1rem;
}
@media only screen and (min-width: 600px) {
@ -248,8 +255,6 @@ body {
.card-container {
justify-content: center;
padding: 0.5rem;
/* padding-top: 1rem; */
/* padding-bottom: 1rem; */
}
.form-container {
@ -560,6 +565,7 @@ html {
font-size: var(--font-size-6);
margin-left: 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
PEACH.add = function() {
PEACH_AUTH.changePassword = function() {
document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('submit', function(e) {
// prevent redirect on button press (default behavior)
e.preventDefault();
// capture form data
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 object = {};
// assign values from form
@ -22,7 +34,7 @@ PEACH.add = function() {
var jsonData = JSON.stringify(object);
// write in-progress status message to ui
PEACH.flashMsg("info", "Saving new password.");
// send add_wifi POST request
// send change_password POST request
fetch("/api/v1/admin/change_password", {
method: "post",
headers: {
@ -41,5 +53,5 @@ PEACH.add = function() {
});
}
var addInstance = PEACH;
addInstance.add();
var changePassInstance = PEACH_AUTH;
changePassInstance.changePassword();

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

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

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

@ -1,9 +1,9 @@
/*
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
- update the dom
@ -12,14 +12,14 @@ corresponding to the web route `/network/dns`
var PEACH_DNS = {};
// catch click of 'Add' button and make POST request
PEACH_DNS.add = function() {
PEACH_DNS.configureDns = function() {
document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('submit', function(e) {
// prevent redirect on button press (default behavior)
e.preventDefault();
// capture form data
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 object = {};
// 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);
var jsonData = JSON.stringify(object);
// 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
fetch("/api/v1/network/dns/configure", {
method: "post",
@ -50,49 +50,14 @@ PEACH_DNS.add = function() {
})
.then( (jsonData) => {
// 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");
statusIndicator.remove();
// only remove the "dyndns-status-indicator" element if it exists
if (statusIndicator != null ) statusIndicator.remove();
})
}, false);
});
}
// display a message by appending a paragraph element
PEACH_DNS.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_DNS;
addInstance.add();
var configureDnsInstance = PEACH_DNS;
configureDnsInstance.configureDns();

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

@ -10,7 +10,6 @@ corresponding to the web route `/network/wifi/add`
methods:
PEACH_NETWORK.add();
PEACH_NETWORK.flashMsg(status, msg);
*/
@ -34,7 +33,7 @@ PEACH_NETWORK.add = function() {
// perform json serialization
var jsonData = JSON.stringify(object);
// 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
fetch("/api/v1/network/wifi", {
method: "post",
@ -48,46 +47,11 @@ PEACH_NETWORK.add = function() {
})
.then( (jsonData) => {
// write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
PEACH.flashMsg(jsonData.status, jsonData.msg);
})
}, 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;
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,
corresponding to the web route `/network`
corresponding to the web route `/settings/network`
- intercept form submissions
- perform json api calls
@ -11,10 +11,8 @@ methods:
PEACH_NETWORK.activateAp();
PEACH_NETWORK.activateClient();
PEACH_NETWORK.apOnline();
PEACH_NETWORK.clientOffline();
PEACH_NETWORK.clientOnline();
PEACH_NETWORK.flashMsg(status, msg);
PEACH_NETWORK.apMode();
PEACH_NETWORK.clientMode();
*/
@ -29,7 +27,7 @@ PEACH_NETWORK.activateAp = function() {
// prevent form submission (default behavior)
e.preventDefault();
// 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
fetch("/api/v1/network/activate_ap", {
method: "post",
@ -44,10 +42,10 @@ PEACH_NETWORK.activateAp = function() {
.then( (jsonData) => {
console.log(jsonData.msg);
// 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 (jsonData.status === "success") {
PEACH_NETWORK.apOnline();
PEACH_NETWORK.apMode();
}
})
}, false);
@ -64,7 +62,7 @@ PEACH_NETWORK.activateClient = function() {
// prevent form submission (default behavior)
e.preventDefault();
// 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
fetch("/api/v1/network/activate_client", {
method: "post",
@ -79,10 +77,10 @@ PEACH_NETWORK.activateClient = function() {
.then( (jsonData) => {
console.log(jsonData.msg);
// 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 (jsonData.status === "success") {
PEACH_NETWORK.clientOnline();
PEACH_NETWORK.clientMode();
}
})
}, false);
@ -90,21 +88,12 @@ PEACH_NETWORK.activateClient = function() {
});
}
// update ui for access point mode (status: online)
PEACH_NETWORK.apOnline = 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";
// replace 'Deploy Access Point' button with 'Enable WiFi' button
PEACH_NETWORK.apMode = function() {
// create Enable WiFi button and add it to button div
var wifiButton = document.createElement("A");
wifiButton.className = "button center";
wifiButton.href = "/network/wifi/activate";
wifiButton.href = "/settings/network/wifi/activate";
wifiButton.id = "connectWifi";
var label = "Enable WiFi";
var buttonText = document.createTextNode(label);
@ -114,88 +103,31 @@ PEACH_NETWORK.apOnline = function() {
let buttons = document.getElementById("buttons");
buttons.appendChild(wifiButton);
// remove the old 'Activate Access Point' button
// remove the old 'Deploy Access Point' button
let apButton = document.getElementById("deployAccessPoint");
apButton.style = "display: none;";
apButton.remove();
}
// update ui for wifi client mode (status: online)
PEACH_NETWORK.clientOnline = function() {
console.log('Activating Client Mode');
// replace 'Enable WiFi' button with 'Deploy Access Point' button
PEACH_NETWORK.clientMode = function() {
// 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)
let i = document.getElementById("netModeIcon");
i.className = "center icon icon-active";
i.src = "icons/wifi.svg";
let l = document.getElementById("netModeLabel");
l.textContent = "ONLINE";
// append the new button to the buttons div
let buttons = document.getElementById("buttons");
buttons.appendChild(apButton);
// TODO: think about updates for buttons (transition from ap mode)
}
// 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);
}
// remove the old 'Enable Wifi' button
let wifiButton = document.getElementById("connectWifi");
wifiButton.remove();
}
var networkInstance = PEACH_NETWORK;
networkInstance.activateAp();
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,
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
- perform json api call
@ -12,7 +12,6 @@ methods:
PEACH_NETWORK.connect();
PEACH_NETWORK.disconnect();
PEACH_NETWORK.forget();
PEACH_NETWORK.flashMsg(status, msg);
*/
@ -33,7 +32,7 @@ PEACH_NETWORK.connect = function() {
// perform json serialization
var jsonData = JSON.stringify(ssidData);
// 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
fetch("/api/v1/network/wifi/connect", {
method: "post",
@ -47,7 +46,7 @@ PEACH_NETWORK.connect = function() {
})
.then( (jsonData) => {
// write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
PEACH.flashMsg(jsonData.status, jsonData.msg);
})
}, false);
};
@ -69,7 +68,7 @@ PEACH_NETWORK.disconnect = function() {
// perform json serialization
var jsonData = JSON.stringify(ssidData);
// 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
fetch("/api/v1/network/wifi/disconnect", {
method: "post",
@ -83,7 +82,7 @@ PEACH_NETWORK.disconnect = function() {
})
.then( (jsonData) => {
// write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
PEACH.flashMsg(jsonData.status, jsonData.msg);
})
}, false);
};
@ -105,7 +104,7 @@ PEACH_NETWORK.forget = function() {
// perform json serialization
var jsonData = JSON.stringify(ssidData);
// 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
fetch("/api/v1/network/wifi/forget", {
method: "post",
@ -119,48 +118,13 @@ PEACH_NETWORK.forget = function() {
})
.then( (jsonData) => {
// write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
PEACH.flashMsg(jsonData.status, jsonData.msg);
})
}, 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;
detailInstance.connect();
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:
PEACH_NETWORK.modify();
PEACH_NETWORK.flashMsg(status, msg);
*/
@ -33,7 +32,7 @@ PEACH_NETWORK.modify = function() {
// perform json serialization
var jsonData = JSON.stringify(object);
// 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
fetch("/api/v1/network/wifi/modify", {
method: "post",
@ -47,46 +46,11 @@ PEACH_NETWORK.modify = function() {
})
.then( (jsonData) => {
// write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
PEACH.flashMsg(jsonData.status, jsonData.msg);
})
}, 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;
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,
corresponding to the web route `/network/wifi/usage`
corresponding to the web route `/settings/network/wifi/usage`
- intercept form submissions
- perform json api calls
@ -13,7 +13,6 @@ methods:
PEACH_NETWORK.resetUsage();
PEACH_NETWORK.toggleWarning();
PEACH_NETWORK.toggleCutoff();
PEACH_NETWORK.flashMsg(status, msg);
*/
@ -51,7 +50,7 @@ PEACH_NETWORK.updateAlerts = function() {
})
.then( (jsonData) => {
// write json response message to ui
PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
PEACH.flashMsg(jsonData.status, jsonData.msg);
})
}, false);
});
@ -79,7 +78,7 @@ PEACH_NETWORK.resetUsage = function() {
.then( (jsonData) => {
console.log(jsonData.msg);
// 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 (jsonData.status === "success") {
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;
usageInstance.resetUsage();
usageInstance.toggleWarning();

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

@ -11,7 +11,6 @@ methods:
PEACH_DEVICE.reboot();
PEACH_DEVICE.shutdown();
PEACH_DEVICE.flashMsg(status, msg);
*/
@ -26,7 +25,7 @@ PEACH_DEVICE.reboot = function() {
// prevent redirect on button press (default behavior)
e.preventDefault();
// write reboot flash message
PEACH_DEVICE.flashMsg("success", "Rebooting the device...");
PEACH.flashMsg("success", "Rebooting the device...");
// send reboot_device POST request
fetch("/api/v1/admin/reboot", {
method: "post",
@ -41,7 +40,7 @@ PEACH_DEVICE.reboot = function() {
.then( (jsonData) => {
console.log(jsonData.msg);
// write json response message to ui
PEACH_DEVICE.flashMsg(jsonData.status, jsonData.msg);
PEACH.flashMsg(jsonData.status, jsonData.msg);
})
}, false);
}
@ -57,7 +56,7 @@ PEACH_DEVICE.shutdown = function() {
// prevent form submission (default behavior)
e.preventDefault();
// write shutdown flash message
PEACH_DEVICE.flashMsg("success", "Shutting down the device...");
PEACH.flashMsg("success", "Shutting down the device...");
// send shutdown_device POST request
fetch("/api/v1/shutdown", {
method: "post",
@ -72,48 +71,13 @@ PEACH_DEVICE.shutdown = function() {
.then( (jsonData) => {
console.log(jsonData.msg);
// write json response message to ui
PEACH_DEVICE.flashMsg(jsonData.status, jsonData.msg);
PEACH.flashMsg(jsonData.status, jsonData.msg);
})
}, 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;
deviceInstance.reboot();
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,
*/
var PEACH_AUTH = {};
// catch click of 'Save' button and make POST request
PEACH.add = function() {
PEACH_AUTH.resetPassword = function() {
document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('submit', function(e) {
// prevent redirect on button press (default behavior)
e.preventDefault();
// capture form data
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 object = {};
// assign values from form
@ -41,5 +43,5 @@ PEACH.add = function() {
});
}
var addInstance = PEACH;
addInstance.add();
var resetPassInstance = PEACH_AUTH;
resetPassInstance.resetPassword();

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

@ -1,9 +1,11 @@
{%- extends "nav" -%}
{%- block card %}
<div class="card center">
<div class="card-container capsule info-border">
<p>No PeachCloud resource exists for this URL. Please ensure that the URL in the address bar is correct.</p>
<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 class="card center">
<div class="capsule-container">
<div class="capsule info-border">
<p>No PeachCloud resource exists for this URL. Please ensure that the URL in the address bar is correct.</p>
<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>
{%- endblock card -%}

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

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

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

@ -1,25 +1,20 @@
{%- extends "nav" -%}
{%- 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">
<p class="text-notice" style="width: 80%; margin:auto; margin-bottom: 35px; margin-top: 20px;">
Click the button below to send a new temporary password which can be used to change your device password.
<br/><br/>
The temporary password will be sent in an SSB private message to the admin of this device.
</p>
<div class="capsule capsule-container info-border">
<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>
The temporary password will be sent in an SSB private message to the admin of this device.</p>
</div>
<form id="sendPasswordReset" action="/send_password_reset" method="post">
<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>
</form>
<!-- FLASH MESSAGE -->
{% include "snippets/flash_message" %}
<!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
{% include "snippets/noscript" %}
</div>
</div>
{%- endblock card -%}

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

@ -2,12 +2,10 @@
{%- block card %}
<!-- ADMIN SETTINGS MENU -->
<div class="card center">
<div class="card-container">
<!-- BUTTONS -->
<div id="settingsButtons">
<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>
</div>
<!-- BUTTONS -->
<div id="settingsButtons">
<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>
</div>
</div>
{%- endblock card -%}

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

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

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

@ -2,19 +2,17 @@
{%- block card %}
<!-- SCUTTLEBUTT SETTINGS MENU -->
<div class="card center">
<div class="card-container">
<!-- BUTTONS -->
<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="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="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="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="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>
</div>
<!-- BUTTONS -->
<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="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="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="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="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>
</div>
</div>
{%- endblock card -%}