chore(templates): use images for oauth providers list

Co-authored-by: David Larlet <david@larlet.fr>

umap/static/umap/content.css

@@ -44,31 +44,11 @@ body.login header {
 .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" %}
@@ -29,7 +29,9 @@
         <ul>
           {% for name in providers %}
             <li class="login-grid">
-              <span class="login-{{ name }}" title="{{ name }}"></span>
+              {% with "umap/img/providers/"|add:name|add:".png" as path %}
+               <img src="{% static path %}" 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 %}"
-                     class="umap-login-popup login-{{ name }}"
-                     title="{{ name|title }}"></a>
+                  {% include "umap/components/provider.html" with name=name %}
                 </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"
-                 href="{% url "social:begin" name %}"
-                 class="umap-login-popup login-{{ name }}"
-                 title="{{ name|title }}"></a>
+              {% include "umap/components/provider.html" with name=name %}
             </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 %}" alt="{{name}}" />
+    {% endwith %}
+ </a>