Merge pull request #295 from blink1073/login-page-deluxe

Add a minimal login page with info

Author: Zsailer

jupyter_server/templates/login.html

@@ -1,17 +1,98 @@
 {% extends "page.html" %}
 
+{% block stylesheet %}
+<style>
+.form {
+    margin-left: 50px;
+    margin-right: 50px;
+}
+
+.content {
+    margin-left: 50px;
+    margin-right: 50px;
+    margin-bottom: 50px;
+}
+</style>
+{% endblock %}
+
 {% block site %}
 {% if message %}
 {% for key in message %}
-<div>
+<div class="content">
     {{message[key]}}
 </div>
 {% endfor %}
 {% endif %}
-<form action="{{base_url}}login?next={{next}}" method="post">
+<form class="form" action="{{base_url}}login?next={{next}}" method="post">
     {{ xsrf_form_html() | safe }}
-    <label for="password_input"><strong>{% trans %}Password:{% endtrans %}</strong></label>
+    <label for="password_input"><strong>{% trans %}Password or token:{% endtrans %}</strong></label>
     <input type="password" name="password" id="password_input">
     <button type="submit" id="login_submit">{% trans %}Log in{% endtrans %}</button>
 </form>
-{% endblock site %}
+
+{% if token_available %}
+{% block token_message %}
+<div class="content">
+    <h3>
+        Token authentication is enabled
+    </h3>
+    <p>
+        If no password has been configured, you need to open the
+        server with its login token in the URL, or paste it above.
+        This requirement will be lifted if you
+        <b><a href='https://jupyter-server.readthedocs.io/en/latest/operators/public-server.html'>
+                enable a password</a></b>.
+    </p>
+    <p>
+        The command:
+    <pre>jupyter server list</pre>
+    will show you the URLs of running servers with their tokens,
+    which you can copy and paste into your browser. For example:
+    </p>
+    <pre>Currently running servers:
+http://localhost:8888/?token=c8de56fa... :: /Users/you/notebooks
+</pre>
+    <p>
+        or you can paste just the token value into the password field on this
+        page.
+    </p>
+    <p>
+        See
+        <b><a href='https://jupyter-server.readthedocs.io/en/latest/operators/public-server.html'>
+                the documentation on how to enable a password</a>
+        </b>
+        in place of token authentication,
+        if you would like to avoid dealing with random tokens.
+    </p>
+    <p>
+        Cookies are required for authenticated access to notebooks.
+    </p>
+    {% if allow_password_change %}
+    <h3>{% trans %}Setup a Password{% endtrans %}</h3>
+    <p> You can also setup a password by entering your token and a new password
+        on the fields below:</p>
+    <form action="{{base_url}}login?next={{next}}" method="post" class="">
+        {{ xsrf_form_html() | safe }}
+        <div class="form-group">
+            <label for="token_input">
+                <h4>Token</h4>
+            </label>
+            <input type="password" name="password" id="token_input" class="form-control">
+        </div>
+        <div class="form-group">
+            <label for="new_password_input">
+                <h4>New Password</h4>
+            </label>
+            <input type="password" name="new_password" id="new_password_input" class="form-control" required>
+        </div>
+        <div class="form-group">
+            <button type="submit" class="btn btn-default" id="login_new_pass_submit">{% trans %}Log in and set new
+                password{% endtrans %}</button>
+        </div>
+    </form>
+    {% endif %}
+</div>
+{% endblock token_message %}
+{% endif %}
+    
+{% endblock site %}

jupyter_server/templates/page.html

@@ -10,6 +10,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    {% block stylesheet %}
+    {% endblock %}
+    
     {% block meta %}
     {% endblock %}