misc: refactored webui into separate files instead of strings

hmax42 · Nov 5, 2019 · 81032fe · 81032fe
1 parent 2aa73d1
commit 81032fe
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 78 deletions.
diff --git a/MANIFEST.in b/MANIFEST.in
@@ -6,3 +6,4 @@ include LICENSE
 recursive-include bin *
 recursive-include pwnagotchi *.py
 recursive-include pwnagotchi *.yml
+recursive-include pwnagotchi *.*
diff --git a/pwnagotchi/ui/web/handler.py b/pwnagotchi/ui/web/handler.py
@@ -13,77 +13,7 @@
 from flask import send_file
 from flask import request
 from flask import abort
-from flask import render_template_string
-
-STYLE = """
-.block {
-    -webkit-appearance: button;
-    -moz-appearance: button;
-    appearance: button;
-
-    display: block;
-    cursor: pointer;
-    text-align: center;
-}
-.pixelated {
-  image-rendering:optimizeSpeed;             /* Legal fallback */
-  image-rendering:-moz-crisp-edges;          /* Firefox        */
-  image-rendering:-o-crisp-edges;            /* Opera          */
-  image-rendering:-webkit-optimize-contrast; /* Safari         */
-  image-rendering:optimize-contrast;         /* CSS3 Proposed  */
-  image-rendering:crisp-edges;               /* CSS4 Proposed  */
-  image-rendering:pixelated;                 /* CSS4 Proposed  */
-  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
-}
-"""
-
-SCRIPT = """
-window.onload = function() {
-    var image = document.getElementById("ui");
-    function updateImage() {
-        image.src = image.src.split("?")[0] + "?" + new Date().getTime();
-    }
-    setInterval(updateImage, 1000);
-}
-"""
-
-INDEX = """<html>
-  <head>
-      <title>{{ title }}</title>
-      <style>""" + STYLE + """</style>
-  </head>
-  <body>
-    <div style="position: absolute; top:0; left:0; width:100%;" class="pixelated">
-        <img src="/ui" id="ui" style="width:100%;"/>
-        <br/>
-        <hr/>
-        <form style="display:inline;" method="POST" action="/shutdown" onsubmit="return confirm('This will halt the unit, continue?');">
-            <input style="display:inline;" type="submit" class="block" value="Shutdown"/>
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
-        </form>
-        <form style="display:inline;" method="POST" action="/restart" onsubmit="return confirm('This will restart the service in {{ other_mode }} mode, continue?');">
-            <input style="display:inline;" type="submit" class="block" value="Restart in {{ other_mode }} mode"/>
-            <input type="hidden" name="mode" value="{{ other_mode }}"/>
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
-        </form>
-    </div>
-
-    <script type="text/javascript">""" + SCRIPT + """</script>
-  </body>
-</html>"""
-
-STATUS_PAGE = """<html>
-  <head>
-      <title>{{ title }}</title>
-      <meta http-equiv="refresh" content="{{ go_back_after }};URL=/">
-      <style>""" + STYLE + """</style>
-  </head>
-  <body>
-    <div style="position: absolute; top:0; left:0; width:100%;">
-        {{ message }}
-    </div>
-  </body>
-</html>"""
+from flask import render_template, render_template_string
 
 
 class Handler:
@@ -102,8 +32,8 @@ def __init__(self, agent, app):
         self._app.add_url_rule('/plugins/<name>/<path:subpath>', 'plugins', self.plugins, methods=['GET', 'POST'])
 
     def index(self):
-        return render_template_string(INDEX, title=pwnagotchi.name(),
-                                      other_mode='AUTO' if self._agent.mode == 'manual' else 'MANU')
+        return render_template('index', title=pwnagotchi.name(),
+                               other_mode='AUTO' if self._agent.mode == 'manual' else 'MANU')
 
     def plugins(self, name, subpath):
         if name is None:
@@ -125,8 +55,8 @@ def plugins(self, name, subpath):
     # serve a message and shuts down the unit
     def shutdown(self):
         try:
-            return render_template_string(STATUS_PAGE, title=pwnagotchi.name(), go_back_after=60,
-                                          message='Shutting down ...')
+            return render_template('status', title=pwnagotchi.name(), go_back_after=60,
+                                   message='Shutting down ...')
         finally:
             _thread.start_new_thread(pwnagotchi.shutdown, ())
 
