Fixed #799

- Fixed UI bug in loopback options toggle
- Optimized plugin select ui

src/accesslist.go

@@ -566,11 +566,12 @@ func handleWhitelistAllowLoopback(w http.ResponseWriter, r *http.Request) {
 		js, _ := json.Marshal(currentEnabled)
 		utils.SendJSONResponse(w, string(js))
 	} else {
-		if enable == "true" {
+		switch enable {
+		case "true":
 			rule.ToggleAllowLoopback(true)
-		} else if enable == "false" {
+		case "false":
 			rule.ToggleAllowLoopback(false)
-		} else {
+		default:
 			utils.SendErrorResponse(w, "invalid enable state: only true and false is accepted")
 			return
 		}

src/web/components/access.html

@@ -1059,7 +1059,7 @@
             })
         });
 
-        $.get("/api/whitelist/allowLocal", function(data){
+        $.get("/api/whitelist/allowLocal?id=" + currentEditingAccessRule, function(data){
             if (data == true){
                 $('#enableWhitelistLoopback').parent().checkbox("set checked");
             }else{
@@ -1080,7 +1080,19 @@
             url: '/api/whitelist/allowLocal',
             data: { enable: isChecked, id: currentEditingAccessRule},
             success: function(data){
-                msgbox("Loopback whitelist " + (isChecked ? "enabled" : "disabled"), true);
+                if (data.error != undefined){
+                    msgbox("Failed to update loopback whitelist: " + data.error, false);
+                    //Revert the checkbox state
+                    if (isChecked){
+                        $('#enableWhitelistLoopback').parent().checkbox("set unchecked");
+                    }else{
+                        $('#enableWhitelistLoopback').parent().checkbox("set checked");
+                    }
+                    return;
+                }else{
+                    msgbox("Loopback whitelist " + (isChecked ? "enabled" : "disabled"), true);
+                }
+                
             }
         });
     }

src/web/components/plugins.html

@@ -120,7 +120,7 @@
         <div class="selectColTitle">Unassigned Plugins</div>
         <div id="selectablePluginList" class="ui relaxed divided list" style="border: 1px solid var(--divider_color);">
           <div class="item" style="pointer-events: none; user-select: none; opacity: 0.6;">
-            <i class="ui arrow up icon"></i> Select a tag to view available plugins
+            <i class="ui green check circle icon"></i> No selected tag
           </div>
         </div>
       </div>
@@ -314,7 +314,9 @@ loadTags();
 
 //This is used as a dummy function to initialize the selectable plugin list
 function initSelectablePluginList(){
-  $("#selectablePluginList").html("");
+  $("#selectablePluginList").html(`<div class="item" style="pointer-events: none; user-select: none; opacity: 0.6;">
+            <i class="ui green check circle icon"></i> No selected tag
+          </div>`);
   $.get(`/api/plugins/list`, function(data){
       data.forEach(plugin => {
       if (plugin.Spec.type != 0) {