From f67427831d1f8c49ce6c474691b880d90a42b584 Mon Sep 17 00:00:00 2001 From: Thomas Lenz Date: Mon, 14 Mar 2016 09:17:57 +0100 Subject: refactor the GUI generation for user interaction --- .../conf/moa-id/htmlTemplates/css_template.css | 625 +++++++++++++++ .../conf/moa-id/htmlTemplates/error_message.html | 37 + .../moa-id/htmlTemplates/javascript_tempalte.js | 200 +++++ .../conf/moa-id/htmlTemplates/loginFormFull.html | 874 +-------------------- .../conf/moa-id/htmlTemplates/redirectForm.html | 13 + .../htmlTemplates/sendAssertionFormFull.html | 581 +------------- .../conf/moa-id/htmlTemplates/slo_template.html | 372 +-------- 7 files changed, 906 insertions(+), 1796 deletions(-) create mode 100644 id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css create mode 100644 id/server/data/deploy/conf/moa-id/htmlTemplates/error_message.html create mode 100644 id/server/data/deploy/conf/moa-id/htmlTemplates/javascript_tempalte.js create mode 100644 id/server/data/deploy/conf/moa-id/htmlTemplates/redirectForm.html (limited to 'id/server/data/deploy/conf/moa-id/htmlTemplates') diff --git a/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css b/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css new file mode 100644 index 000000000..a8735be60 --- /dev/null +++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/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/data/deploy/conf/moa-id/htmlTemplates/error_message.html b/id/server/data/deploy/conf/moa-id/htmlTemplates/error_message.html new file mode 100644 index 000000000..4fd4d63cd --- /dev/null +++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/error_message.html @@ -0,0 +1,37 @@ + + + + + + An error arise ... + + + +
+
+

Authentication error arise

+ + + + + +
+

The authentication stops on account of a process error:

+
+

Error Code: $errorCode

+

Error Message:$errorMsg

+
+ + + #if($stacktrace) +
+

Stacktrace: $stacktrace

+
+ #end + + + +
+
+ + \ No newline at end of file diff --git a/id/server/data/deploy/conf/moa-id/htmlTemplates/javascript_tempalte.js b/id/server/data/deploy/conf/moa-id/htmlTemplates/javascript_tempalte.js new file mode 100644 index 000000000..e4e05bace --- /dev/null +++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/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/data/deploy/conf/moa-id/htmlTemplates/loginFormFull.html b/id/server/data/deploy/conf/moa-id/htmlTemplates/loginFormFull.html index af133525e..02b86472b 100644 --- a/id/server/data/deploy/conf/moa-id/htmlTemplates/loginFormFull.html +++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/loginFormFull.html @@ -4,847 +4,29 @@ - - - + + + + Anmeldung mittels Bürgerkarte oder Handy-Signatur
-

Anmeldung an: #OAName#

+

Anmeldung an: $OAName

-

#HEADER_TEXT#

+

$HEADER_TEXT

-
+
+ onClick='document.getElementById("mandateCheckBox").setAttribute("aria-checked", document.getElementById("mandateCheckBox").checked);'$MANDATECHECKED> -
+

Home Country Selection

i @@ -907,16 +87,6 @@

-
diff --git a/id/server/data/deploy/conf/moa-id/htmlTemplates/redirectForm.html b/id/server/data/deploy/conf/moa-id/htmlTemplates/redirectForm.html new file mode 100644 index 000000000..ac3242c89 --- /dev/null +++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/redirectForm.html @@ -0,0 +1,13 @@ + + + + + + + + + CLICK to perform a + redirect back to Online Application + + diff --git a/id/server/data/deploy/conf/moa-id/htmlTemplates/sendAssertionFormFull.html b/id/server/data/deploy/conf/moa-id/htmlTemplates/sendAssertionFormFull.html index 07d018a94..a9f0c4238 100644 --- a/id/server/data/deploy/conf/moa-id/htmlTemplates/sendAssertionFormFull.html +++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/sendAssertionFormFull.html @@ -3,556 +3,7 @@ - - + Anmeldung an Online-Applikation @@ -574,25 +25,21 @@
-

Anmeldung an: #OAName#

+

Anmeldung an: $OAName

-
+ - - - - + +
-
+ - - - - + +
@@ -600,18 +47,6 @@
-
diff --git a/id/server/data/deploy/conf/moa-id/htmlTemplates/slo_template.html b/id/server/data/deploy/conf/moa-id/htmlTemplates/slo_template.html index a9d73e0d3..b3eb18082 100644 --- a/id/server/data/deploy/conf/moa-id/htmlTemplates/slo_template.html +++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/slo_template.html @@ -3,377 +3,7 @@ - + #if($timeoutURL)