A pretty jupyter login

obijupyterhub/jupyterhub_templates/login.html

@@ -1,36 +1,143 @@
-{% extends "page.html" %}
+{% extends "page.html" %} {% if announcement_login is string %} {% set
-{% if announcement_login is string %}
+announcement = announcement_login %} {% endif %} {% block head %} {{ super() }}
-  {% set announcement = announcement_login %}
+<style>
-{% endif %}
+  body {
-{% block login_widget %}
+    background: radial-gradient(
-{% endblock login_widget %}
+      circle at top,
-{% block main %}
+      #f9f8ff 0%,
-  {% block login %}
+      #f1f5ff 45%,
-    <div id="login-main" class="container">
+      #e7eefb 100%
-      {% block login_container %}
+    );
-        {% if custom_html %}
+    min-height: 100vh;
-          {{ custom_html | safe }}
+    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
+  }
+  #login-main {
+    max-width: 950px;
+    margin: 4rem auto;
+    padding: 0;
+  }
+  .metabar-card {
+    display: flex;
+    flex-wrap: wrap;
+    box-shadow: 0 20px 60px rgba(30, 50, 120, 0.15);
+    border-radius: 28px;
+    overflow: hidden;
+    background: white;
+  }
+  .auth-form-body img#metabar-img {
+    width: 200px; /* ajuste selon le rendu souhaité */
+    height: auto;
+    display: block;
+    margin: 0 auto 1rem;
+  }
+  .login-panel {
+    flex: 1 1 360px;
+    padding: 2.5rem;
+  }
+  .login-panel h2 {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+  }
+  .login-panel p.subtitle {
+    color: #667080;
+    margin-bottom: 1.75rem;
+  }
+  .auth-form-body label {
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+    color: #6b7280;
+  }
+  .auth-form-body input.form-control {
+    border-radius: 14px;
+    padding: 0.85rem 1rem;
+    border: 1px solid #d7def0;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+  .auth-form-body input.form-control:focus {
+    border-color: #6b8afd;
+    box-shadow: 0 0 0 3px rgba(107, 138, 253, 0.2);
+    outline: none;
+  }
+  .btn.btn-jupyter {
+    background: linear-gradient(135deg, #6b8afd, #3f6dd9);
+    border: none;
+    border-radius: 14px;
+    padding: 0.85rem 0;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+  .metabar-footnote {
+    font-size: 0.82rem;
+    color: #94a3b8;
+    margin-top: 1.5rem;
+  }
+  @media (max-width: 900px) {
+    #login-main {
+      margin: 2rem 1rem;
+    }
+    .metabar-card {
+      flex-direction: column;
+    }
+    .metabar-hero img {
+      position: relative;
+      opacity: 1;
+    }
+    .metabar-hero__overlay {
+      background: rgba(4, 20, 43, 0.85);
+      border-radius: inherit;
+    }
+  }
+</style>
+{% endblock head %} {% block login_widget %}{% endblock login_widget %} {% block
+main %} {% block login %}
+<div id="login-main" class="container">
+  <div class="metabar-card">
+    <section class="login-panel">
+      <h2></h2>
+      <p class="subtitle"></p>
+      {% block login_container %} {% if custom_html %} {{ custom_html | safe }}
       {% elif login_service %}
       <div class="service-login">
-            <a role="button"
+        <a
-               class='btn btn-jupyter btn-lg'
+          role="button"
-               href='{{ authenticator_login_url | safe }}'>Sign in with {{ login_service }}</a>
+          class="btn btn-jupyter btn-lg w-100"
+          href="{{ authenticator_login_url | safe }}"
+          >Sign in with {{ login_service }}</a
+        >
       </div>
       {% else %}
-          <form action="{{ authenticator_login_url | safe }}"
+      <form
+        action="{{ authenticator_login_url | safe }}"
         method="post"
-                role="form">
+        role="form"
-            <div class="auth-form-header">
+      >
-              <h1>Sign in</h1>
+        <div class="auth-form-body">
-            </div>
+          {% if login_error %}
-            <div class='auth-form-body m-auto'>
+          <p class="login_error">{{ login_error }}</p>
-              {% if login_error %}<p class="login_error">{{ login_error }}</p>{% endif %}
+          {% endif %}
+          <img
+            id="metabar-img"
+            src="/img/welcome_metabar.webp"
+            alt="Metabarcoding welcome illustration"
+            style="
+              width: 308px;
+              height: auto;
+              display: block;
+              margin: 0 auto 1rem;
+            "
+          />
           <input type="hidden" name="_xsrf" value="{{ xsrf }}" />
-              {# Allow full override of the "label" and "input" elements of the username and password fields. #}
           {% block username_input %}
-                <label for="username_input">Username:</label>
+          <label for="username_input">Username</label>
-                <input id="username_input"
+          <input
-                       {% block username_input_attrs %}
+            id="username_input"
+            {%
+            block
+            username_input_attrs
+            %}
             type="text"
             autocapitalize="off"
             autocorrect="off"
@@ -39,74 +146,84 @@
             name="username"
             value="{{ username }}"
             autofocus="autofocus"
-                       {% endblock username_input_attrs %} />
+            {%
-              {% endblock username_input %}
+            endblock
-              {% block password_input %}
+            username_input_attrs
-                <label for='password_input'>Password:</label>
+            %}
-                <input id="password_input"
+          />
-                       {% block password_input_attrs %}
+          {% endblock username_input %} {% block password_input %}
+          <label for="password_input">Password</label>
+          <input
+            id="password_input"
+            {%
+            block
+            password_input_attrs
+            %}
             type="password"
             class="form-control"
             autocomplete="current-password"
             name="password"
-                       {% endblock password_input_attrs %} />
+            {%
-              {% endblock password_input %}
+            endblock
-              {% if authenticator.request_otp %}
+            password_input_attrs
-                {% block otp_input %}
+            %}
+          />
+          {% endblock password_input %} {% if authenticator.request_otp %} {%
+          block otp_input %}
           <label for="otp_input">{{ authenticator.otp_prompt }}</label>
-                  <input id="otp_input"
+          <input
-                         {% block otp_input_attrs %}
+            id="otp_input"
+            {%
+            block
+            otp_input_attrs
+            %}
             class="form-control"
             autocomplete="one-time-password"
             name="otp"
-                         {% endblock otp_input_attrs %} />
+            {%
-                {% endblock otp_input %}
+            endblock
-              {% endif %}
+            otp_input_attrs
-              <div class="feedback-container">
+            %}
-                <input id="login_submit"
+          />
+          {% endblock otp_input %} {% endif %}
+          <div class="feedback-container mt-4">
+            <input
+              id="login_submit"
               type="submit"
-                       class='btn btn-jupyter form-control'
+              class="btn btn-jupyter form-control"
-                       value='Sign in'
+              value="Sign in"
-                       tabindex="3" />
+              tabindex="3"
+            />
             <div class="feedback-widget hidden">
               <i class="fa fa-spinner"></i>
             </div>
           </div>
-              {% block login_terms %}
+          {% block login_terms %} {% if login_term_url %}
-                {% if login_term_url %}
+          <div id="login_terms" class="login_terms mt-3">
-                  <div id="login_terms" class="login_terms">
+            <input
-                    <input type="checkbox"
+              type="checkbox"
               id="login_terms_checkbox"
               name="login_terms_checkbox"
-                           required />
+              required
-                    {% block login_terms_text %}
+            />
-                      {# allow overriding the text #}
+            {% block login_terms_text %} By logging in you accept the
-                      By logging into the platform you accept the <a href="{{ login_term_url }}">terms and conditions</a>.
+            <a href="{{ login_term_url }}">terms and conditions</a>. {% endblock
-                    {% endblock login_terms_text %}
+            login_terms_text %}
           </div>
-                {% endif %}
+          {% endif %} {% endblock login_terms %}
-              {% endblock login_terms %}
         </div>
       </form>
-        {% endif %}
+      {% endif %} {% endblock login_container %}
-      {% endblock login_container %}
+    </section>
   </div>
-  {% endblock login %}
+</div>
-{% endblock main %}
+{% endblock login %} {% endblock main %} {% block script %} {{ super() }}
-{% block script %}
+<script>
-  {{ super() }}
+  $("form").submit((e) => {
-  <script>
+    const form = $(e.target);
-    if (!window.isSecureContext) {
+    form.find(".feedback-container>input").attr("disabled", true);
-      // unhide http warning
+    form.find(".feedback-container>*").toggleClass("hidden");
-      var warning = document.getElementById('insecure-login-warning');
+    form.find(".feedback-widget>*").toggleClass("fa-pulse");
-      warning.className = warning.className.replace(/\bhidden\b/, '');
-    }
-    // setup onSubmit feedback
-    $('form').submit((e) => {
-      var form = $(e.target);
-      form.find('.feedback-container>input').attr('disabled', true);
-      form.find('.feedback-container>*').toggleClass('hidden');
-      form.find('.feedback-widget>*').toggleClass('fa-pulse');
   });
-  </script>
+</script>
 {% endblock script %}