--- a/pvl/login/server.py	Mon Jan 13 18:05:29 2014 +0200
+++ b/pvl/login/server.py	Mon Jan 13 18:52:10 2014 +0200
@@ -130,6 +130,21 @@
 .pubtkt form {
     display: inline;
 }
+
+.pubtkt .panel-heading {
+    line-height: 20px;
+}
+
+.pubtkt .panel-body .glyphicon {
+    width: 1em;
+    float: left;
+    line-height: 20px;
+}
+
+.pubtkt .panel-body .progress {
+    margin-bottom: 0;
+    margin-left: 2em;
+}
     """
     
     def process (self) :
@@ -157,28 +172,55 @@
         else :
             return 'danger'
 
+    def render_pubtkt_valid (self, pubtkt) :
+        """
+            Yield HTML for ticket validity.
+        """
+
+
+        lifetime = self.app.login_valid
+
+        valid = pubtkt.valid()
+        grace = pubtkt.grace()
+
+        if valid :
+            progress = float(valid.seconds) / float(lifetime.seconds)
+        else :
+            progress = None
+
+        if grace :
+            title = "Remaining renewal period"
+            valid = "{grace} (Renew)".format(grace=self.render_valid(grace))
+            status = 'warning'
+        elif valid :
+            title = "Remaining validity period"
+            valid = "{valid}".format(valid=self.render_valid(valid))
+            status = 'success'
+        else :
+            title = "Expired"
+            valid = "Expired"
+            status = 'danger'
+        
+        if progress :
+            return html.div(class_='panel-body', title=title)(
+                html.span(class_='glyphicon glyphicon-time'),
+                html.div(class_='progress')(
+                    html.div(class_='progress-bar progress-bar-{status}'.format(status=status),
+                        role='progressbar',
+                        style='width: {pp:.0f}%'.format(pp=progress*100),
+                    )(
+                        html.span(valid)
+                    )
+                )
+            )
+        else :
+            return None # html.p(valid)
+
     def render_pubtkt_fields (self, pubtkt) :
         """
             Yield (glyphicon, text) to render as fields for ticket.
         """
 
-        yield 'user', None, "User account", pubtkt.uid
-        
-        valid = pubtkt.valid()
-        grace = pubtkt.grace()
-
-        if grace :
-            valid = "{grace} (Renew)".format(grace=self.render_valid(grace))
-            valid_status = 'warning'
-        elif valid :
-            valid = "{valid}".format(valid=self.render_valid(valid))
-            valid_status = 'success'
-        else :
-            valid = "Expired"
-            valid_status = 'danger'
-
-        yield 'time', valid_status, "Remaining validity", valid
-
         if pubtkt.cip :
             yield 'cloud', None, "Network address", pubtkt.cip
 
@@ -193,14 +235,20 @@
 
     def render_pubtkt (self, pubtkt) :
         status = self.render_status(pubtkt)
+        domain = self.app.login_domain
 
         return html.div(class_='pubtkt panel panel-{status}'.format(status=status))(
-            html.div(class_='panel-heading')("Login: {pubtkt.uid}".format(pubtkt=self.pubtkt)),
+            html.div(class_='panel-heading')(
+                html.span(class_='glyphicon glyphicon-user'),
+                html.strong(pubtkt.uid),
+                html.span("@", domain),
+            ),
+            self.render_pubtkt_valid(pubtkt),
             html.ul(class_='list-group')(
                 html.li(class_='list-group-item {status}'.format(status=('alert-'+status if status else '')), title=title)(
                     html.span(class_='glyphicon glyphicon-{glyphicon}'.format(glyphicon=icon)) if icon else None,
-                    info,
-                ) for icon, status, title, info in self.render_pubtkt_fields(pubtkt)
+                    data,
+                ) for icon, status, title, data in self.render_pubtkt_fields(pubtkt)
             ),
             html.div(class_='panel-footer')(
                 #html.div(class_='btn-toolbar', role='toolbar')(