form serialization class

10 files changed, 107 insertions, 32 deletions

diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index 0988d8a4..9de286c1 100644
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -50,3 +50,8 @@ body {
   position: absolute;
   width: 100%;
 }
+
+.error_hilite {
+  color: red;
+  border-color: red;
+}
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 60a877a2..39946c98 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -456,6 +456,15 @@
 <script src="js/vendor/view/scrollable.js"></script>
 <script src="js/vendor/view/serializable.js"></script>
 
+<script src="js/sdk/_sdk.js"></script>
+<script src="js/sdk/account.js"></script>
+<script src="js/sdk/address.js"></script>
+<script src="js/sdk/auth.js"></script>
+<script src="js/sdk/cart.js"></script>
+<script src="js/sdk/payment.js"></script>
+<script src="js/sdk/product.js"></script>
+<script src="js/sdk/shipping.js"></script>
+
 <script src="js/lib/cart/CartView.js"></script>
 <script src="js/lib/cart/CartPayment.js"></script>
 <script src="js/lib/cart/CartShipping.js"></script>
@@ -493,14 +502,5 @@
 
 <script src="js/lib/_router.js"></script>
 
-<script src="js/sdk/_sdk.js"></script>
-<script src="js/sdk/account.js"></script>
-<script src="js/sdk/address.js"></script>
-<script src="js/sdk/auth.js"></script>
-<script src="js/sdk/cart.js"></script>
-<script src="js/sdk/payment.js"></script>
-<script src="js/sdk/product.js"></script>
-<script src="js/sdk/shipping.js"></script>
-
 <script src="js/index.js"></script>
 </html>
