Improve error handling for the PSM

closes #5762

- changes date to use proper inline validation
- changes meta_title & desc to also use inline validation
- meta_title & desc also give proper errors on save
- title too long causes proper error on save

core/client/app/controllers/post-settings-menu.js

@@ -330,7 +330,7 @@ export default Ember.Controller.extend(SettingsMenuMixin, {
 
             // If errors, notify and exit.
             if (errMessage) {
-                this.showErrors(errMessage);
+                this.get('model.errors').add('post-setting-date', errMessage);
 
                 return;
             }
@@ -356,47 +356,45 @@ export default Ember.Controller.extend(SettingsMenuMixin, {
         },
 
         setMetaTitle: function (metaTitle) {
-            var self = this,
-                currentTitle = this.get('model.meta_title') || '';
+            var property = 'meta_title',
+                model = this.get('model'),
+                currentTitle = model.get(property) || '';
 
             // Only update if the title has changed
             if (currentTitle === metaTitle) {
                 return;
             }
 
-            this.set('model.meta_title', metaTitle);
+            model.set(property, metaTitle);
 
             // If this is a new post.  Don't save the model.  Defer the save
             // to the user pressing the save button
-            if (this.get('model.isNew')) {
+            if (model.get('isNew')) {
                 return;
             }
 
-            this.get('model').save().catch(function (errors) {
-                self.showErrors(errors);
-            });
+            model.save();
         },
 
         setMetaDescription: function (metaDescription) {
-            var self = this,
-                currentDescription = this.get('model.meta_description') || '';
+            var property = 'meta_description',
+                model = this.get('model'),
+                currentDescription = model.get(property) || '';
 
             // Only update if the description has changed
             if (currentDescription === metaDescription) {
                 return;
             }
 
-            this.set('model.meta_description', metaDescription);
+            model.set(property, metaDescription);
 
             // If this is a new post.  Don't save the model.  Defer the save
             // to the user pressing the save button
-            if (this.get('model.isNew')) {
+            if (model.get('isNew')) {
                 return;
             }
 
-            this.get('model').save().catch(function (errors) {
-                self.showErrors(errors);
-            });
+            model.save();
         },
 
         setCoverImage: function (image) {

core/client/app/mixins/editor-base-controller.js

@@ -224,10 +224,25 @@ export default Ember.Mixin.create({
         notifications.showNotification(message.htmlSafe(), {delayed: delay});
     },
 
-    showErrorNotification: function (prevStatus, status, errors, delay) {
+    showErrorAlert: function (prevStatus, status, errors, delay) {
         var message = this.messageMap.errors.post[prevStatus][status],
-            error = (errors && errors[0] && errors[0].message) || 'Unknown Error',
-            notifications = this.get('notifications');
+            notifications = this.get('notifications'),
+            error;
+
+        function isString(str) {
+            /*global toString*/
+            return toString.call(str) === '[object String]';
+        }
+
+        if (errors && isString(errors)) {
+            error = errors;
+        } else if (errors && errors[0] && isString(errors[0])) {
+            error = errors[0];
+        } else if (errors && errors[0] && errors[0].message && isString(errors[0].message)) {
+            error = errors[0].message;
+        } else {
+            error = 'Unknown Error';
+        }
 
         message += '<br />' + error;
 
@@ -306,7 +321,8 @@ export default Ember.Mixin.create({
                 });
             }).catch(function (errors) {
                 if (!options.silent) {
-                    self.showErrorNotification(prevStatus, self.get('model.status'), errors);
+                    errors = errors || self.get('model.errors.messages');
+                    self.showErrorAlert(prevStatus, self.get('model.status'), errors);
                 }
 
                 self.set('model.status', prevStatus);

core/client/app/templates/post-settings-menu.hbs

@@ -21,17 +21,18 @@
                 {{/if}}
 
                 <span class="input-icon icon-link">
-                    {{gh-input class="gh-input post-setting-slug" id="url" value=slugValue name="post-setting-slug" focus-out="updateSlug" selectOnClick="true" stopEnterKeyDownPropagation="true"}}
+                    {{gh-input class="post-setting-slug" id="url" value=slugValue name="post-setting-slug" focus-out="updateSlug" selectOnClick="true" stopEnterKeyDownPropagation="true"}}
                 </span>
                 {{gh-url-preview slug=slugValue tagName="p" classNames="description"}}
             </div>
 
-            <div class="form-group">
+            {{#gh-form-group errors=model.errors property="post-setting-date"}}
                 <label for="post-setting-date">Publish Date</label>
                 <span class="input-icon icon-calendar">
-                    {{gh-input class="gh-input post-setting-date" id="post-setting-date" value=publishedAtValue name="post-setting-date" focus-out="setPublishedAt" stopEnterKeyDownPropagation="true"}}
+                    {{gh-input class="post-setting-date" id="post-setting-date" value=publishedAtValue name="post-setting-date" focus-out="setPublishedAt" stopEnterKeyDownPropagation="true"}}
                 </span>
-            </div>
+                {{gh-error-message errors=model.errors property="post-setting-date"}}
+            {{/gh-form-group}}
 
             <div class="form-group">
                 <label for="tag-input">Tags</label>
@@ -104,17 +105,19 @@
 
         <div class="settings-menu-content">
             <form>
-            <div class="form-group">
+            {{#gh-form-group errors=model.errors property="meta_title"}}
                 <label for="meta-title">Meta Title</label>
-                {{gh-input class="gh-input post-setting-meta-title" id="meta-title" value=metaTitleScratch name="post-setting-meta-title" focus-out="setMetaTitle" stopEnterKeyDownPropagation="true"}}
+                {{gh-input class="post-setting-meta-title" id="meta-title" value=metaTitleScratch name="post-setting-meta-title" focus-out="setMetaTitle" stopEnterKeyDownPropagation="true"}}
                 <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters metaTitleScratch 70}}</p>
-            </div>
+                {{gh-error-message errors=model.errors property="meta_title"}}
+            {{/gh-form-group}}
 
-            <div class="form-group">
+            {{#gh-form-group errors=model.errors property="meta_description"}}
                 <label for="meta-description">Meta Description</label>
                 {{gh-textarea class="gh-input post-setting-meta-description" id="meta-description" value=metaDescriptionScratch name="post-setting-meta-description" focus-out="setMetaDescription" stopEnterKeyDownPropagation="true"}}
                 <p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters metaDescriptionScratch 156}}</p>
-            </div>
+                {{gh-error-message errors=model.errors property="meta_description"}}
+            {{/gh-form-group}}
 
             <div class="form-group">
                 <label>Search Engine Result Preview</label>

core/client/app/validators/post.js

@@ -10,6 +10,11 @@ var PostValidator = BaseValidator.create({
             model.get('errors').add('title', 'You must specify a title for the post.');
             this.invalidate();
         }
+
+        if (!validator.isLength(title, 0, 150)) {
+            model.get('errors').add('title', 'Title cannot be longer than 150 characters.');
+            this.invalidate();
+        }
     },
 
     metaTitle: function (model) {