clean user interface + add js calculator tool

pboard/pboard/controllers/root.py

 from tg.i18n import ugettext as _, lazy_ugettext as l_
 from tg import predicates
 from pboard import model
-from pboard.controllers.secure import SecureController
 from pboard.model import DBSession, metadata
 from tgext.admin.tgadminconfig import TGAdminConfig
 from tgext.admin.controller import AdminController
 import pboard.controllers as pbc
 from pboard.lib import dbapi as pld
 from pboard.controllers import api as pbca
+from pboard.controllers import debug as pbcd
 
 import pboard.model.data as pbmd
 
     must be wrapped around with :class:`tg.controllers.WSGIAppController`.
 
     """
-    secc = SecureController()
     admin = AdminController(model, DBSession, config_type=TGAdminConfig)
 
+    api   = pbca.PODApiController()
+    debug = pbcd.DebugController()
     error = ErrorController()
 
-    api = pbca.PODApiController()
-    
     def _before(self, *args, **kw):
         tmpl_context.project_name = "pboard"
 
         """Handle the front-page."""
         return dict()
 
-    @expose('pboard.templates.about')
-    def about(self):
-        """Handle the 'about' page."""
-        return dict(page='about')
-
-    @expose('pboard.templates.environ')
-    def environ(self):
-        """This method showcases TG's access to the wsgi environment."""
-        return dict(page='environ', environment=request.environ)
-
-    @expose('pboard.templates.data')
-    @expose('json')
-    def data(self, **kw):
-        """This method showcases how you can use the same controller for a data page and a display page"""
-        return dict(page='data', params=kw)
-        
-    @expose('pboard.templates.iconset')
-    def iconset(self, **kw):
-        """This method showcases how you can use the same controller for a data page and a display page"""
-        return dict(page='data', params=kw)
-        
-        
-    @expose('pboard.templates.index')
-    @require(predicates.has_permission('manage', msg=l_('Only for managers')))
-    def manage_permission_only(self, **kw):
-        """Illustrate how a page for managers only works."""
-        return dict(page='managers stuff')
-
-    @expose('pboard.templates.index')
-    @require(predicates.is_user('editor', msg=l_('Only for the editor')))
-    def editor_user_only(self, **kw):
-        """Illustrate how a page exclusive for the editor works."""
-        return dict(page='editor stuff')
 
     @expose('pboard.templates.login')
     def login(self, came_from=lurl('/')):
         redirect(came_from)
         
     @expose('pboard.templates.document')
+    @require(predicates.in_group('user', msg=l_('Please login to access this page')))
     def document(self, node=0, came_from=lurl('/')):
         """show the user dashboard"""
         import pboard.model.data as pbmd
         
         # loRootNodeList   = pbm.DBSession.query(pbmd.PBNode).filter(pbmd.PBNode.parent_id==None).order_by(pbmd.PBNode.node_order).all()
-        print "===> AAA"
         loRootNodeList = pld.buildTreeListForMenu()
-        print "===> BBB"
         liNodeId         = max(int(node), 1) # show node #1 if no selected node
         loCurrentNode    = pbm.DBSession.query(pbmd.PBNode).filter(pbmd.PBNode.node_id==liNodeId).one()
-        print "===> CCC"
         loNodeStatusList = pbmd.PBNodeStatus.getList()
-        print "===> DDD"
         return dict(root_node_list=loRootNodeList, current_node=loCurrentNode, node_status_list = loNodeStatusList)
 

pboard/pboard/templates/about.mak

