From 403ef12330ee73e3dbe67a664889bf947a4c274a Mon Sep 17 00:00:00 2001
From: Roeland Jago Douma <roeland@famdouma.nl>
Date: Mon, 15 Oct 2018 15:31:07 +0200
Subject: [PATCH] Move admin templates to compiled handlebars

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>
---
 Makefile                                      |  4 +
 js/admin/signaling-server.js                  | 25 +++---
 js/admin/stun-server.js                       | 20 ++---
 js/admin/templates.js                         | 82 +++++++++++++++++++
 .../templates/signaling-server.handlebars     |  8 ++
 js/admin/templates/stun-server.handlebars     |  6 ++
 js/admin/templates/turn-server.handlebars     | 15 ++++
 js/admin/turn-server.js                       | 32 ++++----
 templates/settings/admin/signaling-server.php |  2 +-
 templates/settings/admin/stun-server.php      |  2 +-
 templates/settings/admin/turn-server.php      |  2 +-
 11 files changed, 154 insertions(+), 44 deletions(-)
 create mode 100644 js/admin/templates.js
 create mode 100644 js/admin/templates/signaling-server.handlebars
 create mode 100644 js/admin/templates/stun-server.handlebars
 create mode 100644 js/admin/templates/turn-server.handlebars

diff --git a/Makefile b/Makefile
index 809436b8b..74cb75876 100644
--- a/Makefile
+++ b/Makefile
@@ -31,6 +31,9 @@ install-npm-deps:
 install-npm-deps-dev:
 	npm install --deps
 
+build-js-templates:
+	handlebars -n OCA.VideoCalls.Admin.Templates js/admin/templates/ -f js/admin/templates.js
+
 dev-setup: install-npm-deps-dev
 
 appstore: clean install-deps
@@ -78,3 +81,4 @@ appstore: clean install-deps
 		openssl dgst -sha512 -sign $(cert_dir)/$(app_name).key $(build_dir)/$(app_name)-$(version).tar.gz | openssl base64; \
 	fi
 
+
diff --git a/js/admin/signaling-server.js b/js/admin/signaling-server.js
index fa5de3fb7..62e7c0726 100644
--- a/js/admin/signaling-server.js
+++ b/js/admin/signaling-server.js
@@ -1,27 +1,19 @@
-/* global OC, OCP, OCA, $, _, Handlebars */
+/* global OC, OCP, OCA, $, _ */
 
