Rendering admin/webmail path based on checkbox value

setup/templates/steps/compose/02_services.html

@@ -15,15 +15,14 @@ accessing messages for beginner users.</p>
 <!--     {{ macros.radio("webmail_type", "rainloop", "Rainloop", "lightweight Webmail based on PHP, no database") }} -->
 <!--   </div> -->
   <br/>
-  <select class="btn btn-primary dropdown-toggle" name="webmail_type">
+  <select class="btn btn-primary dropdown-toggle" name="webmail_type" id="webmail">
   	{% for webmailtype in ["none", "roundcube", "rainloop"] %}
   	<option value="{{ webmailtype }}" >{{ webmailtype }}</option>
   	{% endfor %}
   </select>
   <p></p>
   <div class="input-group">
-<!--     <div class="input-group-addon"><input type="checkbox" name="webmail_enabled" value="true"></div> -->
-    <input class="form-control" type="text" name="webmail_path" value="/webmail">
+    <input class="form-control" type="text" name="webmail_path" id="webmail_path" style="display: none">
   </div>
 </div>
 
@@ -53,4 +52,27 @@ also disable the antivirus if required (it does use aroung 1GB of ram).</p>
   </label>
 </div>
 
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+<script type = "text/javascript" language = "javascript">
+	$(document).ready(function() {
+		if ($("#webmail").val() == 'none') {
+			$("#webmail_path").hide();
+         	$("#webmail_path").attr("value", "");
+		} else {
+			$("#webmail_path").show();
+      		$("#webmail_path").attr("value", "/webmail");
+		}
+		$("#webmail").click(function () {
+           if (this.value == 'none') {
+        	   $("#webmail_path").hide();
+        	   $("#webmail_path").attr("value", "");
+           } else {
+        	   $("#webmail_path").show();
+        	   $("#webmail_path").attr("value", "/webmail");
+           }
+        });
+	 });
+</script>
+
 {% endcall %}

setup/templates/steps/config.html

@@ -68,11 +68,29 @@ Or in plain english: if receivers start to classify your mail as spam, this post
 manage your email domains, users, etc.</p>
 
 <div class="form-group">
+    <input type="checkbox" name="admin_enabled" value="true" id="admin">
   	<label>Enable the admin UI (and path to the admin UI)</label>
-  <div class="input-group">
-    <div class="input-group-addon"><input type="checkbox" name="admin_enabled" value="true"></div>
-    <input class="form-control" type="text" name="admin_path" value="/admin">
-  </div>
+    <input class="form-control" type="text" name="admin_path" id="admin_path" style="display: none">
 </div>
 
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+<script type = "text/javascript" language = "javascript">
+	$(document).ready(function() {
+		if ($('#admin').prop('checked')) {
+			$("#admin_path").show();
+			$("#admin_path").attr("value", "/admin");
+		}
+		$("#admin").change(function() {
+			if ($(this).is(":checked")) {
+				$("#admin_path").show();
+				$("#admin_path").attr("value", "/admin");
+			} else {
+				$("#admin_path").hide();
+				$("#admin_path").attr("value", "");
+			}
+		});
+	});
+</script>
+
 {% endcall %}

setup/templates/steps/stack/02_services.html

@@ -15,15 +15,14 @@ accessing messages for beginner users.</p>
 <!--     {{ macros.radio("webmail_type", "rainloop", "Rainloop", "lightweight Webmail based on PHP, no database") }} -->
 <!--   </div> -->
   <br/>
-  <select class="btn btn-primary dropdown-toggle" name="webmail_type">
+  <select class="btn btn-primary dropdown-toggle" name="webmail_type" id="webmail">
   	{% for webmailtype in ["none", "roundcube", "rainloop"] %}
   	<option value="{{ webmailtype }}" >{{ webmailtype }}</option>
   	{% endfor %}
   </select>
   <p></p>
   <div class="input-group">
-<!--     <div class="input-group-addon"><input type="checkbox" name="webmail_enabled" value="true"></div> -->
-    <input class="form-control" type="text" name="webmail_path" value="/webmail">
+    <input class="form-control" type="text" name="webmail_path" id="webmail_path" style="display: none">
   </div>
 </div>
 
@@ -53,4 +52,27 @@ also disable the antivirus if required (it does use aroung 1GB of ram).</p>
   </label>
 </div>
 
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+<script type = "text/javascript" language = "javascript">
+	$(document).ready(function() {
+		if ($("#webmail").val() == 'none') {
+			$("#webmail_path").hide();
+         	$("#webmail_path").attr("value", "");
+		} else {
+			$("#webmail_path").show();
+      		$("#webmail_path").attr("value", "/webmail");
+		}
+		$("#webmail").click(function () {
+           if (this.value == 'none') {
+        	   $("#webmail_path").hide();
+        	   $("#webmail_path").attr("value", "");
+           } else {
+        	   $("#webmail_path").show();
+        	   $("#webmail_path").attr("value", "/webmail");
+           }
+        });
+	 });
+</script>
+
 {% endcall %}