-<%inherit file="local:templates.master"/>
-
-<%def name="title()">
-Learning TurboGears 2.3: Quick guide to the Quickstart pages.
-</%def>
-
-   <div class="row">
-      <div class="span12">
-        <div class="page-header">
-          <h2>Architectural basics of a quickstart TG2 site.</h2>
-        </div>
-
-        <p>The TG2 quickstart command produces this basic TG site. Here's how it works.</p>
-      </div>
-
-      <div class="span4">
-        <div class="well" style="padding: 8px 0;">
-          <ul class="nav nav-list">
-            <li class="nav-header">About Architecture</li>
-            <li><a href="#data-model">Data Model</a></li>
-            <li><a href="#url-structure">URL Structure</a></li>
-            <li><a href="#template-reuse">Web page element's reuse</a></li>
-            <li py:if="tg.auth_stack_enabled" class="nav-header">Authentication</li>
-            <li py:if="tg.auth_stack_enabled"><a href="#authentication">Authorization and Authentication</a></li>
-          </ul>
-        </div>
-
-        <div class="well" id="data-model">
-          <h3>Code my data model</h3>
-
-          <p>When you want a model for storing favorite links or wiki content, the
-          <code>/model</code> folder in your site is ready to go.</p>
-
-          <p>You can build a dynamic site without any data model at all. There still be a
-          default data-model template for you if you didn't enable authentication and
-          authorization in quickstart. If you have enabled authorization, the auth
-          data-model is ready-made.</p>
-        </div>
-
-        <div class="well" id="url-structure">
-          <h3>Design my URL structure</h3>
-
-          <p>The "<code>root.py</code>" file under the <code>/controllers</code> folder has
-          your URLs. When you called this url (<code><a href=
-          "${tg.url('/about')}">about</a></code>), the command went through the
-          RootController class to the <code>about()</code> method.</p>
-
-          <p>Those Python methods are responsible to create the dictionary of variables
-          that will be used in your web views (template).</p>
-        </div>
-      </div>
-
-      <div class="span8"><img src=
-      "http://www.turbogears.org/2.1/docs/_images/tg2_files.jpg" alt=
-      "TurboGears2 quickstarted project" /></div>
-    </div>
-
-    <div class="row">
-      <div class="span12" id="template-reuse">
-        <h3>Reuse the web page elements</h3>
-
-        <p>A web page viewed by user could be constructed by single or several reusable
-        templates under <code>/templates</code>. Take 'about' page for example, each
-        reusable templates generating a part of the page. We'll cover them in the order of
-        where they are found, listed near the top of the about.html template</p>
-
-        <div class="row">
-          <div class="span6">
-            <p><strong><span class="label label-info">header.html</span></strong> - The
-            "header.html" template contains the HTML code to display the 'header': The div,
-            the h1 tag, and the subtitle are there, and the the blue gradient, TG2 logo,
-            are placed by way of the .css file (from style.css) are all at the top of every
-            page it is included on. When the "about.html" template is called, it includes
-            this "header.html" template (and the others) with a <code>&lt;xi:include
-            /&gt;</code> tag, part of the Genshi templating system. The "header.html"
-            template is not a completely static HTML -- it also includes (via
-            <code>&lt;xi:include/&gt;</code> tag) "master.html", which dynamically displays
-            the current page name with a Genshi template method called "replace" with the
-            code: <code>&lt;span py:replace="page"/&gt;</code>. It means replace this
-            <code>&lt;span /&gt;</code> region with the contents found in the variable
-            'page' that has been sent in the dictionary to this "about.html" template, and
-            is available through that namespace for use by this "header.html" template.
-            That's how it changes in the header depending on what page you are
-            visiting.</p>
-
-            <p><strong><span class="label label-info">sidebars.html</span></strong> - The
-            sidebars (navigation areas on the right side of the page) are generated as two
-            separate <code>py:def</code> blocks in the "sidebars.html" template. The
-            <code>py:def</code> construct is best thought of as a "macro" code... a simple
-            way to separate and reuse common code snippets. All it takes to include these
-            on the "about.html" page template is to write</p>
-            <pre><span>$</span>{sidebar_top()}
-<span>$</span>{sidebar_bottom()}
-  </pre>in the page where they are wanted. CSS styling (in "/public/css/style.css") floats
-  them off to the right side. You can remove a sidebar or add more of them, and the CSS
-  will place them one atop the other.
-
-            <p>This is, of course, also exactly how the header and footer templates are
-            also displayed in their proper places, but we'll cover that in the
-            "master.html" template below.</p>
-
-            <p>Oh, and in sidebar_top we've added a dynamic menu that shows the link to
-            this page at the top when you're at the "index" page, and shows a link to the
-            Home (index) page when you're here. Study the "sidebars.html" template to see
-            how we used <code>py:choose</code> for that.</p>
-          </div>
-
-          <div class="span6">
-            <p><strong><span class="label label-info">footer.html</span></strong> - The
-            "footer.html" block is simple, but also utilizes a special "replace" method to
-            set the current YEAR in the footer copyright message. The code is:</p>
-            <pre>
-  &lt;span py:replace="now.strftime('%Y')"&gt;
-  </pre>and it uses the variable "now" that was passed in with the dictionary of variables.
-  But because "now" is a datetime object, we can use the Python <code>"strftime()"</code>
-  method with the "replace" call to say "Just Display The Year Here". Simple, elegant; we
-  format the date display in the template (the View in the Model/View/Controller
-  architecture) rather than formatting it in the Controller method and sending it to the
-  template as a string variable.
-
-            <p><strong><span class="label label-info">master.html</span></strong> - The
-            "master.html" template is called last, by design. The "master.html" template
-            controls the overall design of the page we're looking at, calling first the
-            "header" py:def macro, then the putting everything from this "about.html"
-            template into the "main_content" div, and then calling the "footer" macro at
-            the end. Thus the "master.html" template provides the overall architecture for
-            each page in this site.</p>
-
-            <p>But why then shouldn't we call it first? Isn't it the most important?
-            Perhaps, but that's precisely why we call it LAST. The "master.html" template
-            needs to know where to find everything else, everything that it will use in
-            py:def macros to build the page. So that means we call the other templates
-            first, and then call "master.html".</p>
-
-            <p>There's more to the "master.html" template... study it to see how the
-            &lt;title&gt; tags and static JS and CSS files are brought into the page.
-            Templating with Genshi is a powerful tool and we've only scratched the surface.
-            There are also a few little CSS tricks hidden in these pages, like the use of a
-            "clearingdiv" to make sure that your footer stays below the sidebars and always
-            looks right. That's not TG2 at work, just CSS. You'll need all your skills to
-            build a fine web app, but TG2 will make the hard parts easier so that you can
-            concentrate more on good design and content rather than struggling with
-            mechanics.</p>
-          </div>
-
-          <div class="span12" id="authentication" py:if="tg.auth_stack_enabled">
-            <h3>Authentication &amp; Authorization in a TG2 site.</h3>
-
-            <p>If you have access to this page, this means you have enabled authentication
-            and authorization in the quickstart to create your project.</p>
-
-            <p>The paster command will have created a few specific controllers for you. But
-            before you go to play with those controllers you'll need to make sure your
-            application has been properly bootstapped. This is dead easy, here is how to do
-            this:</p>
-            <pre>paster setup-app development.ini</pre>
-
-            <p>inside your application's folder and you'll get a database setup (using the
-            preferences you have set in your development.ini file). This database will also
-            have been prepopulated with some default logins/passwords so that you can test
-            the secured controllers and methods.</p>
-
-            <p>To change the comportement of this setup-app command you just need to edit
-            the <code>websetup.py</code> file.</p>
-
-            <p>Now try to visiting the <a href=
-            "${tg.url('/manage_permission_only')}">manage_permission_only</a> URL. You will
-            be challenged with a login/password form.</p>
-
-            <p>Only managers are authorized to visit this method. You will need to log-in
-            using:</p>
-            <pre>login: manager
-password: managepass</pre>
-
-            <p>Another protected resource is <a href=
-            "${tg.url('/editor_user_only')}">editor_user_only</a>. This one is protected by
-            a different set of permissions. You will need to be <code>editor</code> with a
-            password of <code>editpass</code> to be able to access it.</p>
-
-            <p>The last kind of protected resource in this quickstarted app is a full so
-            called <a href="${tg.url('/secc')}">secure controller</a>. This controller is
-            protected globally. Instead of having a @require decorator on each method, we
-            have set an allow_only attribute at the class level. All the methods in this
-            controller will require the same level of access. You need to be manager to
-            access <a href="${tg.url('/secc')}">secc</a> or <a href=
-            "${tg.url('/secc/some_where')}">secc/some_where</a>.</p>
-          </div>
-        </div>
-      </div>
-    </div>

