From bae3b7c2ce327eb3d9cf52aa2e36d82cabd599c4 Mon Sep 17 00:00:00 2001 From: glyph Date: Thu, 18 Nov 2021 11:47:33 +0200 Subject: [PATCH 1/9] tweak styling --- peach-web/static/css/peachcloud.css | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/peach-web/static/css/peachcloud.css b/peach-web/static/css/peachcloud.css index 8e65b6f..8c767f0 100644 --- a/peach-web/static/css/peachcloud.css +++ b/peach-web/static/css/peachcloud.css @@ -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; } /* From 380ee2683a6866651e64549d7be3593fdeb3d581 Mon Sep 17 00:00:00 2001 From: glyph Date: Thu, 18 Nov 2021 11:47:50 +0200 Subject: [PATCH 2/9] fix js --- peach-web/static/js/change_password.js | 12 +++++++----- peach-web/static/js/common.js | 3 +-- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/peach-web/static/js/change_password.js b/peach-web/static/js/change_password.js index 85bc2b1..366e6a5 100644 --- a/peach-web/static/js/change_password.js +++ b/peach-web/static/js/change_password.js @@ -2,15 +2,17 @@ * behavioural layer for the `change_password.html.tera` template, */ +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 +24,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 +43,5 @@ PEACH.add = function() { }); } -var addInstance = PEACH; -addInstance.add(); +var passInstance = PEACH_AUTH; +passInstance.changePassword(); diff --git a/peach-web/static/js/common.js b/peach-web/static/js/common.js index 05167d2..1197e57 100644 --- a/peach-web/static/js/common.js +++ b/peach-web/static/js/common.js @@ -43,5 +43,4 @@ PEACH.flashMsg = function(status, msg) { } } -var addInstance = PEACH; -addInstance.add(); +var commonInstance = PEACH; From 925051a379a0d476cf395e5b57440b4726b056a1 Mon Sep 17 00:00:00 2001 From: glyph Date: Thu, 18 Nov 2021 11:48:03 +0200 Subject: [PATCH 3/9] improve not_found template --- peach-web/templates/catchers/not_found.html.tera | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/peach-web/templates/catchers/not_found.html.tera b/peach-web/templates/catchers/not_found.html.tera index 2d0e80f..4a1f28b 100644 --- a/peach-web/templates/catchers/not_found.html.tera +++ b/peach-web/templates/catchers/not_found.html.tera @@ -1,9 +1,11 @@ {%- extends "nav" -%} {%- block card %} -
-
-

No PeachCloud resource exists for this URL. Please ensure that the URL in the address bar is correct.

-

Click the back arrow in the top-left or the PeachCloud logo at the bottom of your screen to return Home.

-
+
+
+
+

No PeachCloud resource exists for this URL. Please ensure that the URL in the address bar is correct.

+

Click the back arrow in the top-left or the PeachCloud logo at the bottom of your screen to return Home.

+
+
{%- endblock card -%} From da51070ccd6cee70ffad70ef24ddfb38f0099dc0 Mon Sep 17 00:00:00 2001 From: glyph Date: Thu, 18 Nov 2021 11:48:37 +0200 Subject: [PATCH 4/9] improve template styling consistency --- .../settings/admin/change_password.html.tera | 41 ++++--------------- .../settings/admin/forgot_password.html.tera | 19 ++++----- .../templates/settings/admin/menu.html.tera | 10 ++--- peach-web/templates/settings/menu.html.tera | 12 +++--- .../templates/settings/scuttlebutt.html.tera | 24 +++++------ 5 files changed, 35 insertions(+), 71 deletions(-) diff --git a/peach-web/templates/settings/admin/change_password.html.tera b/peach-web/templates/settings/admin/change_password.html.tera index bbe73b5..85d5f30 100644 --- a/peach-web/templates/settings/admin/change_password.html.tera +++ b/peach-web/templates/settings/admin/change_password.html.tera @@ -4,47 +4,22 @@
-
- - -
- -
- - -
- -
- - -
- + + + + + +
- + + Cancel
- Cancel
- {% include "snippets/flash_message" %} - {% include "snippets/noscript" %} -
- {%- endblock card -%} diff --git a/peach-web/templates/settings/admin/forgot_password.html.tera b/peach-web/templates/settings/admin/forgot_password.html.tera index 4cec989..85eff50 100644 --- a/peach-web/templates/settings/admin/forgot_password.html.tera +++ b/peach-web/templates/settings/admin/forgot_password.html.tera @@ -1,25 +1,20 @@ {%- extends "nav" -%} {%- block card %} - +
-

