Merge pull request #1079 from stefanv/htmlnotebook_login_button

Login/out button cleanups:

- Display a login button when viewing the notebook in read-only mode.
- On the login page, focus on the password field by default.
- Correctly style login / logout buttons.
- In read-only mode, redirect to "/" after logout, not "/login".

IPython/frontend/html/notebook/handlers.py

@@ -137,17 +137,32 b' class AuthenticatedHandler(RequestHandler):'
             if not self.application.password and not self.application.read_only:
                 user_id = 'anonymous'
         return user_id
-    
+
+    @property
+    def logged_in(self):
+        """Is a user currently logged in?
+
+        """
+        user = self.get_current_user()
+        return (user and not user == 'anonymous')
+
+    @property
+    def login_available(self):
+        """May a user proceed to log in?
+
+        This returns True if login capability is available, irrespective of
+        whether the user is already logged in or not.
+
+        """
+        return bool(self.application.password)
+
     @property
     def read_only(self):
-        if self.application.read_only:
-            if self.application.password:
-                return self.get_current_user() is None
-            else:
-                return True
-        else:
-            return False
-    
+        """Is the notebook read-only?
+
+        """
+        return self.application.read_only
+
     @property
     def ws_url(self):
         """websocket url matching the current request
@@ -169,6 +184,8 b' class ProjectDashboardHandler(AuthenticatedHandler):'
             'projectdashboard.html', project=project,
             base_project_url=u'/', base_kernel_url=u'/',
             read_only=self.read_only,
+            logged_in=self.logged_in,
+            login_available=self.login_available
         )
 
 
@@ -178,6 +195,8 b' class LoginHandler(AuthenticatedHandler):'
         self.render('login.html',
                 next=self.get_argument('next', default='/'),
                 read_only=self.read_only,
+                logged_in=self.logged_in,
+                login_available=self.login_available,
                 message=message
         )
 
@@ -203,7 +222,17 b' class LogoutHandler(AuthenticatedHandler):'
 
     def get(self):
         self.clear_cookie('username')
-        self.render('logout.html', message={'info': 'Successfully logged out.'})
+        if self.login_available:
+            message = {'info': 'Successfully logged out.'}
+        else:
+            message = {'warning': 'Cannot log out.  Notebook authentication '
+                       'is disabled.'}
+
+        self.render('logout.html',
+                    read_only=self.read_only,
+                    logged_in=self.logged_in,
+                    login_available=self.login_available,
+                    message=message)
 
 
 class NewHandler(AuthenticatedHandler):
@@ -219,6 +248,8 b' class NewHandler(AuthenticatedHandler):'
             base_project_url=u'/', base_kernel_url=u'/',
             kill_kernel=False,
             read_only=False,
+            logged_in=self.logged_in,
+            login_available=self.login_available,
             mathjax_url=self.application.ipython_app.mathjax_url,
         )
 
@@ -238,6 +269,8 b' class NamedNotebookHandler(AuthenticatedHandler):'
             base_project_url=u'/', base_kernel_url=u'/',
             kill_kernel=False,
             read_only=self.read_only,
+            logged_in=self.logged_in,
+            login_available=self.login_available,
             mathjax_url=self.application.ipython_app.mathjax_url,
         )
 

IPython/frontend/html/notebook/static/js/loginwidget.js

@@ -22,12 +22,16 b' var IPython = (function (IPython) {'
 
     LoginWidget.prototype.style = function () {
         this.element.find('button#logout').button();
+        this.element.find('button#login').button();
     };
     LoginWidget.prototype.bind_events = function () {
         var that = this;
         this.element.find("button#logout").click(function () {
             window.location = "/logout";
         });
+        this.element.find("button#login").click(function () {
+            window.location = "/login";
+        });
     };
 
     // Set module variables

IPython/frontend/html/notebook/static/js/projectdashboardmain.js

@@ -28,18 +28,9 b' $(document).ready(function () {'
     $('div#right_panel').addClass('box-flex');
 
     IPython.read_only = $('meta[name=read_only]').attr("content") == 'True';
-    
     IPython.notebook_list = new IPython.NotebookList('div#notebook_list');
     IPython.login_widget = new IPython.LoginWidget('span#login_widget');
-    
-    if (IPython.read_only){
-        // unhide login button if it's relevant
-        $('span#login_widget').removeClass('hidden');
-        $('#drag_info').remove();
-    } else {
-        $('#new_notebook').removeClass('hidden');
-        $('#drag_info').removeClass('hidden');
-    }
+
     IPython.notebook_list.load_list();
 
     // These have display: none in the css file and are made visible here to prevent FLOUC.

IPython/frontend/html/notebook/templates/layout.html

@@ -22,11 +22,19 b''
 
 <div id="header">
     <span id="ipython_notebook"><h1><img src='static/ipynblogo.png' alt='IPython Notebook'/></h1></span>
-    <span id="login_widget">
-      {% if current_user and current_user != 'anonymous' %}
-        <button id="logout">Logout</button>
-      {% end %}
-    </span>
+
+    {% block login_widget %}
+
+      <span id="login_widget">
+        {% if logged_in %}
+          <button id="logout">Logout</button>
+        {% elif login_available and not logged_in %}
+          <button id="login">Login</button>
+        {% end %}
+      </span>
+
+    {% end %}
+
     {% block header %}
     {% end %}
 </div>

IPython/frontend/html/notebook/templates/login.html

@@ -1,8 +1,26 b''
 {% extends layout.html %}
 
 {% block content_panel %}
+
+    {% if login_available %}
+
     <form action="/login?next={{url_escape(next)}}" method="post">
-        Password: <input type="password" name="password">
+        Password: <input type="password" name="password" id="focus">
         <input type="submit" value="Sign in" id="signin">
     </form>
+
+    {% end %}
+
+{% end %}
+
+{% block login_widget %}
+{% end %}
+
+{% block script %}
+<script type="text/javascript">
+  $(document).ready(function() {
+    IPython.login_widget = new IPython.LoginWidget('span#login_widget');
+    $('#focus').focus();
+  });
+</script>
 {% end %}

IPython/frontend/html/notebook/templates/logout.html

@@ -1,5 +1,28 b''
 {% extends layout.html %}
 
 {% block content_panel %}
-Proceed to the <a href="/login">login page</a>.
+  <ul>
+    {% if read_only or not login_available %}
+
+    Proceed to the <a href="/">list of notebooks</a>.</li>
+
+    {% else %}
+
+    Proceed to the <a href="/login">login page</a>.</li>
+
+    {% end %}
+
+  </ul>
+
+{% end %}
+
+{% block login_widget %}
+{% end %}
+
+{% block script %}
+<script type="text/javascript">
+  $(document).ready(function() {
+    IPython.login_widget = new IPython.LoginWidget('span#login_widget');
+  });
+</script>
 {% end %}

IPython/frontend/html/notebook/templates/notebook.html

@@ -29,8 +29,10 b''
     <link rel="stylesheet" href="static/css/base.css" type="text/css" />
     <link rel="stylesheet" href="static/css/notebook.css" type="text/css" />
     <link rel="stylesheet" href="static/css/renderedhtml.css" type="text/css" />
-    
-    <meta name="read_only" content="{{read_only}}"/>
+
+    {% comment  In the notebook, the read-only flag is used to determine %}
+    {% comment  whether to hide the side panels and switch off input %}
+    <meta name="read_only" content="{{read_only and not logged_in}}"/>
 
 </head>
 
@@ -52,8 +54,10 b''
     <span id="login_widget">
       {% comment  This is a temporary workaround to hide the logout button %}
       {% comment  when appropriate until notebook.html is templated %}
-      {% if current_user and current_user != 'anonymous' %}
+      {% if logged_in %}
         <button id="logout">Logout</button>
+      {% elif not logged_in and login_available %}
+        <button id="login">Login</button>
       {% end %}
     </span>
 

IPython/frontend/html/notebook/templates/projectdashboard.html

@@ -19,12 +19,19 b' data-base-kernel-url={{base_kernel_url}}'
 {% end %}
 
 {% block content_panel %}
+    {% if logged_in or not read_only %}
+
     <div id="content_toolbar">
-        <span id="drag_info" class="hidden">Drag files onto the list to import notebooks.</span>
+        <span id="drag_info">Drag files onto the list to import
+        notebooks.</span>
+
         <span id="notebooks_buttons">
-            <button id="new_notebook" class="hidden">New Notebook</button>
+          <button id="new_notebook">New Notebook</button>
         </span>
     </div>
+
+    {% end %}
+
     <div id="notebook_list">
         <div id="project_name"><h2>{{project}}</h2></div>
     </div>