pboard/pboard/templates/data.mak

-<%inherit file="local:templates.master"/>
-
-<%def name="title()">
-  Welcome to TurboGears 2.3, standing on the shoulders of giants, since 2007
-</%def>
-
-<h2>Content Type Dispatch</h2>
-<p>
-This page shows how you can provide multiple pages
-directly from the same controller method.  This page is generated 
-from the expose decorator with the template defintion provided.
-You can provide a url with parameters and this page will display
-the parameters as html, and the json version will express
-the entries as JSON.  Here, try it out: <a href="/data.html?a=1&b=2">/data.html?a=1&b=2</a>
-</p>
-
-<p>Click here for the <a href="${tg.url('/data.json', params=params)}">JSON Version of this page.</a></p>
-<p>The data provided in the template call is: 
-    <table>
-        %for key, value in params.items():
-            <tr>
-                <td>${key}</td>
-                <td>${value}</td>
-            </tr>
-        %endfor
-    </table>
-
-  <div class="well span3 text-center">
-    <div>
-    </div>
-    <table id='keyboard'>
-      <tr>
-        <td colspan="5">
-          <input type='text' class="text-right" id='calculation'/><br/>
-          <input type='text' class="text-right" readonly id='result'/>
-        </td>
-      </tr>
-      <tr>
-        <td><span class='btn'>7</span></td>
-        <td><span class='btn'>8</span></td>
-        <td><span class='btn'>9</span></td>
-        <td><span class='btn'>(</span></td>
-        <td><span class='btn'>)</span></td>
-      </tr>
-      <tr>
-        <td><span class='btn'>4</span></td>
-        <td><span class='btn'>5</span></td>
-        <td><span class='btn'>6</span></td>
-        <td><span class='btn'>-</span></td>
-        <td><span class='btn'>+</span></td>
-      </tr>
-      <tr>
-        <td><span class='btn'>1</span></td>
-        <td><span class='btn'>2</span></td>
-        <td><span class='btn'>3</span></td>
-        <td><span class='btn'>/</span></td>
-        <td><span class='btn'>*</span></td>
-      </tr>
-      <tr>
-        <td><span class='btn'>.</span></td>
-        <td><span class='btn'>0</span></td>
-        <td><span class='btn'>%</span></td>
-        <td><span class='btn btn-success'>=</span></td>
-        <td><span class='btn btn-danger'>C</span></td>
-      </tr>
-    </table>
-    <script src="http://code.jquery.com/jquery.js"></script>
-    <script src="${tg.url('/javascript/bootstrap.min.js')}"></script>
-
-    <script>
-      $(document).ready(function() {
-        $('#keyboard span').on('click', function (e) {
-          current_value = $(this).text()
-          if(current_value=='C') {
-            $('#calculation').val('');
-            $('#result').val('');
-          } else if(current_value=='=') {
-            string = $('#calculation').val().replace(/[^0-9+-/\*\%\(\)]/gi, ''); // replace('/[^0-9()*/-+]/g', "");
-            console.log("Compute value of "+string)
-            calculation = eval(string);
-            console.log("Result is: "+calculation)
-            $('#result').val(calculation)
-          } else {
-            field = $('#calculation')
-            field.oldval = field.val();
-            field.val(field.oldval+current_value)
-          }
-        });
-      });
-    </script>
-  </div>

