@ConfigWebTool

 --add JS ColorPicker to select colors easier
 --add BKUSelectionFrom preview
 --add useMandate checkbox

 --change position of some checkboxes in OA configuration

@MOAID lib
  --change API of BKUFormCustomization utils

2 files changed, 126 insertions, 98 deletions

diff --git a/id/server/idserverlib/src/main/resources/resources/templates/loginFormFull.html b/id/server/idserverlib/src/main/resources/resources/templates/loginFormFull.html
index efc3e8d9d..99a66727b 100644
--- a/id/server/idserverlib/src/main/resources/resources/templates/loginFormFull.html
+++ b/id/server/idserverlib/src/main/resources/resources/templates/loginFormFull.html
@@ -22,13 +22,14 @@
         
         #localBKU input{
           font-size: 0.7em;
-          border-radius: 5px;
+          /*border-radius: 5px;*/
         }
         
-         #bkuselectionarea button {
+         #bkuselectionarea input[type=button] {
           font-size: 0.85em;
-          border-radius: 7px;
+          /*border-radius: 7px;*/
           margin-bottom: 25px;
+          min-width: 80px;
          }
         
         #mandateLogin {
@@ -132,7 +133,7 @@
         
         button {
           height: 25px;
-          width: 90px;
+          width: 75px;
           margin-bottom: 10px;
         }
         
@@ -153,16 +154,16 @@
         #localBKU input {
           font-size: 0.6em;
           min-width: 60px;
-          max-width: 65px;
+         /* max-width: 65px; */
           min-height: 1.0em;
-          border-radius: 5px;
+         /* border-radius: 5px; */
         }
         
-        #bkuselectionarea button {
-          font-size: 0.8em;
-          min-width: 65px;
-          min-height: 1.3em;
-          border-radius: 5px;
+        #bkuselectionarea input[type=button] {
+          font-size: 0.7em;
+          min-width: 55px;
+          /*min-height: 1.1em;
+          border-radius: 5px;*/
           margin-bottom: 2%
         }
         
@@ -171,8 +172,13 @@
         }
         
         #bku_header h2 {
-          font-size: 0.8em;
-          margin-top: -0.4em;
+          font-size: 0.75em;
+          margin-top: -0.37em;
+          padding-top: 0.37em;
+        }
+        
+        #bkulogin {
+        min-height: 150px;
         } 
       }
 
@@ -184,16 +190,16 @@
         #localBKU input {
           font-size: 0.7em;
           min-width: 70px;
-          max-width: 75px;
+       /*    max-width: 75px;    */
           min-height: 0.95em;
-          border-radius: 6px;
+        /*  border-radius: 6px;    */
         }
         
-        #bkuselectionarea button{
-          font-size: 0.85em;
-          min-width: 70px;
-          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%
         }
         
@@ -202,9 +208,14 @@
         }
         
         #bku_header h2 {
-          font-size: 0.9em;
-          margin-top: -0.45em;
-        } 
+          font-size: 0.8em;
+          margin-top: -0.40em;
+          padding-top: 0.40em;
+        }
+        
+        #bkulogin {
+          min-height: 180px;
+        }  
       }
 
       @media screen and (max-width: 299px) and (min-width: 250px) {
@@ -215,14 +226,14 @@
         #localBKU input {
           font-size: 0.8em;
           min-width: 70px;
-          max-width: 75px;
-          border-radius: 6px;
+       /*    max-width: 75px;      */
+      /*    border-radius: 6px;  */
         }
         
-        #bkuselectionarea button {
-          font-size: 1.0em;
-          min-height: 1.05em;
-          border-radius: 7px;
+        #bkuselectionarea input[type=button] {
+          font-size: 0.85em;
+     /*     min-height: 1.05em;
+          border-radius: 7px;        */
           margin-bottom: 10%;
         }
         
@@ -231,8 +242,9 @@
         }
         
         #bku_header h2 {
-          font-size: 1.0em;
-          margin-top: -0.50em;
+          font-size: 0.9em;
+          margin-top: -0.45em;
+          padding-top: 0.45em;
         } 
       }
 
@@ -244,15 +256,16 @@
         #localBKU input {
           font-size: 0.8em;
           min-width: 70px;
-          max-width: 75px;
-          border-radius: 6px;
+      /*     max-width: 75px;     */
+      /*    border-radius: 6px;       */
         }
         
-        #bkuselectionarea button {
-          font-size: 1.1em;
-          min-height: 1.2em;
-          border-radius: 8px;
+        #bkuselectionarea input[type=button] {
+          font-size: 0.9em;
+   /*       min-height: 1.2em;
+          border-radius: 8px;          */
           margin-bottom: 10%;
