Commits

jasonyeo  committed fb29780 Draft

ported login page to backbone.js

  • Participants
  • Parent commits 7dac55e

Comments (0)

Files changed (7)

File web/js/app.js

+var app = app || {};
+
+// short form for $(document).read
+$(function() {
+    'use strict';
+
+    var Workspace = Backbone.Router.extend({
+        routes: {
+            'login': 'showLogin',
+            'main': 'showMain'
+        },
+
+        showLogin: function() {
+            new app.LoginView();
+        },
+        
+        showMain: function() {
+            new app.MainView();
+        }
+    });
+    app.AekiRouter = new Workspace();
+
+    Backbone.history.start();
+});

File web/js/collections/branches.js

+var app = app || {};
+
+(function() {
+    'use strict';
+
+    var BranchesList = Backbone.Collection.extend({
+        model: app.Branch,
+        url: 'http://lowe.jschua.com/DinoPos/api/branches/'
+    });
+
+    app.Branches = new BranchesList();
+}());

File web/js/login.js

 
     numberOfLoop=0;
 
-    if(validateFieldNotEmpty())
-{
-    checkValidUserAndRedirect();
-    //create the progress bar animation
-    tid = setInterval(showProgress, 750);
-}
+    if(validateFieldNotEmpty()) {
+        checkValidUserAndRedirect();
+        //create the progress bar animation
+        tid = setInterval(showProgress, 750);
+    }
 });
 
 /*
 
 
 
-function checkValidUserAndRedirect()
-{
+function checkValidUserAndRedirect() {
 
     var userName = document.loginForm.userId.value;
     var userPassword = document.loginForm.userPassword.value;

File web/js/models/branch.js

+
+var app = app || {};
+
+(function() {
+    'use strict';
+
+    // Branch Model
+    // ----------
+    app.Branch = Backbone.Model.extend({
+        defaults: {
+            Address: '',
+            Name: '',
+            Branch_ID: '',
+            Email: '',
+            Tax_ID: '',
+            Tax_Name: '',
+            Tax_Percentage: '',
+            Tel: ''
+        },
+    });
+}());

File web/js/models/user.js

+var app = app || {};
+
+(function() {
+    'use strict';
+
+    // User Model
+    // ----------
+
+    app.User = Backbone.Model.extend({
+        url: 'http://lowe.jschua.com/DinoPos/api/users',
+        paramRoot: 'user',
+
+        authenticate: function(password, callback) {
+            console.log("authenticating: "+password);
+            var self = this;
+
+            $.ajax({
+                type: "POST",
+                url: this.url,
+                dataType: 'json',
+                data: {
+                    username: this.get('username'),
+                    password: password
+                },
+                async: true,
+                statusCode: {
+                    202: function () {
+                    },
+                    406: function () {
+                        $('#errorMessage').text("Invalid login or password. Please try again.");
+                        clearTimeout(tid);
+                        $('#progressBar').attr('style',"width:100%");
+                    }
+                },
+                success: function (data) {
+                    if ( data.error ) {
+                        self.set(data);
+                        callback.call(this, null, self);
+                    } else {
+                        var branchId = 0;
+                        var taxPercentage = 0;
+                        var daysForCookie = 0;
+
+                        if( $('input[id=rememberCheckBox]').is(':checked') )
+                        {
+                            daysForCookie = 3;
+                            //createCookie('rememberLogin','true',3);
+                        }
+
+                        //createCookie('employeeId',data,daysForCookie);
+                        //createCookie('branchId',branchId,daysForCookie);
+                        //createCookie('taxPercentage',taxPercentage,daysForCookie);
+
+                        self.set(data);
+                        callback.call(this, null, self);
+                    }
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                }
+            });
+
+        }
+
+    });
+
+    app.User.authorize = function(attrs, callback) {
+        var user = new app.User({username: attrs.username});
+        user.authenticate(attrs.password, callback);
+    }
+}());

File web/js/views/login.js

+// following tutorial from http://clintberry.com/2012/backbone-js-apps-authentication-tutorial/
+
+var app = app || {};
+
+$(function() {
+    'use strict';
+
+    // Login View
+    // ----------
+    
+    app.LoginView = Backbone.View.extend({
+
+
+        el: '#login-view',
+
+        template: _.template( $('#login-template').html() ),
+
+        initialize: function() {
+            console.log('Init login view');
+            // fetch the branches first so that we can render the view
+            // this way, the find functions below will be able to get
+            // the correct fields
+            window.app.Branches.on( 'all', this.render, this );
+            app.Branches.fetch();
+
+        },
+
+        render: function() {
+            this.$el.html( this.template( window.app ) );
+            this.form = this.$el.find('form');
+            this.usernameField = this.$el.find('input[name=username]');
+            this.passwordField = this.$el.find('input[name=password]');
+            this.submitButton = this.$el.find('input[type=submit]');
+
+            return this;
+        },
+
+        events: {
+            'click #loginBtn': 'authorize'
+        },
+
+        authorize: function( event ) {
+            event.preventDefault();
+
+            console.log("username =="+this.usernameField.val());
+            console.log("password=="+this.passwordField.val());
+
+            var self = this, 
+                userInfo = { 
+                    username: this.usernameField.val(),
+                    password: this.passwordField.val()
+                };
+            
+            app.User.authorize(userInfo, function(err, user) {
+                if (err) { self.loginFailure(); }
+                else { self.loginSuccess(); }
+            });
+            
+            return (this.form.data('user-authorized') === true);
+        },
+
+        loginSuccess: function() {
+            console.log('success');
+            this.form.data('user-authorized', true);
+            this.form.submit();
+        },
+
+        loginFailure: function() {
+            console.log('failure');
+            this.$el.animate({left: '-=20'}, 100);
+            this.$el.animate({left: '+=40'}, 100);
+            this.$el.animate({left: '-=40'}, 100);
+            this.$el.animate({left: '+=40'}, 100);
+            this.$el.animate({left: '-=20'}, 100);
+            this.emailField.focus();
+            this.submitButton.removeClass('disabled');
+        },
+    });
+});

File web/login.html

         </div>
         <br><br>
         <div class="container">
-            <div class="span6 offset2">
-                <form name="loginForm" class="form-horizontal"> 
-                    <div class="control-group">
-                        <label class="control-label" for="userId">User Name</label>
-                        <div class="controls" id="lolol">
-                            <input id="userId" type="text" name="userId" placeholder="User Name"  class="input-xlarge">
-                        </div>
+            <div id="aekiapp">
+                <div id="login-view">
+            </div>
+        </div>
+    </div>  
+    <script type="text/template" id="login-template">
+        <div class="span6 offset2">
+            <form name="loginForm" class="form-horizontal" action="#main"> 
+                <div class="control-group">
+                    <label class="control-label" for="username">User Name</label>
+                    <div class="controls" id="lolol">
+                        <input id="userId" type="text" name="username" placeholder="User Name"  class="input-xlarge">
                     </div>
-                    <div class="control-group">
-                        <label class="control-label" for="userPassword">Password</label>
-                        <div class="controls">
-                            <input id="password" name="userPassword" type="password" placeholder="Password"  class="input-xlarge">
-                        </div>
+                </div>
+                <div class="control-group">
+                    <label class="control-label" for="password">Password</label>
+                    <div class="controls">
+                        <input id="password" name="password" type="password" placeholder="Password"  class="input-xlarge">
                     </div>
-                    <div class="control-group">
-                        <label class="control-label" for="userBranch">Branch</label>
-                        <div class="controls">
-                            <select id="listForBranchDetails" class="span6">
+                </div>
+                <div class="control-group">
+                    <label class="control-label" for="userBranch">Branch</label>
+                    <div class="controls">
+                        <select id="branchList" class="span6">
+                            <% Branches.each(function(branch) { %>
+                            <option id="branch-<%= branch.toJSON().Branch_ID %>"><%= branch.toJSON().Address %></option>
+                            <% }); %>
+                        </select>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <div class="controls">
+                        <label class="checkbox">
+                            <input type="checkbox" id="rememberCheckBox"> Remember me
+                        </label>
+                        <input id="loginBtn" type="submit" class="btn btn-large btn-block btn-primary">Login</button>
+                    <p id="errorMessage" class="text-error"> </p>
+                    <div class="progress progress-striped active" id="progressBarDiv" style="display:none">
+                        <div class="bar" id="progressBar" style="width: 40%; display:none"></div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
 
-                            </select>
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <div class="controls">
-                            <label class="checkbox">
-                                <input type="checkbox" id="rememberCheckBox"> Remember me
-                            </label>
-                            <button id="loginBtn" type="button" class="btn btn-large btn-block btn-primary">Login</button>
-                            <p id="errorMessage" class="text-error"> </p>
-                            <div class="progress progress-striped active" id="progressBarDiv" style="display:none">
-                                <div class="bar" id="progressBar" style="width: 40%; display:none"></div>
-                            </div>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>  
-        
+    </script>
 
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
-        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
-        
-        <script src="js/mainConfig.js"></script>
-        <script src="js/login.js"></script>
-    </body>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
 
+    <script src="js/models/branch.js"></script>
+    <script src="js/collections/branches.js"></script>
+    <script src="js/models/user.js"></script>
+    <script src="js/views/login.js"></script>
+    <script src="js/app.js"></script>
+</body>
 </html>