-(function(OC, OCP, OCA, $, _, Handlebars) {
+(function(OC, OCP, OCA, $, _) {
 	'use strict';
 
 	OCA.VideoCalls = OCA.VideoCalls || {};
 	OCA.VideoCalls.Admin = OCA.VideoCalls.Admin || {};
 	OCA.VideoCalls.Admin.SignalingServer = {
 
-		TEMPLATE: '<div class="signaling-server">' +
-		'	<input type="text" class="server" placeholder="wss://signaling.example.org" value="{{server}}" aria-label="' + t('spreed', 'Signaling server URL') + '">' +
-		'	<input type="checkbox" id="verify{{seed}}" name="verify{{seed}}" class="checkbox verify" value="1" {{#if verify}} checked="checked"{{/if}}>' +
-		'	<label for="verify{{seed}}">' + t('spreed', 'Validate SSL certificate') + '</label>' +
-		'	<a class="icon icon-delete" title="' + t('spreed', 'Delete server') + '"></a>' +
-		'	<a class="icon icon-add" title="' + t('spreed', 'Add new server') + '"></a>' +
-		'	<span class="icon icon-checkmark-color hidden" title="' + t('spreed', 'Saved') + '"></span>' +
-		'</div>',
 		$list: undefined,
 		$secret: undefined,
 		template: undefined,
 		seed: 0,
 
 		init: function() {
-			this.template = Handlebars.compile(this.TEMPLATE);
+			this.template = OCA.VideoCalls.Admin.Templates['signaling-server'];
 			this.$list = $('div.signaling-servers');
 			this.$secret = $('#signaling_secret');
 			this.renderList();
@@ -134,7 +126,14 @@
 
 		renderServer: function(server) {
 			server.seed = this.seed++;
-			var $template = $(this.template(server));
+			var $template = $(this.template(_.extend(
+				{
+					signalingServerURLTXT: t('spreed', 'Signaling server URL'),
+					validatingSSLTXT: t('spreed', 'Validate SSL certificate'),
+					deleteTXT: t('spreed', 'Delete server'),
+					addNewTXT: t('spreed', 'Add new server'),
+					savedTXT: t('spreed', 'Saved')
+				}, server)));
 
 			$template.find('a.icon-add').on('click', this.addNewTemplate.bind(this));
 			$template.find('a.icon-delete').on('click', this.deleteServer.bind(this));
@@ -146,7 +145,7 @@
 	};
 
 
-})(OC, OCP, OCA, $, _, Handlebars);
+})(OC, OCP, OCA, $, _);
 
 $(document).ready(function(){
 	OCA.VideoCalls.Admin.SignalingServer.init();
diff --git a/js/admin/stun-server.js b/js/admin/stun-server.js
index b5794d3cf..4863d4882 100644
--- a/js/admin/stun-server.js
+++ b/js/admin/stun-server.js
@@ -1,23 +1,17 @@
-/* global OC, OCP, OCA, $, _, Handlebars */
+/* global OC, OCP, OCA, $, _ */
 
-(function(OC, OCP, OCA, $, _, Handlebars) {
+(function(OC, OCP, OCA, $, _) {
 	'use strict';
 
 	OCA.VideoCalls = OCA.VideoCalls || {};
 	OCA.VideoCalls.Admin = OCA.VideoCalls.Admin || {};
 	OCA.VideoCalls.Admin.StunServer = {
 
-		TEMPLATE: '<div class="stun-server">' +
-		'	<input type="text" name="stun_server" placeholder="stunserver:port" value="{{server}}" aria-label="' + t('spreed', 'STUN server URL') + '" />' +
-		'	<a class="icon icon-delete" title="' + t('spreed', 'Delete server') + '"></a>' +
-		'	<a class="icon icon-add" title="' + t('spreed', 'Add new server') + '"></a>' +
-		'	<span class="icon icon-checkmark-color hidden" title="' + t('spreed', 'Saved') + '"></span>' +
-		'</div>',
 		$list: undefined,
 		template: undefined,
 
 		init: function() {
-			this.template = Handlebars.compile(this.TEMPLATE);
+			this.template = OCA.VideoCalls.Admin.Templates['stun-server'];
 			this.$list = $('div.stun-servers');
 			this.renderList();
 		},
@@ -115,7 +109,11 @@
 
 		renderServer: function(server) {
 			var $template = $(this.template({
-				server: server
+				server: server,
+				stunTXT: t('spreed', 'STUN server URL'),
+				deleteTXT: t('spreed', 'Delete server'),
+				newTXT: t('spreed', 'Add new server'),
+				savedTXT: t('spreed', 'Saved'),
 			}));
 
 			$template.find('a.icon-add').on('click', this.addNewTemplate.bind(this));
@@ -128,7 +126,7 @@
 	};
 
 
-})(OC, OCP, OCA, $, _, Handlebars);
+})(OC, OCP, OCA, $, _);
 
 $(document).ready(function(){
 	OCA.VideoCalls.Admin.StunServer.init();
diff --git a/js/admin/templates.js b/js/admin/templates.js
new file mode 100644
index 000000000..fb6059aaf
--- /dev/null
+++ b/js/admin/templates.js
@@ -0,0 +1,82 @@
+(function() {
+  var template = Handlebars.template, templates = OCA.VideoCalls.Admin.Templates = OCA.VideoCalls.Admin.Templates || {};
+templates['signaling-server'] = template({"1":function(container,depth0,helpers,partials,data) {
+    return " checked=\"checked\"";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<div class=\"signaling-server\">\n	<input type=\"text\" class=\"server\" placeholder=\"wss://signaling.example.org\" value=\""
+    + alias4(((helper = (helper = helpers.server || (depth0 != null ? depth0.server : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"server","hash":{},"data":data}) : helper)))
+    + "\" aria-label=\""
+    + alias4(((helper = (helper = helpers.signalingServerURLTXT || (depth0 != null ? depth0.signalingServerURLTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"signalingServerURLTXT","hash":{},"data":data}) : helper)))
+    + "\">\n	<input type=\"checkbox\" id=\"verify"
+    + alias4(((helper = (helper = helpers.seed || (depth0 != null ? depth0.seed : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"seed","hash":{},"data":data}) : helper)))
+    + "\" name=\"verify"
+    + alias4(((helper = (helper = helpers.seed || (depth0 != null ? depth0.seed : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"seed","hash":{},"data":data}) : helper)))
+    + "\" class=\"checkbox verify\" value=\"1\" "
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.verify : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ">\n	<label for=\"verify"
+    + alias4(((helper = (helper = helpers.seed || (depth0 != null ? depth0.seed : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"seed","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.validatingSSLTXT || (depth0 != null ? depth0.validatingSSLTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"validatingSSLTXT","hash":{},"data":data}) : helper)))
+    + "</label>\n	<a class=\"icon icon-delete\" title=\""
+    + alias4(((helper = (helper = helpers.deleteTXT || (depth0 != null ? depth0.deleteTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"deleteTXT","hash":{},"data":data}) : helper)))
+    + "\"></a>\n	<a class=\"icon icon-add\" title=\""
+    + alias4(((helper = (helper = helpers.addNewTXT || (depth0 != null ? depth0.addNewTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"addNewTXT","hash":{},"data":data}) : helper)))
+    + "\"></a>\n	<span class=\"icon icon-checkmark-color hidden\" title=\""
+    + alias4(((helper = (helper = helpers.savedTXT || (depth0 != null ? depth0.savedTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"savedTXT","hash":{},"data":data}) : helper)))
+    + "\"></span>\n</div>\n";
+},"useData":true});
+templates['stun-server'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<div class=\"stun-server\">\n	<input type=\"text\" name=\"stun_server\" placeholder=\"stunserver:port\" value=\""
+    + alias4(((helper = (helper = helpers.server || (depth0 != null ? depth0.server : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"server","hash":{},"data":data}) : helper)))
+    + "\" aria-label=\""
+    + alias4(((helper = (helper = helpers.stunTXT || (depth0 != null ? depth0.stunTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"stunTXT","hash":{},"data":data}) : helper)))
+    + "\" />\n	<a class=\"icon icon-delete\" title=\""
+    + alias4(((helper = (helper = helpers.deleteTXT || (depth0 != null ? depth0.deleteTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"deleteTXT","hash":{},"data":data}) : helper)))
+    + "\"></a>\n	<a class=\"icon icon-add\" title=\""
+    + alias4(((helper = (helper = helpers.newTXT || (depth0 != null ? depth0.newTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"newTXT","hash":{},"data":data}) : helper)))
+    + "\"></a>\n	<span class=\"icon icon-checkmark-color hidden\" title=\""
+    + alias4(((helper = (helper = helpers.savedTXT || (depth0 != null ? depth0.savedTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"savedTXT","hash":{},"data":data}) : helper)))
+    + "\"></span>\n</div>\n";
+},"useData":true});
+templates['turn-server'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "				<option value=\"udp,tcp\">"
+    + alias4(((helper = (helper = helpers.UDPTCPTXT || (depth0 != null ? depth0.UDPTCPTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"UDPTCPTXT","hash":{},"data":data}) : helper)))
+    + "</option>\n				<option value=\"udp\">"
+    + alias4(((helper = (helper = helpers.UDPTXT || (depth0 != null ? depth0.UDPTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"UDPTXT","hash":{},"data":data}) : helper)))
+    + "</option>\n				<option value=\"tcp\">"
+    + alias4(((helper = (helper = helpers.TCPTXT || (depth0 != null ? depth0.TCPTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"TCPTXT","hash":{},"data":data}) : helper)))
+    + "</option>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<div class=\"turn-server\">\n	<input type=\"text\" class=\"server\" placeholder=\"turn.example.org\" value=\""
+    + alias4(((helper = (helper = helpers.server || (depth0 != null ? depth0.server : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"server","hash":{},"data":data}) : helper)))
+    + "\" aria-label=\""
+    + alias4(((helper = (helper = helpers.turnTXT || (depth0 != null ? depth0.turnTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"turnTXT","hash":{},"data":data}) : helper)))
+    + "\">\n	<input type=\"text\" class=\"secret\" placeholder=\""
+    + alias4(((helper = (helper = helpers.sharedSecretTXT || (depth0 != null ? depth0.sharedSecretTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"sharedSecretTXT","hash":{},"data":data}) : helper)))
+    + "\" value=\""
+    + alias4(((helper = (helper = helpers.secret || (depth0 != null ? depth0.secret : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"secret","hash":{},"data":data}) : helper)))
+    + "\" aria-label=\""
+    + alias4(((helper = (helper = helpers.sharedSecretDescTXT || (depth0 != null ? depth0.sharedSecretDescTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"sharedSecretDescTXT","hash":{},"data":data}) : helper)))
+    + "\">\n	<select class=\"protocols\" title=\""
+    + alias4(((helper = (helper = helpers.protocolsTXT || (depth0 != null ? depth0.protocolsTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"protocolsTXT","hash":{},"data":data}) : helper)))
+    + "\">\n"
+    + ((stack1 = (helpers.select || (depth0 && depth0.select) || alias2).call(alias1,(depth0 != null ? depth0.protocols : depth0),{"name":"select","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "	</select>\n	<a class=\"icon icon-category-monitoring\" title=\""
+    + alias4(((helper = (helper = helpers.testTXT || (depth0 != null ? depth0.testTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"testTXT","hash":{},"data":data}) : helper)))
+    + "\"></a>\n	<a class=\"icon icon-delete\" title=\""
+    + alias4(((helper = (helper = helpers.deleteTXT || (depth0 != null ? depth0.deleteTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"deleteTXT","hash":{},"data":data}) : helper)))
+    + "\"></a>\n	<a class=\"icon icon-add\" title=\""
+    + alias4(((helper = (helper = helpers.newTXT || (depth0 != null ? depth0.newTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"newTXT","hash":{},"data":data}) : helper)))
+    + "\"></a>\n	<span class=\"icon icon-checkmark-color hidden\" title=\""
+    + alias4(((helper = (helper = helpers.savedTXT || (depth0 != null ? depth0.savedTXT : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"savedTXT","hash":{},"data":data}) : helper)))
+    + "\"></span>\n</div>\n";
+},"useData":true});
+})();
\ No newline at end of file
diff --git a/js/admin/templates/signaling-server.handlebars b/js/admin/templates/signaling-server.handlebars
new file mode 100644
index 000000000..c23a109c0
--- /dev/null
+++ b/js/admin/templates/signaling-server.handlebars
@@ -0,0 +1,8 @@
+<div class="signaling-server">
+	<input type="text" class="server" placeholder="wss://signaling.example.org" value="{{server}}" aria-label="{{signalingServerURLTXT}}">
+	<input type="checkbox" id="verify{{seed}}" name="verify{{seed}}" class="checkbox verify" value="1" {{#if verify}} checked="checked"{{/if}}>
+	<label for="verify{{seed}}">{{validatingSSLTXT}}</label>
+	<a class="icon icon-delete" title="{{deleteTXT}}"></a>
+	<a class="icon icon-add" title="{{addNewTXT}}"></a>
+	<span class="icon icon-checkmark-color hidden" title="{{savedTXT}}"></span>
+</div>
diff --git a/js/admin/templates/stun-server.handlebars b/js/admin/templates/stun-server.handlebars
new file mode 100644
index 000000000..0320c23ac
--- /dev/null
+++ b/js/admin/templates/stun-server.handlebars
@@ -0,0 +1,6 @@
+<div class="stun-server">
+	<input type="text" name="stun_server" placeholder="stunserver:port" value="{{server}}" aria-label="{{stunTXT}}" />
+	<a class="icon icon-delete" title="{{deleteTXT}}"></a>
+	<a class="icon icon-add" title="{{newTXT}}"></a>
+	<span class="icon icon-checkmark-color hidden" title="{{savedTXT}}"></span>
+</div>
diff --git a/js/admin/templates/turn-server.handlebars b/js/admin/templates/turn-server.handlebars
new file mode 100644
index 000000000..2a40dc1bf
--- /dev/null
+++ b/js/admin/templates/turn-server.handlebars
@@ -0,0 +1,15 @@
+<div class="turn-server">
+	<input type="text" class="server" placeholder="turn.example.org" value="{{server}}" aria-label="{{turnTXT}}">
+	<input type="text" class="secret" placeholder="{{sharedSecretTXT}}" value="{{secret}}" aria-label="{{sharedSecretDescTXT}}">
+	<select class="protocols" title="{{protocolsTXT}}">
+		{{#select protocols}}
+				<option value="udp,tcp">{{UDPTCPTXT}}</option>
+				<option value="udp">{{UDPTXT}}</option>
+				<option value="tcp">{{TCPTXT}}</option>
+		{{/select}}
+	</select>
+	<a class="icon icon-category-monitoring" title="{{testTXT}}"></a>
+	<a class="icon icon-delete" title="{{deleteTXT}}"></a>
+	<a class="icon icon-add" title="{{newTXT}}"></a>
+	<span class="icon icon-checkmark-color hidden" title="{{savedTXT}}"></span>
+</div>
diff --git a/js/admin/turn-server.js b/js/admin/turn-server.js
index 895c25001..48fc111bf 100644
--- a/js/admin/turn-server.js
+++ b/js/admin/turn-server.js
@@ -7,27 +7,12 @@
 	OCA.VideoCalls.Admin = OCA.VideoCalls.Admin || {};
 	OCA.VideoCalls.Admin.TurnServer = {
 
-		TEMPLATE: '<div class="turn-server">' +
-		'	<input type="text" class="server" placeholder="turn.example.org" value="{{server}}" aria-label="' + t('spreed', 'TURN server URL') + '">' +
-		'	<input type="text" class="secret" placeholder="' + t('spreed', 'Shared secret') + '" value="{{secret}}" aria-label="' + t('spreed', 'TURN server shared secret') + '">' +
-		'	<select class="protocols" title="' + t('spreed', 'TURN server protocols') + '">' +
-		'	{{#select protocols}}' +
-		'		<option value="udp,tcp">' + t('spreed', 'UDP and TCP') + '</option>' +
-		'		<option value="udp">' + t('spreed', 'UDP only') + '</option>' +
-		'		<option value="tcp">' + t('spreed', 'TCP only') + '</option>' +
-		'	{{/select}}' +
-		'	</select>' +
-		'	<a class="icon icon-category-monitoring" title="' + t('spreed', 'Test server') + '"></a>' +
-		'	<a class="icon icon-delete" title="' + t('spreed', 'Delete server') + '"></a>' +
-		'	<a class="icon icon-add" title="' + t('spreed', 'Add new server') + '"></a>' +
-		'	<span class="icon icon-checkmark-color hidden" title="' + t('spreed', 'Saved') + '"></span>' +
-		'</div>',
 		$list: undefined,
 		template: undefined,
 
 		init: function() {
 			Handlebars.registerHelper('select', this._handlebarSelectOption);
-			this.template = Handlebars.compile(this.TEMPLATE);
+			this.template = OCA.VideoCalls.Admin.Templates['turn-server'];
 			this.$list = $('div.turn-servers');
 			this.renderList();
 
@@ -264,7 +249,20 @@
 		},
 
 		renderServer: function(server) {
-			var $template = $(this.template(server));
+			var $template = $(this.template(_.extend(
+				{
+					turnTXT: t('spreed', 'TURN server URL'),
+					sharedSecretTXT: t('spreed', 'Shared secret'),
+					sharedSecretDescTXT: t('spreed', 'TURN server shared secret'),
+					UDPTCPTXT: t('spreed', 'UDP and TCP'),
+					UDPTXT: t('spreed', 'UDP only'),
+					TCPTXT: t('spreed', 'TCP only'),
+					testTXT: t('spreed', 'Test server'),
+					deleteTXT: t('spreed', 'Delete server'),
+					newTXT: t('spreed', 'Add new server'),
+					savedTXT: t('spreed', 'Saved'),
+					protocolsTXT: t('spreed', 'TURN server protocols'),
+				},server)));
 
 			$template.find('a.icon-add').on('click', this.addNewTemplate.bind(this));
 			$template.find('a.icon-delete').on('click', this.deleteServer.bind(this));
diff --git a/templates/settings/admin/signaling-server.php b/templates/settings/admin/signaling-server.php
index da3b375ba..92880772c 100644
--- a/templates/settings/admin/signaling-server.php
+++ b/templates/settings/admin/signaling-server.php
@@ -1,7 +1,7 @@
 <?php
 /** @var array $_ */
 /** @var \OCP\IL10N $l */
-script('spreed', ['admin/signaling-server']);
+script('spreed', ['admin/signaling-server', 'admin/templates']);
 style('spreed', ['settings-admin']);
 ?>
 
diff --git a/templates/settings/admin/stun-server.php b/templates/settings/admin/stun-server.php
index 08ffbf7eb..37d343af2 100644
--- a/templates/settings/admin/stun-server.php
+++ b/templates/settings/admin/stun-server.php
@@ -1,7 +1,7 @@
 <?php
 /** @var array $_ */
 /** @var \OCP\IL10N $l */
-script('spreed', ['admin/stun-server']);
+script('spreed', ['admin/stun-server', 'admin/templates']);
 style('spreed', ['settings-admin']);
 ?>
 
diff --git a/templates/settings/admin/turn-server.php b/templates/settings/admin/turn-server.php
index 16255f12a..dd22b6fc1 100644
--- a/templates/settings/admin/turn-server.php
+++ b/templates/settings/admin/turn-server.php
@@ -1,7 +1,7 @@
 <?php
 /** @var array $_ */
 /** @var \OCP\IL10N $l */
-script('spreed', ['admin/turn-server']);
+script('spreed', ['admin/turn-server', 'admin/templates']);
 script('spreed', ['admin/sha1']);
 style('spreed', ['settings-admin']);
 ?>