+          max-width: 80px;
         }
         
         #mandateLogin {
@@ -262,6 +275,7 @@
         #bku_header h2 {
           font-size: 1.1em;
           margin-top: -0.55em;
+          padding-top: 0.55em;
         } 
       }
       
@@ -273,15 +287,16 @@
         #localBKU input {
           font-size: 0.8em;
           min-width: 70px;
-          max-width: 80px;
-          border-radius: 6px;
+      /*     max-width: 80px;       */
+     /*     border-radius: 6px;          */
         }
         
-        #bkuselectionarea button {
-          font-size: 1.3em;
-          min-height: 1.3em;
-          border-radius: 10px;
+        #bkuselectionarea input[type=button] {
+          font-size: 1.0em;
+     /*      min-height: 1.3em;
+         border-radius: 10px;         */
           margin-bottom: 10%;
+          max-width: 85px;
         }
         
         #mandateLogin {
@@ -291,6 +306,7 @@
         #bku_header h2 {
           font-size: 1.3em;
           margin-top: -0.65em;
+          padding-top: 0.65em;
         } 
       }
 
@@ -337,9 +353,9 @@
 			    margin-bottom: 0px;
 			    text-align: left;
 			    border:none;
-          min-width: 190px;
-          min-height: 190px;
           vertical-align: middle;
+          min-height: 173px;
+          min-width: 204px;
           
 			  }
 			  
@@ -352,14 +368,13 @@
         h2#tabheader{
           padding-left: 2%;
           padding-right: 2%;
-          padding-top: 1%;
           position: relative;
           top: 50%;
 			  }
         
        	#bkulogin {	
           min-width: 190px;
-          min-height: 150px;	
+          min-height: 155px;	
 			 }
         
 			 .setAssertionButton_full {
@@ -370,8 +385,8 @@
 			      height: 25px;
 			 }
        
-        button {
-          height: 11%;
+        input[type=button] {
+/*          height: 11%;  */
           width: 70%;
         }
 			}
@@ -379,7 +394,6 @@
 			* {
 				margin: 0;
 				padding: 0;
-				border: 0;
         font-family: "#FONTTYPE#";
 			}
 							      			
@@ -416,8 +430,8 @@
 			}
 			
       #mandateLogin {
-        padding-bottom: 2%;
-        padding-top: 2%;
+        padding-bottom: 4%;
+        padding-top: 4%;
         height: 10%;
         position: relative;
         text-align: center;
@@ -442,7 +456,8 @@
       #localBKU {
         padding-left: 5%;
         padding-right: 2%;
-        padding-bottom: 2%;
+        padding-bottom: 4%;
+        padding-top: 4%;
         position: relative;
         clear: both;        
 			}
@@ -474,31 +489,42 @@
 				text-align:center;
 				padding : 5px 5px 5px 5px;
 			}