- Click the button below to send a new temporary password which can be used to change your device password. -

- The temporary password will be sent in an SSB private message to the admin of this device. -

- +
+

Click the button below to send a new temporary password which can be used to change your device password. +

+ The temporary password will be sent in an SSB private message to the admin of this device.

+
- +
- {% include "snippets/flash_message" %} - {% include "snippets/noscript" %} - -
{%- endblock card -%} diff --git a/peach-web/templates/settings/admin/menu.html.tera b/peach-web/templates/settings/admin/menu.html.tera index 98716a3..111cb73 100644 --- a/peach-web/templates/settings/admin/menu.html.tera +++ b/peach-web/templates/settings/admin/menu.html.tera @@ -2,12 +2,10 @@ {%- block card %}
-
- - + +
{%- endblock card -%} diff --git a/peach-web/templates/settings/menu.html.tera b/peach-web/templates/settings/menu.html.tera index 43253c8..8a7bdd0 100644 --- a/peach-web/templates/settings/menu.html.tera +++ b/peach-web/templates/settings/menu.html.tera @@ -2,13 +2,11 @@ {%- block card %}
-
- - + +
{%- endblock card -%} diff --git a/peach-web/templates/settings/scuttlebutt.html.tera b/peach-web/templates/settings/scuttlebutt.html.tera index 24587ae..2ceb8de 100644 --- a/peach-web/templates/settings/scuttlebutt.html.tera +++ b/peach-web/templates/settings/scuttlebutt.html.tera @@ -2,19 +2,17 @@ {%- block card %}
-
- - + +
{%- endblock card -%} From 554997a5c0841c9561f0d33705cfeadb6d62817e Mon Sep 17 00:00:00 2001 From: glyph Date: Thu, 18 Nov 2021 13:49:10 +0200 Subject: [PATCH 5/9] fix context back and title --- peach-web/src/routes/authentication.rs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/peach-web/src/routes/authentication.rs b/peach-web/src/routes/authentication.rs index 27c7cb3..035bde5 100644 --- a/peach-web/src/routes/authentication.rs +++ b/peach-web/src/routes/authentication.rs @@ -364,7 +364,7 @@ pub fn save_password_form(password_form: PasswordForm) -> Result<(), PeachWebErr pub fn change_password(flash: Option, _auth: Authenticated) -> Template { let mut context = ChangePasswordContext::build(); // set back icon link to network route - context.back = Some("/network".to_string()); + context.back = Some("/settings/admin".to_string()); context.title = Some("Change Password".to_string()); // check to see if there is a flash message to display if let Some(flash) = flash { @@ -383,7 +383,7 @@ pub fn change_password_post(password_form: Form, _auth: Authentica Ok(_) => { let mut context = ChangePasswordContext::build(); // set back icon link to network route - context.back = Some("/network".to_string()); + context.back = Some("/settings/admin".to_string()); context.title = Some("Change Password".to_string()); context.flash_name = Some("success".to_string()); context.flash_msg = Some("New password is now saved".to_string()); @@ -393,8 +393,8 @@ pub fn change_password_post(password_form: Form, _auth: Authentica Err(err) => { let mut context = ChangePasswordContext::build(); // set back icon link to network route - context.back = Some("/network".to_string()); - context.title = Some("Configure DNS".to_string()); + context.back = Some("/settings/admin".to_string()); + context.title = Some("Change Password".to_string()); context.flash_name = Some("error".to_string()); context.flash_msg = Some(format!("Failed to save new password: {}", err)); Template::render("settings/admin/change_password", &context) From e54ff8829a06391d9b64f614cf133ddca075f0b8 Mon Sep 17 00:00:00 2001 From: glyph Date: Mon, 22 Nov 2021 15:29:40 +0200 Subject: [PATCH 6/9] remove duplicate flashMsg code --- peach-web/static/js/network_detail.js | 50 ++++----------------------- peach-web/static/js/network_modify.js | 40 ++------------------- peach-web/static/js/network_usage.js | 40 ++------------------- peach-web/static/js/power_menu.js | 44 +++-------------------- 4 files changed, 16 insertions(+), 158 deletions(-) diff --git a/peach-web/static/js/network_detail.js b/peach-web/static/js/network_detail.js index 6d294ae..7a5baae 100644 --- a/peach-web/static/js/network_detail.js +++ b/peach-web/static/js/network_detail.js @@ -1,7 +1,7 @@ /* behavioural layer for the `network_detail.html.tera` template, -corresponding to the web route `/network/wifi?` +corresponding to the web route `/settings/network/wifi?` - 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(); diff --git a/peach-web/static/js/network_modify.js b/peach-web/static/js/network_modify.js index 4dce16b..0ed9a50 100644 --- a/peach-web/static/js/network_modify.js +++ b/peach-web/static/js/network_modify.js @@ -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(); diff --git a/peach-web/static/js/network_usage.js b/peach-web/static/js/network_usage.js index 236a2d3..a12efea 100644 --- a/peach-web/static/js/network_usage.js +++ b/peach-web/static/js/network_usage.js @@ -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(); diff --git a/peach-web/static/js/power_menu.js b/peach-web/static/js/power_menu.js index 91e22e0..6841414 100644 --- a/peach-web/static/js/power_menu.js +++ b/peach-web/static/js/power_menu.js @@ -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(); From e5f9a9be839f19d5e08010eefdfdacaca92a6b75 Mon Sep 17 00:00:00 2001 From: glyph Date: Mon, 22 Nov 2021 15:30:18 +0200 Subject: [PATCH 7/9] remove duplicate flashMsg code --- peach-web/static/js/network_add.js | 40 ++---------------------------- 1 file changed, 2 insertions(+), 38 deletions(-) diff --git a/peach-web/static/js/network_add.js b/peach-web/static/js/network_add.js index ccf68a1..a441234 100644 --- a/peach-web/static/js/network_add.js +++ b/peach-web/static/js/network_add.js @@ -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(); From ee1da0599c264f6888874c4eca74abdb7b70d452 Mon Sep 17 00:00:00 2001 From: glyph Date: Mon, 22 Nov 2021 15:30:45 +0200 Subject: [PATCH 8/9] remove status update logic --- peach-web/static/js/network_card.js | 128 +++++++--------------------- 1 file changed, 30 insertions(+), 98 deletions(-) diff --git a/peach-web/static/js/network_card.js b/peach-web/static/js/network_card.js index 79fa72a..3026a72 100644 --- a/peach-web/static/js/network_card.js +++ b/peach-web/static/js/network_card.js @@ -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() - -*/ From b59eb2208210deb8ce05a762cd0c0cff5f477a5d Mon Sep 17 00:00:00 2001 From: glyph Date: Mon, 22 Nov 2021 15:31:39 +0200 Subject: [PATCH 9/9] fix function names and remove flashMsg code duplication --- peach-web/static/js/change_password.js | 18 +++++++-- peach-web/static/js/configure_dns.js | 55 +++++--------------------- peach-web/static/js/reset_password.js | 10 +++-- 3 files changed, 30 insertions(+), 53 deletions(-) diff --git a/peach-web/static/js/change_password.js b/peach-web/static/js/change_password.js index 366e6a5..f7efc93 100644 --- a/peach-web/static/js/change_password.js +++ b/peach-web/static/js/change_password.js @@ -1,6 +1,16 @@ /* -* 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 = {}; @@ -43,5 +53,5 @@ PEACH_AUTH.changePassword = function() { }); } -var passInstance = PEACH_AUTH; -passInstance.changePassword(); +var changePassInstance = PEACH_AUTH; +changePassInstance.changePassword(); diff --git a/peach-web/static/js/configure_dns.js b/peach-web/static/js/configure_dns.js index 8abef30..ff677ec 100644 --- a/peach-web/static/js/configure_dns.js +++ b/peach-web/static/js/configure_dns.js @@ -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(); diff --git a/peach-web/static/js/reset_password.js b/peach-web/static/js/reset_password.js index bf1c2ec..1c9f431 100644 --- a/peach-web/static/js/reset_password.js +++ b/peach-web/static/js/reset_password.js @@ -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();