pboard/pboard/templates/iconset.mak → pboard/pboard/templates/debug/iconset.mak

 <%inherit file="local:templates.master"/>
 
+<%def name="title()">
+  debug: icon set
+</%def>
 
-        <style>
-            body{
-                padding-top: 60px;
-            }
-            #icon_grid li{
-                width: 23%;
-            }
-        </style>
-
-        <div class="navbar navbar-inverse navbar-fixed-top">
-            <div class="navbar-inner">
-                <div class="container">
-                    <a class="brand" href="./index.html">Glyphicons</a>
-                </div>
-            </div>
-        </div>
-        
-        <div class="container">
-            
-            <div class="hero-unit">
-                List Of icons
-            </div>
-            
-            <div id="icon_grid">
-                <ul class="inline">
-
-                </ul>
-            </div>
-        </div>
+    <style>
+        body{
+            padding-top: 60px;
+        }
+        #icon_grid li{
+            width: 23%;
+        }
+    </style>
+
+    <div class="container">
+      <h1>List of icons</h1>
+      <div id="icon_grid">
+        <ul class="inline">
+        </ul>
+      </div>
+    </div>
 
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

pboard/pboard/templates/environ.mak

-<%inherit file="local:templates.master"/>
-
-<%def name="title()">
-  Learning TurboGears 2.3: Information about TG and WSGI
-</%def>
-
-<h2>The WSGI nature of the framework</h2>
-  <p>In this page you can see all the WSGI variables your request object has, 
-     the ones in capital letters are required by the spec, then a sorted by
-     component list of variables provided by the Components, and at last
-     the "wsgi." namespace with very useful information about your WSGI Server</p>
-  <p>The keys in the environment are: 
-  <table class="table">
-      %for key in sorted(environment):
-      <tr>
-          <td>${key}</td>
-          <td>${environment[key]}</td>
-      </tr>
-      %endfor
-  </table>
-
-  </p>
-

