Hide options if P2P is disabled

web/libs/js/super.easyRemoteAccess.js

@@ -1,6 +1,6 @@
 $(document).ready(function(){
     var easyRemoteAccessTab = $('#easyRemoteAccess')
-    var p2pServerListContainer = $('#p2pServerList')
+    var toggleAffected = easyRemoteAccessTab.find('.p2p-toggle-affected')
     var p2pEnabledSwitch = easyRemoteAccessTab.find('[name="p2pEnabled"]')
     var p2pHostSelectedContainer = $('#p2pHostSelected')
     var easyRemoteAccessForm = easyRemoteAccessTab.find('form')
@@ -117,10 +117,10 @@ $(document).ready(function(){
         var isOn = p2pEnabledSwitch.val() === '1'
         if(isOn){
             beginAllStatusConnections()
-            p2pServerListContainer.show()
+            toggleAffected.show()
         }else{
             closeAllStatusConnections()
-            p2pServerListContainer.hide()
+            toggleAffected.hide()
         }
     }
     p2pEnabledSwitch.change(setVisibilityForList)

web/pages/blocks/easyRemoteAccess.ejs

@@ -37,10 +37,10 @@
                             <option <% if(config.p2pEnabled !== true){ %>selected<% } %> value="0"><%- lang.Off %></option>
                         </select>
                     </div>
-                    <div class="form-group">
+                    <div class="form-group p2p-toggle-affected">
                         <input placeholder="<%-lang['P2P API Key']%>" class="form-control btn btn-dark text-left text-white" type="text" name="p2pApiKey" value="<%- config.p2pApiKey %>">
                     </div>
-                    <div class="form-group">
+                    <div class="form-group p2p-toggle-affected">
                         <div class="btn-group d-flex flex-row">
                             <a target="_blank" href="#" class="flex-grow-1 btn btn-default remote-dashboard-link-copy"><i class="fa fa-copy"></i> <%- lang['Copy Remote Link'] %></a>
                             <a target="_blank" href="#" class="flex-grow-1 btn btn-info remote-dashboard-link" target="_blank"><i class="fa fa-external-link"></i> <%- lang['Open Remote Dashboard'] %></a>
@@ -65,7 +65,7 @@
             </div>
         </div>
     </div>
-    <div class="row" id="p2pServerList">
+    <div class="row p2p-toggle-affected" id="p2pServerList">
         <% Object.keys(p2pServerList).forEach((key) => {
             const details = p2pServerList[key]
             if(config.useBetterP2P && !details.v2)return;
@@ -113,7 +113,7 @@
             </div>
         <% }) %>
     </div>
-    <div class="form-group">
+    <div class="form-group p2p-toggle-affected">
         <div class="btn-group d-flex flex-row">
             <a target="_blank" href="#" class="flex-grow-1 btn btn-info remote-dashboard-link" target="_blank"><i class="fa fa-external-link"></i> <%- lang['Open Remote Dashboard'] %></a>
             <a href="#" class="submit flex-grow-1 btn btn-success"><i class="fa fa-check"></i> <%- lang.Save %></a>