Dancer2 Session & Authentication and AngularJS

This took me too much to figure out from different sources hence jotting down my recipe. My application is called ADA ... here the main part with login / logout

package Ada;
use Dancer2;
use Dancer2::Session::Simple;
use Dancer2::Plugin::Auth::Tiny;

our $VERSION = '0.1';

# Authentication Requires Session, here the in memory
set session => "Simple";
#set session => 'YAML';

hook before => sub {
  printf "logged in? %s\n", session('user') ? session('user') : '-';
  if ( !session('user') && request->dispatch_path !~ m{^/login} ) {
    forward '/login', { requested_path => request->dispatch_path };
  }
};

get '/' => sub {
  template 'index';
};

get '/login' => sub {

  # Display a login page; the original URL they requested is available as
  # param('requested_path'), so could be put in a hidden field in the form
  template 'login', { path => param('requested_path') };
};

post '/login' => sub {
  if ( _is_valid( param('user'), param('pass') ) ) {
    print "logged on success!\n";
    session user => param('user');
    redirect param('path') || '/';
  }
  else {
    redirect '/login?failed=1';
  }
};

sub _is_valid {
  my ( $u, $p ) = @_;
  my $store = schema 'default';
  foreach my $r ( $store->resultset('PmiUser')->all ) {
    printf "%10s = %s\n", $r->fedex_id, $r->fedex_pw;
  }
  my $rec =
    $store->resultset('PmiUser')
    ->find( { 'id' => $u, 'pwd' => $p } );
  printf $rec->fedex_id;
  return $rec and $rec->fedex_id ? 0 : 1;
}

get '/logout' => sub {
  printf( "logging out %s\n", session('user') ? session('user') : '-' );
  context->destroy_session;
  redirect '/';
};

true;

project layout

.
├── Gruntfile.js
├── MANIFEST
├── MANIFEST.SKIP
├── Makefile.PL
├── app
│   ├── 404.html
│   ├── favicon.ico
│   ├── fonts
│   ├── images
│   │   └── yeoman.png
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   │   ├── app.js
│   │   ├── controllers
│   │   │   ├── main.js
│   │   └── services
│   │       ├── lookups.js
│   ├── styles
│   │   └── main.css
│   ├── test
│   │   └── spec
│   │       └── services
│   │           └── lookups.js
│   └── views
│       └── main.html
├── bin
│   └── app.pl
├── bower.json
├── config.yml
├── environments
│   ├── development.yml
│   └── production.yml
├── karma-e2e.conf.js
├── karma.conf.js
├── lib
│   └── Ada.pm
├── out
├── package.json
├── run.sh
├── t
│   ├── 001_base.t
│   └── 002_index_route.t
├── test
│   ├── runner.html
│   └── spec
│       ├── controllers
│       │   ├── main.js
│       └── services
│           ├── lookups.js
│           └── wls-domain-service.js
└── views
    ├── index.tt -> ../app/index.html
    ├── layouts
    │   ├── main.tt -> ../../app/index.html
    │   └── navbar.tt
    └── login.tt

config.yml

# This is the main configuration file of your Dancer2 app
# env-related settings should go to environments/$env.yml
# all the settings in this file will be loaded at Dancer's startup.

# Your application's name
appname: "ada"

# when the charset is set to UTF-8 Dancer2 will handle for you
# all the magic of encoding and decoding. You should not care
# about unicode within your app when this setting is set (recommended).
charset: "UTF-8"

# template engine
# simple: default and very basic template engine
# template_toolkit: TT
serializer: JSON
session: YAML
session_dir: /tmp/dancer-sessions

template: "template_toolkit"
engines:
  JSON:
    allow_blessed:   '1'
    canonical:       '1'
    convert_blessed: '1' 
  template_toolkit:
    encoding:  'utf8'
    start_tag: '[%'
    end_tag:   '%]'
    WRAPPER: layouts/main.tt
    EVAL_PERL: '1'
  Auth::RBAC:
    credentials:
        class: Config
        options:
            accounts:
                  user01:
                      password: foobar
                      roles:
                          - guest
                          - user
                  weblogic:
                      password: wladmin1
                      roles:
                          - admin

angularjs - index.tt

Add the Logout function to your navigation pills.... make sure its a href.

  <!-- Add your site or application content here -->
  <div class="header">
    <ul class="nav nav-pills pull-right">
      <li class="active"><a ng-href="#">Home</a></li>
      <li><a href="./logout">Logout</a></li>
    </ul>
    <h3 class="text-muted">AD Assistant</h3>
  </div>

login.tt

A very simple ugly login screen.

<html>
      <head>
        <title>Session and logging in</title>
      </head>
      <body>
        <form action='/login' method='POST'>
            User Name : <input type='text' name='user'/>
            Password: <input type='password' name='pass' />

            <!-- Put the original path requested into a hidden
                       field so it's sent back in the POST and can be
                       used to redirect to the right page after login -->
            <input type='hidden' name='path' value='[% path %]'/>

            <input type='submit' value='Login' />
        </form>
      </body>
</html>