lib/config, gui: Disallow some options in combination with "untrusted" (fixes #8920) (#8921)

This prevents combining untrusted with introducer and auto-accept, and
also verifies that folders shared with untrusted devices have passwords
at config loading time.

Co-authored-by: Simon Frei <freisim93@gmail.com>

gui/default/assets/css/overrides.css

@@ -549,6 +549,18 @@ ul.three-columns li, ul.two-columns li {
     opacity: 1;
 }
 
+.checkbox[disabled] {
+    background-color: #eeeeee;
+    opacity: 1;
+    margin-left: -5px;
+    padding-left: 5px;
+}
+
+.checkbox[disabled] *, .checkbox[disabled] .help-block {
+    color: #999999;
+    cursor: not-allowed;
+}
+
 /* Make a "well" look more like a readonly text input when grouped with a button */
 .input-group .well-sm {
   padding-top: 6px;

gui/default/syncthing/core/syncthingController.js

@@ -1709,6 +1709,13 @@ angular.module('syncthing.core')
             return $scope.currentDevice._editing == 'new';
         }
 
+        $scope.editDeviceUntrustedChanged = function () {
+            if (currentDevice.untrusted) {
+                currentDevice.introducer = false;
+                currentDevice.autoAcceptFolders = false;
+            }
+        }
+
         $scope.editDeviceExisting = function (deviceCfg) {
             $scope.currentDevice = $.extend({}, deviceCfg);
             $scope.currentDevice._editing = "existing";

gui/default/syncthing/device/editDeviceModalView.html

@@ -62,9 +62,9 @@
           <div class="row">
             <div class="col-md-6">
               <div class="form-group">
-                <div class="checkbox">
+                <div ng-disabled="currentDevice.untrusted" class="checkbox" ng-attr-tooltip="{{currentDevice.untrusted ? null : undefined}}" ng-attr-data-original-title="{{currentDevice.untrusted ? ('Always disabled for untrusted devices' | translate) : undefined}}">
                   <label>
-                    <input type="checkbox" ng-model="currentDevice.introducer">
+                    <input ng-disabled="currentDevice.untrusted" type="checkbox" ng-model="currentDevice.introducer">
                     <span translate>Introducer</span>
                     <p translate class="help-block">Add devices from the introducer to our device list, for mutually shared folders.</p>
                   </label>
@@ -73,9 +73,9 @@
             </div>
             <div class="col-md-6">
               <div class="form-group">
-                <div class="checkbox">
+                <div ng-disabled="currentDevice.untrusted" class="checkbox" ng-attr-tooltip="{{currentDevice.untrusted ? null : undefined}}" ng-attr-data-original-title="{{currentDevice.untrusted ? ('Always disabled for untrusted devices' | translate) : undefined}}">
                   <label>
-                    <input type="checkbox" ng-model="currentDevice.autoAcceptFolders">
+                    <input ng-disabled="currentDevice.untrusted" type="checkbox" ng-model="currentDevice.autoAcceptFolders">
                     <span translate>Auto Accept</span>
                     <p translate class="help-block">Automatically create or share folders that this device advertises at the default path.</p>
                   </label>
@@ -164,7 +164,7 @@
           </div>
           <div class="row">
             <div class="form-group col-md-6">
-              <input type="checkbox" id="untrusted" ng-model="currentDevice.untrusted" />
+              <input type="checkbox" id="untrusted" ng-model="currentDevice.untrusted" ng-change="editDeviceUntrustedChanged()"/>
               <label for="untrusted" translate>Untrusted</label>
               <p translate class="help-block">All folders shared with this device must be protected by a password, such that all sent data is unreadable without the given password.</p>
             </div>