app: Implement toggle button in app page

- revamp the old form submission model to enable/disable apps into a
  simple toggle button
- provide backwards compatibility when javascript is disabled

Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>

plinth/forms.py

@@ -35,6 +35,7 @@ import plinth
 class AppForm(forms.Form):
     """Generic configuration form for an app."""
     is_enabled = forms.BooleanField(
+        widget=CheckboxInput(attrs={'id': 'app-toggle-input'}),
         label=_('Enable application'), required=False)
 
 

plinth/templates/app.html

@@ -26,17 +26,29 @@
 {% load static %}
 
 {% block content %}
+  <div id='app-toggle-container' class="toggle-button-container">
+    <form id="app-toggle" class="form form-configuration" method="post">
+      {% csrf_token %}
+      {{ form|bootstrap }}
+      {% if is_enabled %}
+        <button type="submit" value="False" class="btn toggle-button toggle-button--toggled"></button>
+      {% else %}
+        <button type="submit" value="True" class="btn toggle-button"></button>
+      {% endif %}
+    </form>
+  </div>
+  <header>
+    {% block pagetitle %}
+      <h2>{{ name }}</h2>
+    {% endblock %}
 
-  {% block pagetitle %}
+    {% block description %}
-    <h2>{{ name }}</h2>
+      {% for paragraph in description %}
-  {% endblock %}
+        <p>{{ paragraph|safe }}</p>
-
+      {% endfor %}
-  {% block description %}
+    {% endblock %}
-    {% for paragraph in description %}
+  </header>
-      <p>{{ paragraph|safe }}</p>
+  
-    {% endfor %}
-  {% endblock %}
-
   {% if manual_page %}
     <p class="manual-page">
       <a href="{% url 'help:manual-page' lang='-' page=manual_page %}">
@@ -98,17 +110,19 @@
 
   {% include "port-forwarding-info.html" with service_name=name %}
 
-  {% block configuration %}
+  <noscript>
-    <h3>{% trans "Configuration" %}</h3>
+    {% block configuration %}
+      <h3>{% trans "Configuration" %}</h3>
+      <form class="form form-configuration" method="post">
+        {% csrf_token %}
 
-    <form class="form form-configuration" method="post">
+        {{ form|bootstrap }}
-      {% csrf_token %}
-
-      {{ form|bootstrap }}
-
-      <input type="submit" class="btn btn-primary"
-             value="{% trans "Update setup" %}"/>
-    </form>
-  {% endblock %}
 
+        <input type="submit" class="btn btn-primary"
+              value="{% trans "Update setup" %}"/>
+      </form>
+    {% endblock %}
+  </noscript>
+  
+  <script src="{% static 'theme/js/app.template.js' %}"></script>
 {% endblock %}

static/themes/default/css/plinth.css

@@ -464,3 +464,46 @@ a.menu_link_active {
 .names-domain-column {
     width: 50%;
 }
+
+.toggle-button-container {
+    display: none;
+    flex-flow: row;
+    justify-content: flex-end;
+}
+
+.toggle-button-container .form-group {
+    display: none;
+}
+
+.toggle-button {
+    border-radius: 25px;
+    border: none;
+    width: 55px;
+    height: 25px;
+    background: #ccc;
+    position: relative;
+}
+
+.toggle-button::before {
+    content: '';
+    display: block;
+    height: 18px;       
+    width: 18px;
+    border-radius: 100%;
+    background: #fff;
+    position: absolute;
+    top: 50%;
+    left: 6%;
+    transform: translateY(-50%);
+}
+.toggle-button--toggled {
+    background: #337ab7;
+}
+.toggle-button--toggled::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%) translateX(-116%)
+}
+

static/themes/default/js/app.template.js

@@ -0,0 +1,18 @@
+const appToggleForm = document.querySelector('#app-toggle')
+const appToggleContainer = appToggleForm.parentElement
+const appToggleInput = document.querySelector('#app-toggle-input')
+
+const onSubmit = (e) => {
+  e.preventDefault
+  appToggleInput.checked = !appToggleInput.checked
+  appToggleForm.submit()
+}
+
+appToggleForm.addEventListener('submit', onSubmit)
+
+
+/**
+ * if javascript is enabled, this script will run and show the toggle button
+ */
+
+appToggleContainer.style.display = 'flex';