update BKU selection template to add eIDAS button

4 files changed, 86 insertions, 53 deletions

diff --git a/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS.png b/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS.png
new file mode 100644
index 000000000..8958cf2e6
--- /dev/null
+++ b/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS.png
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS_small.png b/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS_small.png
new file mode 100644
index 000000000..6c785bf06
--- /dev/null
+++ b/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS_small.png
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/templates/css_template.css b/id/server/moa-id-frontend-resources/src/main/resources/templates/css_template.css
index c8de82c50..f95106c5a 100644
--- a/id/server/moa-id-frontend-resources/src/main/resources/templates/css_template.css
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/css_template.css
@@ -87,7 +87,7 @@
 			  }
 			
 			  #leftcontent {
-				 width: 300px;
+				 width: 400px;
 				 /*margin-top: 30px;*/
          margin: auto;
 			  }
@@ -99,9 +99,9 @@
         }
       
         #bkulogin {
-				  overflow:hidden;	
-          min-width: 190px;
-          min-height: 180px;
+            overflow:hidden;	
+            min-width: 190px;
+            min-height: 180px;
           /*height: 260px;*/	
 			  }
       
@@ -130,11 +130,16 @@
 				 float:left; 
 				 margin-left: 40px;
 			  }
+            #centerbutton {
+                width: 30%
+                float: middle; 
+            }
+			
 			
 			  #rightbutton {
 				 width: 30%; 
 				 float:right; 
-				 margin-right: 45px; 
+				 margin-right: 40px; 
 				 text-align: right;
 			  }
         
@@ -266,7 +271,7 @@
         } 
       }
 
-      @media screen and (max-width: 399px) and (min-width: 300px) {
+      @media screen and (max-width: 399px) and (min-width: 400px) {
         #localBKU p {
           font-size: 0.9em;
         } 
@@ -381,15 +386,14 @@
           visibility: hidden;
         }
         
-			  #leftcontent {
-			    visibility: visible;
-			    margin-bottom: 0px;
-			    text-align: left;
-			    border:none;
-          vertical-align: middle;
-          min-height: 173px;
-          min-width: 204px;
-          
+                #leftcontent {
+			     visibility: visible;
+			     margin-bottom: 0px;
+			     text-align: left;
+			     border:none;
+                vertical-align: middle;
+                min-height: 173px;
+                min-width: 204px;
 			  }
 			  
         #bku_header {
@@ -452,13 +456,14 @@
 			}
 			
 			#leftbutton  {
-				width: 35%; 
+				width: 30%; 
 				float:left; 
 				margin-left: 15px;
 			}
+
 			
 			#rightbutton {
-				width: 35%; 
+				width: 30%; 
 				float:right; 
 				margin-right: 25px; 
 				text-align: right;
@@ -479,12 +484,17 @@
         padding-top: 4%;
         height: 10%;
         position: relative;
-        text-align: center;
+        text-align: left;
 			}
       
       .verticalcenter {
         vertical-align: middle;
       }
+
+    .mandate{
+        float: left;
+        margin-left: 4%;
+    }
       
       #mandateLogin div {
         clear: both;
@@ -509,29 +519,37 @@
 			#bkukarte {
 				float:left;
 				text-align:center;
-				width:40%;
-        min-height: 70px;
-        padding-left: 5%;
-        padding-top: 2%;
+				width:33%;
+                min-height: 90px;
+
+                padding-top: 2%;
 			}
 			
 			#bkuhandy {
-				float:right;
+				float:left;
 				text-align:center;
-				width:40%;
-        min-height: 90px;
-        padding-right: 5%;
-        padding-top: 2%;
+				width:33%;
+                min-height: 90px;
+
+                padding-top: 2%;
 			}
+            #bkueulogin {
+            float:left;
+            text-align:center;
+            width:33%;
+            min-height: 90px;
+            padding-top: 2%;
+         
+        }
 			
-      .bkuimage {
-        width: 60%;
-        height: auto;
-        margin-bottom: 10%;
-      }
+            .bkuimage {
+            width: 55%;
+            height: auto;
+            margin-bottom: 10%;
+            }
       
 			#mandate{
-				text-align:center;
+				text-align:left;
 				padding : 5px 5px 5px 5px;
 			}
       
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/templates/loginFormFull.html b/id/server/moa-id-frontend-resources/src/main/resources/templates/loginFormFull.html
index fe9bc2166..1a78ffd1a 100644
--- a/id/server/moa-id-frontend-resources/src/main/resources/templates/loginFormFull.html
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/loginFormFull.html
@@ -4,10 +4,10 @@
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
    <!-- MOA-ID 2.x BKUSelection Layout CSS -->               
-   <link rel="stylesheet" href="$contextPath/css/buildCSS?pendingid=$pendingReqID" />
+   <link rel="stylesheet" href="/css_template.css"/>
    
    <!-- MOA-ID 2.x BKUSelection JavaScript fucnctions-->