pboard/pboard/templates/master.mak

         }
       }
       
+      /* vertical align icons in legend nodes */
+      legend > i {
+        vertical-align: baseline !important;
+      }
+      
 
 div.pod-toolbar {
   visibility: hidden;
     body { padding-top: 0px; }
 }
 
+ul.nav li.dropdown:hover > ul.dropdown-menu {
+    display: block;    
+}
+
     </style>
 </head>
 <body class="${self.body_class()}">
 
 $('.item-with-data-popoverable').popover({ html: true});
 
+      /** Make calculator available on all pages */
+      $(document).ready(function() {
+        $('#keyboard span').on('click', function (e) {
+          current_value = $(this).text()
+          if(current_value=='C') {
+            $('#calculation').val('');
+            $('#result').val('');
+          } else if(current_value=='=') {
+            string = $('#calculation').val().replace(/[^0-9+-/\*\%\(\)]/gi, ''); // replace('/[^0-9()*/-+]/g', "");
+            console.log("Compute value of "+string)
+            calculation = eval(string);
+            console.log("Result is: "+calculation)
+            $('#result').val(calculation)
+          } else {
+            field = $('#calculation')
+            field.oldval = field.val();
+            field.val(field.oldval+current_value)
+          }
+        });
+      });
+
             </script>
 </body>
 
                 Home
               </a>
             </li>
+          % if request.identity:
             <li>
               <a href="${tg.url('/document')}"><i class="icon-g-book-open"></i> ${_('Documents')}</a>
             </li>
-            <li>
-              <a title="${_('Toggle view mode: narrow')}" id='view-size-toggle-button-small' style="display: none;"><i class='icon-g-eye-open'></i> ${_('View mode')}</a>
-              <a title="${_('Toggle view mode: medium')}" id='view-size-toggle-button-medium'><i class='icon-g-eye-open'></i> ${_('View mode')}</a>
-              <a title="${_('Toggle view mode: large')}" id='view-size-toggle-button-large' style="display: none;"><i class='icon-g-eye-open'></i> ${_('View mode')}</a>
+
+            <li title=" ${_('Toggle view mode [narrow, medium, large]')}">
+              <a title="${_('Toggle view mode: narrow')}" id='view-size-toggle-button-small' style="display: none;"><i class='icon-g-eye-open'></i></a>
+              <a title="${_('Toggle view mode: medium')}" id='view-size-toggle-button-medium'><i class='icon-g-eye-open'></i></a>
+              <a title="${_('Toggle view mode: large')}" id='view-size-toggle-button-large' style="display: none;"><i class='icon-g-eye-open'></i></a>
             </li>
 
-            <li>
+            <li title="Rebuild document index">
             % if current_node is UNDEFINED:
-              <a href="${tg.url('/api/reindex_nodes?back_to_node_id=0')}"><i class="icon-g-refresh"></i> Reindex documents</a>
+              <a href="${tg.url('/api/reindex_nodes?back_to_node_id=0')}"><i class="icon-g-refresh"></i></a>
             % else:
-              <a href="${tg.url('/api/reindex_nodes?back_to_node_id=%i'%(current_node.node_id))}"><i class="icon-g-refresh"></i> Reindex documents</a>
+              <a href="${tg.url('/api/reindex_nodes?back_to_node_id=%i'%(current_node.node_id))}"><i class="icon-g-refresh"></i></a>
             % endif
             </li>
 
