Add templates

ec-templates/403.html

@@ -1,7 +1,7 @@
 <!-- htmlhint doctype-first:false -->
 {% extends "error.html" %}
 {% block main %}
-<div class="ecl-container ecl-u-mv-xl">
+<div class="ecl-container ecl-u-mv-xl container-fix">
   <h1>Unauthorized!</h1>
   <p>
     Access to European Open Science Cloud - EU Node Interactive Notebooks is

ec-templates/admin.html

@@ -0,0 +1,17 @@
+<!-- htmlhint doctype-first:false,id-class-value:false -->
+{% extends "page.html" %}
+
+{% block main %}
+<div class="ecl-container ecl-u-mv-xl container-fix">
+  <div id="react-admin-hook">
+    <script id="jupyterhub-admin-config">
+      window.api_page_limit = parseInt("{{ api_page_limit|safe }}");
+      window.base_url = "{{ base_url|safe }}";
+    </script>
+    <script src="{{ static_url('js/admin-react.js') }}"></script>
+  </div>
+  <div class="container-fluid navbar-default small version_footer">
+    <div class="navbar-text">JupyterHub {{ server_version }}</div>
+  </div>
+</div>
+{% endblock %}

ec-templates/egi-login.html

@@ -5,7 +5,7 @@
 {% endif %}
 
 {% block main %}
-<div id="main-page-content" class="ecl-u-mb-l">
+<div id="main-page-content" class="ecl-u-mb-l container-fix">
   <article>
     <div>
       <div class="ecl-u-mb-2xl">

ec-templates/error.html

@@ -0,0 +1,45 @@
+<!-- htmlhint doctype-first:false -->
+{% extends "page.html" %}
+{% block login_widget %}
+{% endblock login_widget %}
+{% block main %}
+  <div class="ecl-container ecl-u-mv-xl container-fix">
+    {% block h1_error %}
+      <h1>{{ status_code }} : {{ status_message }}</h1>
+    {% endblock h1_error %}
+    {% block error_detail %}
+      {% if message %}<p>{{ message }}</p>{% endif %}
+      {% if message_html %}<p>{{ message_html | safe }}</p>{% endif %}
+      {% if extra_error_html %}<p>{{ extra_error_html | safe }}</p>{% endif %}
+    {% endblock error_detail %}
+  </div>
+{% endblock main %}
+{% block script %}
+  {{ super() }}
+  <script type="text/javascript">
+    function _remove_redirects_from_url() {
+      if (window.location.search.length <= 1) {
+        return;
+      }
+      var search_parameters = window.location.search.slice(1).split('&');
+      for (var i = 0; i < search_parameters.length; i++) {
+        if (search_parameters[i].split('=')[0] === 'redirects') {
+          // remote redirects from search parameters
+          search_parameters.splice(i, 1);
+          var new_search = '';
+          if (search_parameters.length) {
+            new_search = '?' + search_parameters.join('&');
+          }
+          var new_url = window.location.origin +
+            window.location.pathname +
+            new_search +
+            window.location.hash;
+          window.history.replaceState({}, "", new_url);
+          return;
+        }
+      }
+    }
+
+    _remove_redirects_from_url();
+  </script>
+{% endblock script %}

ec-templates/home.html

@@ -5,14 +5,15 @@
 {% endif %}
 
 {% block main %}
-<div class="ecl-container ecl-u-mv-xl">
+<div class="ecl-container ecl-u-mv-xl container-fix">
   <h1 class="sr-only">JupyterHub home page</h1>
   <div class="row">
     <div class="text-center">
       {% if default_server.active %}
-      <a id="stop" role="button" class="ecl-button ecl-button--cta"
+      <a id="stop" role="button" class="ecl-button ecl-button--secondary"
         >Stop My Server</a
-      >{% endif %}
+      >
+      {% endif %}
       <a
         id="start"
         role="button"
@@ -53,7 +54,7 @@ <h2>Named Servers</h2>
             <button
               role="button"
               type="button"
-              class="new-server-btn btn btn-xs btn-primary"
+              class="new-server-btn ecl-button ecl-button--primary btn-xs"
             >
               Add New Server
             </button>
@@ -80,20 +81,20 @@ <h2>Named Servers</h2>
         <td>
           <a
             role="button"
