From 07a2590e874288f002c725ac279d0bc0587b8beb Mon Sep 17 00:00:00 2001
From: Thomas <>
Date: Wed, 18 May 2022 08:06:54 +0200
Subject: chore(ux): merge GUI elements that are updated on BM.I side

---
 basicConfig/templates/countrySelection.html | 179 ++++++----------------------
 1 file changed, 38 insertions(+), 141 deletions(-)

(limited to 'basicConfig/templates/countrySelection.html')
diff --git a/basicConfig/templates/countrySelection.html b/basicConfig/templates/countrySelection.html
index bfa30669..275d20f6 100644
--- a/basicConfig/templates/countrySelection.html
+++ b/basicConfig/templates/countrySelection.html
@@ -2,136 +2,20 @@
 <html xmlns:th="http://www.thymeleaf.org"
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
       layout:decorator="fragments/base"
-      th:with="lang=${#locale.language}" th:lang="${lang}">
+      th:with="lang=${#locale.language}" th:lang="${lang}">      
 <head>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="../webcontent/css/css_country.css" th:href="@{/static/css/css_country.css}"/>
+<!--  <link rel="stylesheet" href="$contextPath/css/css_country.css" th:href="@{/css/css_country.css}"/> -->
+  <link rel="stylesheet" href="/static/common.css"/>
   <title th:text="#{gui.countryselection.title}">eIDAS-Login Länderauswahl</title>
-<script type="text/javascript">
-</script>
 <style>
-body {
-	background-image: none;
-	margin:		0px;
-	font-family:	"Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-div.header {
-	background-color: #e9ecef;
-	padding-top: 28px;
-	padding-left: 137px;
-	padding-right: 137px;
-	padding-bottom: 12px;
-}
-div.titlebar {
-	padding: 0px;
-}
-div.titlebar div {
-}
-.hidden {
-	display: none;
-}
-ul.nav_oben {
-	padding: 0px;
-	margin: 0px;
-	text-align: right;
-	text-transform: uppercase;
-}
-li {
-	display: inline-block;
-}
-div.header a {
-	text-decoration: none;
-	color: black;
-}
-a {
-	text-decoration: none;
-	color: #a22c1c;
-}
-.block {
-	/* override country.css */
-	width: 200px;
-	padding-bottom: 20px;
-}
-@media only screen and (min-width: 1000px) {
-	div.header {
-		padding-left: 137px;
-		padding-right: 137px;
-	}
-	.content {
-		padding-left: 137px;
-		padding-right: 137px;
-	}
-	footer {
-		padding-left: 137px;
-		padding-right: 137px;
-	}
-}
-@media only screen and (max-width: 999px) {
-	div.header {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-	.content {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-	footer {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-}
-
-div.subtitle h1 {
-	padding: 0px;
-	margin: 0px;
-	font-size: 130%;
-	align: right;
-}
-div.subtitle h2 {
-	padding: 0px;
-	margin: 0px;
-	font-size: 115%;
-}
-footer {
-    left: 0;
-    padding-top: 1em;
-    bottom: 0;
-    width: 100%;
-    height: 2em;
-    background-color: rgb(162,44,28);
-    color: white;
-}
-.float {
-	float: left;
-}
-.floatright {
-	float: right;
-}
-.copyright {
-	width: 66%;
-	font-size: 80%;
-}
-#countries {
-	padding-bottom: 40px;
-}
-#country {
-	padding-bottom: 20px;
-}
-input[type=submit] {
-	width: inherit;
-/*	text-align: left; */
-}
-form {
-	justify-content: center;
-}
 </style>
 <script type="text/javascript">
 
 /* Element.closest polyfill - https://developer.mozilla.org/en-US/docs/Web/API/Element/closest License: public domain*/
 if (!Element.prototype.matches)
-    Element.prototype.matches = Element.prototype.msMatchesSelector ||
+    Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                 Element.prototype.webkitMatchesSelector;
 
 if (!Element.prototype.closest)
@@ -141,7 +25,7 @@ if (!Element.prototype.closest)
         do {
             if (el.matches(s)) return el;
             el = el.parentElement || el.parentNode;
-        } while (el !== null && el.nodeType === 1);
+        } while (el !== null && el.nodeType === 1); 
         return null;
     };
 
