From 67d86e287400146449836c8cc8a4dd6756b10a8d Mon Sep 17 00:00:00 2001
From: glyph <glyph@mycelial.technology>
Date: Sat, 13 Nov 2021 10:53:35 +0200
Subject: [PATCH] replace flash and noscript with snippets

---
 peach-web/templates/device.html.tera         |  9 +-------
 peach-web/templates/login.html.tera          | 12 +---------
 peach-web/templates/messages.html.tera       | 15 +++---------
 peach-web/templates/network_add.html.tera    | 20 +++-------------
 peach-web/templates/network_card.html.tera   | 24 ++------------------
 peach-web/templates/network_detail.html.tera | 12 +---------
 peach-web/templates/network_modify.html.tera | 12 +---------
 peach-web/templates/network_usage.html.tera  | 12 +---------
 peach-web/templates/peers.html.tera          |  9 --------
 peach-web/templates/profile.html.tera        |  9 +-------
 peach-web/templates/shutdown.html.tera       | 17 +++-----------
 11 files changed, 17 insertions(+), 134 deletions(-)

diff --git a/peach-web/templates/device.html.tera b/peach-web/templates/device.html.tera
index 35556ca4..9b313331 100644
--- a/peach-web/templates/device.html.tera
+++ b/peach-web/templates/device.html.tera
@@ -126,14 +126,7 @@
           <p class="card-text">Uptime data unavailable</p>
           {%- endif %}
           <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {%- if flash_msg and flash_name == "success" -%}
-          <!-- display success message -->
-          <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" -%}
-          <!-- display error message -->
-          <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-          {%- endif %}
+          {% include "snippets/flash_message" %}
         </div>
       </div>
 {%- endblock card %}
diff --git a/peach-web/templates/login.html.tera b/peach-web/templates/login.html.tera
index 3e667916..072e5fb4 100644
--- a/peach-web/templates/login.html.tera
+++ b/peach-web/templates/login.html.tera
@@ -14,17 +14,7 @@
           </form>
 
           <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {% if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "info" %}
-          <!-- display info message -->
-          <div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-          {%- endif -%}
+          {% include "snippets/flash_message" %}
 
          <div class="center-text" style="margin-top: 25px;">
              <a href="/forgot_password" class="label-small link">Forgot Password?</a>
diff --git a/peach-web/templates/messages.html.tera b/peach-web/templates/messages.html.tera
index 36f6fed2..394f0b02 100644
--- a/peach-web/templates/messages.html.tera
+++ b/peach-web/templates/messages.html.tera
@@ -4,18 +4,9 @@
       <div class="card center">
         <div class="card-container">
           <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {%- if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="center-text flash-message font-success" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="center-text flash-message font-failure" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- endif %}
-          <!-- share ux information with the user if JS is disabled -->
-          <noscript>
-            <p class="center-text flash-message">This website will be unresponsive while the device shuts down or reboots.</p>
-          </noscript>
+          {% include "snippets/flash_message" %}
+          <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
+          {% include "snippets/noscript" %}
         </div>
       </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/network_add.html.tera b/peach-web/templates/network_add.html.tera
index e73a5d29..aaa47ad6 100644
--- a/peach-web/templates/network_add.html.tera
+++ b/peach-web/templates/network_add.html.tera
@@ -14,23 +14,9 @@
             </div>
           </form>
           <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {% if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "info" %}
-          <!-- display info message -->
-          <div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-          {%- endif -%}
-          <!-- share ux information with the user if JS is disabled -->
-          <noscript>
-            <div class="capsule flash-message info-border">
-              <p class="center-text">This website may be temporarily unresponsive while the WiFi credentials are added.</p>
-            </div>
-          </noscript>
+          {% include "snippets/flash_message" %}
+          <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
+          {% include "snippets/noscript" %}
         </div>
       </div>
       <script type="text/javascript" src="/js/network_add.js"></script>
