Skip to content
Permalink
Browse files

Current to Part 10

  • Loading branch information...
bmajewski committed Mar 4, 2015
1 parent 5168711 commit 8a0a2b3c06575454a7ffae2b03b579d3bc47acba
@@ -0,0 +1,15 @@
define(function (require) {

'use strict';

return {
auth: {
TOKEN_KEY: 'authToken',
USER_KEY: 'userId'
},
urls: {
AUTHENTICATE: '/api/authenticate'
}
}

});
@@ -0,0 +1,24 @@
<div class="well">
<h4><b>Login</b></h4>
</div>
<div class="alert alert-warning" style="display: none;"></div>
<form class="form-horizontal login-form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>

<div class="col-lg-10">
<input type="text" class="form-control" id="email" placeholder="Email">
<span class="help-block hidden"></span>
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-2 control-label">Password</label>

<div class="col-lg-10">
<input type="password" class="form-control" id="password" placeholder="Password">
<span class="help-block hidden"></span>
</div>
</div>
<button type="button" class="btn btn-primary js-login pull-right">Login</button>
</form>

@@ -0,0 +1,48 @@
define(function (require) {

'use strict';

var Backbone = require('backbone');
var globals = require('globals');
var mediator = require('mediator');
var template = require('hbs!login/template');

return Backbone.View.extend({
el: '#content',

events: {
'click .js-login': 'login'
},

render: function () {
this.$el.html(template());
return this;
},

login: function (e) {
e.preventDefault();
var formValues = {
email: this.$('#email').val(),
password: this.$('#password').val()
};
this.$('.alert').hide();
console.log('login with ', formValues);
$.ajax({
url: globals.urls.AUTHENTICATE,
type: 'POST',
dataType: 'json',
data: formValues,
success: function(response){
if (response.success){
window.localStorage.setItem(globals.auth.TOKEN_KEY, response.token);
window.localStorage.setItem(globals.auth.USER_KEY, response._id);
mediator.trigger('router:navigate', {route:'home', options: {trigger: true}});
} else {
self.$('.alert-warning').text(response.message).show();
}
}
});
}
});

});
@@ -1,5 +1,6 @@
define(function (require) {

var globals = require('globals');
var Router = require('router');
var mediator = require('mediator');

@@ -34,6 +35,19 @@ define(function (require) {
}
});

$.ajaxSetup({
statusCode: {
401: function (context) {
mediator.trigger('router:navigate', {route: 'login', options: {trigger: true}});
}
},
beforeSend: function (xhr) {
var token = window.localStorage.getItem(globals.auth.TOKEN_KEY);
xhr.setRequestHeader('x-access-token', token);
}
});



var router = new Router();
Backbone.history.start({pushState: false});
@@ -8,7 +8,7 @@
<li><a href="#users"><span class="fa fa-users"></span> Users</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
[Navigation Elements]
<li><a href="#logout"><span class="fa fa-lg fa-times-circle-o"></span> Logout</a></li>
</ul>
</div>
</div>
@@ -4,6 +4,7 @@ define(function (require) {
var mediator = require('mediator');
var Backbone = require('backbone');
var PageView = require('page/pageView');
var globals = require('globals');


return Backbone.Router.extend({
@@ -16,7 +17,22 @@ define(function (require) {
routes: {
'': 'home',
'home': 'home',
'users': 'users'
'users': 'users',
'login': 'login',
'logout': 'logout'
},

logout: function() {
window.localStorage.removeItem(globals.auth.TOKEN_KEY);
window.localStorage.removeItem(globals.auth.USER_KEY);
this.home();
},

login: function() {
console.log('routing - login');
require(['login/view'], function(View){
mediator.trigger('page:displayView', new View());
});
},

users: function() {
@@ -0,0 +1,5 @@
form.login-form {
width: 650px;
margin-left: auto;
margin-right: auto;
}
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="assets/css/bootstrap-lumen.min.css">
<link rel="stylesheet" href="components/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="components/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css">
<link rel="stylesheet" href="assets/css/style.css">

<script src="components/requirejs/require.js" data-main="require-main.js"></script>
</head>

0 comments on commit 8a0a2b3

Please sign in to comment.
You can’t perform that action at this time.