From 1a65c88881670ad6b364320bb923cb52b36d53b9 Mon Sep 17 00:00:00 2001
From: Alice Kile <buoyantair@protonmail.com>
Date: Mon, 11 Nov 2019 17:34:07 +0530
Subject: [PATCH] app: Use single form for app toggle and configuration

Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
---
 .../modules/ejabberd/templates/ejabberd.html  |  2 +-
 plinth/templates/app.html                     | 30 ++++++++-----------
 static/themes/default/css/plinth.css          |  6 +---
 static/themes/default/js/app.template.js      | 12 ++++----
 4 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/plinth/modules/ejabberd/templates/ejabberd.html b/plinth/modules/ejabberd/templates/ejabberd.html
index 566039d10..9d662a510 100644
--- a/plinth/modules/ejabberd/templates/ejabberd.html
+++ b/plinth/modules/ejabberd/templates/ejabberd.html
@@ -49,7 +49,7 @@
 
   <h3>{% trans "Configuration" %}</h3>
 
-  <form class="form form-configuration" method="post">
+  <form id="app-form" class="form form-configuration" method="post">
     {% csrf_token %}
 
     {{ form|bootstrap }}
diff --git a/plinth/templates/app.html b/plinth/templates/app.html
index 53dedbcc0..7be43e9be 100644
--- a/plinth/templates/app.html
+++ b/plinth/templates/app.html
@@ -26,16 +26,12 @@
 {% 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 }}
+  <div id='app-toggle-container' class="app-toggle-container">
       {% if is_enabled %}
-        <button type="submit" value="False" class="btn toggle-button toggle-button--toggled"></button>
+        <button id="app-toggle-button" value="False" class="btn toggle-button toggle-button--toggled"></button>
       {% else %}
-        <button type="submit" value="True" class="btn toggle-button"></button>
+        <button id="app-toggle-button" value="True" class="btn toggle-button"></button>
       {% endif %}
-    </form>
   </div>
   <header>
     {% block pagetitle %}
@@ -110,19 +106,17 @@
 
   {% include "port-forwarding-info.html" with service_name=name %}
 
-  <noscript>
-    {% block configuration %}
-      <h3>{% trans "Configuration" %}</h3>
-      <form class="form form-configuration" method="post">
-        {% csrf_token %}
+  {% block configuration %}
+    <h3>{% trans "Configuration" %}</h3>
+    <form id="app-form" class="form form-configuration" method="post">
+      {% csrf_token %}
 
-        {{ form|bootstrap }}
+      {{ form|bootstrap }}
 
-        <input type="submit" class="btn btn-primary"
-              value="{% trans "Update setup" %}"/>
-      </form>
-    {% endblock %}
-  </noscript>
+      <input type="submit" class="btn btn-primary"
+            value="{% trans "Update setup" %}"/>
+    </form>
+  {% endblock %}
   
   <script src="{% static 'theme/js/app.template.js' %}"></script>
 {% endblock %}
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index 5b8e68881..ce9f98599 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -465,16 +465,12 @@ a.menu_link_active {
     width: 50%;
 }
 
-.toggle-button-container {
+.app-toggle-container {
     display: none;
     flex-flow: row;
     justify-content: flex-end;
 }
 
-.toggle-button-container .form-group {
-    display: none;
-}
-
 .toggle-button {
     border-radius: 25px;
     border: none;
diff --git a/static/themes/default/js/app.template.js b/static/themes/default/js/app.template.js
index ded526b62..baa06a23c 100644
--- a/static/themes/default/js/app.template.js
+++ b/static/themes/default/js/app.template.js
@@ -1,18 +1,18 @@
-const appToggleForm = document.querySelector('#app-toggle')
-const appToggleContainer = appToggleForm.parentElement
+const appForm = document.querySelector('#app-form')
+const appToggleContainer = document.querySelector('#app-toggle-container')
+const appToggleButton = document.querySelector('#app-toggle-button')
 const appToggleInput = document.querySelector('#app-toggle-input')
 
 const onSubmit = (e) => {
   e.preventDefault
   appToggleInput.checked = !appToggleInput.checked
-  appToggleForm.submit()
+  appForm.submit()
 }
-
-appToggleForm.addEventListener('submit', onSubmit)
-
+appToggleButton.addEventListener('click', onSubmit)
 
 /**
  * if javascript is enabled, this script will run and show the toggle button
  */
 
+appToggleInput.parentElement.style.display = 'none'
 appToggleContainer.style.display = 'flex';
\ No newline at end of file