-            class="stop-server btn btn-xs btn-danger{% if not spawner.active %} hidden{% endif %}"
+            class="stop-server btn-xs ecl-button ecl-button--secondary {% if not spawner.active %} hidden{% endif %}"
             id="stop-{{ spawner.name }}"
             >stop</a
           >
           <a
             role="button"
-            class="start-server btn btn-xs btn-primary {% if spawner.active %}hidden{% endif %}"
+            class="start-server btn-xs ecl-button ecl-button--primary {% if spawner.active %}hidden{% endif %}"
             id="start-{{ spawner.name }}"
             href="{{ base_url }}spawn/{{ user.name }}/{{ spawner.name }}"
             >start</a
           >
           <button
             role="button"
-            class="delete-server btn btn-xs btn-danger{% if spawner.active %} hidden{% endif %}"
+            class="delete-server btn-xs ecl-button ecl-button--secondary {% if spawner.active %} hidden{% endif %}"
             id="delete-{{ spawner.name }}"
           >
             delete
@@ -105,8 +106,11 @@ <h2>Named Servers</h2>
   </table>
   {% endif %}
 </div>
-{% endblock main %} {% block script %} {{ super() }}
+{% endblock main %}
+
+{% block script %}
+{{ super() }}
 <script type="text/javascript">
-  require(["home"]);
+require(["home"]);
 </script>
-{% endblock script %}
+{% endblock %}

ec-templates/logout.html

@@ -8,7 +8,7 @@
 {% endif %}
 
 {% block main %}
-<div id="logout-main" class="container">
+<div id="logout-main" class="ecl-container">
   <p>Successfully logged out.</p>
 </div>
 {% endblock %}

ec-templates/not_running.html

@@ -0,0 +1,78 @@
+<!-- htmlhint doctype-first:false,id-class-value:false -->
+{% extends "page.html" %}
+{% block main %}
+  <div class="ecl-container ecl-u-mv-xl">
+    <div class="row">
+      <div class="text-center">
+        {% block heading %}
+          <h1>
+            {% if failed %}
+              Spawn failed
+            {% else %}
+              Server not running
+            {% endif %}
+          </h1>
+        {% endblock heading %}
+        {% block message %}
+          <p>
+            {% if failed %}
+              The latest attempt to start your server {{ server_name }} has failed.
+              {% if failed_html_message %}
+              </p>
+              <p>{{ failed_html_message | safe }}</p>
+              <p>{% elif failed_message %}</p>
+              <p>{{ failed_message }}</p>
+              <p>
+              {% endif %}
+              Would you like to retry starting it?
+            {% else %}
+              Your server {{ server_name }} is not running.
+              {% if implicit_spawn_seconds %}
+                It will be restarted automatically.
+                If you are not redirected in a few seconds,
+                click below to launch your server.
+              {% else %}
+                Would you like to start it?
+              {% endif %}
+            {% endif %}
+          </p>
+        {% endblock message %}
+        {% block start_button %}
+          <a id="start"
+             role="button"
+             class="ecl-button ecl-button--primary"
+             href="{{ spawn_url }}">
+            {% if failed %}
+              Relaunch
+            {% else %}
+              Launch
+            {% endif %}
+            Server {{ server_name }}
+          </a>
+        {% endblock start_button %}
+      </div>
+    </div>
+  </div>
+{% endblock main %}
+{% block script %}
+  {{ super () }}
+  {% if implicit_spawn_seconds %}
+    <script type="text/javascript">
+      var spawn_url = "{{ spawn_url }}";
+      var implicit_spawn_seconds = {
+        {
+          implicit_spawn_seconds
+        }
+      };
+      setTimeout(function() {
+          console.log("redirecting to spawn at", spawn_url);
+          window.location = spawn_url;
+        },
+        1000 * implicit_spawn_seconds
+      );
+    </script>
+  {% endif %}
+  <script type="text/javascript">
+    require(["not_running"]);
+  </script>
+{% endblock script %}

ec-templates/oauth.html

