cangui/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

xwwxxw

Browse Source
This commit is contained in:
cangui 2025-05-06 22:23:06 +02:00
parent dcb36bf059
commit a23a3e064a
1 changed files with 47 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
public/login.html
View File

@ -2,116 +2,66 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Connexion WhatsApp & Envoi Interactif</title> <title>Connexion WhatsApp</title>
<style> <style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: auto; padding: 20px; } body {
h1, h2 { text-align: center; } font-family: Arial, sans-serif;
#qrcode { text-align: center; margin-bottom: 20px; } text-align: center;
form { display: flex; flex-direction: column; gap: 10px; } background: #f2f2f2;
label { display: flex; flex-direction: column; font-weight: bold; } padding: 40px;
input { padding: 8px; font-size: 1rem; } }
button { padding: 10px; font-size: 1rem; cursor: pointer; } #qr-container {
#result { margin-top: 15px; font-weight: bold; } margin-top: 40px;
hr { margin: 30px 0; } }
#qr {
max-width: 300px;
margin: auto;
display: block;
}
#status {
margin-top: 20px;
font-size: 18px;
color: #444;
}
</style> </style>
</head> </head>
<body> <body>
<h1>Scanne le QR Code WhatsApp</h1> <h1>Connexion WhatsApp</h1>
<div id="qrcode">Chargement...</div> <p>Scannez le QR Code avec votre application WhatsApp</p>
<hr> <div id="qr-container">
<img id="qr" src="" alt="QR Code WhatsApp" />
<h2>Envoyer du message interactif avec image</h2> <div id="status">Chargement du QR code...</div>
<form id="interactiveForm"> </div>
<label>
Téléphone (sans +, ex: 33612345678):
<input type="text" name="phone" required placeholder="33612345678">
</label>
<label>
Caption:
<input type="text" name="caption" placeholder="Description par défaut">
</label>
<label>
Title:
<input type="text" name="title" placeholder="Titre par défaut">
</label>
<label>
Subtitle:
<input type="text" name="subtitle" placeholder="Sous-titre">
</label>
<label>
Footer:
<input type="text" name="footer" placeholder="Pied de page">
</label>
<label>
URL Proposition:
<input type="url" name="propositionUrl" placeholder="https://exemple.com/prop.pdf" required>
</label>
<label>
URL Spec Machine:
<input type="url" name="specUrl" placeholder="https://exemple.com/spec.pdf" required>
</label>
<button type="submit">Envoyer le message</button>
</form>
<div id="result"></div>
<script> <script>
// Vérification du QR code et statut de connexion async function fetchQRCode() {
async function checkQR() { try {
try { const res = await fetch('/api/qrcode');
const res = await fetch('/api/qrcode'); const data = await res.json();
const data = await res.json();
console.log('Réponse /api/qrcode :', data);
const qrContainer = document.getElementById('qrcode'); const qrImg = document.getElementById('qr');
if (data.connected) { const status = document.getElementById('status');
qrContainer.innerHTML = '✅ Connecté à WhatsApp !';
} else if (data.qr) { if (data.connected) {
// Si data.qr est une chaîne (Data-URL) qrImg.style.display = 'none';
if (typeof data.qr === 'string') { status.textContent = "✅ Connecté à WhatsApp";
qrContainer.innerHTML = `<img src="${data.qr}" alt="QR Code WhatsApp" width="200" height="200"/>`; } else if (data.qr) {
} qrImg.src = data.qr;
// Sinon, si c'est un objet { data: […], mime: 'image/png' } qrImg.style.display = 'block';
else if (data.qr.data) { status.textContent = "QR code prêt à être scanné";
const uint8Array = new Uint8Array(data.qr.data);
const base64 = btoa(String.fromCharCode(...uint8Array));
const src = `data:${data.qr.mime};base64,${base64}`;
qrContainer.innerHTML = `<img src="${src}" alt="QR Code WhatsApp" width="200" height="200"/>`;
} else { } else {
qrContainer.textContent = 'QR reçu, mais format non pris en charge.'; status.textContent = "⏳ En attente de génération du QR code...";
} }
} else { } catch (error) {
qrContainer.textContent = 'Pas encore de QR disponible.'; console.error("Erreur de récupération QR:", error);
document.getElementById('status').textContent = "❌ Impossible de charger le QR Code";
} }
} catch (err) {
console.error('Erreur checkQR:', err);
} }
setTimeout(checkQR, 3000);
}
checkQR();
// Envoi du formulaire interactif // Rafraîchit toutes les 5 secondes
document.getElementById('interactiveForm').addEventListener('submit', async (e) => { fetchQRCode();
e.preventDefault(); setInterval(fetchQRCode, 5000);
const formData = new FormData(e.target);
const body = {};
formData.forEach((value, key) => body[key] = value);
const res = await fetch('/sendInteractiveImage', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
const data = await res.json();
const resultDiv = document.getElementById('result');
if (data.success) {
resultDiv.textContent = '✅ Message envoyé avec succès';
resultDiv.style.color = 'green';
} else {
resultDiv.textContent = '❌ Erreur : ' + (data.error || 'Inconnue');
resultDiv.style.color = 'red';
}
});
</script> </script>
</body> </body>
</html> </html>