Confirmation box for when adding multiple folders on the same path (#1960)

AUTHORS

@@ -49,6 +49,7 @@ Jens Diemer <[email protected]> <[email protected]>
 Jochen Voss <[email protected]>
 Johan Vromans <[email protected]>
 Karol Różycki <[email protected]>
+Kelong Cong <[email protected]> <[email protected]>
 Ken'ichi Kamada <[email protected]>
 Kevin Allen <[email protected]>
 Lars K.W. Gohlke <[email protected]>

gui/default/assets/lang/lang-en.json

@@ -228,6 +228,7 @@
    "Version": "Version",
    "Versions Path": "Versions Path",
    "Versions are automatically deleted if they are older than the maximum age or exceed the number of files allowed in an interval.": "Versions are automatically deleted if they are older than the maximum age or exceed the number of files allowed in an interval.",
+   "Warning, this path is a subdirectory of an existing folder \"{%otherFolder%}\".": "Warning, this path is a subdirectory of an existing folder \"{{otherFolder}}\".",
    "When adding a new device, keep in mind that this device must be added on the other side too.": "When adding a new device, keep in mind that this device must be added on the other side too.",
    "When adding a new folder, keep in mind that the Folder ID is used to tie folders together between devices. They are case sensitive and must match exactly between all devices.": "When adding a new folder, keep in mind that the Folder ID is used to tie folders together between devices. They are case sensitive and must match exactly between all devices.",
    "Yes": "Yes",

gui/default/index.html

@@ -619,6 +619,7 @@
   <script src="syncthing/core/modalDirective.js"></script>
   <script src="syncthing/core/naturalFilter.js"></script>
   <script src="syncthing/core/networkErrorDialogDirective.js"></script>
+  <script src="syncthing/core/pathIsSubDirDirective.js"></script>
   <script src="syncthing/core/popoverDirective.js"></script>
   <script src="syncthing/core/restartingDialogDirective.js"></script>
   <script src="syncthing/core/selectOnClickDirective.js"></script>

gui/default/syncthing/core/pathIsSubDirDirective.js

@@ -0,0 +1,36 @@
+angular.module('syncthing.core')
+    .directive('pathIsSubDir', function () {
+        return {
+            require: 'ngModel',
+            link: function (scope, elm, attrs, ctrl) {
+                ctrl.$parsers.unshift(function (viewValue) {
+                    // This function checks whether xdir is a subdirectory of ydir,
+                    // e.g. it would return true if xdir = "/home/a", ydir = "/home/a/b".
+                    function isSubDir(xdir, ydir) {
+                        var xdirArr = xdir.split(scope.system.pathSeparator);
+                        var ydirArr = ydir.split(scope.system.pathSeparator);
+                        if (xdirArr.slice(-1).pop() === "") {
+                            xdirArr = xdirArr.slice(0, -1);
+                        }
+                        if (xdirArr.length > ydirArr.length) {
+                            return false;
+                        }
+                        return xdirArr.map(function(e, i) {
+                            return xdirArr[i] === ydirArr[i];
+                        }).every(function(e) { return e });
+                    }
+
+                    scope.pathIsSubFolder = false;
+                    scope.otherFolder = "";
+                    for (var folderID in scope.folders) {
+                        if (isSubDir(scope.folders[folderID].path, viewValue)) {
+                            scope.otherFolder = folderID;
+                            scope.pathIsSubFolder = true;
+                            break;
+                        }
+                    }
+                    return viewValue;
+                });
+            }
+        };
+});

gui/default/syncthing/folder/editFolderModalView.html

@@ -29,13 +29,14 @@
               </div>
               <div class="form-group" ng-class="{'has-error': folderEditor.folderPath.$invalid && folderEditor.folderPath.$dirty}">
                 <label translate for="folderPath">Folder Path</label>
-                <input name="folderPath" ng-readonly="editingExisting" id="folderPath" class="form-control" type="text" ng-model="currentFolder.path" list="directory-list" required>
+                <input name="folderPath" ng-readonly="editingExisting" id="folderPath" class="form-control" type="text" ng-model="currentFolder.path" list="directory-list" required path-is-sub-dir/>
                 <datalist id="directory-list">
                   <option ng-repeat="directory in directoryList" value="{{ directory }}" />
                 </datalist>
                 <p class="help-block">
                   <span translate ng-if="folderEditor.folderPath.$valid || folderEditor.folderPath.$pristine">Path to the folder on the local computer. Will be created if it does not exist. The tilde character (~) can be used as a shortcut for</span> <code>{{system.tilde}}</code>.
                   <span translate ng-if="folderEditor.folderPath.$error.required && folderEditor.folderPath.$dirty">The folder path cannot be blank.</span>
+                  <span class="text-danger" translate translate-value-other-folder="{{otherFolder}}" ng-if="pathIsSubFolder">Warning, this path is a subdirectory of an existing folder "{%otherFolder%}".</span>
                 </p>
               </div>
             </div>