Skip to content

Commit

Permalink
Updated login form example.
Browse files Browse the repository at this point in the history 
This is for github issue agordon#2.
  • Loading branch information
@ironcamel
ironcamel committed Jul 15, 2012
1 parent 29e4415 commit b836437
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 72 deletions.
22 changes: 9 additions & 13 deletions lib/examples/navbar_login.pm
View file
@@ -1,7 +1,5 @@
package examples::navbar_login;
use Dancer ':syntax';
use strict;
use warnings;

=pod
This is a minimal example of using Bootstrap's Nav-Bar with embedded login-form.
Expand All @@ -15,14 +13,12 @@ The dancer implemetation is severely lacking:
1. A proper authentication method should be used.
2. Login should be done over HTTPS (or another protected method)
3. Once the user is logged in, you most likely want to use Dancer's Sessions
To store the user's information (and mae the log-in persistant access
To store the user's information (and make the log-in persistant access
Dancer calls).
=cut

get '/navbar_login' => sub {
template 'examples/navbar_login', { logged_in => 0 };
};
get '/navbar_login' => sub { template 'examples/navbar_login' };

post '/navbar_login' => sub {
## Get the <FORM> CGI parameters
Expand All @@ -35,21 +31,21 @@ post '/navbar_login' => sub {
$username =~ s/^\s*//;
$username =~ s/\s*$//;
if (length($username)==0) {
return template 'examples/navbar_login', {
return template 'examples/navbar_login' => {
show_warning => "Missing username",
logged_in => 0 };
};
}

## do you think this is safe?
if ($password ne "12345") {
return template 'examples/navbar_login', {
return template 'examples/navbar_login' => {
show_warning => "Wrong username or password",
logged_in => 0 };
};
}

return template 'examples/navbar_login', {
logged_in => 1,
username => $username };
return template 'examples/navbar_login' => {
username => $username
};
};

true;
170 changes: 112 additions & 58 deletions views/examples/navbar_login.tt
View file
Expand Up @@ -2,21 +2,21 @@
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<h3><a class="brand" href="[% request.uri_base %]"><img src="images/dancer_man.png"> Perl Dancer</a></h3>
<h3>
<a class="brand" href="[% request.uri_base %]"><img src="images/dancer_man.png"> Perl Dancer</a>
</h3>

[% IF not logged_in %]
[% ###### Embedded Login form in the Nav-Bar ####### %]
<form class="navbar-form pull-left" method="post">
Username: <input type="text" class="span2" name="username">
Password: <input type="password" class="span2" name="password">
<input type="submit" class="btn" value="Login" name="login">
</form>
[% ELSE %]
[% ###### Use is logged, in, show the user name ###### %]
<div class="pull-left">
Logged in as <strong>[% username | html %]</strong>
</div>
[% END %]
[% IF username %]
[% ###### Embedded dropdown menu in the Nav-Bar ####### %]
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">[% username | html %]<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">Log out</a></li>
</ul>
</li>
</ul>
[% END %]

</div>
</div>
Expand All @@ -25,54 +25,108 @@ Logged in as <strong>[% username | html %]</strong>
<!-- HEADER line -->
<div class="container">

<div class="page-header">
<div class="row">
<div class="span12">
<h2>Dancer + Bootstrap Exapmles<//h2>
<h1>Navigation Bar with embedded Login Form</h1>
</div>
</div>
</div>
<div class="page-header">
<div class="row">
<div class="span12">
<h2>Dancer + Bootstrap Examples<//h2>
<h1>Login Form and Navigation Bar Dropdown Menu</h1>
</div>
</div>
</div>

<div class="row">
<div class="span12">
<div class="row">

[% ####### Show any login warning (set by Dancer) ####### %]
[% IF show_warning %]
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Hey!</strong> [% show_warning %]
</div>
[% END %]
<div class="span6">
<form class="well form-inline" method="post"
action="[% request.uri_base %]/navbar_login">
<fieldset>
<legend>Sign In</legend>
<input type="text" class="input-large" name="username"
placeholder="Username or email" />
<input type="password" class="span2" name="password"
placeholder="Password">
<button type="submit" class="btn btn-primary">Sign in</button>
</fieldset>
</form>

[% ####### Show any login warning (set by Dancer) ####### %]
[% IF show_warning %]
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Hey!</strong> [% show_warning %]
</div>
[% END %]

[% IF not logged_in %]
<strong>Look Up!</strong> embedded in the black navigation bar (above) is the login form.
<br/>
Try to login with any username and password <span class="label label-info">12345</span> (or, try with other passwords to see login error messages).
[% ELSE %]
Hello, <span class="label label-warning">[% username | html %]</span>, you've successfully logged in (look at the nav-bar above, it doesn't show the login form any more).
<br/>
<br/>
<br/>
Now <a class="btn btn-primary" href="[% request.uri_for("/navbar_login") %]">Try it again</a>.
[% END %]
[% IF not username %]
Try to login with any username and password
<span class="label label-info">12345</span>.
Try other passwords to see login error messages.
[% ELSE %]
Hello, <span class="label label-warning">[% username | html %]</span>.
You've successfully logged in.
Look at the nav-bar in the upper right.
A drop-down should be there that will allow you to log out.
[% END %]

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<h3>Code Highlights</h3>
<ul>
<li>The Dancer code is in
<a href="[% request.uri_for("/show_file",file => "navbar_login.pm", example => "NavBar-Login", url => request.uri_for("/navbar_login") ) %]">
<code>./lib/examples/navbar_login.pm</code> <i class="icon-eye-open"></i> </a>.
</li>
<li>This HTML tempate is in
<a href="[% request.uri_for("/show_file",file => "navbar_login.tt", example => "NavBar-Login", url => request.uri_for("/navbar_login") ) %]">
<code>./views/examples/navbar_login.tt</code> <i class="icon-eye-open"></i> </a>.
</li>
<li>Inside the template, if the <code>logged_in</code> variable is TRUE, the user is considered logged in(and the template will render a slightly different HTML code).</li>
</ul>
<h3>Code Highlights</h3>
<ul>
<li>
The Dancer code is in
<a href="[% request.uri_for("/show_file",file => "navbar_login.pm", example => "NavBar-Login", url => request.uri_for("/navbar_login") ) %]">
<code>./lib/examples/navbar_login.pm</code>
<i class="icon-eye-open"></i>
</a>.
</li>
<li>
This HTML tempate is in
<a href="[% request.uri_for("/show_file",file => "navbar_login.tt", example => "NavBar-Login", url => request.uri_for("/navbar_login") ) %]">
<code>./views/examples/navbar_login.tt</code>
<i class="icon-eye-open"></i>
</a>.
</li>
<li>
Inside the template, if the <code>username</code> variable is TRUE,
the user is considered logged in
and the template will render a slightly different HTML code.
</li>
</ul>

</div>

<div class="span6">
<form class="form-horizontal well" method="post"
action="[% request.uri_base %]/navbar_login">
<fieldset>
<legend>Create a New Account</legend>
<div class="control-group">
<label class="control-label" for="new_email">Email</label>
<div class="controls">
<input type="text" class="input-xlarge" id="new_email"
name="username"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="new_pw1">Password</label>
<div class="controls">
<input type="text" class="input-xlarge" id="new_pw1"
name="password"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="new_pw2">Verify password</label>
<div class="controls">
<input type="text" class="input-xlarge" id="new_pw2"/>
</div>
</div>
<button type="submit" class="btn btn-primary">Create account</button>
</fieldset>
</form>
</div>

</div>

</div>
</div>
2 changes: 1 addition & 1 deletion views/index.tt
View file
Expand Up @@ -86,7 +86,7 @@
Don't re-invernt the wheel! Here are ready-to-use examples, just copy,paste,adapt to code &amp; templates to your needs:
<ul>
<li><a href="[% request.uri_for("/simple_form")%]">Simple &lt;FORM&gt; processing</a></li>
<li><a href="[% request.uri_for("/navbar_login")%]">Login form embedded in a NavBar</a></li>
<li><a href="[% request.uri_for("/navbar_login")%]">Login Form and NavBar Dropdown Menu</a></li>
<li><a href="[% request.uri_for("/tabs")%]">Tabs/Pills</a></li>
<li><a href="[% request.uri_for("/photo_carousel")%]">Photo Gallery Carousel</a></li>
<li><a href="[% request.uri_for("/photo_grid")%]">Photo Gallery Grid / Thumbnails</a></li>
Expand Down

0 comments on commit b836437

Please sign in to comment.