-   <script src="$contextPath/js/buildJS?pendingid=$pendingReqID"></script>
+   <script src="/javascript_tempalte.js"></script>
    
 
 <title>Anmeldung mittels Bürgerkarte oder Handy-Signatur</title>
@@ -26,8 +26,8 @@
 						<div id="mandateLogin" class="$MANDATEVISIBLE">
 							<div>
 								<input tabindex="1" type="checkbox" name="Mandate"
-									id="mandateCheckBox" class="verticalcenter" role="checkbox" $MANDATECHECKED>
-								<label for="mandateCheckBox" class="verticalcenter">in
+									id="mandateCheckBox" class="mandate" role="checkbox" $MANDATECHECKED>
+								<label for="mandateCheckBox" class="mandate">in
 									Vertretung anmelden</label>
 								<!--a      href="info_mandates.html" 
                         target="_blank"
@@ -37,31 +37,42 @@
 						</div>
 						<div id="bkuselectionarea">
 							<div id="bkukarte">
-								<img id="bkuimage" class="bkuimage" src="$contextPath/img/karte.png" alt="OnlineBKU" /> 
+								<img id="bkuimage" class="bkuimage" src="/img/karte.png" alt="OnlineBKU"/> 
                 
                 <!-- Remove support for Online BKU and swith the card button to local BKU-->
                 <!--input name="bkuButtonOnline" type="button" onClick="bkuOnlineClicked();" tabindex="2" role="button" value="Karte" /-->                
                 
-                <form method="get" id="moaidform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
+                                <form method="get" id="moaidform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
 								  <input type="hidden" name="bkuURI" value="$bkuLocal" />
 								  <input type="hidden" name="useMandate" id="useMandate" /> 
 								  <input type="hidden" name="SSO" id="useSSO" /> 
 								  <input type="hidden" name="ccc" id="ccc" /> 
 								  <input type="hidden" name="pendingid" value="$pendingReqID" /> 
-                  <input type="submit" value=" Karte " tabindex="4" role="button">
-                </form>
+                                    <input type="submit" value=" Karte " tabindex="5" role="button">
+                                </form>
                 
-                <iframe name="bkudetect" width="0" height="0" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="$contextPath/feature/bkuDetection?pendingid=$pendingReqID"></iframe>
+                            <iframe name="bkudetect" width="0" height="0" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="$contextPath/feature/bkuDetection?pendingid=$pendingReqID"></iframe>
                 
-                <!-- BKU detection with static template-->
-                <!--iframe name="bkudetect" width="0" height="0" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="$contextPath/iframeLBKUdetect.html"></iframe-->
+                                <!-- BKU detection with static template-->
+                                <!--iframe name="bkudetect" width="0" height="0" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="$contextPath/iframeLBKUdetect.html"></iframe-->
                                                             
-							</div>
-							<div id="bkuhandy">
-								<img class="bkuimage" src="$contextPath/img/handysign.png" alt="HandyBKU" />         
-                <input name="bkuButtonHandy" type="button" tabindex="3" role="button" value="HANDY" />
-							</div>
-						</div>
+				        </div>
+                            
+				        <div id="bkuhandy">
+				            <img class="bkuimage" src="/img/handysign.png" alt="HandyBKU" />         
+                            <input name="bkuButtonHandy" type="button" tabindex="3" role="button" value="HANDY" />
+				        </div>
+                
+            
+				        <div id="bkueulogin">
+				            <img class="bkuimage" src="/img/eIDAS_small.png" alt="EULogin" />                                                        
+                              <form method="get" id="moaidform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
+								  <input type="hidden" name="useeIDAS" value="true" />
+								  <input type="hidden" name="useMandate" id="useMandate" />  
+								  <input type="hidden" name="pendingid" value="$pendingReqID" /> 
+                                  <input name="bkuButtonEULogin" onclick="setMandateSelection();" type="button" role="button" value="EULogin" />
+                                </form>
+				        </div>
 						<!--div id="localBKU">
 							<form method="get" id="moaidform" action="$contextPath$submitEndpoint"
 								class="verticalcenter" target="_parent">
@@ -80,7 +91,11 @@
               <!--div id="ssoSessionTransferBlock">
                 <a href="$contextPath$submitEndpoint?pendingid=$pendingReqID&restoreSSOSession=true">>Restore SSO Session from Smartphone</a>
               </div-->
-              
+            
+                  
+                        
+            
+            <!-- 
               <div id="stork" align="center" class="$STORKVISIBLE">
                 <h2 id="tabheader" class="dunkel">Home Country Selection</h2>
                 <p>
@@ -88,9 +103,9 @@
                     $countryList
                   </select>
                   <button id="eIDASButton" name="bkuButton" type="button">Proceed</button>
-                  <!--a href="info_stork.html" target="_blank" class="infobutton">i</a-->
+                  a href="info_stork.html" target="_blank" class="infobutton">i</a
                 </p>
-              </div>
+              </div>-->
 
 						<div id="metroDetected" class="unvisible">
 							<p>Anscheinend verwenden Sie Internet Explorer im