Fix broken JS and tweak styling (CSS & HTML) #33
|
@ -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;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -43,5 +43,4 @@ PEACH.flashMsg = function(status, msg) {
|
|||
}
|
||||
}
|
||||
|
||||
var addInstance = PEACH;
|
||||
addInstance.add();
|
||||
var commonInstance = PEACH;
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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()
|
||||
|
||||
*/
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
{%- extends "nav" -%}
|
||||
{%- block card %}
|
||||
<div class="card center">
|
||||
<div class="card-container capsule info-border">
|
||||
<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 -%}
|
||||
|
|
|
@ -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">
|
||||
</div>
|
||||
<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>
|
||||
</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 -%}
|
||||
|
|
|
@ -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 -%}
|
||||
|
|
|
@ -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>
|
||||
</div>
|
||||
</div>
|
||||
{%- endblock card -%}
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
{%- 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>
|
||||
|
@ -10,5 +9,4 @@
|
|||
<a id="admin" class="button button-primary center" href="/settings/admin" title="Administrator Settings">Administration</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endblock card -%}
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
{%- 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>
|
||||
|
@ -16,5 +15,4 @@
|
|||
<a id="restart" class="button button-primary center" href="/settings/scuttlebutt/restart" title="Restart Sbot">Restart Sbot</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endblock card -%}
|
||||
|
|
Loading…
Reference in New Issue