-			
-			button, .sendButton {
+      
+/*		input[type=button], .sendButton {
 				background: #BUTTON_BACKGROUNDCOLOR#;
         color: #BUTTON_COLOR#;
-				border:1px solid #000;
-				cursor: pointer;
-        box-shadow: 3px 3px 3px #222222;
-			}
+/*				border:1px solid #000;  */
+/*				cursor: pointer;
+/*        box-shadow: 3px 3px 3px #222222;  */
+/*			}
 			
-      button:hover, button:focus, button:active, 
+/*      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;
-			}
-      
+/*				border:1px solid #000;                */
+/*				cursor: pointer;
+/*        box-shadow: -1px -1px 3px #222222;  */
+/*			}
       
+*/      
 			input {
-				border:1px solid #000;
+				/*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;
@@ -656,14 +682,14 @@
       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", width);
-			iframe.setAttribute("height", el.clientHeight);
+			iframe.setAttribute("width", el.clientWidth - 1);
+			iframe.setAttribute("height", el.clientHeight - 1);
 			iframe.setAttribute("frameborder", "0");
 			iframe.setAttribute("scrolling", "no");
 			iframe.setAttribute("title", "Login");
@@ -741,23 +767,23 @@
                   <img class="bkuimage"
                         src="#CONTEXTPATH#/img/online-bku.png" 
                         alt="OnlineBKU"/>					                                  
-                  <button name="bkuButton" 
+                  <input name="bkuButtonOnline" 
                           type="button" 
                           onClick="bkuOnlineClicked();"
                           tabindex="2"
-                          role="button">KARTE                                  
-                  </button>							                              
+                          role="button"
+                          value="Karte"/>                    							                              
                 </div>	 							                              
                 <div id="bkuhandy">
                   <img  class="bkuimage"
                         src="#CONTEXTPATH#/img/mobile-bku.png" 
                         alt="HandyBKU"/>								                                  
-                  <button name="bkuButton" 
+                  <input name="bkuButtonHandy" 
                           type="button" 
                           onClick="bkuHandyClicked();"
                           tabindex="3"
-                          role="button">HANDY                                  
-                  </button>							                              
+                          role="button"
+                          value="HANDY"/>                        
                 </div>
               </div>			     					                              
               <div id="localBKU">								                                  								                                  
@@ -770,13 +796,13 @@
                   <input  type="hidden" name="ACTION" value="#ACTION#">									                                      
                   <input  type="hidden" name="MOASessionID" value="#SESSIONID#">									                                      
                   <input  type="submit" 
-                          value="lokale BKU"
-                          class="sendButton"
+                          value=">lokale Bürgerkartenumgebung"
                           tabindex="4"
-                          role="button">
-                  <p>
+                          role="button"
+                          class="hell">
+                  <!--p>
                     <small>Alternativ können Sie eine lokal installierte BKU verwenden.</small>								                                  
-                  </p>								                                  
+                  </p-->								                                  
                 </form>								                                                          
               </div>
                                                  
diff --git a/id/server/idserverlib/src/main/resources/resources/templates/sendAssertionFormFull.html b/id/server/idserverlib/src/main/resources/resources/templates/sendAssertionFormFull.html
index cc715fa4f..b80d654cc 100644
--- a/id/server/idserverlib/src/main/resources/resources/templates/sendAssertionFormFull.html
+++ b/id/server/idserverlib/src/main/resources/resources/templates/sendAssertionFormFull.html
@@ -114,7 +114,7 @@
 			    height: 30px;
           font-size: 1.3em;
           min-height: 1.3em;
-          border-radius: 10px;
+/*          border-radius: 10px;*/
 			  }
 			
 			  #leftbutton  {
@@ -161,7 +161,7 @@
           font-size: 0.8em;
           min-width: 65px;
           min-height: 1.3em;
-          border-radius: 5px;
+  /*        border-radius: 5px;         */
           margin-bottom: 2%
         }
         
@@ -191,7 +191,7 @@
           font-size: 0.85em;
           min-width: 70px;
           min-height: 0.95em;
-          border-radius: 6px;
+  /*        border-radius: 6px;        */
           margin-bottom: 2%
         }
         
@@ -219,7 +219,7 @@
         #bkuselectionarea button, .setAssertionButton_full {
           font-size: 1.0em;
           min-height: 1.05em;
-          border-radius: 7px;
+ /*         border-radius: 7px;          */
           margin-bottom: 5%;
         }
         
@@ -247,7 +247,7 @@
         #bkuselectionarea button, .setAssertionButton_full {
           font-size: 1.1em;
           min-height: 1.2em;
-          border-radius: 8px;
+  /*        border-radius: 8px;     */
           margin-bottom: 5%;
         }
         
@@ -275,7 +275,7 @@
         #bkuselectionarea button, .setAssertionButton_full {
           font-size: 1.3em;
           min-height: 1.3em;
-          border-radius: 10px;
+/*          border-radius: 10px;  */
           margin-bottom: 5%;
         }
         
@@ -333,7 +333,7 @@
 			    text-align: left;
 			    border:none;
           min-width: 190px;
-          min-height: 190px;
+/*          min-height: 190px;  */
           vertical-align: middle;
           
 			  }
@@ -378,7 +378,7 @@
 			* {
 				margin: 0;
 				padding: 0;
-				border: 0;
+/*				border: 0;  */
         font-family: #FONTTYPE#;
 			}
 							      			
@@ -475,21 +475,23 @@
 			}
 			
 			button, .sendButton {
-				background: #BUTTON_BACKGROUNDCOLOR#;
-        color: #BUTTON_COLOR#;
-				border:1px solid #000;
-				cursor: pointer;
-        box-shadow: 3px 3px 3px #222222;
+/*				background: #BUTTON_BACKGROUNDCOLOR#;
+        color: #BUTTON_COLOR#;  */
+        cursor: pointer;
+        
+/*				border:1px solid #000;
+        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;
+/*				background: #BUTTON_BACKGROUNDCOLOR_FOCUS#;
+        color: #BUTTON_COLOR#;  */        
+        cursor: pointer;
+        
+/*				border:1px solid #000;
+        box-shadow: -1px -1px 3px #222222;  */
 			}
       			
 			#installJava, #BrowserNOK {