Skip to content

Instantly share code, notes, and snippets.

@webgio
Last active December 10, 2023 10:24
Show Gist options
  • Save webgio/5039184 to your computer and use it in GitHub Desktop.
Save webgio/5039184 to your computer and use it in GitHub Desktop.
Marionette.js module to manage authentication. Needs a server method that checks credentials returning true or false. Started from this blog post code: http://clintberry.com/2012/backbone-js-apps-authentication-tutorial/
App = new Marionette.Application();
App.addRegions {
"headerRegion": "#header"
"topMenuRegion": "#top-menu"
"mainRegion" : "#main"
}
App.on 'initialize:after', ->
Backbone.history.start()
window.App = App
AuthenticationModule = App.module 'AuthenticationModule'
class AuthenticationModule.LoginView extends Marionette.ItemView
events: {
"click #loginButton": "login"
}
ui: {
inputEmail: "input#username"
inputPassword: "input#password"
loginButton: "button#loginButton"
}
initialize: =>
@template = Handlebars.templates['login-template.html'] # using pre-compilation
login: (event) ->
event.preventDefault() # Don't let this button submit the form
@onBeforeLogin()
username = @ui.inputEmail.val()
password = @ui.inputPassword.val()
authorized = @onAuthorized
unauthorized = @onUnauthorized
@trigger 'authenticate', { username, password, authorized, unauthorized }
onBeforeLogin: ->
$('.alert-error').hide(); # Hide any errors on a new submit
onAuthorized: ->
window.location.replace('#')
onUnauthorized: ->
$('.alert-error').text("Username or password not valid.").show()
class LogoutView extends Marionette.ItemView
initialize: =>
@template = Handlebars.templates['logout-template.html'] # using pre-compilation
class AuthenticationModule.Controller extends Marionette.Controller
initialize: (options) ->
@region = options.region
@loginView = options.loginView
@listenTo @loginView, 'authenticate', (data) =>
@authenticate data.username, data.password, data.authorized, data.unauthorized
authenticate: (username, password, authorized, unauthorized ) ->
url = '/api/login'
console.log('Loggin in... ')
formValues = {
username: username,
password: password
}
$.ajax {
url:url,
type:'POST',
dataType:"json",
data: formValues,
success: (ok) ->
if ok
authorized()
else
unauthorized()
}
login: ->
view = new AuthenticationModule.LoginView()
@region.show(view)
logout: ->
$.get '/api/logout', =>
view = new LogoutView()
@region.show(view)
class AuthenticationModule.Router extends Marionette.AppRouter
appRoutes: {
'login(/)': 'login'
'logout(/)': 'logout'
}
AuthenticationModule.addInitializer ->
# Tell jQuery to watch for any 401 or 403 errors and handle them appropriately
$.ajaxSetup {
statusCode: {
401: -> window.location.replace('#login')
403: -> window.location.replace('#denied')
}
}
@controller = new AuthenticationModule.Controller { region: App.mainRegion, @loginView }
@router = new AuthenticationModule.Router { @controller }
AuthenticationModule.router = @router
AuthenticationModule.controller = @controller
<h1>Login</h1>
<div class="alert alert-error" style="display:none;">
</div>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" id="username" placeholder="Username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" id="password" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn" id="loginButton">Sign in</button>
</div>
</div>
</form>
@learntoswim
Copy link

This is fantastic, thank you.

@andreliem
Copy link

Agree, this is a great example. Thanks

@jon301
Copy link

jon301 commented Jan 26, 2015

Nice example, will give it a try. Thank you

@eliaspn
Copy link

eliaspn commented Apr 5, 2016

this is a piece of cake 👍 ,thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment