status-im
/
EIPs
mirror of https://github.com/status-im/EIPs.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

improvements to html implementation

This commit is contained in:
wighawag 2016-05-10 18:39:24 +01:00
parent d7bdc8c10a
commit f3cb9f599e
1 changed files with 65 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
EIPS/draft-dapp-html-authorization.md
View File

@ -198,13 +198,13 @@ That's it
<p id="infomessage">Please wait...</p> <p id="infomessage">Please wait...</p>
</div> </div>
<div id="form" class="wrapper"> <form id="form" class="wrapper">
<br/> <br/>
<p id="message" class="message"></p> <p id="message" class="message"></p>
<p id="passwordField"><label>Password Required:</label><input id="password" type="password" /></p> <p id="passwordField"><label>Password Required:</label><input id="password" type="password" /></p>
<button id="cancel-button" autofocus>Cancel</button> <button id="cancel-button" type="button" autofocus>Cancel</button>
<button id="confirm-button" >Confirm</button> <button id="confirm-button" type="button" >Confirm</button>
</div> </form>
<div id="modal-dialog" class="wrapper"> <div id="modal-dialog" class="wrapper">
<h3 id="modal-dialog-title" class="title">Title</h3> <h3 id="modal-dialog-title" class="title">Title</h3>
@ -213,6 +213,8 @@ That's it
</div> </div>
<script> <script>
var noMessageReceivedYet = true;
var closedByCode = false;
var pleaseWait = document.getElementById("pleasewait"); var pleaseWait = document.getElementById("pleasewait");
var form = document.getElementById("form"); var form = document.getElementById("form");
var cancelButton = document.getElementById("cancel-button"); var cancelButton = document.getElementById("cancel-button");
@ -235,7 +237,13 @@ That's it
}else if(window.parent != window){ }else if(window.parent != window){
source = window.parent; source = window.parent;
}else{ }else{
console.error("no opener nor parent"); console.log("closing");
window.close();
}
function closeWindow(){
closedByCode = true;
window.close();
} }
function showWaiting(){ function showWaiting(){
@ -272,8 +280,12 @@ That's it
} }
} }
function hideMessage(){
modalDialog.style.display = "none";
modalDialogButton.onclick = null;
}
function sendAsync(url,payload, callback) { function sendAsync(url,payload, callback) {
//var url = window.location.protocol + '//' + window.location.host; // this would force the use of the iframe url
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.open('POST', url, true); request.open('POST', url, true);
request.setRequestHeader('Content-Type','application/json'); request.setRequestHeader('Content-Type','application/json');
@ -286,7 +298,7 @@ That's it
result = JSON.parse(result); result = JSON.parse(result);
} catch(e) { } catch(e) {
var message = !!result && !!result.error && !!result.error.message ? result.error.message : 'Invalid JSON RPC response: ' + JSON.stringify(result); var message = !!result && !!result.error && !!result.error.message ? result.error.message : 'Invalid JSON RPC response: ' + JSON.stringify(result);
error = {message:message}; error = {message:message,type:"JsonParse"};
} }
callback(error, result); callback(error, result);
} }
@ -295,7 +307,7 @@ That's it
try { try {
request.send(JSON.stringify(payload)); request.send(JSON.stringify(payload));
} catch(e) { } catch(e) {
callback({message:'CONNECTION ERROR: Couldn\'t connect to node '+ url +'.'}); callback({message:'CONNECTION ERROR: Couldn\'t connect to node '+ url +'.',type:"noConnection"});
} }
} }
@ -305,8 +317,7 @@ That's it
size: 8, size: 8,
scale: 6 scale: 6
}); });
//icon.style="vertical-align:middle"; message.appendChild(icon);
message.appendChild(icon); //
} }
function askAuthorization(transactionInfo, data, requireUnlock, sourceWindow){ function askAuthorization(transactionInfo, data, requireUnlock, sourceWindow){
@ -331,7 +342,6 @@ That's it
var span = document.createElement('span'); var span = document.createElement('span');
span.style="font-size:3em;"; span.style="font-size:3em;";
span.innerHTML = "&nbsp;&nbsp;&nbsp;" + "&#x2192;" + "&nbsp;&nbsp;&nbsp;"; span.innerHTML = "&nbsp;&nbsp;&nbsp;" + "&#x2192;" + "&nbsp;&nbsp;&nbsp;";
//span.innerHTML = "&#10145;";
message.appendChild(span); message.appendChild(span);
addBlocky(message,transactionInfo.to); addBlocky(message,transactionInfo.to);
@ -342,21 +352,21 @@ That's it
textSpan.innerHTML = etherValue.toFormat() + " ether <br/> + gas cost (" + gasEtherValue.toFormat() + " ether )" textSpan.innerHTML = etherValue.toFormat() + " ether <br/> + gas cost (" + gasEtherValue.toFormat() + " ether )"
if(requireUnlock){ if(requireUnlock){
passwordField.style.display = "block"; //inline ? passwordField.style.display = "block";
}else{ }else{
passwordField.style.display = "none"; passwordField.style.display = "none";
} }
cancelButton.onclick = function(){ cancelButton.onclick = function(){
sourceWindow.postMessage({id:data.id,result:null,error:{message:"Not Authorized"}},sourceWindow.location.href); sourceWindow.postMessage({id:data.id,result:null,error:{message:"Not Authorized"},type:"cancel"},sourceWindow.location.href);
window.close(); closeWindow();
} }
confirmButton.onclick = function(){ var submitFunc = function(){
if(requireUnlock){ if(requireUnlock){
if(password.value == ""){ if(password.value == ""){
password.style.border = "2px solid red"; password.style.border = "2px solid red";
return; return false;
} }
password.style.border = "none"; password.style.border = "none";
var params = [transactionInfo.from,password.value,3]; var params = [transactionInfo.from,password.value,3];
@ -365,27 +375,32 @@ That's it
if(error || result.error){ if(error || result.error){
showMessage("Error unlocking account", "Please retry.", hideWaiting); showMessage("Error unlocking account", "Please retry.", hideWaiting);
}else{ }else{
sendAsync(data.url,data.payload,function(error,result){ //data.url to allow use of different but trusted domain sendAsync(data.url,data.payload,function(error,result){
sourceWindow.postMessage({id:data.id,result:result,error:error},sourceWindow.location.href); sourceWindow.postMessage({id:data.id,result:result,error:error},sourceWindow.location.href);
window.close(); closeWindow();
}); });
showWaiting(); showWaiting();
} }
}); });
}else{ }else{
sendAsync(data.url,data.payload,function(error,result){ //data.url to allow use of different but trusted domain sendAsync(data.url,data.payload,function(error,result){
if(result && result.error){ if(result && result.error){
processMessage(data,sourceWindow); processMessage(data,sourceWindow);
}else{ }else{
sourceWindow.postMessage({id:data.id,result:result,error:error},sourceWindow.location.href); sourceWindow.postMessage({id:data.id,result:result,error:error},sourceWindow.location.href);
window.close(); closeWindow();
} }
}); });
showWaiting(); showWaiting();
} }
return false;
} }
form.onsubmit = submitFunc;
confirmButton.onclick = submitFunc;
} }
function needToAndCanUnlockAccount(address,url,callback){ function needToAndCanUnlockAccount(address,url,callback){
@ -412,16 +427,26 @@ That's it
}else{ }else{
firstUrl = event.origin; firstUrl = event.origin;
} }
hideMessage();
noMessageReceivedYet = false;
var data = event.data; var data = event.data;
try{
processMessage(data,event.source); processMessage(data,event.source);
}catch(e){
event.source.postMessage({id:data.id,result:null,error:{message:"Could not process message data"},type:"notValid"},event.source.location.href);
showMessage("Error","The application has sent invalid data", function(){
closeWindow();
});
}
} }
function processMessage(data, sourceWindow){ function processMessage(data, sourceWindow){
if(data.payload.method == "eth_sendTransaction" || data.payload.method == "eth_sign"){ if(data.payload.method == "eth_sendTransaction" || data.payload.method == "eth_sign"){
if(inIframe){ if(inIframe){
sourceWindow.postMessage({id:data.id,result:null,error:{message:"Cannot make call that require an unlokced key (" + data.payload.method + ") via iframe"}},sourceWindow.location.href); sourceWindow.postMessage({id:data.id,result:null,error:{message:"Cannot make call that require an unlocked key (" + data.payload.method + ") via iframe"},type:"notAllowed"},sourceWindow.location.href);
}else if(data.payload.method == "eth_sign"){ }else if(data.payload.method == "eth_sign"){
sourceWindow.postMessage({id:data.id,result:null,error:{message:"cannot sign transaction (" + data.payload.method + ") via html"}},sourceWindow.location.href); sourceWindow.postMessage({id:data.id,result:null,error:{message:"cannot sign transaction (" + data.payload.method + ") via html",type:"notAllowed"}},sourceWindow.location.href);
}else{ }else{
var transactionInfo = null; var transactionInfo = null;
if(data.payload.params.length > 0){ if(data.payload.params.length > 0){
@ -450,17 +475,31 @@ That's it
}); });
}else{ }else{
sourceWindow.postMessage({id:data.id,result:null,error:{message:"Need to specify from , to, gas and gasPrice"}},sourceWindow.location.href); sourceWindow.postMessage({id:data.id,result:null,error:{message:"Need to specify from , to, gas and gasPrice"},type:"notValid"},sourceWindow.location.href);
window.close(); closeWindow();
} }
} }
}else{ }else{
sendAsync(data.url,data.payload,function(error,result){ //data.url to allow use of different but trusted domain sendAsync(data.url,data.payload,function(error,result){
sourceWindow.postMessage({id:data.id,result:result,error:error},sourceWindow.location.href); sourceWindow.postMessage({id:data.id,result:result,error:error},sourceWindow.location.href);
}); });
} }
} }
window.onbeforeunload = function (event) {
if(!closedByCode){
source.postMessage({id:data.id,result:null,error:{message:"Not Authorized",type:"cancel"}},source.location.href);
}
};
function checkMessageNotReceived(){
if(noMessageReceivedYet){
showMessage("Error","No transaction received. Please make sure popup are not blocked.", function(){
closeWindow();
});
}
}
setTimeout(checkMessageNotReceived,1000);
window.addEventListener("message", receiveMessage); window.addEventListener("message", receiveMessage);
if(source){ if(source){