Add plugins page

pwnagotchi/ui/web/handler.py

@@ -179,16 +179,19 @@ class Handler:
 
     def plugins(self, name, subpath):
         if name is None:
-            # show plugins overview
-            abort(404)
+            return render_template('plugins.html', loaded=plugins.loaded, database=plugins.database)
+
+        if name == 'toggle' and request.method == 'POST':
+            checked = True if 'enabled' in request.form else False
+            return 'success' if plugins.toggle_plugin(request.form['plugin'], checked) else 'failed'
+
+        if name in plugins.loaded and plugins.loaded[name] is not None and hasattr(plugins.loaded[name], 'on_webhook'):
+            try:
+                return plugins.loaded[name].on_webhook(subpath, request)
+            except Exception:
+                abort(500)
         else:
-            if name in plugins.loaded and hasattr(plugins.loaded[name], 'on_webhook'):
-                try:
-                    return plugins.loaded[name].on_webhook(subpath, request)
-                except Exception:
-                    abort(500)
-            else:
-                abort(404)
+            abort(404)
 
     # serve a message and shuts down the unit
     def shutdown(self):

pwnagotchi/ui/web/static/css/style.css

@@ -31,4 +31,37 @@ a.read {
 
 p.messagebody {
     padding: 1em;
-}
+}
+
+li.navitem {
+    width: 16.66% !important;
+    clear: none !important;
+}
+
+/* Custom indentations are needed because the length of custom labels differs from
+   the length of the standard labels */
+.custom-size-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
+    text-indent: -5.9em;
+}
+
+.custom-size-flipswitch.ui-flipswitch .ui-flipswitch-off {
+    text-indent: 0.5em;
+}
+
+/* Custom widths are needed because the length of custom labels differs from
+   the length of the standard labels */
+.custom-size-flipswitch.ui-flipswitch {
+    width: 8.875em;
+}
+
+.custom-size-flipswitch.ui-flipswitch.ui-flipswitch-active {
+    padding-left: 7em;
+    width: 1.875em;
+}
+
+@media (min-width: 28em) {
+    /*Repeated from rule .ui-flipswitch above*/
+    .ui-field-contain > label + .custom-size-flipswitch.ui-flipswitch {
+        width: 1.875em;
+    }
+}

pwnagotchi/ui/web/templates/base.html

@@ -47,6 +47,7 @@
         ( '/inbox/new', 'new', 'mail', 'New' ),
         ( '/inbox/profile', 'profile', 'info', 'Profile' ),
         ( '/inbox/peers', 'peers', 'user', 'Peers' ),
+        ( '/plugins', 'plugins', 'grid', 'Plugins' ),
     ] %}
     {% set active_page = active_page|default('inbox') %}
 
@@ -54,7 +55,7 @@
         <div data-role="navbar" data-iconpos="left">
             <ul>
                 {% for href, id, icon, caption in navigation %}
-                    <li>
+                    <li class="navitem">
                        <a href="{{ href }}" id="{{ id }}" data-icon="{{ icon }}" class="{{ 'ui-btn-active' if active_page == id }}">{{ caption }}</a>
                     </li>
                 {% endfor %}

pwnagotchi/ui/web/templates/plugins.html

@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+{% set active_page = "plugins" %}
+
+{% block title %}
+Plugins
+{% endblock %}
+
+{% block script %}
+$(function(){
+    $("input[type=checkbox]").change(function(e) {
+          var checkbox = $(this);
+          var form = checkbox.closest("form");
+          var url = form.attr('action');
+
+          $.ajax({
+             type: "POST",
+             url: url,
+             data: form.serialize(),
+             success: function(data) {
+                  if( data.indexOf('failed') != -1 ) {
+                      alert('Could not be toggled.');
+                  }
+            }
+        });
+    });
+});
+{% endblock %}
+{% block content %}
+<div style="padding: 1em">
+    {% for name in database.keys() %}
+      <h4>{{name}}</h4>
+      <form method="POST" action="/plugins/toggle">
+        <input type="checkbox" data-role="flipswitch" name="enabled" id="flip-checkbox-{{name}}" data-on-text="Enabled" data-off-text="Disabled" data-wrapper-class="custom-size-flipswitch" {% if name in loaded %} checked {% endif %}>
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+        <input type="hidden" name="plugin" value="{{ name }}"/>
+      </form>
+    {% endfor %}
+</div>
+{% endblock %}