@@ -137,8 +67,8 @@ def restart(self):
             mode = 'MANU'
 
         try:
-            return render_template_string(STATUS_PAGE, title=pwnagotchi.name(), go_back_after=30,
-                                          message='Restart in %s mode ...' % mode)
+            return render_template('status', title=pwnagotchi.name(), go_back_after=30,
+                                   message='Restarting in %s mode ...' % mode)
         finally:
             _thread.start_new_thread(pwnagotchi.restart, (mode,))
 

diff --git a/pwnagotchi/ui/web/server.py b/pwnagotchi/ui/web/server.py
@@ -29,7 +29,12 @@ def __init__(self, agent, config):
 
     def _http_serve(self):
         if self._address is not None:
-            app = Flask(__name__)
+            web_path = os.path.dirname(os.path.realpath(__file__))
+
+            app = Flask(__name__,
+                        static_url_path='',
+                        static_folder=os.path.join(web_path, 'static'),
+                        template_folder=os.path.join(web_path, 'templates'))
             app.secret_key = secrets.token_urlsafe(256)
 
             if self._origin:

diff --git a/pwnagotchi/ui/web/static/css/style.css b/pwnagotchi/ui/web/static/css/style.css
@@ -0,0 +1,42 @@
+.block {
+    -webkit-appearance: button;
+    -moz-appearance: button;
+    appearance: button;
+
+    display: block;
+    cursor: pointer;
+    text-align: center;
+}
+
+img#ui {
+    width:100%;
+}
+
+.full {
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+}
+
+.pixelated {
+  image-rendering:optimizeSpeed;             /* Legal fallback */
+  image-rendering:-moz-crisp-edges;          /* Firefox        */
+  image-rendering:-o-crisp-edges;            /* Opera          */
+  image-rendering:-webkit-optimize-contrast; /* Safari         */
+  image-rendering:optimize-contrast;         /* CSS3 Proposed  */
+  image-rendering:crisp-edges;               /* CSS4 Proposed  */
+  image-rendering:pixelated;                 /* CSS4 Proposed  */
+  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
+}
+
+form.action {
+    display:inline;
+}
+
+div.status {
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+}
diff --git a/pwnagotchi/ui/web/static/js/refresh.js b/pwnagotchi/ui/web/static/js/refresh.js
@@ -0,0 +1,7 @@
+window.onload = function() {
+    var image = document.getElementById("ui");
+    function updateImage() {
+        image.src = image.src.split("?")[0] + "?" + new Date().getTime();
+    }
+    setInterval(updateImage, 1000);
+}
diff --git a/pwnagotchi/ui/web/templates/index.html b/pwnagotchi/ui/web/templates/index.html
@@ -0,0 +1,29 @@
+<html>
+<head>
+    <title>{{ title }}</title>
+    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
+</head>
+<body>
+<div class="full pixelated">
+    <img src="/ui" id="ui"/>
+    <br/>
+    <hr/>
+
+    <form class="action" method="POST" action="/shutdown"
+          onsubmit="return confirm('This will halt the unit, continue?');">
+        <input style="display:inline;" type="submit" class="block" value="Shutdown"/>
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+    </form>
+
+    <form class="action" method="POST" action="/restart"
+          onsubmit="return confirm('This will restart the service in {{ other_mode }} mode, continue?');">
+        <input style="display:inline;" type="submit" class="block" value="Restart in {{ other_mode }} mode"/>
+        <input type="hidden" name="mode" value="{{ other_mode }}"/>
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+    </form>
+</div>
+
+<script type="text/javascript" src="/js/refresh.js"></script>
+
+</body>
+</html>
diff --git a/pwnagotchi/ui/web/templates/status.html b/pwnagotchi/ui/web/templates/status.html
@@ -0,0 +1,12 @@
+<html>
+  <head>
+      <title>{{ title }}</title>
+      <meta http-equiv="refresh" content="{{ go_back_after }};URL=/">
+      <link rel="stylesheet" type="text/css" href="/css/style.css"/>
+  </head>
+  <body>
+    <div class="status">
+        {{ message }}
+    </div>
+  </body>
+</html>