fix: display current configured oauth as icon instead of text (#2375)

Before:


![image](https://github.com/user-attachments/assets/b71d78c0-2a11-4d2e-adf5-2f23ccfd6b2e)


After:


![image](https://github.com/user-attachments/assets/35d3494c-275a-42b6-b646-6e025b03d7c5)

umap/static/umap/content.css

@@ -41,33 +41,14 @@ body.login header {
     display: inline-block;
 }
 
+.login-grid span,
 .login-grid a {
     border: 1px solid #e5e5e5;
-    padding: 5px;
     color: #000;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-    background-size: 92px 92px;
     height: 92px;
     width: 92px;
     margin-inline-end: 10px;
 }
-.login-grid .login-github {
-    background-image: url("./github.png");
-}
-.login-grid .login-bitbucket {
-    background-image: url("./bitbucket.png");
-}
-.login-grid .login-twitter-oauth2 {
-    background-image: url("./twitter.png");
-}
-.login-grid .login-openstreetmap,
-.login-grid .login-openstreetmap-oauth2 {
-    background-image: url("./openstreetmap.png");
-}
-.login-grid .login-keycloak {
-    background-image: url("./keycloak.png");
-}
 
 /* **************************** */
 /*            home              */

umap/templates/auth/user_form.html

@@ -1,6 +1,6 @@
 {% extends "umap/content.html" %}
 
-{% load i18n %}
+{% load i18n static %}
 
 {% block maincontent %}
   {% include "umap/dashboard_menu.html" with selected="profile" %}
@@ -28,8 +28,10 @@
         </h3>
         <ul>
           {% for name in providers %}
-            <li>
+            <li class="login-grid">
-              {{ name|title }}
+              {% with "umap/img/providers/"|add:name|add:".png" as path %}
+               <img src="{% static path %}" width="92px" height="92px" alt="{{ name }}" />
+              {% endwith %}
             </li>
           {% endfor %}
         </ul>
@@ -46,9 +48,7 @@
             {% for name in backends.backends %}
               {% if name not in providers %}
                 <li>
-                  <a href="{% url "social:begin" name %}"
+                  {% include "umap/components/provider.html" with name=name %}
-                     class="umap-login-popup login-{{ name }}"
-                     title="{{ name|title }}"></a>
                 </li>
               {% endif %}
             {% endfor %}

umap/templates/registration/login.html

@@ -55,10 +55,7 @@
         <ul class="login-grid block-grid">
           {% for name in backends.backends %}
             <li>
-              <a rel="nofollow"
+              {% include "umap/components/provider.html" with name=name %}
-                 href="{% url "social:begin" name %}"
-                 class="umap-login-popup login-{{ name }}"
-                 title="{{ name|title }}"></a>
             </li>
           {% endfor %}
         </ul>

umap/templates/umap/components/provider.html

@@ -0,0 +1,8 @@
+{% load static %}
+<a href="{% url "social:begin" name %}"
+   class="umap-login-popup"
+   title="{{ name|title }}">
+    {% with "umap/img/providers/"|add:name|add:".png" as path %}
+     <img src="{% static path %}" width="92px" height="92px" alt="{{ name }}" />
+    {% endwith %}
+ </a>