gui: Improve warnings when creating folder in a subdirectory (fixes #3197, fixes #3902)

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3904

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

@@ -230,7 +230,10 @@
    "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 parent directory of an existing folder \"{%otherFolder%}\".": "Warning, this path is a parent directory of an existing folder \"{{otherFolder}}\".",
+   "Warning, this path is a parent directory of an existing folder \"{%otherFolderLabel%}\" ({%otherFolder%}).": "Warning, this path is a parent directory of an existing folder \"{{otherFolderLabel}}\" ({{otherFolder}}).",
    "Warning, this path is a subdirectory of an existing folder \"{%otherFolder%}\".": "Warning, this path is a subdirectory of an existing folder \"{{otherFolder}}\".",
+   "Warning, this path is a subdirectory of an existing folder \"{%otherFolderLabel%}\" ({%otherFolder%}).": "Warning, this path is a subdirectory of an existing folder \"{{otherFolderLabel}}\" ({{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/syncthing/core/pathIsSubDirDirective.js

@@ -4,7 +4,7 @@ angular.module('syncthing.core')
             require: 'ngModel',
             link: function (scope, elm, attrs, ctrl) {
                 ctrl.$parsers.unshift(function (viewValue) {
-                    // This function checks whether xdir is a subdirectory of ydir,
+                    // This function checks whether ydir is a subdirectory of xdir,
                     // 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);
@@ -21,13 +21,23 @@ angular.module('syncthing.core')
                     }
 
                     scope.pathIsSubFolder = false;
+                    scope.pathIsParentFolder = false;
                     scope.otherFolder = "";
+                    scope.otherFolderLabel = "";
                     for (var folderID in scope.folders) {
                         if (isSubDir(scope.folders[folderID].path, viewValue)) {
                             scope.otherFolder = folderID;
+                            scope.otherFolderLabel = scope.folders[folderID].label;
                             scope.pathIsSubFolder = true;
                             break;
                         }
+                        if (viewValue !== "" &&
+                            isSubDir(viewValue, scope.folders[folderID].path)) {
+                            scope.otherFolder = folderID;
+                            scope.otherFolderLabel = scope.folders[folderID].label;
+                            scope.pathIsParentFolder = true;
+                            break;
+                        }
                     }
                     return viewValue;
                 });

gui/default/syncthing/folder/editFolderModalView.html

@@ -28,7 +28,10 @@
             <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>
+              <span class="text-danger" translate translate-value-other-folder="{{otherFolder}}" ng-if="pathIsSubFolder && otherFolderLabel.length == 0">Warning, this path is a subdirectory of an existing folder "{%otherFolder%}".</span>
+              <span class="text-danger" translate translate-value-other-folder="{{otherFolder}}" translate-value-other-folder-label="{{otherFolderLabel}}" ng-if="pathIsSubFolder && otherFolderLabel.length != 0">Warning, this path is a subdirectory of an existing folder "{%otherFolderLabel%}" ({%otherFolder%}).</span>
+              <span class="text-danger" translate translate-value-other-folder="{{otherFolder}}" ng-if="pathIsParentFolder && otherFolderLabel.length == 0">Warning, this path is a parent directory of an existing folder "{%otherFolder%}".</span>
+              <span class="text-danger" translate translate-value-other-folder="{{otherFolder}}" translate-value-other-folder-label="{{otherFolderLabel}}" ng-if="pathIsParentFolder && otherFolderLabel.length != 0">Warning, this path is a parent directory of an existing folder "{%otherFolderLabel%}" ({%otherFolder%}).</span>
             </p>
           </div>
         </div>