EPA-166: [ehealthid] Add logo to login button (#114)

oviva-ag · Nov 7, 2024 · 15ba1ee · 15ba1ee
1 parent 59559d9
commit 15ba1ee
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 51 deletions.
diff --git a/ehealthid-rp/src/main/resources/www/GID_logo.svg b/ehealthid-rp/src/main/resources/www/GID_logo.svg
diff --git a/ehealthid-rp/src/main/resources/www/select-idp.html.mustache b/ehealthid-rp/src/main/resources/www/select-idp.html.mustache
@@ -1,28 +1,28 @@
 {{<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;
         font-style: normal;
         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
@@ -65,29 +65,29 @@ 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;
         font-style: normal;
         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
@@ -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>