Improved new provider button integration

[Gaetanbrl]

Context

Currently, georchestra gateway use limited icons to display one icon by provider (e.g google) :

https://github.com/georchestra/georchestra-gateway/tree/main/gateway/src/main/resources/static/login/img

These buttons have similar dimensions props (square) and needs to be PNG :

georchestra-gateway/gateway/src/main/java/org/georchestra/gateway/app/GeorchestraGatewayApplication.java

Line 131 in eddfaf5

String providerPath = Paths.get("login/img/", k + ".png").toString();

Next, the default template will just integrate PNG icon without CSS or custom design :

georchestra-gateway/gateway/src/main/resources/templates/login.html

Lines 66 to 70 in eddfaf5

	<div class="bg-light border p-2 rounded" th:each="oauth2Client : ${oauth2LoginLinks}">
	<a th:href="${oauth2Client.key}" th:title="${oauth2Client.value.left}">
	<img th:src="${oauth2Client.value.right}" th:alt="${oauth2Client.value.left}" width="24" height="24">
	</a>
	</div>

Observation

The default template and code don't ease other icons provider integration.

For example, the ProConnect button is really ugly with this current system :

To be better, we needs to use the recommended CSS.

Possible solutions

Several ideas :

• Use current name config as button title (enought for some people)

• Use name provider prop inside button instead of default button icon

• improve template with more CSS class (e.g create one class by provider key)

• others options ?

[Gaetanbrl]

improve template with more CSS class

This is a first possible option (tested #157 ).

Change template to :

• use a img class from oauth2client.value.left
• use a new btn-oauth2 class from parent <div>

    <div class="bg-light border p-2 rounded btn-oauth2" th:each="oauth2Client : ${oauth2LoginLinks}">
        <a th:href="${oauth2Client.key}" th:title="${oauth2Client.value.left}">
            <img th:src="${oauth2Client.value.right}" th:alt="${oauth2Client.value.left}" width="24" height="24" th:class="${oauth2Client.value.left}">
        </a>
    </div>

Use a CSS according to provider name :

.proconnect {
  width: 214px;
  height: 56px;
  border: none;
}

.btn-oauth2:has(.proconnect) {
  background-color: white !important;
}

Result :