Commit 396c989e

mo khan <mo@mokhan.ca>
2014-10-04 04:18:38
display errors when updating a profile.
1 parent 6a8f0c9
Changed files (2)
app
assets
javascripts
backbone
templates
views
app/assets/javascripts/backbone/templates/profiles/show.jst.ejs
@@ -1,34 +1,55 @@
 <h1>Public Profile</h1>
 <hr />
+<div id="error-message" class="alert alert-error hidden">
+  <a class="close" data-dismiss="alert" href="#">×</a>
+</div>
 <form id="profile-form" class="form-horizontal">
   <fieldset>
     <div class="control-group">
       <label class="control-label" for="user_name">Name</label>
-      <div class="controls"> <input class="input-xlarge" id="user_name" name="user[name]" type="text" value="<%= name %>"> </div>
+      <div class="controls">
+        <input class="input-xlarge" id="user_name" name="user[name]" type="text" value="<%= name %>">
+        <span class="help-inline"></span>
+      </div>
     </div>
     <div class="control-group">
       <label class="control-label" for="user_email">Email</label>
-      <div class="controls"> <input class="input-xlarge" id="user_email" name="user[email]" type="email" value="<%= email %>"> </div>
+      <div class="controls"> 
+        <input class="input-xlarge" id="user_email" name="user[email]" type="email" value="<%= email %>">
+        <span class="help-inline"></span>
+      </div>
     </div>
     <div class="control-group">
       <label class="control-label" for="user_city">City</label>
-      <div class="controls"> <input class="input-xlarge" id="user_city" name="user[city]" type="text" value="<%= city %>"> </div>
+      <div class="controls"> 
+        <input class="input-xlarge" id="user_city" name="user[city]" type="text" value="<%= city %>">
+        <span class="help-inline"></span>
+      </div>
     </div>
     <div class="control-group">
       <label class="control-label" for="user_website">Website</label> 
-      <div class="controls"> <input class="input-xlarge url" id="user_website" name="user[website]" placeholder="https://www.cakeside.com" type="url" value="<%= website %>"> </div>
+      <div class="controls"> 
+        <input class="input-xlarge url" id="user_website" name="user[website]" placeholder="https://www.cakeside.com" type="url" value="<%= website %>">
+        <span class="help-inline"></span>
+      </div>
     </div>
     <div class="control-group">
       <label class="control-label" for="user_twitter">Twitter username @</label> 
-      <div class="controls"> <input class="input-xlarge" id="user_twitter" maxlength="255" name="user[twitter]" placeholder="without the @ sign" size="255" type="text" value="<%= twitter %>"> </div>
+      <div class="controls"> 
+        <input class="input-xlarge" id="user_twitter" maxlength="255" name="user[twitter]" placeholder="without the @ sign" size="255" type="text" value="<%= twitter %>">
+        <span class="help-inline"></span>
+      </div>
     </div>
     <div class="control-group">
       <label class="control-label" for="user_facebook">Facebook</label> 
-      <div class="controls"> <input class="input-xlarge" id="user_facebook" maxlength="255" name="user[facebook]" placeholder="http://www.facebook.com/your_profile" size="255" type="text" value="<%= facebook %>"> </div>
+      <div class="controls"> 
+        <input class="input-xlarge" id="user_facebook" maxlength="255" name="user[facebook]" placeholder="http://www.facebook.com/your_profile" size="255" type="text" value="<%= facebook %>">
+        <span class="help-inline"></span>
+      </div>
     </div>
     <div class="form-actions">
       <input id="save-button" type="submit" class="btn btn-primary" value="Save changes">
-      <button type="reset" class="btn">Cancel</button>
+      <button id="cancel-button" type="reset" class="btn">Cancel</button>
     </div>
   </fieldset>
 </form>
app/assets/javascripts/backbone/views/profiles/show_view.js.coffee
@@ -10,6 +10,8 @@ class CakeSide.Views.Profiles.ShowView extends Marionette.ItemView
     facebook: '#user_facebook'
     twitter: '#user_twitter'
     save_button: '#save-button'
+    cancel_button: '#cancel-button'
+    error: '#error-message'
 
   modelEvents:
     'invalid': 'displayError'
@@ -18,6 +20,7 @@ class CakeSide.Views.Profiles.ShowView extends Marionette.ItemView
     "submit #profile-form": "save"
     "keyup input": "refreshStatus"
     "change select": "refreshStatus"
+    'click #cancel-button': 'cancel'
 
   save: (event) ->
     event.preventDefault()
@@ -33,6 +36,8 @@ class CakeSide.Views.Profiles.ShowView extends Marionette.ItemView
 
   displayError: ->
     @disableSaveButton()
+    @ui.error.removeClass('hidden')
+    @ui.error.html(@model.validationError)
 
   refreshStatus: ->
     @enableSaveButton()
@@ -44,3 +49,6 @@ class CakeSide.Views.Profiles.ShowView extends Marionette.ItemView
     @model.set('twitter', @ui.twitter.val())
     @model.isValid()
 
+  cancel: ->
+    @enableSaveButton()
+