@@ -0,0 +1,54 @@
+<!-- htmlhint doctype-first:false,id-class-value:false -->
+{% extends "page.html" %}
+{% block login_widget %}
+{% endblock login_widget %}
+{% block main %}
+  <div class="ecl-container">
+    <div class="row justify-content-center">
+      <div class="col-md-8">
+        <h1 class="text-center">Authorize access</h1>
+        <p class="lead">An application is requesting authorization to access data associated with your JupyterHub account</p>
+        <p>
+          {{ oauth_client.description }} (oauth URL: {{ oauth_client.redirect_uri }})
+          would like permission to identify you.
+          {% if scope_descriptions | length == 1 and not scope_descriptions[0].scope %}
+            It will not be able to take actions on
+            your behalf.
+          {% endif %}
+        </p>
+        <form method="post" action="">
+          <div class="card">
+            <div class="card-header">
+              <p class="h5">This will grant the application permission to:</p>
+            </div>
+            <div class="card-body">
+              <input type="hidden" name="_xsrf" value="{{ xsrf }}" />
+              {# these are the 'real' inputs to the form -#}
+              {% for scope in allowed_scopes %}<input type="hidden" name="scopes" value="{{ scope }}" />{% endfor %}
+              {% for scope_info in scope_descriptions %}
+                <div class="checkbox input-group">
+                  <label>
+                    {# disabled because it's required #}
+                    <input type="checkbox"
+			   class="ecl-checkbox__input"
+                           name="raw-scopes"
+                           checked="true"
+                           title="This authorization is required"
+                           disabled="disabled" />
+                    <span>
+                      {{ scope_info['description'] }}
+                      {% if scope_info['filter'] %}Applies to {{ scope_info['filter'] }}.{% endif %}
+                    </span>
+                  </label>
+                </div>
+              {% endfor %}
+            </div>
+            <div class="card-footer">
+              <button type="submit" class="form-control ecl-button ecl-button--primary mt-2">Authorize</button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+{% endblock main %

ec-templates/page.html

@@ -4,6 +4,25 @@
 
 {% block stylesheet %}
 {{ super() }}
+
+<style>
+html {
+  font-size: 100%;
+  height: 100%;
+}
+body {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.site-footer-fix {
+  margin-top: auto;
+}
+.container-fix {
+  flex-grow: 1;
+}
+</style>
+
 <link
   rel="stylesheet"
   href="{{ static_url('css/ecl-ec-default.css') }}"
@@ -35,6 +54,7 @@
   media="print"
 />
 {% endblock stylesheet %}
+
 {% block script %}
 {{ super() }}
 <script src="{{ static_url('js/ecl-ec.js') }}"></script>
@@ -258,8 +278,51 @@
 </header>
 {% endblock nav_bar %}
 
+{% block announcement %}
+{% if announcement %}
+<div
+  class="ecl-notification ecl-notification--info"
+  data-ecl-notification
+  role="alert"
+  data-ecl-auto-init="Notification"
+>
+  <svg
+    class="ecl-icon ecl-icon--l ecl-notification__icon"
+    focusable="false"
+    aria-hidden="false"
+    role="img"
+  >
+    <title>Information</title>
+    <use xlink:href="{{ static_url('images/icons.svg') }}#information"></use>
+  </svg>
+  <div class="ecl-notification__content">
+    <button
+      class="ecl-button ecl-button--tertiary ecl-notification__close ecl-button--icon-only"
+      type="button"
+      data-ecl-notification-close
+    >
+      <span class="ecl-button__container"
+        ><span class="ecl-button__label" data-ecl-label="true">Close</span
+        ><svg
+          class="ecl-icon ecl-icon--m ecl-button__icon"
+          focusable="false"
+          aria-hidden="true"
+          data-ecl-icon
+        >
+          <use
+            xlink:href="{{ static_url('images/icons.svg') }}#close"
+          ></use></svg
+      ></span>
+    </button>
+    <div class="ecl-notification__title">Announcement</div>
+    <div class="ecl-notification__description">{{ announcement | safe }}</div>
+  </div>
+</div>
+{% endif %}
+{% endblock announcement %}
+
 {% block footer %}
-<footer class="ecl-site-footer">
+<footer class="ecl-site-footer site-footer-fix">
   <div class="ecl-container ecl-site-footer__container">
     <div class="ecl-site-footer__row">
       <div class="ecl-site-footer__column">
@@ -275,8 +338,8 @@
             >
           </div>
           <div class="ecl-site-footer__description">
-            This site is managed by:<br />Directorate-General for Communications
-            Networks, Content and Technology
+            This site is managed by:<br />Directorate-General for
+            Communications Networks, Content and Technology
           </div>
           <ul class="ecl-site-footer__list">
             <li class="ecl-site-footer__list-item">