From 7ba62b0e7dcdb28ef8ac1ced776bd5b47136b1c4 Mon Sep 17 00:00:00 2001
From: tarasvarshava <tarasvarshava@oviva.com>
Date: Thu, 15 Feb 2024 11:32:40 +0100
Subject: [PATCH] ARC-1296: Align GesundheitsID Provider form

---
 .../main/resources/www/common.css.mustache    | 17 +++++--
 .../resources/www/select-idp.html.mustache    | 28 +++++++----
 .../resources/fixtures/pages_golden_error.bin | 17 +++++--
 .../fixtures/pages_golden_idp-select-form.bin | 47 +++++++++++++------
 4 files changed, 79 insertions(+), 30 deletions(-)

diff --git a/ehealthid-rp/src/main/resources/www/common.css.mustache b/ehealthid-rp/src/main/resources/www/common.css.mustache
index 0146208..0ec7996 100644
--- a/ehealthid-rp/src/main/resources/www/common.css.mustache
+++ b/ehealthid-rp/src/main/resources/www/common.css.mustache
@@ -1,7 +1,8 @@
 html body {
   position: relative;
+
   width: 100%;
-  height: 100%;
+  height: 100vh;
 
   font-family: Inter, sans-serif;
   font-style: normal;
@@ -14,13 +15,22 @@ html body {
   padding: 0;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 * {
   box-sizing: border-box;
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
+
   max-width: 400px;
-  margin: 1em auto 2em;
   padding: 20px;
 
   border-radius: 12px;
@@ -38,11 +48,12 @@ a {
 
 @media (max-width: 500px) {
   .container {
-    margin: 0 auto;
+    height: 100%;
     border: none;
   }
 
   html body {
+    height: 100svh;
     background: #FFF;
   }
 }
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 68adabf..21305c5 100644
--- a/ehealthid-rp/src/main/resources/www/select-idp.html.mustache
+++ b/ehealthid-rp/src/main/resources/www/select-idp.html.mustache
@@ -2,10 +2,14 @@
   {{$head}}
     <style>
       .form-inline {
+        flex: 1;
         display: flex;
-        flex-flow: row wrap;
         flex-direction: column;
-        align-items: stretch;
+        justify-content: space-between;
+      }
+
+      .form-inline .provider-wrapper {
+        margin: auto 0;
       }
 
       .form-inline label {
@@ -19,9 +23,10 @@
       }
 
       .form-inline select, .form-inline input {
-        vertical-align: middle;
-        padding: 0 16px;
+        width: 100%;
         height: 40px;
+
+        padding: 0 16px;
         margin: 10px 0;
 
         border-radius: 8px;
@@ -36,6 +41,7 @@
       }
 
       .form-inline select {
+        outline: none;
         font-weight: 400;
       }
 
@@ -56,12 +62,14 @@
   {{$body}}
     <h1>GesundheitsID</h1>
     <form action="/auth/select-idp" method="post" class="form-inline">
-      <label for="idp-selection">Select your GesundheitsID Provider</label>
-      <select name="identityProvider" id="idp-selection">
-        {{#identityProviders}}
-          <option value="{{iss}}">{{name}}</option>
-        {{/identityProviders}}
-      </select>
+      <div class="provider-wrapper">
+        <label for="idp-selection">Select your GesundheitsID Provider</label>
+        <select name="identityProvider" id="idp-selection">
+          {{#identityProviders}}
+            <option value="{{iss}}">{{name}}</option>
+          {{/identityProviders}}
+        </select>
+      </div>
       <input type="submit" value="Login">
     </form>
   {{/body}}
diff --git a/ehealthid-rp/src/test/resources/fixtures/pages_golden_error.bin b/ehealthid-rp/src/test/resources/fixtures/pages_golden_error.bin
index 69a7af6..e8650d5 100644
--- a/ehealthid-rp/src/test/resources/fixtures/pages_golden_error.bin
+++ b/ehealthid-rp/src/test/resources/fixtures/pages_golden_error.bin
@@ -7,8 +7,9 @@
   <style>
       html body {
   position: relative;
+
   width: 100%;
-  height: 100%;
+  height: 100vh;
 
   font-family: Inter, sans-serif;
   font-style: normal;
@@ -21,13 +22,22 @@
   padding: 0;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 * {
   box-sizing: border-box;
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
+
   max-width: 400px;
-  margin: 1em auto 2em;
   padding: 20px;
 
   border-radius: 12px;
@@ -45,11 +55,12 @@ a {
 
 @media (max-width: 500px) {
   .container {
-    margin: 0 auto;
+    height: 100%;
     border: none;
   }
 
   html body {
+    height: 100svh;
     background: #FFF;
   }
 }
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 bb50822..af6ba4b 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
@@ -7,8 +7,9 @@
   <style>
       html body {
   position: relative;
+
   width: 100%;
-  height: 100%;
+  height: 100vh;
 
   font-family: Inter, sans-serif;
   font-style: normal;
@@ -21,13 +22,22 @@
   padding: 0;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 * {
   box-sizing: border-box;
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
+
   max-width: 400px;
-  margin: 1em auto 2em;
   padding: 20px;
 
   border-radius: 12px;
@@ -45,11 +55,12 @@ a {
 
 @media (max-width: 500px) {
   .container {
-    margin: 0 auto;
+    height: 100%;
     border: none;
   }
 
   html body {
+    height: 100svh;
     background: #FFF;
   }
 }
@@ -57,10 +68,14 @@ a {
   </style>
     <style>
       .form-inline {
+        flex: 1;
         display: flex;
-        flex-flow: row wrap;
         flex-direction: column;
-        align-items: stretch;
+        justify-content: space-between;
+      }
+
+      .form-inline .provider-wrapper {
+        margin: auto 0;
       }
 
       .form-inline label {
@@ -74,9 +89,10 @@ a {
       }
 
       .form-inline select, .form-inline input {
-        vertical-align: middle;
-        padding: 0 16px;
+        width: 100%;
         height: 40px;
+
+        padding: 0 16px;
         margin: 10px 0;
 
         border-radius: 8px;
@@ -91,6 +107,7 @@ a {
       }
 
       .form-inline select {
+        outline: none;
         font-weight: 400;
       }
 
@@ -113,13 +130,15 @@ a {
 <div class="container">
       <h1>GesundheitsID</h1>
     <form action="/auth/select-idp" method="post" class="form-inline">
-      <label for="idp-selection">Select your GesundheitsID Provider</label>
-      <select name="identityProvider" id="idp-selection">
-          <option value="https://a.example.com">AoK Tesfalen</option>
-          <option value="https://d.example.com">Barmer</option>
-          <option value="https://b.example.com">Siemens</option>
-          <option value="https://c.example.com">Zuse</option>
-      </select>
+      <div class="provider-wrapper">
+        <label for="idp-selection">Select your GesundheitsID Provider</label>
+        <select name="identityProvider" id="idp-selection">
+            <option value="https://a.example.com">AoK Tesfalen</option>
+            <option value="https://d.example.com">Barmer</option>
+            <option value="https://b.example.com">Siemens</option>
+            <option value="https://c.example.com">Zuse</option>
+        </select>
+      </div>
       <input type="submit" value="Login">
     </form>