refactor the GUI generation for user interaction

8 files changed, 1172 insertions, 0 deletions

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
new file mode 100644
index 000000000..a8735be60
--- /dev/null
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/css_template.css
@@ -0,0 +1,625 @@
+@charset "utf-8";
+	@media screen and (min-width: 650px) {
+			
+				body {
+					margin:0;
+					padding:0;
+					color : #000;
+					background-color : #fff;
+			  	text-align: center;
+			  	background-color: #6B7B8B;
+				}
+                
+                .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        }
+				
+        #localBKU p {
+          font-size: 0.7em;
+        } 
+        
+        #localBKU input{
+          font-size: 0.85em;
+          /*border-radius: 5px;*/
+        }
+        
+         #bkuselectionarea input[type=button] {
+          font-size: 0.85em;
+          /*border-radius: 7px;*/
+          margin-bottom: 25px;
+          min-width: 80px;
+         }
+        
+        #mandateLogin {
+          font-size: 0.85em;
+        }
+        
+        #bku_header h2 {
+          font-size: 0.8em;
+        } 
+        
+        
+			  #page {
+			    display: block;
+			    border: 2px solid rgb(0,0,0);
+			    width: 650px;
+			    height: 460px;
+			    margin: 0 auto;
+			    margin-top: 5%;
+			    position: relative;
+			    border-radius: 25px;
+			    background: rgb(255,255,255);
+			  }
+			  
+			  #page1 {
+			    text-align: center;
+			  }
+			  
+			  #main {
+			    /*	clear:both; */
+				  position:relative;
+			    margin: 0 auto;
+			    width: 250px;
+			    text-align: center;
+			  }
+			  
+			  .OA_header {
+			/*	  background-color: white;*/
+			    font-size: 20pt;
+			    margin-bottom: 25px;
+			    margin-top: 25px;
+			  }
+			
+			  #leftcontent {
+			    /*float:left; */
+				  width:250px;
+				  margin-bottom: 25px;
+			    text-align: left;
+			    border: 1px solid rgb(0,0,0);
+			  }
+			  			  
+			  #selectArea {
+				 font-size: 15px;
+				 padding-bottom: 65px;
+			  }
+			
+			  #leftcontent {
+				 width: 300px;
+				 margin-top: 30px;
+			  }
+			
+        #bku_header {
+          height: 5%;
+          padding-bottom: 3px;
+          padding-top: 3px;
+        }
+      
+        #bkulogin {
+				  overflow:hidden;	
+          min-width: 190px;
+          min-height: 180px;
+          /*height: 260px;*/	
+			  }
+      
+        h2#tabheader{
+				  font-size: 1.1em; 
+          padding-left: 2%;
+          padding-right: 2%;
+          position: relative;
+			  }
+      	
+        #stork h2 {
+          font-size: 1.0em;
+          margin-bottom: 2%;
+        }
+        		  
+			  .setAssertionButton_full {
+			  	background: #efefef;
+				  cursor: pointer;
+				  margin-top: 15px;
+			    width: 100px;
+			    height: 30px
+			  }
+			
+			  #leftbutton  {
+				 width: 30%; 
+				 float:left; 
+				 margin-left: 40px;
+			  }
+			
+			  #rightbutton {
+				 width: 30%; 
+				 float:right; 
+				 margin-right: 45px; 
+				 text-align: right;
+			  }
+        
+        button {
+          height: 25px;
+          width: 75px;
+          margin-bottom: 10px;
+        }
+        
+        
+        
+       #validation {
+        position: absolute;
+        bottom: 0px;
+        margin-left: 270px;
+        padding-bottom: 10px;
+      }
+			
+			}
+
+      @media screen and (max-width: 205px) {
+        #localBKU p {
+          font-size: 0.6em;
+        }
+       .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        }
+        
+        #localBKU input {
+          font-size: 0.6em;
+          min-width: 60px;
+         /* max-width: 65px; */
+          min-height: 1.0em;
+         /* border-radius: 5px; */
+        }
+        
+        #bkuselectionarea input[type=button] {
+          font-size: 0.7em;
+          min-width: 55px;
+          /*min-height: 1.1em;
+          border-radius: 5px;*/
+          margin-bottom: 2%
+        }
+        
+        #mandateLogin {
+          font-size: 0.65em;
+        }
+        
+        #bku_header h2 {
+          font-size: 0.8em;
+          margin-top: -0.4em;
+          padding-top: 0.4em;
+        }
+        
+        #bkulogin {
+        min-height: 150px;
+        } 
+      }
+
+      @media screen and (max-width: 249px) and (min-width: 206px) {
+        #localBKU p {
+          font-size: 0.7em;
+        } 
+        .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        }
+        
+        #localBKU input {
+          font-size: 0.7em;
+          min-width: 70px;
+       /*    max-width: 75px;    */
+          min-height: 0.95em;
+        /*  border-radius: 6px;    */
+        }
+        
+        #bkuselectionarea input[type=button] {
+          font-size: 0.75em;
+          min-width: 60px;
+      /*    min-height: 0.95em;
+          border-radius: 6px;    */
+          margin-bottom: 5%
+        }
+        
+        #mandateLogin {
+          font-size: 0.75em;
+        }
+        
+        #bku_header h2 {
+          font-size: 0.9em;
+          margin-top: -0.45em;
+          padding-top: 0.45em;
+        }
+        
+        #bkulogin {
+          min-height: 180px;
+        }  
+      }
+
+      @media screen and (max-width: 299px) and (min-width: 250px) {
+        #localBKU p {
+          font-size: 0.9em;
+        } 
+        .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        }
+        
+        #localBKU input {
+          font-size: 0.8em;
+          min-width: 70px;
+       /*    max-width: 75px;      */
+      /*    border-radius: 6px;  */
+        }
+        
+        #bkuselectionarea input[type=button] {
+          font-size: 0.85em;
+     /*     min-height: 1.05em;
+          border-radius: 7px;        */
+          margin-bottom: 10%;
+        }
+        
+        #mandateLogin {
+          font-size: 1em;
+        }
+        
+        #bku_header h2 {
+          font-size: 1.0em;
+          margin-top: -0.50em;
+          padding-top: 0.50em;
+        } 
+      }
+
+      @media screen and (max-width: 399px) and (min-width: 300px) {
+        #localBKU p {
+          font-size: 0.9em;
+        } 
+        .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        }
+        #localBKU input {
+          font-size: 0.8em;
+          min-width: 70px;
+      /*     max-width: 75px;     */
+      /*    border-radius: 6px;       */
+        }
+        
+        #bkuselectionarea input[type=button] {
+          font-size: 0.9em;
+   /*       min-height: 1.2em;
+          border-radius: 8px;          */
+          margin-bottom: 10%;
+          max-width: 80px;
+        }
+        
+        #mandateLogin {
+          font-size: 1em;
+        }
+        
+        #bku_header h2 {
+          font-size: 1.1em;
+          margin-top: -0.55em;
+          padding-top: 0.55em;
+        } 
+      }
+      
+      @media screen and (max-width: 649px) and (min-width: 400px) {
+        #localBKU p {
+          font-size: 0.9em;
+        } 
+       .browserInfoButton{
+         color: rgb(128, 128, 128); 
+        } 
+        #localBKU input {
+          font-size: 0.8em;
+          min-width: 70px;
+      /*     max-width: 80px;       */
+     /*     border-radius: 6px;          */
+        }
+        
+        #bkuselectionarea input[type=button] {
+          font-size: 1.0em;
+     /*      min-height: 1.3em;
+         border-radius: 10px;         */
+          margin-bottom: 10%;
+          max-width: 85px;
+        }
+        
+        #mandateLogin {
+          font-size: 1.2em;
+        }
+        
+        #bku_header h2 {
+          font-size: 1.3em;
+          margin-top: -0.65em;
+          padding-top: 0.65em;
+        } 
+      }
+
+
+			
+			@media screen and (max-width: 649px) {
+				
+        body {
+					margin:0;
+					padding:0;
+					color : #000;
+			  	text-align: center;
+          font-size: 100%;
+			  	background-color: $MAIN_BACKGOUNDCOLOR;
+				}
+        		.browserInfoButton{
+                    color: rgb(128, 128, 128); 
+                }		
+			  #page {
+			     visibility: hidden;
+			     margin-top: 0%;
+			  }
+			  
+			  #page1 {
+			    visibility: hidden;
+			  }
+			  
+			  #main {
+			    visibility: hidden;
+			  }
+        
+        #validation {
+          visibility: hidden;
+          display: none;
+        }
+			  
+			  .OA_header {
+			    margin-bottom: 0px;
+			    margin-top: 0px;
+			    font-size: 0pt;
+			    visibility: hidden;
+			  }
+			
+			  #leftcontent {
+			    visibility: visible;
+			    margin-bottom: 0px;
+			    text-align: left;
+			    border:none;
+          vertical-align: middle;
+          min-height: 173px;
+          min-width: 204px;
+          
+			  }
+			  
+        #bku_header {
+          height: 10%;
+          min-height: 1.2em;
+          margin-top: 1%;
+        }
+        
+        h2#tabheader{
+          padding-left: 2%;
+          padding-right: 2%;
+          position: relative;
+          top: 50%;
+			  }
+        
+        #stork h2 {
+          font-size: 0.9em;
+          margin-bottom: 2%;
+        }
+        
+       	#bkulogin {	
+          min-width: 190px;
+          min-height: 155px;	
+			 }
+        
+			 .setAssertionButton_full {
+			     	background: #efefef;
+				    cursor: pointer;
+				    margin-top: 15px;
+			      width: 70px;
+			      height: 25px;
+			 }
+       
+        input[type=button] {
+/*          height: 11%;  */
+          width: 70%;
+        }
+			}
+			      
+			* {
+				margin: 0;
+				padding: 0;
+				#if($FONTTYPE)
+        	font-family: $FONTTYPE;
+        #end
+			}
+							      			
+			#selectArea {
+				padding-top: 10px;
+				padding-bottom: 55px;
+				padding-left: 10px;
+			}
+			
+			.setAssertionButton {
+				background: #efefef;
+				cursor: pointer;
+				margin-top: 15px;
+			  width: 70px;
+			  height: 25px;
+			}
+			
+			#leftbutton  {
+				width: 35%; 
+				float:left; 
+				margin-left: 15px;
+			}
+			
+			#rightbutton {
+				width: 35%; 
+				float:right; 
+				margin-right: 25px; 
+				text-align: right;
+			}
+			
+			#stork {
+			    /*margin-bottom: 10px;*/
+			   /* margin-top: 5px; */
+			}
+      			
+      #mandateLogin {
+        padding-bottom: 4%;
+        padding-top: 4%;
+        height: 10%;
+        position: relative;
+        text-align: center;
+			}
+      
+      .verticalcenter {
+        vertical-align: middle;
+      }
+      
+      #mandateLogin div {
+        clear: both;
+        margin-top: -1%;
+        position: relative;
+        top: 50%;
+      }
+      
+      #bkuselectionarea {
+          position: relative;
+          display: block;
+      }
+      
+      #localBKU {
+        padding-bottom: 4%;
+        /*padding-top: 4%;*/
+        position: relative;
+        clear: both;     
+        text-align: center;
+			}
+          			
+			#bkukarte {
+				float:left;
+				text-align:center;
+				width:40%;
+        min-height: 70px;
+        padding-left: 5%;
+        padding-top: 2%;
+			}
+			
+			#bkuhandy {
+				float:right;
+				text-align:center;
+				width:40%;
+        min-height: 90px;
+        padding-right: 5%;
+        padding-top: 2%;
+			}
+			
+      .bkuimage {
+        width: 90%;
+        height: auto;
+      }
+      
+			#mandate{
+				text-align:center;
+				padding : 5px 5px 5px 5px;
+			}
+      
+/*		input[type=button], .sendButton {
+				background: $BUTTON_BACKGROUNDCOLOR;
+        color: $BUTTON_COLOR;
+/*				border:1px solid #000;  */
+/*				cursor: pointer;
+/*        box-shadow: 3px 3px 3px #222222;  */
+/*			}
+			
+/*      button:hover, button:focus, button:active, 
+      .sendButton:hover , .sendButton:focus, .sendButton:active,
+      #mandateCheckBox:hover, #mandateCheckBox:focus, #mandateCheckBox:active {
+				background: $BUTTON_BACKGROUNDCOLOR_FOCUS;
+        color: $BUTTON_COLOR;
+/*				border:1px solid #000;                */
+/*				cursor: pointer;
+/*        box-shadow: -1px -1px 3px #222222;  */
+/*			}
+      
+*/      
+			input {
+				/*border:1px solid #000;*/
+				cursor: pointer;
+			}
+      
+      #localBKU input {
+/*        color: $BUTTON_COLOR;  */
+        /*border: 0px;*/
+        display: inline-block;
+        
+      }
+			
+      #localBKU input:hover, #localBKU input:focus, #localBKU input:active {
+        /*text-decoration: underline;*/
+      }
+      
+			#installJava, #BrowserNOK {
+				clear:both;
+				font-size:0.8em;
+				padding:4px;
+			}
+						
+			.selectText{
+			
+			}
+			
+			.selectTextHeader{
+			
+			}
+			
+			.sendButton {
+        width: 30%;
+        margin-bottom: 1%;	
+			}
+			
+			#leftcontent a {
+				text-decoration:none; 
+				color: #000;
+			/*	display:block;*/
+				padding:4px;	
+			}
+			
+			#leftcontent a:hover, #leftcontent a:focus, #leftcontent a:active {
+				text-decoration:underline;
+				color: #000;	
+			}
+						
+			.infobutton {
+				background-color: #005a00;
+				color: white;
+				font-family: serif;
+				text-decoration: none;
+				padding-top: 2px;
+				padding-right: 4px;
+				padding-bottom: 2px;
+				padding-left: 4px;
+				font-weight: bold;
+			}
+			
+			.hell {
+				background-color : $MAIN_BACKGOUNDCOLOR;
+        color: $MAIN_COLOR;	
+			}
+			
+			.dunkel {
+				background-color: $HEADER_BACKGROUNDCOLOR;
+        color: $HEADER_COLOR;
+			}
+			      
+			.main_header {
+			   color: black;
+			    font-size: 32pt;
+			    position: absolute;
+			    right: 10%;
+			    top: 40px;
+				
+			}
+      
+      #ssoSessionTransferBlock {
+        font-size: 0.8em;
+        margin-left: 5px;
+        margin-bottom: 5px;
+      }
+      
+      #alert_area {
+        width: 500px;
+        padding-left: 80px;
+      }
\ No newline at end of file
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/templates/error_message.html b/id/server/moa-id-frontend-resources/src/main/resources/templates/error_message.html
new file mode 100644
index 000000000..4fd4d63cd
--- /dev/null
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/error_message.html
@@ -0,0 +1,37 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <link rel="stylesheet" href="$contextPath/css/buildCSS" />
+  
+  <title>An error arise ...  </title>
+</head>
+
+	<body>
+  <div id="page">
+		<div id="page1" class="case selected-case" role="main">
+			<h2 class="OA_header" role="heading">Authentication error arise</h2>
+			<!--div id="main"-->
+				<!--div id="leftcontent" class="hell" role="application"-->
+          
+          
+          
+	        <div id="alert_area" class="hell" role="application" >
+            <p>The authentication stops on account of a process error:</p>
+            <br/>
+		        <p><b>Error    Code:</b> $errorCode</p> 
+		        <p><b>Error Message:</b >$errorMsg</p>
+	        </div>	
+
+
+	        #if($stacktrace)
+	         <div>
+		        <p><b>Stacktrace:</b> $stacktrace</p> 
+	         </div>	
+	        #end
+          
+				<!--/div--->
+			<!--/div-->
+		</div>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/templates/javascript_tempalte.js b/id/server/moa-id-frontend-resources/src/main/resources/templates/javascript_tempalte.js
new file mode 100644
index 000000000..e4e05bace
--- /dev/null
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/javascript_tempalte.js
@@ -0,0 +1,200 @@
+function isIE() {
+			return (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
+		}
+		function isFullscreen() {
+			try {
+				return ((top.innerWidth == screen.width) && (top.innerHeight == screen.height));
+			} catch (e) {
+				return false;
+			}
+		}
+		function isActivexEnabled() {
+			var supported = null;
+			try {
+				supported = !!new ActiveXObject("htmlfile");
+			} catch (e) {
+				supported = false;
+			}
+			return supported;
+		}
+		function isMetro() {
+			if (!isIE())
+				return false;
+			return !isActivexEnabled() && isFullscreen();
+		}
+		window.onload=function() {
+			document.getElementById("localBKU").style.display="block";
+			return;
+		}
+    function bkuLocalClicked() {
+       setMandateSelection();
+    }
+    
+		function bkuOnlineClicked() {
+			if (isMetro())
+				document.getElementById("metroDetected").style.display="block";
+			document.getElementById("localBKU").style.display="block";
+/* 			if (checkMandateSSO())
+				return; */
+			
+			setMandateSelection();
+/* 			setSSOSelection(); */
+						
+			var iFrameURL = "$contextPath$submitEndpoint" + "?";
+			iFrameURL += "&pendingid=" + "$pendingReqID";
+			
+			iFrameURL += "bkuURI=" + "$bkuOnline";
+			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
+
+			generateIFrame(iFrameURL);
+		}
+		function bkuHandyClicked() {
+			document.getElementById("localBKU").style.display="none";
+/* 			if (checkMandateSSO())
+				return; */
+			
+			setMandateSelection();
+/* 			setSSOSelection(); */
+			
+			var iFrameURL = "$contextPath$submitEndpoint" + "?";
+			iFrameURL += "&pendingid=" + "$pendingReqID";
+			
+			iFrameURL += "bkuURI=" + "$bkuHandy";
+			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
+			
+			generateIFrame(iFrameURL);
+		}
+		function storkClicked() {
+			document.getElementById("localBKU").style.display="none"; 
+/* 			if (checkMandateSSO())
+				return; */
+			
+			setMandateSelection();
+/* 			setSSOSelection(); */
+			
+			var ccc = "AT";
+			var countrySelection = document.getElementById("cccSelection");
+			if (countrySelection !=  null) {
+				ccc = document.getElementById("cccSelection").value;
+			}
+			var iFrameURL = "$contextPath$submitEndpoint" + "?";			
+			iFrameURL += "&pendingid=" + "$pendingReqID";
+			
+			#if($bkuOnline)
+				iFrameURL += "bkuURI=" + "$bkuOnline";
+			#end
+			
+			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
+			iFrameURL += "&CCC=" + ccc;
+						
+			generateIFrame(iFrameURL);
+		}
+		function generateIFrame(iFrameURL) {
+			var el = document.getElementById("bkulogin");
+      var width = el.clientWidth;
+      var heigth = el.clientHeight - 20;
+			var parent = el.parentNode;
+            
+      iFrameURL += "&heigth=" + heigth;
+      iFrameURL += "&width=" + width;
+      
+			var iframe = document.createElement("iframe");
+			iframe.setAttribute("src", iFrameURL);
+			iframe.setAttribute("width", el.clientWidth - 1);
+			iframe.setAttribute("height", el.clientHeight - 1);
+			iframe.setAttribute("frameborder", "0");
+			iframe.setAttribute("scrolling", "no");
+			iframe.setAttribute("title", "Login");
+			parent.replaceChild(iframe, el);
+		}
+		function setMandateSelection() {
+			document.getElementById("useMandate").value = "false";
+			var checkbox = document.getElementById("mandateCheckBox");
+			if (checkbox !=  null) {
+				if (document.getElementById("mandateCheckBox").checked) {
+					document.getElementById("useMandate").value = "true";
+				}
+			}
+		}
+		function onChangeChecks() {
+      if (self.innerWidth < 650) {
+         document.getElementById("moaidform").setAttribute("target","_parent");
+      } else {
+         document.getElementById("moaidform").removeAttribute("target");
+      }
+      
+    }
+    
+     function checkIfBrowserSupportsJava(){
+        console.log("Browser is Chrome: "+checkIfBrowserIsChrome());
+        console.log("Browser is Safari: "+checkIfBrowserIsSafari());
+        console.log("Browser is Edge: "+checkIfBrowserIsEdge());
+        
+        var cnt = 0;
+        
+        if(checkIfBrowserIsChrome())cnt++;
+        if(checkIfBrowserIsEdge())cnt++;
+        if(checkIfBrowserIsSafari())cnt++;
+           
+        if(cnt==0 || cnt>1)//cnt>1 means perhaps wrong detection
+            return true;
+        
+        var image = document.getElementById("bkuimage");
+        var srcatt = image.getAttribute("src");
+        var last = srcatt.substring(srcatt.lastIndexOf('/')+1);
+        srcatt = srcatt.replace(last,'online-bku-deactivated.png');    
+        image.setAttribute("src",srcatt);
+         
+         
+        var button = document.getElementsByName("bkuButtonOnline")[0];               
+        button.setAttribute("class","browserInfoButton");
+        button.setAttribute("title","Java wird nicht unterstützt, klicken für mehr Informationen.");
+        button.setAttribute("onClick","alert('Java wird von Ihrem Browser nicht unterstützt, ist jedoch für den Betrieb der Online Bürgerkartenumgebung notwendig.\\nWollen Sie dennoch die Online Bürgerkartenumgebung verwenden, wird zur Zeit Java noch von Firefox und MS Internet Explorer unterstützt. \\nAlternativ koennen Sie auch eine lokale Bürgerkartenumgebung verwenden, verfügbar unter www.buergerkarte.at.');");
+         
+        return false;
+   
+    }
+    function checkIfBrowserIsChrome(){
+        var chrome_defined = !!window.chrome;//chrome object defined
+        var webstore_defined = false;
+        if(window.chrome){
+            webstore_defined = !!window.chrome.webstore;
+           }
+        return chrome_defined && webstore_defined;
+    }
+    function checkIfBrowserIsEdge(){//edge also defines the chrome object, but not the webapp
+        var chrome_defined = !!window.chrome;//chrome object defined
+        var webstore_defined = true;
+        if(window.chrome){
+            webstore_defined = !!window.chrome.webstore;
+           }
+        return chrome_defined && !webstore_defined;
+    }
+    function checkIfBrowserIsSafari(){
+        var cond1 = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
+        return cond1;
+    }
+/* 		function setSSOSelection() {
+			document.getElementById("useSSO").value = "false";
+			var checkbox = document.getElementById("SSOCheckBox");
+			if (checkbox !=  null) {
+				if (document.getElementById("SSOCheckBox").checked) {
+					document.getElementById("useSSO").value = "true";
+				}
+			}
+		} */
+		
+/* 		function checkMandateSSO() {
+			var sso = document.getElementById("SSOCheckBox");
+			var mandate = document.getElementById("mandateCheckBox");
+			
+			
+			if (sso.checked && mandate.checked) {
+				alert("Anmeldung in Vertretung in kombination mit Single Sign-On wird aktuell noch nicht unterstützt!")
+				mandate.checked = false;
+				sso.checked = false;
+				return true;
+			} else {
+				return false;
+			}
+		} */
\ No newline at end of file
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
new file mode 100644
index 000000000..02b86472b
--- /dev/null
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/loginFormFull.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+<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" />
+   
+   <!-- MOA-ID 2.x BKUSelection JavaScript fucnctions-->
+   <script src="$contextPath/js/buildJS?pendingid=$pendingReqID"></script>
+   
+
+<title>Anmeldung mittels Bürgerkarte oder Handy-Signatur</title>
+</head>
+<body onload="onChangeChecks();checkIfBrowserSupportsJava();" onresize="onChangeChecks();">
+	<div id="page">
+		<div id="page1" class="case selected-case" role="main">
+			<h2 class="OA_header" role="heading">Anmeldung an: $OAName</h2>
+			<div id="main">
+				<div id="leftcontent" class="hell" role="application">
+					<div id="bku_header" class="dunkel">
+						<h2 id="tabheader" class="dunkel" role="heading">$HEADER_TEXT</h2>
+					</div>
+					<div id="bkulogin" class="hell" role="form">
+						<div id="mandateLogin" style="">
+							<div>
+								<input tabindex="1" type="checkbox" name="Mandate"
+									id="mandateCheckBox" class="verticalcenter" role="checkbox"
+									onClick='document.getElementById("mandateCheckBox").setAttribute("aria-checked", document.getElementById("mandateCheckBox").checked);'$MANDATECHECKED>
+								<label for="mandateCheckBox" class="verticalcenter">in
+									Vertretung anmelden</label>
+								<!--a      href="info_mandates.html" 
+                        target="_blank"
+                        class="infobutton verticalcenter" 
+                        tabindex="5">i</a-->
+							</div>
+						</div>
+						<div id="bkuselectionarea">
+							<div id="bkukarte">
+								<img id="bkuimage" class="bkuimage" src="$contextPath/img/online-bku.png"
+									alt="OnlineBKU" /> <input name="bkuButtonOnline" type="button"
+									onClick="bkuOnlineClicked();" tabindex="2" role="button"
+									value="Karte" />
+							</div>
+							<div id="bkuhandy">
+								<img class="bkuimage" src="$contextPath/img/mobile-bku.png"
+									alt="HandyBKU" /> <input name="bkuButtonHandy" type="button"
+									onClick="bkuHandyClicked();" tabindex="3" role="button"
+									value="HANDY" />
+							</div>
+						</div>
+						<div id="localBKU">
+							<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=" Lokale Bürgerkartenumgebung " tabindex="4"
+									     role="button" onclick="setMandateSelection();">
+                </form>
+              </div>
+              
+              <!-- Single Sign-On Session transfer functionality -->
+              <!--div id="ssoSessionTransferBlock">
+                <a href="$contextPath$submitEndpoint?pendingid=$pendingReqID&restoreSSOSession=true">>Restore SSO Session from Smartphone</a>
+              </div-->
+              
+              <div id="stork" align="center" style="$STORKVISIBLE">
+                <h2 id="tabheader" class="dunkel">Home Country Selection</h2>
+                <p>
+                  <select name="cccSelection" id="cccSelection" size="1" style="width: 120px; margin-right: 5px;" >
+                    $countryList
+                  </select>
+                  <button name="bkuButton" type="button" onClick="storkClicked();">Proceed</button>
+                  <a href="info_stork.html" target="_blank" class="infobutton" style="color:#FFF">i</a>
+                </p>
+              </div>
+
+						<div id="metroDetected" style="display: none">
+							<p>Anscheinend verwenden Sie Internet Explorer im
+								Metro-Modus. Wählen Sie bitte "Auf dem Desktop anzeigen" aus den
+								Optionen um die Karten-Anmeldung starten zu können.</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/templates/redirectForm.html b/id/server/moa-id-frontend-resources/src/main/resources/templates/redirectForm.html
new file mode 100644
index 000000000..ac3242c89
--- /dev/null
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/redirectForm.html
@@ -0,0 +1,13 @@
+<html>
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+<script type="text/javascript">
+  </script>
+</head>
+
+
+<body onload="document.getElementById('link').click();">
+	<a href="$URL" target="$TARGET" id="link">CLICK to perform a
+		redirect back to Online Application</a>
+</body>
+</html>
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/templates/sendAssertionFormFull.html b/id/server/moa-id-frontend-resources/src/main/resources/templates/sendAssertionFormFull.html
new file mode 100644
index 000000000..a9f0c4238
--- /dev/null
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/sendAssertionFormFull.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html> 
+<html>
+<head>
+	<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=#ID#" />
+    
+    <title>Anmeldung an Online-Applikation</title>   
+</head>
+
+
+<body>
+		<div id="page">
+
+			<div id="page1" class="case selected-case" role="main">
+
+<!-- 					<h2 class="OA_header">Anmeldung an: #OAName#</h2> -->
+
+					<div id="main">
+					<div id="leftcontent" class="hell">
+            <div id="bku_header" class="dunkel">
+						  <h2 id="tabheader" class="dunkel" role="heading">
+							 Anmeldeinformationen:							  
+						  </h2>
+            </div>
+					
+						<div id="selectArea" class="hell" role="application">
+							<h3>Anmeldung an: $OAName</h3>
+					
+<!-- 						<div class="hell"> -->
+							<div id="leftbutton">
+									<form method="post" id="moaidform_yes" action="$contextPath$submitEndpoint">
+										<input type="hidden" name="value" value="true">
+                    <input type="hidden" name="pendingid" value="$pendingReqID">
+										<input type="submit" value="Ja" class="setAssertionButton_full" role="button">
+									</form>
+							</div>
+							<div id="rightbutton">
+										<form method="post" id="moaidform_no" action="$contextPath$submitEndpoint">
+										<input type="hidden" name="value" value="false">
+                    <input type="hidden" name="pendingid" value="$pendingReqID">
+										<input type="submit" value="Nein" class="setAssertionButton_full" role="button">
+									</form>
+							</div>
+						
+						</div>												
+					</div>
+				</div>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/templates/slo_template.html b/id/server/moa-id-frontend-resources/src/main/resources/templates/slo_template.html
new file mode 100644
index 000000000..b3eb18082
--- /dev/null
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/slo_template.html
@@ -0,0 +1,94 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+  <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" />
+
+	#if($timeoutURL)
+		<script type="text/javascript">
+			function sloTimeOut() {
+				window.location.href="$timeoutURL";
+			
+			}
+      function RestartAfterDelay() {
+        var eDate = null;
+        var MilliSekZeit = 0;
+        var SysDatumJetzt = new Date();
+        var SysDatumJetztMilli = SysDatumJetzt.getTime();
+
+        do {
+          eDate = new Date();
+          MilliSekZeit = eDate.getTime();
+
+        } while ((MilliSekZeit-SysDatumJetztMilli) < $timeout);
+
+        sloTimeOut();
+      }	
+	
+		</script>
+	#end
+
+  <title>Single LogOut Vorgang ... </title>
+</head>
+
+#if($timeoutURL)
+	<body onload='setTimeout(sloTimeOut, $timeout);'>
+#else
+	<body>
+#end
+  <noscript>
+		<p>
+			<strong>Note:</strong> Since your browser does not support
+			JavaScript, you must press the Continue button once to proceed.
+		</p>
+	</noscript>
+
+  <div id="page">
+		<div id="page1" class="case selected-case" role="main">
+			<h2 class="OA_header" role="heading">MOA-ID Single LogOut Information</h2>
+			<div id="main">
+				<div id="leftcontent" class="hell" role="application">
+          
+          #if($errorMsg)
+	         <div class="alert">
+		        <p>$errorMsg</p> 
+	         </div>	
+	        #end
+
+	        #if($successMsg)
+	         <div>
+		        <p>$successMsg</p> 
+	         </div>	
+	        #end
+
+	        #if($redirectURLs)
+		        <div>
+			       <p>
+				        Sie werden von allen Online-Applikationen abgemeldet. <br>
+				        Dieser Vorgang kann einige Zeit in Anspruch nehmen.
+			       </p>
+		       </div>
+	       #end
+          
+				</div>
+			</div>
+		</div>
+		<!--div id="validation">
+			<a href="http://validator.w3.org/check?uri="> <img
+				style="border: 0; width: 88px; height: 31px"
+				src="$contextpath/img/valid-html5-blue.png" alt="HTML5 ist valide!" />
+			</a> <a href="http://jigsaw.w3.org/css-validator/"> <img
+				style="border: 0; width: 88px; height: 31px"
+				src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
+				alt="CSS ist valide!" />
+			</a>
+		</div-->
+	</div>
+
+
+  #foreach( $el in $redirectURLs )
+	   <iframe src=$el class="reqframe"></iframe>
+  #end
+</body>
+</html>
\ No newline at end of file
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/templates/sso_transfer_template.html b/id/server/moa-id-frontend-resources/src/main/resources/templates/sso_transfer_template.html
new file mode 100644
index 000000000..e9c2fae76
--- /dev/null
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/sso_transfer_template.html
@@ -0,0 +1,59 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+  <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" />
+
+  <title>Single Sign-On Session Transfer</title>
+</head>
+
+	<body>
+  <noscript>
+		<p>
+			<strong>Note:</strong> Since your browser does not support
+			JavaScript, you must press the Continue button once to proceed.
+		</p>
+	</noscript>
+
+  <div id="page">
+		<div id="page1" class="case selected-case" role="main">
+			<h2 class="OA_header" role="heading">MOA-ID Single Sign-On Session Transfer Service</h2>
+			<div id="main">
+				<div id="leftcontent" class="hell" role="application">
+          
+          #if($errorMsg)
+	         <div class="alert">
+		        <p>$errorMsg</p> 
+	         </div>	
+	        #end
+
+	        #if($successMsg)
+	         <div>
+		        <p>$successMsg</p> 
+	         </div>	
+	        #end
+          
+          #if($QRImage)
+	         <div>
+	         	<img id="qrCode" src="data:image/gif;base64,$QRImage">
+	         </div>	
+	        #end
+          
+				</div>
+			</div>
+		</div>
+		<!--div id="validation">
+			<a href="http://validator.w3.org/check?uri="> <img
+				style="border: 0; width: 88px; height: 31px"
+				src="$contextpath/img/valid-html5-blue.png" alt="HTML5 ist valide!" />
+			</a> <a href="http://jigsaw.w3.org/css-validator/"> <img
+				style="border: 0; width: 88px; height: 31px"
+				src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
+				alt="CSS ist valide!" />
+			</a>
+		</div-->
+	</div>
+
+</body>
+</html>
\ No newline at end of file