diff --git a/peach-web/templates/network_card.html.tera b/peach-web/templates/network_card.html.tera
index 2fdf6fc7..aac40c4e 100644
--- a/peach-web/templates/network_card.html.tera
+++ b/peach-web/templates/network_card.html.tera
@@ -33,17 +33,7 @@
           <a id="viewUsage" class="button button-primary center" href="/network/wifi/usage" title="View Data Usage">View Data Usage</a>
         </div>
         <!-- FLASH MESSAGE -->
-        <!-- check for flash message and display accordingly -->
-        {%- if flash_msg and flash_name == "success" %}
-        <!-- display success message -->
-        <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-        {%- elif flash_msg and flash_name == "info" %}
-        <!-- display info message -->
-        <div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
-        {%- elif flash_msg and flash_name == "error" %}
-        <!-- display error message -->
-        <div class="capsule center-text flash-message font-failure">{{ flash_msg }}</div>
-        {%- endif %}
+        {% include "snippets/flash_message" %}
         <!-- CARD GRID -->
         <div class="card-container">
           <div class="three-grid">
@@ -124,17 +114,7 @@
           <a id="configureAdmin" class="button button-primary center" href="/settings/configure_admin" title="Configure Admin">Configure Admin</a>
         </div>
         <!-- FLASH MESSAGE -->
-        <!-- check for flash message and display accordingly -->
-        {%- if flash_msg and flash_name == "success" %}
-        <!-- display success message -->
-        <div id="flashMsg" class="capsule center-text flash-message font-success">{{ flash_msg }}</div>
-        {%- elif flash_msg and flash_name == "info" %}
-        <!-- display info message -->
-        <div id="flashMsg" class="capsule center-text flash-message font-info">{{ flash_msg }}</div>
-        {%- elif flash_msg and flash_name == "error" %}
-        <!-- display error message -->
-        <div id="flashMsg" class="capsule center-text flash-message font-failure">{{ flash_msg }}</div>
-        {%- endif %}
+        {% include "snippets/flash_message" %}
         <div id="gridDiv" class="card-container">
           <!-- CARD GRID -->
           <!-- row of icons representing network statistics -->
diff --git a/peach-web/templates/network_detail.html.tera b/peach-web/templates/network_detail.html.tera
index 89b84935..c58b5ded 100644
--- a/peach-web/templates/network_detail.html.tera
+++ b/peach-web/templates/network_detail.html.tera
@@ -66,17 +66,7 @@
           <a class="button button-secondary center" href="/network/wifi" title="Cancel">Cancel</a>
         </div>
         <!-- FLASH MESSAGE -->
-        <!-- check for flash message and display accordingly -->
-        {%- if flash_msg and flash_name == "success" %}
-        <!-- display success message -->
-        <div class="capsule center-text flash-message font-success">{{ flash_msg }}</div>
-        {%- elif flash_msg and flash_name == "info" %}
-        <!-- display info message -->
-        <div class="capsule center-text flash-message font-info">{{ flash_msg }}</div>
-        {%- elif flash_msg and flash_name == "error" %}
-        <!-- display error message -->
-        <div class="capsule center-text flash-message font-failure">{{ flash_msg }}</div>
-        {%- endif -%}
+        {% include "snippets/flash_message" %}
       </div>
     </div>
     <script type="text/javascript" src="/js/network_detail.js"></script>
diff --git a/peach-web/templates/network_modify.html.tera b/peach-web/templates/network_modify.html.tera
index 4c9e5ef0..3c9b18c3 100644
--- a/peach-web/templates/network_modify.html.tera
+++ b/peach-web/templates/network_modify.html.tera
@@ -14,17 +14,7 @@
               </div>
             </form>
             <!-- FLASH MESSAGE -->
