diff options
Diffstat (limited to 'simpleSigning/src/main/webapp/index.jsp')
| -rw-r--r-- | simpleSigning/src/main/webapp/index.jsp | 203 |
1 files changed, 151 insertions, 52 deletions
diff --git a/simpleSigning/src/main/webapp/index.jsp b/simpleSigning/src/main/webapp/index.jsp index 993c17f..290ab44 100644 --- a/simpleSigning/src/main/webapp/index.jsp +++ b/simpleSigning/src/main/webapp/index.jsp @@ -5,85 +5,184 @@ <script type="text/javascript" src="pdfas.js"></script> <script type="text/javascript"> - - function sign() { - var op = { - }; - - var typeOption = document.getElementById("type"); - - if(typeOption.options[typeOption.selectedIndex].value == "TEXT") { - pdfAs.signText(op, function(code, msg) { - var element = document.getElementById("Error"); - element.innerHTML="<p>Error: "+code+" (" + msg + ")</p>"; - }, function(pdfurl) { - var element = document.getElementById("Result"); - element.innerHTML="<a href=\"" + pdfurl + "\">ready</a>"; - }); - } else { - pdfAs.signPdf(op, function(code, msg) { - var element = document.getElementById("Error"); - element.innerHTML="<p>Error: "+code+" (" + msg + ")</p>"; - }, function(pdfurl) { - var element = document.getElementById("Result"); - element.innerHTML="<a href=\"" + pdfurl + "\">ready</a>"; - }); - } + function clearDiv() { + document.getElementById("embedded").innerHTML = ""; + document.getElementById("btnSign").disabled = false; } - + function signWidthContent() { + + document.getElementById("btnSign").disabled = true; + document.getElementById("Error").style.display = "none"; + document.getElementById("Result").style.display = "none"; + var valueContent = document.getElementById("txtContent").value; - + var op = { - content: valueContent + content : valueContent }; + var dispOption = document.getElementById("disp"); + + if (dispOption.options[dispOption.selectedIndex].value == "EMBEDDED") { + op.uiId = "embedded"; + } + var typeOption = document.getElementById("type"); - - if(typeOption.options[typeOption.selectedIndex].value == "TEXT") { - pdfAs.signText(op, function(code, msg) { + + if (typeOption.options[typeOption.selectedIndex].value == "TEXT") { + pdfAs.signText(op, function(code, msg) { var element = document.getElementById("Error"); - element.innerHTML="<p>Error: "+code+" (" + msg + ")</p>"; + element.innerHTML = "<p>Error: " + code + " (" + msg + ")</p>"; + element.style.display = "block"; + clearDiv(); }, function(pdfurl) { var element = document.getElementById("Result"); - element.innerHTML="<a href=\"" + pdfurl + "\">ready</a>"; + element.innerHTML = "<a href=\"" + pdfurl + "\">ready</a>"; + element.style.display = "block"; + clearDiv(); }); } else { - pdfAs.signPdf(op, function(code, msg) { + pdfAs.signPdf(op, function(code, msg) { var element = document.getElementById("Error"); - element.innerHTML="<p>Error: "+code+" (" + msg + ")</p>"; + element.innerHTML = "<p>Error: " + code + " (" + msg + ")</p>"; + element.style.display = "block"; + clearDiv(); }, function(pdfurl) { var element = document.getElementById("Result"); - element.innerHTML="<a href=\"" + pdfurl + "\">ready</a>"; + element.innerHTML = "<a href=\"" + pdfurl + "\">ready</a>"; + element.style.display = "block"; + clearDiv(); }); } + // so we don't follow the form ... + return false; } </script> - +<!-- Bootstrap core CSS --> +<link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> + <div class="container"> + <div class="row marketing"> + <div class="col-12"> + <h2>Einfach signieren mit JavaScript</h2> + + <p>Dieses Tool bietet eine einfach zu integrierende JavaScript + Bibliothek, mit der beliebiger Text bzw. PDF Dokumente mit der + Handy-Signatur bzw. Bürgerkarte signiert werden können.</p> + <p>Die JavaScript Bibliothek bzw. die PDF Signaturtools werden + über die Seite Bürgerkarte.at zentral angeboten und + können über diese in wenigen Schritten in beliebige + Webseiten integriert werden.</p> + + </div> + </div> + <hr> + <div class="row marketing"> + <div class="col-lg-6"> + + <p>Hier ein Beispiel welches Einfach signieren + verwendet.</p> + + <hr> + + <div class="alert alert-danger" role="alert" id="Error" + style="display: none"></div> + + <div class="alert alert-success" role="alert" id="Result" + style="display: none"></div> + + <form role="form"> + <div class="form-group"> + <label for="type">Dokumententyp: </label> <select id="type"> + <option value="TEXT">Text</option> + <option value="PDF">PDF</option> + </select> + </div> + <div class="form-group"> + <label for="disp">Integration: </label> <select id="disp"> + <option value="DIALOG">Dialog</option> + <option value="EMBEDDED">Embedded</option> + </select> + </div> + <div class="form-group"> + <label for="txtContent">Signaturdaten (Text oder Link zu + einem PDF Dokument, optional): </label> <input type="text" id="txtContent"> + </div> + <button id="btnSign" onclick="return signWidthContent();">Unterschreiben</button> + </form> + + </div> + + <div class="col-lg-6" id="embedded"></div> + </div> + <hr> + <div class="row marketing"> + <div class="col-12"> + <h4>Technische Anleitung zur Verwendung der JavaScript + Bibliothek:</h4> + <p>Inkludieren der JavaScript Bibliothek:</p> + + <p><script type="text/javascript" + src="http://demo.egiz.gv.at/simpleSign/pdfas.js"></script></p> -<select id="type"> - <option value="TEXT">Text</option> - <option value="PDF">PDF</option> -</select> + <p>Diese Bibliothek erzeugt ein JavaScript Objekt pdfAs. Dieses + Objekt hat zwei Funktionen signText und signPdf.</p> -<p> -<input type="text" id="txtContent"></input> -</p> + <p> + signText wird verwendet um einfach Text zu signieren, dabei wird + automatisch ein PDF Dokument erzeugt, welches den Text als Inhalt + hat:<br> <script type="text/javascript"><br> + var op = {<br> content: "Der zu signierende Text", + // Diese Eigenschaft ist optional, wenn ausgelassen wird dem + Benutzer ein Texteingabefeld gezeigt. Dies ist der Inhalt der + signiert werden soll.<br> connector: "bku", // Diese + Eigenschaft ist optional, wenn ausgelassen wird dem Benutzer + gefragt. Moegliche Werte sind: "bku" -> Signatur mit + der lokalen BKU, "onlinebku" -> Signatur mit der + online BKU, "mobilebku" -> Signatur mit der Handy + Signatur<br> uiId: "exampleDiv" // Diese Eigenschaft + ist optional, wenn ausgelassen wird ein Overlay erzeugt. Dies ist + die id eines div elements in das das iframe zur Benutzerinteraktion + eingefuegt werden soll.<br> };<br> pdfAs.signText(op, + function(error, cause) {<br> //fehler error aufgetreten wegen + cause <br> }, function(pdfurl) { <br> //signiertes + Dokument liegt bei pdfurl<br> });<br> </script> + </p> -<p> -<button onclick="sign()">Sign</button> -</p> -<p> -<button onclick="signWidthContent()">Sign Content</button> -</p> -<div id="Error"></div> + <p> + signPdf wird verwendet um ein PDF Dokument zu signieren:<br> + <script type="text/javascript"><br> var op = {<br> + content: "http://www.example.com/test.pdf", // Diese + Eigenschaft ist optional, wenn ausgelassen wird dem Benutzer ein + File Upload angezeigt. Dies ist eine URL zum PDF Dokument welches + signiert werden soll.<br> connector: "bku", // Diese + Eigenschaft ist optional, wenn ausgelassen wird dem Benutzer + gefragt. Moegliche Werte sind: "bku" -> Signatur mit + der lokalen BKU, "onlinebku" -> Signatur mit der + online BKU, "mobilebku" -> Signatur mit der Handy + Signatur<br> uiId: "exampleDiv" // Diese Eigenschaft + ist optional, wenn ausgelassen wird ein Overlay erzeugt. Dies ist + die id eines div elements in das das iframe zur Benutzerinteraktion + eingefuegt werden soll.<br> };<br> pdfAs.signPdf(op, + function(error, cause) {<br> //fehler error aufgetreten wegen + cause <br> }, function(pdfurl) {<br> //signiertes + Dokument liegt bei pdfurl<br> });<br> </script> + </p> + </div> + </div> -<div id="Result"></div> + <hr> -<div style="width:800px;height:600px;border:1px" id="test"></div> + <div class="footer"> + <p>© EGIZ 2014</p> + </div> + </div> + <!-- /container --> + <script src="jquery.js"></script> + <script src="js/bootstrap.min.js"></script> </body> </html>
\ No newline at end of file |