Add providers buttons on login page

templates/login/base_login_page.html

@@ -30,8 +30,6 @@
                 font-size: 3.5rem;
             }
         }
-
-
     </style>
 
 
@@ -45,7 +43,7 @@
 
 <main class="form-signin">
 
-    <h1 class="h3 mb-3 fw-normal">{{ _p.page_title }}</h1>
+    <h1 class="h3 mb-3 fw-normal" style="margin-bottom: 2rem !important;">{{ _p.page_title }}</h1>
 
     {% if let Some(danger) = _p.danger %}
     <div class="alert alert-danger" role="alert">

templates/login/login.html

@@ -1,5 +1,23 @@
 {% extends "base_login_page.html" %}
 {% block content %}
+<style>
+#providers {
+    margin-top: 40px;
+}
+
+.provider-button {
+    width: 100%;
+    display: flex;
+    margin-top: 10px;
+}
+
+.provider-button img {
+    margin-right: 1em;
+    width: 1em;
+}
+
+</style>
+
 <form action="/login?redirect={{ _p.redirect_uri.get_encoded() }}" method="post">
     <div>
         <div class="form-floating">
@@ -19,4 +37,18 @@
 
 </form>
 
+<!-- Upstream providers -->
+{% if !providers.is_empty() %}
+<div id="providers">
+    {% for prov in providers %}
+    <a class="btn btn-secondary btn-lg provider-button" href="{{ prov.login_url(_p.redirect_uri) }}">
+        <img src="{{ prov.logo_url() }}" alt="Provider icon"/>
+        <div style="text-align: left;">
+            Login using {{ prov.name }} <br/>
+        </div>
+    </a>
+    {% endfor %}
+</div>
+{% endif %}
+
 {% endblock content %}