Add placeholder texts to alias's. Only generate alias's on the server to remove mismatches.

src/Umbraco.Web.UI.Client/src/common/directives/components/umblockedfield.directive.js

@@ -16,7 +16,8 @@ angular.module("umbraco.directives")
 			templateUrl: 'views/components/umb-locked-field.html',
 			scope: {
 				model: '=ngModel',
-				locked: "=?"
+				locked: "=?",
+				placeholderText: "=?"
 			},
 
 			link: function(scope, element, attrs, ngModel) {
@@ -26,6 +27,11 @@ angular.module("umbraco.directives")
 					scope.locked = true;
 				}
 
+				// if locked state is not defined as an attr set default state
+				if(scope.placeholderText === undefined || scope.placeholderText === null) {
+					scope.placeholderText = "Enter value...";
+				}
+
 				scope.toggleLock = function(){
 					scope.locked = !scope.locked;
 				};
@@ -33,4 +39,4 @@ angular.module("umbraco.directives")
 			}
 
 		};
-		});
+		});

src/Umbraco.Web.UI.Client/src/common/directives/editors/umbGenerateAlias.directive.js

@@ -16,41 +16,27 @@ angular.module("umbraco.directives")
                 var generateAliasTimeout = "";
 
                 scope.locked = true;
+                scope.placeholderText = "Enter alias...";
 
                 function generateAlias(value) {
 
-                    var str = value;
-
-                    // replace special characters with spaces
-                    str = str.replace(/[^a-zA-Z0-9]/g, ' ');
-
-                    // camel case string
-                    str = str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
-                      if (+match === 0) { return "";}
-                      return index === 0 ? match.toLowerCase() : match.toUpperCase();
-                    });
-
-                    scope.alias = str;
-
-                    // get safe alias from server
-                    validateAlias(scope.aliasFrom, scope.alias);
-
-                }
-
-                function validateAlias(value) {
-
                   if (generateAliasTimeout) {
                     $timeout.cancel(generateAliasTimeout);
                   }
 
                   if( value !== undefined && value !== "") {
 
+                    scope.alias = "Generating Alias...";
+
                     generateAliasTimeout = $timeout(function () {
-                      contentTypeResource.getSafeAlias(value, true).then(function(safeAlias){
+                      contentTypeResource.getSafeAlias(value, false).then(function(safeAlias){
                         scope.alias = safeAlias.alias;
                       });
-                    }, 1000);
+                    }, 500);
 
+                  } else {
+                    scope.alias = "";
+                    scope.placeholderText = "Enter alias...";
                   }
 
                 }
@@ -75,9 +61,6 @@ angular.module("umbraco.directives")
                     });
                   }
 
-                  if(scope.locked === false && newValue !== undefined && newValue !== null) {
-                    validateAlias(newValue);
-                  }
                 });
 
             }

src/Umbraco.Web.UI.Client/src/views/components/umb-generate-alias.html

@@ -1,4 +1,9 @@
 <div>
     <span ng-if="!enableLock">{{ alias }}</span>
-    <umb-locked-field ng-if="enableLock" locked="$parent.locked" ng-model="$parent.alias"></umb-locked-field>
-</div>
+    <umb-locked-field
+      ng-if="enableLock"
+      locked="$parent.locked"
+      ng-model="$parent.alias"
+      placeholder-text="$parent.placeholderText">
+    </umb-locked-field>
+</div>

src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html

@@ -3,9 +3,12 @@
 	<a href="" ng-click="toggleLock()">
 		<i class="icon" ng-class="{'icon-lock': locked, 'icon-unlocked': !locked}"></i>
 	</a>
-			
-	<span ng-if="locked">{{model}}</span>
 
-	<input type="text" ng-if="!locked" ng-model="$parent.model" placeholder="Enter value..." umb-auto-resize />
+	<span ng-if="locked">
+		<span ng-if="model">{{model}}</span>
+		<span ng-if="!model">{{ placeholderText }}</span>
+	</span>
 
-</div>
+	<input type="text" ng-if="!locked" ng-model="$parent.model" placeholder="{{ $parent.placeholderText }}" umb-auto-resize />
+
+</div>