Acq communication

This commit is contained in:
Cédric
2025-12-07 20:52:41 +01:00
parent d32e892095
commit 2621ffd618
6 changed files with 140 additions and 60 deletions

View File

@@ -1,86 +1,110 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MASI 3DSecure</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
header,
footer {
background: #f4f4f4;
padding: 15px;
text-align: center;
}
main {
padding: 20px;
}
#payment
{
#payment {
display: none;
}
</style>
</head>
<body>
<main>
<div id="login">
<h2>Login</h2>
<input id="username-field" placeholder="Username">
<br>
<input id="password-field" placeholder="Password">
<br>
<button id="connect-button">Connect</button>
</div>
<div id="payment">
<h2>Payment</h2>
<input id="token-input" placeholder="Token">
<br>
<button>Pay</button>
</div>
</main>
<main>
<div id="login">
<h2>Login</h2>
<input id="username-field" placeholder="Username">
<br>
<input id="password-field" placeholder="Password">
<br>
<button id="connect-button">Connect</button>
</div>
<div id="payment">
<h2>Payment</h2>
<input id="token-input" placeholder="Token">
<br>
<button id="connect-button-pay">Pay</button>
</div>
</main>
<script>
<script>
let btnConnect = document.getElementById("connect-button");
let btnPay = document.getElementById("connect-button-pay");
let btnConnect = document.getElementById("connect-button");
let btnPay = document.getElementById("connect-button");
btnConnect.addEventListener("click", async() => {
let username = document.getElementById("username-field").value;
let pwd = document.getElementById("password-field").value;
btnConnect.addEventListener("click", async () => {
let username = document.getElementById("username-field").value;
let pwd = document.getElementById("password-field").value;
let data = {
username: username,
password: pwd
};
let data = {
username: username,
password: pwd
};
await fetch("/login", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => {
if (response.ok) {
localStorage.setItem("creds", JSON.stringify(data));
document.getElementById("payment").style.display = 'block';
} else {
throw new Error("Authentication request failed")
}
})
.catch(error => {
console.error(error);
});
});
await fetch("/login", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)})
.then(response => {
if(response.ok) {
localStorage.setItem("creds", JSON.stringify(data));
document.getElementById("payment").style.display = 'block';
} else {
throw new Error("Authentication request failed")
}
})
.catch(error => {
console.error(error);
});
});
btnPay.addEventListener("click", async() => {
</script>
let token = document.getElementById("token-input").value;
await fetch("/payement", {
method: "POST",
headers: {
"Content-Type": "application/json"
//"Authorization" : "username:password"
},
body: JSON.stringify(token)
})
.then(response => {
if (response.ok) {
//Logique à executer si serveur répond avec 200 HTTP
} else {
throw new Error("Payment request failed")
}
})
.catch(error => {
console.error(error);
});
})
</script>
</body>
</html>