-          % if request.identity:
+            <li class="dropdown" title="Calculator">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-g-calculator"></i></a>
+              <ul class="dropdown-menu pull-left">
+                <li class="text-center">
+                  <fieldset>
+                    <legend><i class="icon-g-calculator"></i> Calculator</legend>
+                    <table id='keyboard' style="margin:0.2em;">
+                      <tr>
+                        <td colspan="5">
+                          <input type='text' class="text-right" id='calculation'/><br/>
+                          <input type='text' class="text-right" readonly id='result'/>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td><span class='btn'>7</span></td>
+                        <td><span class='btn'>8</span></td>
+                        <td><span class='btn'>9</span></td>
+                        <td><span class='btn'>(</span></td>
+                        <td><span class='btn'>)</span></td>
+                      </tr>
+                      <tr>
+                        <td><span class='btn'>4</span></td>
+                        <td><span class='btn'>5</span></td>
+                        <td><span class='btn'>6</span></td>
+                        <td><span class='btn'>-</span></td>
+                        <td><span class='btn'>+</span></td>
+                      </tr>
+                      <tr>
+                        <td><span class='btn'>1</span></td>
+                        <td><span class='btn'>2</span></td>
+                        <td><span class='btn'>3</span></td>
+                        <td><span class='btn'>/</span></td>
+                        <td><span class='btn'>*</span></td>
+                      </tr>
+                      <tr>
+                        <td><span class='btn'>.</span></td>
+                        <td><span class='btn'>0</span></td>
+                        <td><span class='btn'>%</span></td>
+                        <td><span class='btn btn-success'>=</span></td>
+                        <td><span class='btn btn-danger'>C</span></td>
+                      </tr>
+                    </table>
+                  </fieldset>
+                  <p></p>
+               </ul>
+            </li>
+
+
+          % endif
+          
+          % if request.identity and request.identity['repoze.who.userid']=='damien@accorsi.info':
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin <b class="caret"></b></a>
               <ul class="dropdown-menu">
                 <li><a href="${tg.url('/admin')}">Manage</a></li>
-                <li><a href="${tg.url('/about')}">About</a></li>
-                <li><a href="${tg.url('/data')}">Serving Data</a></li>
-                <li><a href="${tg.url('/environ')}">WSGI Environment</a></li>
-                <li><a href="${tg.url('/iconset')}"><i class="icon-g-show-thumbnails"></i> ${_('Icons')}</a></li>
               </ul>
             </li>
+            
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-g-adjust"></i> Debug <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="${tg.url('/debug/iconset')}">icon set</a></li>
+                <li><a href="${tg.url('/debug/environ')}">request.environ</a></li>
+                <li><a href="${tg.url('/debug/identity')}">request.identity</a></li>
+              </ul>
+            </li>
+            
+            
+            
           % endif
           </ul>
           <ul class="nav pull-right">
                   <li class="text-center">
                     <form action="${tg.url('/login_handler')}">
                       <fieldset>
-                        <legend>Sign in</legend>
-                      <input class="span2" type="text" id="login" name="login" placeholder="email...">
-                      <input class="span2" type="password" id="password" name="password" placeholder="password...">
-                      <div class="span2 control-group">
-                        Remember me <input type="checkbox" id="loginremember" name="remember" value="2252000"/>
-                      </div>
-                      <input type="submit" id="submit" value="Login" />
+                        <legend><i class="icon-g-keys" style="vertical-align: baseline !important;"></i> Login</legend>
+                        <input class="span2" type="text" id="login" name="login" placeholder="email...">
+                        <input class="span2" type="password" id="password" name="password" placeholder="password...">
+                        <div class="span2 control-group">
+                          Remember me <input type="checkbox" id="loginremember" name="remember" value="2252000"/>
+                        </div>
+                        <input type="submit" id="submit" value="Login" />
                       </fieldset>
                     </form>
-                   <li class="divider"></li>
-                   <li><a href="">Register</a></li>
                  </ul>
               </li>
             % else:
-              <li>
-                <a href="${tg.url('/logout_handler')}"><i class="icon-off"></i> Logout</a>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> ${request.identity['user']}</a>
+                <ul class="dropdown-menu pull-right">
+                  <li class="text-center">
+                    <fieldset>
+                      <legend><i class="icon-g-keys"></i> Logout</legend>
+                      <a class="btn btn-danger" href="${tg.url('/logout_handler')}">Logout <i class="icon-off icon-white"></i> </a>
+                    </fieldset>
+                    <p></p>
+                 </ul>
               </li>
+              
             % endif
           </ul>