-            <!-- check for flash message and display accordingly -->
-            {%- if flash_msg and flash_name == "success" %}
-            <!-- display success message -->
-            <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-            {%- elif flash_msg and flash_name == "info" %}
-            <!-- display info message -->
-            <div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
-            {%- elif flash_msg and flash_name == "error" %}
-            <!-- display error message -->
-            <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-            {%- endif -%}
+            {% include "snippets/flash_message" %}
           </div>
         </div>
         <script type="text/javascript" src="/js/network_modify.js"></script>
diff --git a/peach-web/templates/network_usage.html.tera b/peach-web/templates/network_usage.html.tera
index db876202..2c0ac65b 100644
--- a/peach-web/templates/network_usage.html.tera
+++ b/peach-web/templates/network_usage.html.tera
@@ -41,17 +41,7 @@
           <a class="button button-secondary center" href="/network" title="Cancel">Cancel</a>
         </div>
         <!-- FLASH MESSAGE -->
-        <!-- check for flash message and display accordingly -->
-        {% if flash_msg and flash_name == "success" %}
-        <!-- display success message -->
-        <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-        {%- elif flash_msg and flash_name == "info" %}
-        <!-- display info message -->
-        <div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
-        {%- elif flash_msg and flash_name == "error" %}
-        <!-- display error message -->
-        <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-        {%- endif -%}
+        {% include "snippets/flash_message" %}
       </form>
       <script type="text/javascript" src="/js/network_usage.js"></script>
 {%- endblock card %}
diff --git a/peach-web/templates/peers.html.tera b/peach-web/templates/peers.html.tera
index 8a61b4f7..b78906f8 100644
--- a/peach-web/templates/peers.html.tera
+++ b/peach-web/templates/peers.html.tera
@@ -10,15 +10,6 @@
             <a id="followers" class="button button-primary center" href="/scuttlebutt/followers" title="List Followers">Followers</a>
             <a id="blocks" class="button button-primary center" href="/scuttlebutt/blocks" title="List Blocks">Blocks</a>
           </div>
-          <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {%- if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="center-text flash-message font-success" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="center-text flash-message font-failure" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- endif %}
         </div>
       </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/profile.html.tera b/peach-web/templates/profile.html.tera
index ff6b97c1..aac58f0f 100644
--- a/peach-web/templates/profile.html.tera
+++ b/peach-web/templates/profile.html.tera
@@ -27,13 +27,6 @@
           <a id="privateMessage" class="button button-primary center" href="/scuttlebutt/private_message" title="Private Message">Private Message</a>
         </div>
         <!-- FLASH MESSAGE -->
-        <!-- check for flash message and display accordingly -->
-        {%- if flash_msg and flash_name == "success" %}
-        <!-- display success message -->
-        <div class="center-text flash-message font-success" style="padding-left: 5px;">{{ flash_msg }}.</div>
-        {%- elif flash_msg and flash_name == "error" %}
-        <!-- display error message -->
-        <div class="center-text flash-message font-failure" style="padding-left: 5px;">{{ flash_msg }}.</div>
-        {%- endif %}
+        {% include "snippets/flash_message" %}
       </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/shutdown.html.tera b/peach-web/templates/shutdown.html.tera
index f2c8c50f..12b450cd 100644
--- a/peach-web/templates/shutdown.html.tera
+++ b/peach-web/templates/shutdown.html.tera
@@ -10,20 +10,9 @@
             <a id="cancelBtn" class="button button-secondary center" href="/" title="Cancel">Cancel</a>
           </div>
           <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {%- if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-          {%- endif %}
-          <!-- share ux information with the user if JS is disabled -->
-          <noscript>
-            <div class="capsule flash-message info-border">
-              <p class="center-text">This website will be unresponsive while the device shuts down or reboots.</p>
-            </div>
-          </noscript>
+          {% include "snippets/flash_message" %}
+          <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
+          {% include "snippets/noscript" %}
         </div>
       </div>
       <script type="text/javascript" src="/js/shutdown_menu.js"></script>