Init backbone login application

www/scripts/apps/login/home/views/errorView.js

@@ -0,0 +1,49 @@
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2013 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+define([
+    "jquery",
+    "underscore",
+    "backbone"
+], function($, _, Backbone) {
+    var ErrorView = Backbone.View.extend({
+        tagName: "div",
+        initialize: function(options) {
+            if (options) {
+                this.errors = options.errors || {};
+            } else {
+                this.errors = {};
+            }
+        },
+        render: function() {
+            if (this.errors.length > 0 ) {
+                var template = _.template($("#field_errors").html(), {
+                    errors: this.errors
+                });
+
+                this.$el.html(template);
+            } else {
+                this.reset();
+            }
+
+            return this;
+        },
+        renderErrors: function (errors) {
+            this.errors = errors;
+            this.render();
+
+            return this;
+        },
+        reset: function() {
+             this.$el.empty();
+        }
+    });
+
+    return ErrorView;
+});

www/scripts/apps/login/home/views/inputView.js

@@ -0,0 +1,38 @@
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2013 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+define([
+    "jquery",
+    "underscore",
+    "backbone",
+    "apps/login/home/views/errorView",
+    "common/multiviews"
+], function($, _, Backbone, ErrorView, MultiViews) {
+    var InputView = Backbone.View.extend(_.extend({}, MultiViews, {
+        initialize: function(options) {
+            this.name = options.name;
+            this.errorView = new ErrorView();
+        },
+        render: function () {
+            this._assignView({".error-view" : this.errorView});
+        },
+        showErrors: function (errors) {
+            this.render();
+
+            this.errorView.renderErrors(errors);
+
+            return this;
+        },
+        resetErrors: function () {
+            this.errorView.reset();
+        }
+    }));
+
+    return InputView;
+});

www/scripts/apps/login/home/views/loginForm.js

@@ -0,0 +1,72 @@
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2013 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+define([
+    "jquery",
+    "underscore",
+    "backbone",
+    "bootstrap",
+    "common/validator",
+    "apps/login/home/views/inputView"
+], function($, _, Backbone, bootstrap, Validator, InputView) {
+    var LoginFormView = Backbone.View.extend({
+        events: {
+            "submit": "onSubmit"
+        },
+        initialize: function(options) {
+            var self = this;
+            var rules = [];
+
+            if (options) {
+                rules = options.rules || [];
+            }
+            // get a new validator defined rules
+            this.validator = new Validator(rules);
+
+            this.inputViews = {};
+
+            // creates input views for each input
+            _.each(this.$el.serializeArray(), function (input) {
+                var name = input.name;
+                self.inputViews[name] = new InputView({
+                    name: name,
+                    el : $("input[name="+name+"]", self.$el).closest("div")
+                });
+            });
+        },
+        onSubmit: function (event) {
+            var self = this;
+
+            // reset previous errors in the view
+            this._resetInputErrors();
+
+            // validate new values
+            this.validator.validate(this.$el.serializeArray());
+
+            if (this.validator.hasErrors()) {
+                // cancel submit
+                event.preventDefault();
+                // group errors by input
+                _.each(_.groupBy(this.validator.getErrors(), function(error){
+                    return error.name;
+                }), function (errors, name) {
+                    // show new errors in the views
+                    self.inputViews[name].showErrors(errors);
+                });
+            }
+        },
+        _resetInputErrors: function() {
+            _.each(this.inputViews, function(view) {
+                view.resetErrors();
+            });
+        }
+    });
+
+    return LoginFormView;
+});