diff --git a/StoneIsland/www/js/lib/_router.js b/StoneIsland/www/js/lib/_router.js
index d010abef..8742ce44 100644
--- a/StoneIsland/www/js/lib/_router.js
+++ b/StoneIsland/www/js/lib/_router.js
@@ -33,10 +33,11 @@ var SiteRouter = Router.extend({
 	},
 	
 	initialize: function(){
+	  console.log("HI!")
 	  var fn
 	  for (var route in this.routes) {
 	    fn = this.routes[route]
-	    if (! fn in this) {
+	    if (! this[fn]) {
 	      this[fn] = this.default_view(fn)
 	    }
 	  }
diff --git a/StoneIsland/www/js/lib/account/LoginView.js b/StoneIsland/www/js/lib/account/LoginView.js
index 334c58b2..f1ad3de8 100644
--- a/StoneIsland/www/js/lib/account/LoginView.js
+++ b/StoneIsland/www/js/lib/account/LoginView.js
@@ -2,6 +2,8 @@ var LoginView = SerializableView.extend({
   
   el: "#login",
   
+  action: sdk.account.login,
+  
   events: {
     "click .newuser": "newuser",
     "submit form": "save",
@@ -23,17 +25,9 @@ var LoginView = SerializableView.extend({
     app.router.go("account/signup")
   },
 
-  save: function(e){
-    e && e.preventDefault()
-    
-    var data = this.serialize()
-    
-    sdk.account.login({ data: data }).done(function(data){
-      console.log("LOGIN SUCCESS", data)
-    }).fail(function(data){
-      console.log("LOGIN FAIL", data)
-    })
-
+  validate_presence: {
+    "Email": "Please enter a valid email address.",
+    "Password": "Please enter your password.",
   },
-  
+
 })
diff --git a/StoneIsland/www/js/lib/account/SignupView.js b/StoneIsland/www/js/lib/account/SignupView.js
index d8459f9b..e695e26f 100644
--- a/StoneIsland/www/js/lib/account/SignupView.js
+++ b/StoneIsland/www/js/lib/account/SignupView.js
@@ -18,6 +18,18 @@ var SignupView = SerializableView.extend({
     document.body.className = "signup"
   },
 
+  validate: function(data){
+    var errors = []
+    if (! data.Name) { errors.push("Please enter your first name.") }
+    if (! data.Surname) { errors.push("Please enter your last name.") }
+    if (! data.Email) { errors.push("Please enter a valid email address.") }
+    if (! data.Password) { errors.push("Please enter your password.") }
+    if (! data.Password2) { errors.push("Please enter your password again.") }
+    if (data.Password !== data.Password2) { errors.push("Passwords don't match.") }
+    if (! data.DataProfiling) { errors.push("You must agree to share your data.") }
+    return errors
+  },
+
   save: function(e){
     e && e.preventDefault()
   },
diff --git a/StoneIsland/www/js/lib/cart/CartConfirm.js b/StoneIsland/www/js/lib/cart/CartConfirm.js
index 8e629e57..0ce94f22 100644
--- a/StoneIsland/www/js/lib/cart/CartConfirm.js
+++ b/StoneIsland/www/js/lib/cart/CartConfirm.js
@@ -13,7 +13,10 @@ var CartConfirm = View.extend({
     app.cart.el.className = "confirm"
     app.footer.show("PLACE ORDER", "CANCEL")
   },
-  
+
+  populate: function(){
+  },
+
   save: function(){
   },
   
diff --git a/StoneIsland/www/js/lib/cart/CartSummary.js b/StoneIsland/www/js/lib/cart/CartSummary.js
index 2f2da664..d91b801f 100644
--- a/StoneIsland/www/js/lib/cart/CartSummary.js
+++ b/StoneIsland/www/js/lib/cart/CartSummary.js
@@ -13,6 +13,9 @@ var CartSummary = View.extend({
     app.cart.el.className = "summary"
     app.footer.show("SHIPPING &gt;", "CANCEL")
   },
+  
+  populate: function(){
+  },
 
   ok: function(){
   },
diff --git a/StoneIsland/www/js/lib/nav/AddressView.js b/StoneIsland/www/js/lib/nav/AddressView.js
index 4ccc263c..fd482378 100644
--- a/StoneIsland/www/js/lib/nav/AddressView.js
+++ b/StoneIsland/www/js/lib/nav/AddressView.js
@@ -1,5 +1,5 @@
 
-var AddressView = View.extend({
+var AddressView = SerializableView.extend({
   
   template: $("#address_template").html(),
   
@@ -8,7 +8,9 @@ var AddressView = View.extend({
   
   initialize: function(opt){
     this.parent = opt.parent
-    this.parent.$(".address").html(this.template)
+    this.$el = this.parent.$(".address")
+    this.el = this.$el[0]
+    this.$el.html(this.template)
   },
   
   populate: function(data){
@@ -21,7 +23,7 @@ var AddressView = View.extend({
   deserialize: function(){
   },
   
-  serialize: function(){
+  validate: function(){
   },
 
 })
diff --git a/StoneIsland/www/js/lib/nav/FooterView.js b/StoneIsland/www/js/lib/nav/FooterView.js
index 7f404581..74b249e6 100644
--- a/StoneIsland/www/js/lib/nav/FooterView.js
+++ b/StoneIsland/www/js/lib/nav/FooterView.js
@@ -30,11 +30,11 @@ var FooterView = View.extend({
   },
 
   ok: function(){
-    (app.view.save || app.view.ok)()
+    (app.view.save || app.view.ok).bind(app.view)()
   },
 
   cancel: function(){
-    (app.view.cancel || app.intro.show)()
+    app.view.cancel ? app.view.cancel() : app.intro.show()
   },
   
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/vendor/view/serializable.js b/StoneIsland/www/js/vendor/view/serializable.js
index 91d84997..4ad5558f 100644
--- a/StoneIsland/www/js/vendor/view/serializable.js
+++ b/StoneIsland/www/js/vendor/view/serializable.js
@@ -1,13 +1,68 @@
 var SerializableView = View.extend({
 
   serialize: function(){
-    var fd = new FormData(), hasCSRF = false
-
+    var fields = {}
     this.$("input[name], select[name], textarea[name]").each( function(){
-      fd.append(this.name, this.value)
+      fields[this.name] = this.value
+    })
+    return fields
+  },
+  
+  deserialize: function(data){
+    this.$("input[name], textarea[name]").val("")
+    Object.keys(data).forEach(function(k){
+      this.$("[" + k + "]").val(data[k])
+    })
+  },
+  
+  validate: function(data){
+    var errors = []
+    var presence_msgs = this.validate_presence
+    Object.keys(presence_msgs).forEach(function(k){
+      if (! data[k]) errors.push( [ k, presence_msgs[k] ] )
     })
+    return errors.length ? errors : null
+  },
+  
+  show_errors: function(errors){
+    var msgs = []
+    errors.forEach(function(e){
+      this.$("[name=" + e[0] + "]").addClass('error_hilite')
+      msgs.push(e[1])
+    }.bind(this))
+    this.$msg.html(msgs.join("<br>"))
+  },
+  
+  hide_errors: function(){
+    this.$msg.html("")
+  },
+
+  save: function(e){
+    e && e.preventDefault()
+
+    var data = this.serialize()
+    var errors = this.validate(data)
+    if (errors) {
+      this.show_errors(errors)
+      return
+    }
+    else {
+      this.hide_errors()
+    }
     
-    return fd
+    this.action({
+      data: data,
+      success: this.success.bind(this),
+      error: this.error.bind(this),
+    })
   },
   
+  success: function(data){
+    console.log("SUCCESS", data)
+  },
+  
+  error: function(data){
+    console.log("FAIL", data)
+  },
+
 })
\ No newline at end of file