gui: Add confirmation dialog for revert/override (fixes #7520) (#7522)

gui/default/syncthing/core/syncthingController.js

@@ -2473,10 +2473,6 @@ angular.module('syncthing.core')
             return $scope.model[folder].errors !== 0;
         };
 
-        $scope.override = function (folder) {
-            $http.post(urlbase + "/db/override?folder=" + encodeURIComponent(folder));
-        };
-
         $scope.showLocalChanged = function (folder) {
             $scope.localChangedFolder = folder;
             $scope.localChanged = $scope.refreshLocalChanged(1, 10);
@@ -2486,10 +2482,6 @@ angular.module('syncthing.core')
             });
         };
 
-        $scope.revert = function (folder) {
-            $http.post(urlbase + "/db/revert?folder=" + encodeURIComponent(folder));
-        };
-
         $scope.canRevert = function (folder) {
             var f = $scope.model[folder];
             if (!f) {
@@ -2498,6 +2490,35 @@ angular.module('syncthing.core')
             return $scope.model[folder].receiveOnlyTotalItems > 0;
         };
 
+        $scope.revertOverride = function () {
+            $http.post(
+                urlbase + "/db/" + $scope.revertOverrideParams.operation +"?folder="
+                +encodeURIComponent($scope.revertOverrideParams.folderID));
+        };
+
+        $scope.revertOverrideConfirmationModal = function (type, folderID) {
+            var params = {
+                type: type,
+                folderID: folderID,
+            };
+            switch (type) {
+                case "override":
+                    params.heading = $translate.instant("Override");
+                    params.operation = "override";
+                    break;
+                case "revert":
+                    params.heading = $translate.instant("Revert");
+                    params.operation = "revert";
+                    break;
+                case "deleteEnc":
+                    params.heading = $translate.instant("Delete Unexpected Items");
+                    params.operation = "revert";
+                    break;
+            }
+            $scope.revertOverrideParams = params;
+            $('#revert-override-confirmation').modal('show');
+        };
+
         $scope.advanced = function () {
             $scope.advancedConfig = angular.copy($scope.config);
             $scope.advancedConfig.devices.sort(deviceCompare);

gui/default/syncthing/folder/revertOverrideView.html

@@ -0,0 +1,33 @@
+<modal id="revert-override-confirmation" status="danger" icon="fas fa-question-circle" heading="{{revertOverrideParams.heading}}" large="no" closeable="yes">
+  <div class="modal-body" ng-switch="revertOverrideParams.type">
+    <div ng-switch-when="deleteEnc">
+      <p>
+        <span translate>Unexpected items have been found in this folder.</span></br>
+        <span translate translate-value-receive-encrypted="{{'Receive Encrypted' | translate}}">You should never add or change anything locally in a "{%receiveEncrypted%}" folder.</span>
+      </p>
+      <p translate>
+        Are you sure you want to permanently delete all these files?
+      </p>
+    </div>
+    <div ng-switch-default>
+      <p>
+        <span translate>Warning</span>:</br>
+        <span ng-switch="revertOverrideParams.type">
+          <span ng-switch-when="override" translate>The folder content on other devices will be overwritten to become identical with this device. Files not present here will be deleted on other devices.</span>
+          <span ng-switch-default translate>The folder content on this device will be overwritten to become identical with other devices. Files newly added here will be deleted.</span>
+        </span>
+      </p>
+      <p translate>
+        Are you sure you want to continue?
+      </p>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-danger pull-left btn-sm" data-dismiss="modal" ng-click="revertOverride()">
+      <span class="fas fa-check"></span>&nbsp;<span translate>Yes</span>
+    </button>
+    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
+      <span class="fas fa-times"></span>&nbsp;<span translate>No</span>
+    </button>
+  </div>
+</modal>