Add submit button to validate the federated server,

fixes issue #25364

apps/federation/js/settings-admin.js

@@ -18,28 +18,97 @@
  *
  */
 
-$(document).ready(function () {
+(function( $ ) {
  
-	// show input field to add a new trusted server
+    // ocFederationAddServer
-	$("#ocFederationAddServer").on('click', function() {
+    $.fn.ocFederationAddServer = function() {
-		$('#ocFederationAddServerButton').addClass('hidden');
+
-		$("#serverUrl").removeClass('hidden');
+        /* Go easy on jquery and define some vars
-		$("#serverUrl").focus();
+        ========================================================================== */
+
+        var $wrapper = $(this),
+            
+            // Buttons
+            $btnAddServer   = $wrapper.find("#ocFederationAddServerButton"),
+            $btnSubmit      = $wrapper.find("#ocFederationSubmit"),
+            
+            // Inputs
+            $inpServerUrl   = $wrapper.find("#serverUrl"),
+            $inpAutoAddServers = $wrapper.find("#autoAddServers"),
+
+            // misc
+            $msgBox         = $wrapper.find("#ocFederationAddServer .msg"),
+            $srvList        = $wrapper.find("#listOfTrustedServers");
+
+
+        /* Interaction
+        ========================================================================== */
+
+        $btnAddServer.on('click', function() {
+            $btnAddServer.addClass('hidden');
+            $inpServerUrl
+                .removeClass('hidden')
+                .focus();
         });
 
-	// add new trusted server
+        // trigger server removal
-	$("#serverUrl").keyup(function (e) {
+        $srvList.on('click', 'li > .icon-delete', function() {
+            var $this = $(this).parent();
+            var id = $this.attr('id');
+            
+            removeServer( id );
+        });
+
+        $inpAutoAddServers.on("change", function() {
+            $.post(
+                OC.generateUrl('/apps/federation/auto-add-servers'),
+                {
+                    autoAddServers: $(this).is(":checked")
+                }
+            );
+        });
+
+        $btnSubmit.on("click", function()
+        {
+            addServer($inpServerUrl.val());
+        });
+
+        $inpServerUrl.on("change keyup", function (e) {
+
+            console.log("typing away");
+
+            url = $(this).val();
+
+            // toggle add-button visiblity based on input length
+            if ( url.length > 0 )
+                $btnSubmit.removeClass("hidden")
+            else
+                $btnSubmit.addClass("hidden")
+
             if (e.keyCode === 13) { // add server on "enter"
-			var url = $('#serverUrl').val();
+                addServer(url);
+            } else if (e.keyCode === 27) { // hide input filed again in ESC
+                $btnAddServer.removeClass('hidden');
+                $inpServerUrl.val("").addClass('hidden');
+                $btnSubmit.addClass('hidden');
+            }
+        });
+    };
+    
+    /* private Functions
+    ========================================================================== */
+
+    function addServer( url ) {
         OC.msg.startSaving('#ocFederationAddServer .msg');
+
         $.post(
             OC.generateUrl('/apps/federation/trusted-servers'),
             {
                 url: url
             }
         ).done(function (data) {
-					$('#serverUrl').attr('value', '');
+            $("#serverUrl").attr('value', '');
-					$('ul#listOfTrustedServers').prepend(
+            $("#listOfTrustedServers").prepend(
                 $('<li>')
                     .attr('id', data.id)
                     .html('<span class="status indeterminate"></span>' +
@@ -51,33 +120,23 @@ $(document).ready(function () {
         .fail(function (jqXHR) {
             OC.msg.finishedError('#ocFederationAddServer .msg', JSON.parse(jqXHR.responseText).message);
         });
-		} else if (e.keyCode === 27) { // hide input filed again in ESC
+    };
-			$('#ocFederationAddServerButton').toggleClass('hidden');
-			$("#serverUrl").toggleClass('hidden');
-		}
-	});
 
-// remove trusted server from list
+    function removeServer( id ) {
-	$( "#listOfTrustedServers" ).on('click', 'li > .icon-delete', function() {
-		var $this = $(this).parent();
-		var id = $this.attr('id');
         $.ajax({
             url: OC.generateUrl('/apps/federation/trusted-servers/' + id),
             type: 'DELETE',
             success: function(response) {
-				$this.remove();
+                $("#ocFederationSettings").find("#" + id).remove();
             }
         });
-
-	});
-
-	$("#ocFederationSettings #autoAddServers").change(function() {
-		$.post(
-				OC.generateUrl('/apps/federation/auto-add-servers'),
-				{
-					autoAddServers: $(this).is(":checked")
     }
-		);
+
-	});
+ 
+})( jQuery );
+
+$(document).ready(function () {
+
+    $('#ocFederationSettings').ocFederationAddServer();
     
 });

apps/federation/templates/settings-admin.php

@@ -19,6 +19,7 @@ style('federation', 'settings-admin')
 	<p id="ocFederationAddServer">
 		<button id="ocFederationAddServerButton" class=""><?php p($l->t('+ Add Nextcloud server')); ?></button>
 		<input id="serverUrl" class="hidden" type="text" value="" placeholder="<?php p($l->t('Nextcloud Server')); ?>" name="server_url"/>
+		<button id="ocFederationSubmit" class="hidden"><?php p($l->t('Add')); ?></button>
 		<span class="msg"></span>
 	</p>
 	<ul id="listOfTrustedServers">