feat(oidc): Show the provider's name and icon on the login page

src/web/pages/account/login.rs

@@ -61,6 +61,8 @@ enum LoginType {
 	},
 	Oidc {
 		redirect_url: Url,
+		provider_name: Option<String>,
+		provider_icon: Option<Url>,
 	},
 }
 
@@ -98,7 +100,11 @@ async fn route_login(
 			.await
 			.expect("should be able to serialize OIDC session");
 
-		LoginType::Oidc { redirect_url }
+		LoginType::Oidc {
+			redirect_url,
+			provider_name: services.oidc.provider_name(),
+			provider_icon: services.oidc.provider_icon(),
+		}
 	} else {
 		LoginType::Interactive {
 			registration_available: services

src/web/pages/resources/login.css

@@ -7,6 +7,18 @@
     }
 }
 
+a.button.provider-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+}
+
+.provider-icon {
+    flex: none;
+    height: 2em;
+}
+
 .text-rule {
     display: flex;
     align-items: center;

src/web/pages/templates/login.html.j2

@@ -8,6 +8,19 @@
 Log in
 {%- endblock -%}
 
+{%- macro oidc_button(redirect_url, provider_name, provider_icon) -%}
+<a class="button provider-button" href="{{ redirect_url }}">
+    {% if let Some(icon) = provider_icon %}
+        <img class="provider-icon" src="{{ icon }}" alt="" aria-hidden="true">
+    {% endif %}
+    {% if let Some(name) = provider_name %}
+        Continue with {{ name }}
+    {% else %}
+        Continue
+    {% endif %}
+</a>
+{%- endmacro -%}
+
 {%- block content -%}
 {% match login_type %}
     {% when LoginType::Interactive { .. } %}
@@ -54,8 +67,8 @@ Log in
                         {% endif %}
                         <a href="{{ crate::ROUTE_PREFIX }}/account/password/reset/">Forgot your password?</a>
                     </div>
-                {% when LoginType::Oidc { redirect_url } %}
-                    <a class="button" href="{{ redirect_url }}">Continue</a>
+                {% when LoginType::Oidc { redirect_url, provider_name, provider_icon } %}
+                    {{ oidc_button(redirect_url, provider_name, provider_icon) }}
             {% endmatch %}
         {% when LoginBody::Authenticated { user_card } %}
             <h1>Confirm your identity</h1>
@@ -76,8 +89,8 @@ Log in
                     <div class="centered-links">
                         <a href="{{ crate::ROUTE_PREFIX }}/account/password/reset/">Forgot your password?</a>
                     </div>
-                {% when LoginType::Oidc { redirect_url } %}
-                    <a class="button" href="{{ redirect_url }}">Continue</a>
+                {% when LoginType::Oidc { redirect_url, provider_name, provider_icon } %}
+                    {{ oidc_button(redirect_url, provider_name, provider_icon) }}
             {% endmatch %}
     {% endmatch %}
 </div>