@@ -149,7 +33,7 @@ if (!Element.prototype.closest)
 function clickCountryFlag(element) {
 	if (!element) return false;
 
-	var form = element.closest("form");
+	var form = element.closest("form"); 
 
 	if (!form) return false;
 
@@ -162,11 +46,11 @@ function clickCountryFlag(element) {
   <div class="header container">
     <div class="titlebar">
       <div>
-	     <a href="https://www.bmi.gv.at/" target="_blank" title="Home">
-	       <img class="toplogo img-responsive" src="/static/BMI.png" alt="Logo BMI"
-              th:attr="alt=#{gui.countryselection.logo.bmi.alt}">
-	       <h1 class="hidden" th:text="#{gui.countryselection.header1}"> Bundesministerium für Inneres </h1>
-	     </a>
+	    <a href="https://www.bmi.gv.at/" target="_blank" title="Home">
+	      <img class="toplogo img-responsive" src="/static/BMI.png" alt="Logo BMI"
+               th:attr="alt=#{gui.countryselection.logo.bmi.alt}">
+ 	      <h1 class="hidden" th:text="#{gui.countryselection.header1}"> Bundesministerium für Inneres </h1>
+  	    </a>
       </div>
       <ul class="nav_oben">
         <li>
@@ -187,44 +71,57 @@ function clickCountryFlag(element) {
 
     <h1 th:text="#{gui.countryselection.header.selection}"> Wählen Sie Ihr Land / Select your country </h1>
 
-    <div id="country">
     <!-- Active countries -->
+
+    <div id="country" th:with="countries=${ {'be', 'dk', 'de', 'ee', 'el', 'it', 'hr', 'lt', 'lv', 'lu', 'nl', 'pt', 'sk', 'si', 'es', 'cz' }}">
+            <form th:each="country : ${countries}" class="block" method="post" action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}">
+                <a onclick='clickCountryFlag(this)'><img class="countryimage"
+                        th:attr="src=@{#{gui.countryselection.country.__${country}__.img}},alt=#{gui.countryselection.country.__${country}__.logo.alt}"/></a>
+
+                <input type="submit" class="country-button" role="button" value="?countryname?" th:attr="value=#{gui.countryselection.country.__${country}__}" />
+                <input type="hidden" name="selectedCountry" th:value="${#strings.toUpperCase(country)}">
+                <input  type="hidden" name="pendingid"  value="$pendingid" th:attr="value=${pendingid}" />
+            </form>
+    </div>
+<!--/*
+    <div id="country">
             <form class="block" method="post" action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}">
                 <a><img class="countryimage" src="$contextPath/img/countries/germany-eu_.png" alt="Germany-eID"
                         th:attr="src=@{/img/countries/germany-eu_.png},alt=#{gui.countryselection.country.de.logo.alt}"/></a>
                 <input type="submit" role="button" value="Deutschland / Germany" th:attr="value=#{gui.countryselection.country.de}" />
-                <input type="hidden" name="selectedCountry" value="XX">
+                <input type="hidden" name="selectedCountry" value="DE">
                 <input  type="hidden" name="pendingid"  value="$pendingid" th:attr="value=${pendingid}" />
             </form>
-
+                                               
     </div>
+*/-->
 
     <!-- Abbrechen Button -->
-    <form   class="block" method="post"  action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}">
-      <input  type="submit" class="btn btn-outline-primary btn-block" value="Abbrechen/Cancel" th:attr="value=#{gui.countryselection.cancel}">
+    <form   class="block" method="post"  action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}"> 
+      <input  type="submit" class="btn btn-outline-primary btn-block cancel-button" value="Abbrechen/Cancel" th:attr="value=#{gui.countryselection.cancle}">                                    
       <input  type="hidden" name="stopAuthProcess" value="true" >
       <input  type="hidden" name="pendingid"  value="$pendingid" th:attr="value=${pendingid}">
     </form>
 
-    <p th:text="#{gui.countryselection.notsupportedinfo}" >Wenn Sie Ihr Land in dieser Aufzählung nicht entdecken ... </p>
-
+    <p th:text="#{gui.countryselection.notsupportedinfo}" >Wenn Sie Ihr Land in dieser Aufzählung nicht entdecken ... </p> 
+   
 <h2 th:text="#{gui.countryselection.infos.general.header}" > Information zur Anmeldung über Europäische eIDs </h2>
 <p>
-  <span th:text="#{gui.countryselection.infos.general.part.1}"> first part </span>
-  <a href="https://www.bmi.gv.at/" target="_blank" th:text="#{gui.countryselection.header1}" > Bundesministerium für Inneres </a>
+  <span th:text="#{gui.countryselection.infos.general.part.1}"> first part </span>        
+  <a href="https://www.bmi.gv.at/" target="_blank" th:text="#{gui.countryselection.header1}" > Bundesministerium für Inneres </a> 
   <span th:text="#{gui.countryselection.infos.general.part.2}"> second part </span>
 </p>
-
+                                                                                                               
 <p>
   <span th:text="#{gui.countryselection.infos.general.part.3}"> third part </span>
-  <a href="https://eur-lex.europa.eu/legal-content/DE/TXT/HTML/?uri=CELEX:32014R0910&from=DE" target="_blank" th:text="#{gui.countryselection.infos.general.link.1}"> eIDAS-Verordnung der Europäischen Union </a>
+  <a href="https://eur-lex.europa.eu/legal-content/DE/TXT/HTML/?uri=CELEX:32014R0910&from=DE" target="_blank" th:text="#{gui.countryselection.infos.general.link.1}"> eIDAS-Verordnung der Europäischen Union </a>  
   <span th:text="#{gui.countryselection.infos.general.part.4}"> fourth part </span>
 </p>
 
-<p
+<p>
   <span th:text="#{gui.countryselection.infos.general.part.5}"> fived part </span>
-  <a href="https://www.dsb.gv.at/-/das-erganzungsregister-fur-naturliche-personen-ernp-" target="_blank" th:text="#{gui.countryselection.infos.general.link.2}" ></a>
-  <span th:text="#{gui.countryselection.infos.general.part.6}"> sixed part </span>
+  <a href="http://ernp.bmi.gv.at/" target="_blank" th:text="#{gui.countryselection.infos.general.link.2}" ></a>
+  <span th:text="#{gui.countryselection.infos.general.part.6}"> sixed part </span>  
 </p>
 
   </div>
-- 
cgit v1.2.3

