From 15ba1eecc2515baeee30b9af6108eff9e0637e1f Mon Sep 17 00:00:00 2001
From: Thomas Richner <thomas.richner@oviva.com>
Date: Thu, 7 Nov 2024 14:26:57 +0100
Subject: [PATCH] EPA-166: [ehealthid] Add logo to login button (#114)

---
 .../src/main/resources/www/GID_logo.svg       | 23 ++++++++
 .../resources/www/select-idp.html.mustache    | 57 ++++++++++---------
 .../fixtures/pages_golden_idp-select-form.bin | 45 ++++++++-------
 pom.xml                                       |  1 -
 4 files changed, 75 insertions(+), 51 deletions(-)
 create mode 100644 ehealthid-rp/src/main/resources/www/GID_logo.svg

diff --git a/ehealthid-rp/src/main/resources/www/GID_logo.svg b/ehealthid-rp/src/main/resources/www/GID_logo.svg
new file mode 100644
index 0000000..7626ba5
--- /dev/null
+++ b/ehealthid-rp/src/main/resources/www/GID_logo.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 512 512">
+    <defs>
+        <style>
+            .cls-1 {
+            clip-path: url(#clippath);
+            }
+
+            .cls-5 {
+            clip-path: url(#clippath-1);
+            }
+        </style>
+        <clipPath id="clippath">
+            <path d="m256,454.03c-89.05,0-161.5-72.45-161.5-161.5v-73.86c0-89.05,72.45-161.5,161.5-161.5s161.5,72.45,161.5,161.5v73.86c0,89.05-72.45,161.5-161.5,161.5Zm0-378.51c-78.93,0-143.15,64.22-143.15,143.15v73.86c0,78.93,64.22,143.15,143.15,143.15s143.15-64.21,143.15-143.15v-73.86c0-78.93-64.21-143.15-143.15-143.15Zm58.96,164.42h-100.39v-19.44c0-24.55,19.97-44.52,44.52-44.52,16.49,0,31.57,9.09,39.34,23.71,3.78,7.09,12.58,9.79,19.68,6.02,7.1-3.77,9.79-12.58,6.02-19.68-12.84-24.14-37.76-39.14-65.04-39.14-40.59,0-73.62,33.02-73.62,73.62v76.34c0,1.32.19,2.6.52,3.82,3.82,34.7,33.22,61.69,68.94,61.69,39.16,0,70.9-31.74,70.9-70.9v-40.65c0-6-4.87-10.87-10.87-10.87Zm-48.03,68.24c-.01,5.25-4.4,9.5-9.79,9.49-5.39-.01-9.76-4.28-9.74-9.54l.06-23.78c.01-5.25,4.4-11.98,9.8-11.97,5.39.01,9.75,6.77,9.74,12.02l-.06,23.78Zm81.61,57.41c3.55-4.49,6.8-9.29,9.67-14.24,2.78-4.82,1.13-10.98-3.68-13.76-4.82-2.79-10.98-1.13-13.76,3.68-2.38,4.12-5.08,8.1-8.03,11.83-18.72,23.68-46.7,37.26-76.74,37.26-52.38,0-96.25-42.57-97.79-94.9-.16-5.56-4.78-9.86-10.37-9.77-5.56.16-9.94,4.8-9.77,10.37.91,30.73,13.59,59.5,35.71,81.02,22.17,21.56,51.37,33.44,82.22,33.44,36.24,0,69.97-16.37,92.54-44.91Zm25.43-73.06v-73.86c0-63.56-51.68-116.48-115.21-117.95-.92-.02-1.84-.03-2.77-.03-5.56,0-10.07,4.51-10.07,10.07s4.51,10.07,10.07,10.07c.77,0,1.54,0,2.3.03,52.68,1.22,95.53,45.1,95.53,97.81v73.86c0,5.56,4.51,10.07,10.07,10.07s10.07-4.51,10.07-10.07Zm-215.84-48.61v-21.11l.02-4.14c0-38,22.37-72.88,56.99-88.86,5.05-2.33,7.25-8.32,4.92-13.37-2.33-5.05-8.31-7.25-13.37-4.92-41.73,19.27-68.69,61.33-68.69,107.09l-.02,25.31c0,5.56,4.51,10.07,10.07,10.07s10.07-4.51,10.07-10.07Z"/>
+        </clipPath>
+    </defs>
+    <g class="cls-1">
+        <g class="cls-5">
+            <rect x="0" y="0" width="695" height="849" fill="white"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/ehealthid-rp/src/main/resources/www/select-idp.html.mustache b/ehealthid-rp/src/main/resources/www/select-idp.html.mustache
index b252862..28e2454 100644
--- a/ehealthid-rp/src/main/resources/www/select-idp.html.mustache
+++ b/ehealthid-rp/src/main/resources/www/select-idp.html.mustache
@@ -1,18 +1,18 @@
 {{<layout.html.mustache}}
-  {{$head}}
-    <style>
-      .form-inline {
+{{$head}}
+<style>
+    .form-inline {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-      }
+    }
 
-      .form-inline .provider-wrapper {
+    .form-inline .provider-wrapper {
         margin: auto 0;
-      }
+    }
 
-      .form-inline label {
+    .form-inline label {
         margin: 0 10px 4px 0;
 
         font-size: 14px;
@@ -20,9 +20,9 @@
         font-weight: 600;
         line-height: 150%; /* 21px */
         letter-spacing: 0.15px;
-      }
+    }
 
-      .form-inline select, .form-inline input {
+    .form-inline select, .form-inline input {
         width: 100%;
         height: 40px;
 
@@ -38,39 +38,40 @@
         font-weight: 600;
         line-height: 150%; /* 21px */
         letter-spacing: 0.15px;
-      }
+    }
 
-      .form-inline select {
+    .form-inline select {
         outline: none;
         font-weight: 400;
-      }
+    }
 
-      .form-inline input[type=submit] {
+    .form-inline input[type=submit] {
         padding: 10px 20px;
         cursor: pointer;
-        background: #00A88F;
         color: white;
 
         border-radius: 24px;
-      }
 
-      .form-inline input[type=submit]:hover, .form-inline input[type=submit]:active {
+        background: #00A88F url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogICAgIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICAgIDxkZWZzPgogICAgICAgIDxzdHlsZT4KICAgICAgICAgICAgLmNscy0xIHsKICAgICAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXBwYXRoKTsKICAgICAgICAgICAgfQoKICAgICAgICAgICAgLmNscy01IHsKICAgICAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXBwYXRoLTEpOwogICAgICAgICAgICB9CiAgICAgICAgPC9zdHlsZT4KICAgICAgICA8Y2xpcFBhdGggaWQ9ImNsaXBwYXRoIj4KICAgICAgICAgICAgPHBhdGggZD0ibTI1Niw0NTQuMDNjLTg5LjA1LDAtMTYxLjUtNzIuNDUtMTYxLjUtMTYxLjV2LTczLjg2YzAtODkuMDUsNzIuNDUtMTYxLjUsMTYxLjUtMTYxLjVzMTYxLjUsNzIuNDUsMTYxLjUsMTYxLjV2NzMuODZjMCw4OS4wNS03Mi40NSwxNjEuNS0xNjEuNSwxNjEuNVptMC0zNzguNTFjLTc4LjkzLDAtMTQzLjE1LDY0LjIyLTE0My4xNSwxNDMuMTV2NzMuODZjMCw3OC45Myw2NC4yMiwxNDMuMTUsMTQzLjE1LDE0My4xNXMxNDMuMTUtNjQuMjEsMTQzLjE1LTE0My4xNXYtNzMuODZjMC03OC45My02NC4yMS0xNDMuMTUtMTQzLjE1LTE0My4xNVptNTguOTYsMTY0LjQyaC0xMDAuMzl2LTE5LjQ0YzAtMjQuNTUsMTkuOTctNDQuNTIsNDQuNTItNDQuNTIsMTYuNDksMCwzMS41Nyw5LjA5LDM5LjM0LDIzLjcxLDMuNzgsNy4wOSwxMi41OCw5Ljc5LDE5LjY4LDYuMDIsNy4xLTMuNzcsOS43OS0xMi41OCw2LjAyLTE5LjY4LTEyLjg0LTI0LjE0LTM3Ljc2LTM5LjE0LTY1LjA0LTM5LjE0LTQwLjU5LDAtNzMuNjIsMzMuMDItNzMuNjIsNzMuNjJ2NzYuMzRjMCwxLjMyLjE5LDIuNi41MiwzLjgyLDMuODIsMzQuNywzMy4yMiw2MS42OSw2OC45NCw2MS42OSwzOS4xNiwwLDcwLjktMzEuNzQsNzAuOS03MC45di00MC42NWMwLTYtNC44Ny0xMC44Ny0xMC44Ny0xMC44N1ptLTQ4LjAzLDY4LjI0Yy0uMDEsNS4yNS00LjQsOS41LTkuNzksOS40OS01LjM5LS4wMS05Ljc2LTQuMjgtOS43NC05LjU0bC4wNi0yMy43OGMuMDEtNS4yNSw0LjQtMTEuOTgsOS44LTExLjk3LDUuMzkuMDEsOS43NSw2Ljc3LDkuNzQsMTIuMDJsLS4wNiwyMy43OFptODEuNjEsNTcuNDFjMy41NS00LjQ5LDYuOC05LjI5LDkuNjctMTQuMjQsMi43OC00LjgyLDEuMTMtMTAuOTgtMy42OC0xMy43Ni00LjgyLTIuNzktMTAuOTgtMS4xMy0xMy43NiwzLjY4LTIuMzgsNC4xMi01LjA4LDguMS04LjAzLDExLjgzLTE4LjcyLDIzLjY4LTQ2LjcsMzcuMjYtNzYuNzQsMzcuMjYtNTIuMzgsMC05Ni4yNS00Mi41Ny05Ny43OS05NC45LS4xNi01LjU2LTQuNzgtOS44Ni0xMC4zNy05Ljc3LTUuNTYuMTYtOS45NCw0LjgtOS43NywxMC4zNy45MSwzMC43MywxMy41OSw1OS41LDM1LjcxLDgxLjAyLDIyLjE3LDIxLjU2LDUxLjM3LDMzLjQ0LDgyLjIyLDMzLjQ0LDM2LjI0LDAsNjkuOTctMTYuMzcsOTIuNTQtNDQuOTFabTI1LjQzLTczLjA2di03My44NmMwLTYzLjU2LTUxLjY4LTExNi40OC0xMTUuMjEtMTE3Ljk1LS45Mi0uMDItMS44NC0uMDMtMi43Ny0uMDMtNS41NiwwLTEwLjA3LDQuNTEtMTAuMDcsMTAuMDdzNC41MSwxMC4wNywxMC4wNywxMC4wN2MuNzcsMCwxLjU0LDAsMi4zLjAzLDUyLjY4LDEuMjIsOTUuNTMsNDUuMSw5NS41Myw5Ny44MXY3My44NmMwLDUuNTYsNC41MSwxMC4wNywxMC4wNywxMC4wN3MxMC4wNy00LjUxLDEwLjA3LTEwLjA3Wm0tMjE1Ljg0LTQ4LjYxdi0yMS4xMWwuMDItNC4xNGMwLTM4LDIyLjM3LTcyLjg4LDU2Ljk5LTg4Ljg2LDUuMDUtMi4zMyw3LjI1LTguMzIsNC45Mi0xMy4zNy0yLjMzLTUuMDUtOC4zMS03LjI1LTEzLjM3LTQuOTItNDEuNzMsMTkuMjctNjguNjksNjEuMzMtNjguNjksMTA3LjA5bC0uMDIsMjUuMzFjMCw1LjU2LDQuNTEsMTAuMDcsMTAuMDcsMTAuMDdzMTAuMDctNC41MSwxMC4wNy0xMC4wN1oiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgogICAgPGcgY2xhc3M9ImNscy0xIj4KICAgICAgICA8ZyBjbGFzcz0iY2xzLTUiPgogICAgICAgICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNjk1IiBoZWlnaHQ9Ijg0OSIgZmlsbD0id2hpdGUiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat 12px 0;
+    }
+
+    .form-inline input[type=submit]:hover, .form-inline input[type=submit]:active {
         background-color: rgba(0, 168, 143, 0.92);
-      }
-    </style>
-  {{/head}}
-  {{$body}}
-    <form action="/auth/select-idp" method="post" class="form-inline">
-      <div class="provider-wrapper">
+    }
+</style>
+{{/head}}
+{{$body}}
+<form action="/auth/select-idp" method="post" class="form-inline">
+    <div class="provider-wrapper">
         <h1>GesundheitsID</h1>
         <label for="idp-selection">{{#trans}}idp.selection{{/trans}}</label>
         <select name="identityProvider" id="idp-selection">
-          {{#identityProviders}}
+            {{#identityProviders}}
             <option value="{{iss}}">{{name}}</option>
-          {{/identityProviders}}
+            {{/identityProviders}}
         </select>
-      </div>
-      <input type="submit" value="{{#trans}}idp.login{{/trans}}">
-    </form>
-  {{/body}}
+    </div>
+    <input type="submit" value="{{#trans}}idp.login{{/trans}}">
+</form>
+{{/body}}
 {{/layout.html.mustache}}
diff --git a/ehealthid-rp/src/test/resources/fixtures/pages_golden_idp-select-form.bin b/ehealthid-rp/src/test/resources/fixtures/pages_golden_idp-select-form.bin
index f1de7db..9ddc59b 100644
--- a/ehealthid-rp/src/test/resources/fixtures/pages_golden_idp-select-form.bin
+++ b/ehealthid-rp/src/test/resources/fixtures/pages_golden_idp-select-form.bin
@@ -65,19 +65,19 @@ a {
 }
 
   </style>
-    <style>
-      .form-inline {
+<style>
+    .form-inline {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-      }
+    }
 
-      .form-inline .provider-wrapper {
+    .form-inline .provider-wrapper {
         margin: auto 0;
-      }
+    }
 
-      .form-inline label {
+    .form-inline label {
         margin: 0 10px 4px 0;
 
         font-size: 14px;
@@ -85,9 +85,9 @@ a {
         font-weight: 600;
         line-height: 150%; /* 21px */
         letter-spacing: 0.15px;
-      }
+    }
 
-      .form-inline select, .form-inline input {
+    .form-inline select, .form-inline input {
         width: 100%;
         height: 40px;
 
@@ -103,32 +103,33 @@ a {
         font-weight: 600;
         line-height: 150%; /* 21px */
         letter-spacing: 0.15px;
-      }
+    }
 
-      .form-inline select {
+    .form-inline select {
         outline: none;
         font-weight: 400;
-      }
+    }
 
-      .form-inline input[type=submit] {
+    .form-inline input[type=submit] {
         padding: 10px 20px;
         cursor: pointer;
-        background: #00A88F;
         color: white;
 
         border-radius: 24px;
-      }
 
-      .form-inline input[type=submit]:hover, .form-inline input[type=submit]:active {
+        background: #00A88F url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogICAgIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICAgIDxkZWZzPgogICAgICAgIDxzdHlsZT4KICAgICAgICAgICAgLmNscy0xIHsKICAgICAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXBwYXRoKTsKICAgICAgICAgICAgfQoKICAgICAgICAgICAgLmNscy01IHsKICAgICAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXBwYXRoLTEpOwogICAgICAgICAgICB9CiAgICAgICAgPC9zdHlsZT4KICAgICAgICA8Y2xpcFBhdGggaWQ9ImNsaXBwYXRoIj4KICAgICAgICAgICAgPHBhdGggZD0ibTI1Niw0NTQuMDNjLTg5LjA1LDAtMTYxLjUtNzIuNDUtMTYxLjUtMTYxLjV2LTczLjg2YzAtODkuMDUsNzIuNDUtMTYxLjUsMTYxLjUtMTYxLjVzMTYxLjUsNzIuNDUsMTYxLjUsMTYxLjV2NzMuODZjMCw4OS4wNS03Mi40NSwxNjEuNS0xNjEuNSwxNjEuNVptMC0zNzguNTFjLTc4LjkzLDAtMTQzLjE1LDY0LjIyLTE0My4xNSwxNDMuMTV2NzMuODZjMCw3OC45Myw2NC4yMiwxNDMuMTUsMTQzLjE1LDE0My4xNXMxNDMuMTUtNjQuMjEsMTQzLjE1LTE0My4xNXYtNzMuODZjMC03OC45My02NC4yMS0xNDMuMTUtMTQzLjE1LTE0My4xNVptNTguOTYsMTY0LjQyaC0xMDAuMzl2LTE5LjQ0YzAtMjQuNTUsMTkuOTctNDQuNTIsNDQuNTItNDQuNTIsMTYuNDksMCwzMS41Nyw5LjA5LDM5LjM0LDIzLjcxLDMuNzgsNy4wOSwxMi41OCw5Ljc5LDE5LjY4LDYuMDIsNy4xLTMuNzcsOS43OS0xMi41OCw2LjAyLTE5LjY4LTEyLjg0LTI0LjE0LTM3Ljc2LTM5LjE0LTY1LjA0LTM5LjE0LTQwLjU5LDAtNzMuNjIsMzMuMDItNzMuNjIsNzMuNjJ2NzYuMzRjMCwxLjMyLjE5LDIuNi41MiwzLjgyLDMuODIsMzQuNywzMy4yMiw2MS42OSw2OC45NCw2MS42OSwzOS4xNiwwLDcwLjktMzEuNzQsNzAuOS03MC45di00MC42NWMwLTYtNC44Ny0xMC44Ny0xMC44Ny0xMC44N1ptLTQ4LjAzLDY4LjI0Yy0uMDEsNS4yNS00LjQsOS41LTkuNzksOS40OS01LjM5LS4wMS05Ljc2LTQuMjgtOS43NC05LjU0bC4wNi0yMy43OGMuMDEtNS4yNSw0LjQtMTEuOTgsOS44LTExLjk3LDUuMzkuMDEsOS43NSw2Ljc3LDkuNzQsMTIuMDJsLS4wNiwyMy43OFptODEuNjEsNTcuNDFjMy41NS00LjQ5LDYuOC05LjI5LDkuNjctMTQuMjQsMi43OC00LjgyLDEuMTMtMTAuOTgtMy42OC0xMy43Ni00LjgyLTIuNzktMTAuOTgtMS4xMy0xMy43NiwzLjY4LTIuMzgsNC4xMi01LjA4LDguMS04LjAzLDExLjgzLTE4LjcyLDIzLjY4LTQ2LjcsMzcuMjYtNzYuNzQsMzcuMjYtNTIuMzgsMC05Ni4yNS00Mi41Ny05Ny43OS05NC45LS4xNi01LjU2LTQuNzgtOS44Ni0xMC4zNy05Ljc3LTUuNTYuMTYtOS45NCw0LjgtOS43NywxMC4zNy45MSwzMC43MywxMy41OSw1OS41LDM1LjcxLDgxLjAyLDIyLjE3LDIxLjU2LDUxLjM3LDMzLjQ0LDgyLjIyLDMzLjQ0LDM2LjI0LDAsNjkuOTctMTYuMzcsOTIuNTQtNDQuOTFabTI1LjQzLTczLjA2di03My44NmMwLTYzLjU2LTUxLjY4LTExNi40OC0xMTUuMjEtMTE3Ljk1LS45Mi0uMDItMS44NC0uMDMtMi43Ny0uMDMtNS41NiwwLTEwLjA3LDQuNTEtMTAuMDcsMTAuMDdzNC41MSwxMC4wNywxMC4wNywxMC4wN2MuNzcsMCwxLjU0LDAsMi4zLjAzLDUyLjY4LDEuMjIsOTUuNTMsNDUuMSw5NS41Myw5Ny44MXY3My44NmMwLDUuNTYsNC41MSwxMC4wNywxMC4wNywxMC4wN3MxMC4wNy00LjUxLDEwLjA3LTEwLjA3Wm0tMjE1Ljg0LTQ4LjYxdi0yMS4xMWwuMDItNC4xNGMwLTM4LDIyLjM3LTcyLjg4LDU2Ljk5LTg4Ljg2LDUuMDUtMi4zMyw3LjI1LTguMzIsNC45Mi0xMy4zNy0yLjMzLTUuMDUtOC4zMS03LjI1LTEzLjM3LTQuOTItNDEuNzMsMTkuMjctNjguNjksNjEuMzMtNjguNjksMTA3LjA5bC0uMDIsMjUuMzFjMCw1LjU2LDQuNTEsMTAuMDcsMTAuMDcsMTAuMDdzMTAuMDctNC41MSwxMC4wNy0xMC4wN1oiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgogICAgPGcgY2xhc3M9ImNscy0xIj4KICAgICAgICA8ZyBjbGFzcz0iY2xzLTUiPgogICAgICAgICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNjk1IiBoZWlnaHQ9Ijg0OSIgZmlsbD0id2hpdGUiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat 12px 0;
+    }
+
+    .form-inline input[type=submit]:hover, .form-inline input[type=submit]:active {
         background-color: rgba(0, 168, 143, 0.92);
-      }
-    </style>
+    }
+</style>
 
 </head>
 <body>
 <div class="container">
-      <form action="/auth/select-idp" method="post" class="form-inline">
-      <div class="provider-wrapper">
+  <form action="/auth/select-idp" method="post" class="form-inline">
+    <div class="provider-wrapper">
         <h1>GesundheitsID</h1>
         <label for="idp-selection">Select your GesundheitsID Provider</label>
         <select name="identityProvider" id="idp-selection">
@@ -137,9 +138,9 @@ a {
             <option value="https://b.example.com">Siemens</option>
             <option value="https://c.example.com">Zuse</option>
         </select>
-      </div>
-      <input type="submit" value="Login">
-    </form>
+    </div>
+    <input type="submit" value="Login">
+</form>
 
 </div>
 </body>
diff --git a/pom.xml b/pom.xml
index d322741..26fccbf 100644
--- a/pom.xml
+++ b/pom.xml
@@ -46,7 +46,6 @@
     <version.handlebars>4.3.1</version.handlebars>
 
     <spotless-maven-plugin.version>2.43.0</spotless-maven-plugin.version>
-    <spotless-maven-plugin.google-java-format.version>1.18.1</spotless-maven-plugin.google-java-format.version>
     <jacoco.version>0.8.12</jacoco.version>
 
     <maven-shade.version>3.6.0</maven-shade.version>