display validation error when the tutorial link is invalid.

3 files changed, 24 insertions, 39 deletions

diff --git a/app/assets/javascripts/backbone/models/tutorials.js.coffee b/app/assets/javascripts/backbone/models/tutorials.js.coffee
index 17595845..9e2e8a1f 100644
--- a/app/assets/javascripts/backbone/models/tutorials.js.coffee
+++ b/app/assets/javascripts/backbone/models/tutorials.js.coffee
@@ -9,7 +9,7 @@ class CakeSide.Models.Tutorial extends Backbone.Model
     description: null
 
   validate: (attributes, options) ->
-    return "Url is invalid." unless @isValidUrl(attributes.url || '')
+    return "Invalid Url." unless @isValidUrl(attributes.url || '')
     return "This tutorial has no photos." unless @hasImage(attributes.image_url)
 
   isValidUrl: (url) ->
diff --git a/app/assets/javascripts/backbone/templates/tutorials/new.jst.ejs b/app/assets/javascripts/backbone/templates/tutorials/new.jst.ejs
index 678ee028..b9785b16 100644
--- a/app/assets/javascripts/backbone/templates/tutorials/new.jst.ejs
+++ b/app/assets/javascripts/backbone/templates/tutorials/new.jst.ejs
@@ -1,13 +1,10 @@
 <div class="row">
-  <div class="span12">
+  <div class="span9">
     <h1>Share a tutorial link</h1>
-  </div>
-</div>
-<div class="row">
-  <div class="span12">
+    <hr />
     <form id="new-tutorial" name='tutorial' class='form-horizontal'>
       <fieldset>
-        <div class="control-group">
+        <div id="url-group" class="control-group">
           <label class="control-label" for="tutorial_url">Tutorial URL</label>
           <div class="controls">
             <input class="input-xxlarge" id="tutorial_url" name="url" type="text" value="<%= url %>" placeholder="http://www.cakeside.com/" autofocus>
@@ -28,6 +25,8 @@
         </div>
       </fieldset>
     </form>
+  </div>
+  <div class="span3">
     <div id="preview-panel" class="thumbnail">
       <img class="embed-thumb" src="<%= image_url %>" />
       <div class="caption">
diff --git a/app/assets/javascripts/backbone/views/tutorials/new_view.js.coffee b/app/assets/javascripts/backbone/views/tutorials/new_view.js.coffee
index b833da55..22251a3a 100644
--- a/app/assets/javascripts/backbone/views/tutorials/new_view.js.coffee
+++ b/app/assets/javascripts/backbone/views/tutorials/new_view.js.coffee
@@ -3,55 +3,41 @@ class CakeSide.Views.Tutorials.NewView extends Marionette.ItemView
   template: JST['backbone/templates/tutorials/new']
   ui:
     url: '#tutorial_url'
+    url_group: '#url-group'
     save_button: '#save-button'
     preview: '#preview-panel'
 
   modelEvents:
     'invalid': 'displayError'
-    'change': 'render'
+    'change:url': 'render'
 
   events:
     'change #tutorial_url': 'loadUrl'
 
-  templateHelpers:
-    canLoadPreview: ->
-      @image_url
-    isInvalid: ->
-      !@isValid
-
   initialize: ->
     @model = new @collection.model()
     @service = new EmbedlyService()
 
   loadUrl: ->
-    url = @ui.url.val()
-    @resetTutorial(url)
-    @service.retrieve_info_on(url, @loadUrlInformation)
-
-  loadUrlInformation: (data) =>
-    @model.set('url', data.url)
-    @model.set('heading', data.title)
-    @model.set('description', data.description)
-    @model.set('image_url', data.thumbnail_url)
-    @model.set('author', data.provider_name)
-    @model.set('author_url', data.provider_url)
-    @model.isValid()
-
-  resetTutorial: (url) ->
-    @model.set('url', url)
-    @model.set('heading', '')
-    @model.set('description', '')
-    @model.set('image_url', '')
-    @model.set('author', '')
-    @model.set('author_url', '')
-    @model.isValid()
+    @updateTutorial(url: @ui.url.val())
+    if @model.isValidUrl(@ui.url.val())
+      @service.retrieve_info_on(@ui.url.val(), @updateTutorial)
+
+  updateTutorial: (attributes) =>
+    @model.set
+      url: attributes.url
+      heading: attributes.title
+      description: attributes.description
+      image_url: attributes.thumbnail_url
+      author: attributes.provider_name
+      author_url: attributes.provider_url
 
   onRender: ->
     @model.isValid()
 
-  disableSaveButton: ->
-    @ui.save_button.attr('disabled', 'disabled')
-
   displayError: (model, error) ->
-    @disableSaveButton()
+    @ui.save_button.attr('disabled', 'disabled')
     @ui.preview.hide()
+    @ui.url_group.addClass("error")
+    errorTag = $('<span>').addClass('help-inline').text(error)
+    @ui.url_group.find('.controls').append(errorTag)