Merge pull request 'Upload files to "/"' (#4) from nestict/mitrobill:master into master
Reviewed-on: #4
This commit is contained in:
commit
8f099bdefb
643
login.html
Normal file
643
login.html
Normal file
@ -0,0 +1,643 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>yatmack</title>
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.8.3/core.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
<link href='https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap' rel='stylesheet'>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
navy: {
|
||||||
|
DEFAULT: '#023047',
|
||||||
|
50: '#e6f0f5',
|
||||||
|
100: '#cce1eb',
|
||||||
|
200: '#99c3d7',
|
||||||
|
300: '#66a5c3',
|
||||||
|
400: '#3387af',
|
||||||
|
500: '#023047',
|
||||||
|
600: '#022640',
|
||||||
|
700: '#011d39',
|
||||||
|
800: '#011332',
|
||||||
|
900: '#010a2b'
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
DEFAULT: '#fb8500',
|
||||||
|
50: '#fff4e6',
|
||||||
|
100: '#ffe9cc',
|
||||||
|
200: '#ffd399',
|
||||||
|
300: '#ffbd66',
|
||||||
|
400: '#ffa733',
|
||||||
|
500: '#fb8500',
|
||||||
|
600: '#cc6d00',
|
||||||
|
700: '#995200',
|
||||||
|
800: '#663600',
|
||||||
|
900: '#331b00'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
'lexend': ['Lexend', 'sans-serif'],
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'spin-fast': 'spin 0.5s linear infinite',
|
||||||
|
'fade-in': 'fadeIn 0.3s ease-in-out',
|
||||||
|
'slide-up': 'slideUp 0.3s ease-out'
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
fadeIn: {
|
||||||
|
'0%': { opacity: '0' },
|
||||||
|
'100%': { opacity: '1' }
|
||||||
|
},
|
||||||
|
slideUp: {
|
||||||
|
'0%': { transform: 'translateY(10px)', opacity: '0' },
|
||||||
|
'100%': { transform: 'translateY(0)', opacity: '1' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="font-lexend min-h-screen bg-gradient-to-b from-navy to-navy/95 text-gray-100">
|
||||||
|
<div class="container mx-auto px-2 py-4 max-w-3xl">
|
||||||
|
<div class="bg-white/10 backdrop-blur-lg rounded-2xl shadow-xl mb-6 overflow-hidden border border-white/10">
|
||||||
|
<div class="p-3 relative">
|
||||||
|
<h1 class="text-2xl font-bold text-center text-orange mb-3">YATMACK HOTSPOT</h1>
|
||||||
|
<p class="text-gray-100/90 text-center text-sm mb-4">
|
||||||
|
Select package ? Enter M-Pesa number ? Complete payment
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center justify-center gap-2 py-2 px-4 bg-white/5 rounded-xl">
|
||||||
|
<i class="fas fa-headset text-orange"></i>
|
||||||
|
<p class="text-sm font-medium">Support: 254705042522</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="py-2 sm:py-1 lg:py-1">
|
||||||
|
<div class="mx-auto max-w-screen-2xl px-1 md:px-1">
|
||||||
|
<div class="mx-auto max-w-lg grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 gap-4 p-1" id="cards-container">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button onclick="redeemVoucher()" class="w-full bg-orange hover:bg-orange/90 text-white font-medium py-4 px-6 rounded-xl shadow-lg transition duration-200 flex items-center justify-center gap-3 mb-6">
|
||||||
|
<i class="fas fa-ticket-alt"></i>
|
||||||
|
<span>Redeem Voucher</span>
|
||||||
|
</button>
|
||||||
|
<div class="bg-white/10 backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden border border-white/10 mb-6">
|
||||||
|
<div class="p-6 space-y-8">
|
||||||
|
<!-- Reconnect with M-Pesa -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="text-lg font-semibold text-orange">Reconnect with M-Pesa</h3>
|
||||||
|
<div class="flex flex-col sm:flex-row gap-3">
|
||||||
|
<input id="mpesaCodeInput" type="text" placeholder="Enter M-Pesa code (e.g., SCK15SKB4Z)" class="flex-grow px-4 py-3 bg-white/5 border border-white/10 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange/50 text-white placeholder:text-gray-400">
|
||||||
|
<button id="reconnectBtn" class="bg-orange hover:bg-orange/90 text-white font-medium py-3 px-6 rounded-xl transition duration-200">Reconnect</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="text-lg font-semibold text-orange">Active Package Login</h3>
|
||||||
|
<form id="loginForm" action="$(link-login-only)" method="post" $(if chap-id)onSubmit="return doLogin()" $(endif)>
|
||||||
|
<input type="hidden" name="dst" value="$(link-orig)">
|
||||||
|
<input type="hidden" name="popup" value="true">
|
||||||
|
<input type="hidden" name="mac" id="mac" value="$(mac)">
|
||||||
|
<div class="flex flex-col sm:flex-row gap-3">
|
||||||
|
<input id="usernameInput" name="username" type="text" placeholder="Enter Username (e.g., ACC123456)" class="flex-grow px-4 py-3 bg-white/5 border border-white/10 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange/50 text-white placeholder:text-gray-400">
|
||||||
|
<button id="submitBtn" type="button" onclick="submitLogin()" class="bg-orange hover:bg-orange/90 text-white font-medium py-3 px-6 rounded-xl transition duration-200">Connect</button>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" name="password" value="1234">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-sm text-gray-400">© 2025 yatmack. Created by Smartisp</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function fetchData() {
|
||||||
|
var domain = 'https://yatmack2.smartisp.co.ke/';
|
||||||
|
var siteUrl = domain + "/index.php?_route=plugin/hotspot_plan";
|
||||||
|
var routerName = encodeURIComponent("yatmack");
|
||||||
|
var dataparams = `routername=${routerName}`;
|
||||||
|
fetch(siteUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded'
|
||||||
|
},
|
||||||
|
body: dataparams
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Error ${response.status}: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
populateCards(data);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Fetch error:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function populateCards(data) {
|
||||||
|
var cardsContainer = document.getElementById('cards-container');
|
||||||
|
cardsContainer.innerHTML = ''; // Clear existing content
|
||||||
|
// Sort the plans by price in ascending order
|
||||||
|
data.data.forEach(router => {
|
||||||
|
// Sort hotspot plans by price
|
||||||
|
router.plans_hotspot.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
|
||||||
|
router.plans_hotspot.forEach(item => {
|
||||||
|
var cardDiv = document.createElement('div');
|
||||||
|
cardDiv.className = 'bg-white border border-black rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-lg flex flex-col items-center justify-between mx-auto mb-4 w-40';
|
||||||
|
cardDiv.innerHTML = `
|
||||||
|
<div class="bg-blue-500 text-white w-full py-1">
|
||||||
|
<h2 class="text-sm font-medium uppercase text-center" style="font-size: clamp(0.75rem, 1.5vw, 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||||||
|
${item.planname}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-2 flex-grow">
|
||||||
|
<p class="text-2xl font-bold text-blue-600 mb-1">
|
||||||
|
<span class="text-lg font-medium text-black">${item.currency}</span>
|
||||||
|
${item.price}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-black mb-2">
|
||||||
|
Valid for ${item.validity} ${item.timelimit}
|
||||||
|
</p>
|
||||||
|
<hr class="border-black mb-2">
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-2 flex-shrink-0">
|
||||||
|
<a href="#" class="inline-block bg-gray-900 text-white hover:bg-blue-600 font-semibold py-1 px-4 rounded-lg transition duration-300 text-md"
|
||||||
|
onclick="handlePhoneNumberSubmission('${item.planId}', '${item.routerId}'); return false;"
|
||||||
|
data-plan-id="${item.planId}"
|
||||||
|
data-router-id="${item.routerId}">
|
||||||
|
Buy
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
cardsContainer.appendChild(cardDiv);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
fetchData();
|
||||||
|
function getMacAddress() {
|
||||||
|
return "$(mac)"; // MikroTik replaces this with the user's MAC address
|
||||||
|
}
|
||||||
|
|
||||||
|
function getOrCreateAccountId() {
|
||||||
|
var radiaxid = localStorage.getItem('radiaxid');
|
||||||
|
if (!radiaxid) {
|
||||||
|
radiaxid = getMacAddress();
|
||||||
|
localStorage.setItem('radiaxid', radiaxid);
|
||||||
|
setCookie('radiaxid', radiaxid, 365);
|
||||||
|
}
|
||||||
|
return radiaxid;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAccountId() {
|
||||||
|
return localStorage.getItem('radiaxid') || getCookie('radiaxid') || getMacAddress();
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatPhoneNumber(phoneNumber) {
|
||||||
|
if (phoneNumber.startsWith('+')) {
|
||||||
|
phoneNumber = phoneNumber.substring(1);
|
||||||
|
}
|
||||||
|
if (phoneNumber.startsWith('0')) {
|
||||||
|
phoneNumber = '254' + phoneNumber.substring(1);
|
||||||
|
}
|
||||||
|
if (phoneNumber.match(/^(7|1)/)) {
|
||||||
|
phoneNumber = '254' + phoneNumber;
|
||||||
|
}
|
||||||
|
return phoneNumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setCookie(name, value, days) {
|
||||||
|
var expires = "";
|
||||||
|
if (days) {
|
||||||
|
var date = new Date();
|
||||||
|
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||||
|
expires = "; expires=" + date.toUTCString();
|
||||||
|
}
|
||||||
|
document.cookie = name + "=" + (value || "") + expires + "; path=/";
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCookie(name) {
|
||||||
|
var nameEQ = name + "=";
|
||||||
|
var ca = document.cookie.split(';');
|
||||||
|
for (var i = 0; i < ca.length; i++) {
|
||||||
|
var c = ca[i];
|
||||||
|
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
|
||||||
|
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
var loginTimeout;
|
||||||
|
function handlePhoneNumberSubmission(planId, routerId, price) {
|
||||||
|
var accountId = getOrCreateAccountId();
|
||||||
|
var modalHtml = `
|
||||||
|
<div id="paymentModal" class='fixed inset-0 bg-black/30 backdrop-blur-sm z-50 animate-fade-in'>
|
||||||
|
<div class="fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-md">
|
||||||
|
<div class="bg-white text-black rounded-lg shadow-xl">
|
||||||
|
<div class="flex items-center justify-between p-4 border-b border-gray-300">
|
||||||
|
<h5 class="text-xl font-semibold">
|
||||||
|
Enter Your Mpesa Number
|
||||||
|
</h5>
|
||||||
|
<button class="text-gray-500 hover:text-black" onclick="closeModal('paymentModal')">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<div class="bg-navy-50 border-l-4 border-navy-400 p-4 rounded-md mb-4"> <div class="flex"> <div class="flex-shrink-0"> <svg class="h-5 w-5 text-navy-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1 4v.01m6.938-2.162A9 9 0 1111 3v0a9 9 0 018.938 10.838z" /> </svg> </div> <div class="ml-3"> <p class="text-sm text-navy-700"> You are about to initiate M-pesa payment. Enter phone number below and click Pay Now to initialize payment. </p> </div> </div></div> <input type="text" class="w-full px-4 py-3 border border-orange-300 rounded-lg focus:ring-2 focus:ring-navy-400 focus:border-blue-500 text-black" id="phoneNumberInput" required placeholder="e.g. 0712345678">
|
||||||
|
<div class="text-red-500 mt-1 hidden" id="invalidPhone">Please enter a valid phone number!</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end space-x-2 p-4 border-t border-gray-300">
|
||||||
|
<button onclick="closeModal('paymentModal')" class="px-4 py-2 bg-orange text-black rounded-lg hover:bg-gray-300">Close</button>
|
||||||
|
<button id="payNowBtn" class="px-4 py-2 bg-navy text-white font-semibold hover:from-blue-600 hover:to-blue-500 flex items-center rounded-lg">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||||
|
</svg>
|
||||||
|
Pay Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||||
|
var modal = document.getElementById('paymentModal');
|
||||||
|
modal.classList.remove('hidden');
|
||||||
|
var payNowBtn = document.getElementById('payNowBtn');
|
||||||
|
var phoneInput = document.getElementById('phoneNumberInput');
|
||||||
|
phoneInput.focus();
|
||||||
|
payNowBtn.addEventListener('click', function() { handlePayment(); });
|
||||||
|
function handlePayment() {
|
||||||
|
if (!phoneInput.value) {
|
||||||
|
document.getElementById('invalidPhone').classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
payNowBtn.disabled = true;
|
||||||
|
payNowBtn.innerHTML = `
|
||||||
|
<svg class='animate-spin -ml-1 mr-3 h-5 w-5 text-white' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
|
||||||
|
<circle class='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'></circle>
|
||||||
|
<path class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'></path>
|
||||||
|
</svg>
|
||||||
|
Processing...
|
||||||
|
`;
|
||||||
|
var formattedPhoneNumber = formatPhoneNumber(phoneInput.value);
|
||||||
|
document.getElementById('usernameInput').value = accountId;
|
||||||
|
|
||||||
|
fetch('https://yatmack2.smartisp.co.ke/index.php?_route=plugin/CreateHotspotuser&type=grant', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify({
|
||||||
|
phone_number: formattedPhoneNumber,
|
||||||
|
plan_id: planId,
|
||||||
|
router_id: routerId,
|
||||||
|
account_id: accountId
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.status === 'error') throw new Error(data.message);
|
||||||
|
closeModal('paymentModal');
|
||||||
|
showProcessingModal();
|
||||||
|
checkPaymentStatus(formattedPhoneNumber);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
closeModal('paymentModal');
|
||||||
|
showErrorModal(error.message);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showProcessingModal() {
|
||||||
|
var processingModalHtml = `
|
||||||
|
<div id='processingModal' class='fixed inset-0 bg-black/30 backdrop-blur-sm z-50 animate-fade-in'>
|
||||||
|
<div class='fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-md animate-slide-up'>
|
||||||
|
<div class='bg-gradient-to-br from-white to-gray-50 shadow-2xl rounded-2xl p-8 text-center border border-gray-100'>
|
||||||
|
<div class='flex justify-center'>
|
||||||
|
<svg class='animate-spin h-20 w-20 text-navy-500' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
|
||||||
|
<circle class='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'></circle>
|
||||||
|
<path class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 bg-navy-50/50 backdrop-blur-xs border border-navy-200 rounded-xl p-6 shadow-lg"> <div class="flex items-center space-x-4"> <svg class="h-8 w-8 text-navy-400 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1 4v.01m6.938-2.162A9 9 0 1111 3v0a9 9 0 018.938 10.838z" /> </svg> <div class="flex-1"> <h2 class="text-xl font-semibold text-navy-600 font-lexend">Initializing Payment</h2> <p class="text-navy-500 mt-2">A payment request has been sent to your phone. Please wait while we process your payment.</p> </div> </div> <div class="mt-4 h-2 w-full bg-navy-100 rounded-full overflow-hidden"> <div class="h-2 bg-navy-400 rounded-full animate-pulse"></div> </div> </div> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
document.body.insertAdjacentHTML('beforeend', processingModalHtml);
|
||||||
|
}
|
||||||
|
function closeModal(modalId) {
|
||||||
|
var modal = document.getElementById(modalId);
|
||||||
|
if (modal) {
|
||||||
|
modal.classList.add('hidden');
|
||||||
|
setTimeout(function() { modal.remove(); }, 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSuccessModal() {
|
||||||
|
var successModalHtml = `
|
||||||
|
<div id='successModal' class='fixed inset-0 bg-black/60 backdrop-blur-sm z-50 transition-all duration-300'>
|
||||||
|
<div class='fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 ease-out'>
|
||||||
|
<div class='bg-white/95 backdrop-blur-md shadow-2xl rounded-3xl p-8 text-center border border-gray-200/50 ring-1 ring-gray-900/5'>
|
||||||
|
<div class='flex justify-center mb-6'>
|
||||||
|
<div class='relative'>
|
||||||
|
<div class='absolute inset-0 rounded-full bg-green-500/20 animate-pulse'></div>
|
||||||
|
<svg class='h-16 w-16 text-green-500' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
|
||||||
|
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='space-y-4'>
|
||||||
|
<h2 class='text-2xl font-semibold text-gray-900'>Payment Successful</h2>
|
||||||
|
<div class='bg-green-50 rounded-2xl p-6 border border-green-100'>
|
||||||
|
<div class='flex items-center gap-4'>
|
||||||
|
<svg class='h-6 w-6 text-green-500 flex-shrink-0' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
|
||||||
|
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4'/>
|
||||||
|
</svg>
|
||||||
|
<p class='text-sm text-green-700'>Your transaction has been completed successfully. You will be redirected shortly.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
document.body.insertAdjacentHTML('beforeend', successModalHtml);
|
||||||
|
setTimeout(function() { closeModal('successModal'); }, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showErrorModal(errorMsg) {
|
||||||
|
var errorModalHtml = `
|
||||||
|
<div id='errorModal' class='fixed inset-0 bg-black/60 backdrop-blur-sm z-50 transition-all duration-300'>
|
||||||
|
<div class='fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 ease-out'>
|
||||||
|
<div class='bg-white/95 backdrop-blur-md shadow-2xl rounded-3xl p-8 text-center border border-gray-200/50 ring-1 ring-gray-900/5'>
|
||||||
|
<div class='flex justify-center mb-6'>
|
||||||
|
<div class='relative'>
|
||||||
|
<div class='absolute inset-0 rounded-full bg-red-500/20 animate-pulse'></div>
|
||||||
|
<svg class='h-16 w-16 text-red-500' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
|
||||||
|
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='space-y-4'>
|
||||||
|
<h2 class='text-2xl font-semibold text-gray-900'>Payment Failed</h2>
|
||||||
|
<div class='bg-red-50 rounded-2xl p-6 border border-red-100'>
|
||||||
|
<div class='flex items-center gap-4'>
|
||||||
|
<svg class='h-6 w-6 text-red-500 flex-shrink-0' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
|
||||||
|
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/>
|
||||||
|
</svg>
|
||||||
|
<p class='text-sm text-red-700'>An error occurred while processing your payment. Please try again.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
document.body.insertAdjacentHTML('beforeend', errorModalHtml);
|
||||||
|
setTimeout(function() { closeModal('errorModal'); }, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkPaymentStatus(phoneNumber) {
|
||||||
|
var accountId = getOrCreateAccountId();
|
||||||
|
var checkInterval = setInterval(function() {
|
||||||
|
fetch('https://yatmack2.smartisp.co.ke/index.php?_route=plugin/CreateHotspotuser&type=verify', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify({account_id: accountId})
|
||||||
|
})
|
||||||
|
.then(function(response) { return response.json(); })
|
||||||
|
.then(function(data) {
|
||||||
|
console.log('Raw Response:', data);
|
||||||
|
if (data.Resultcode === '3') {
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
closeModal('processingModal');
|
||||||
|
showSuccessModal();
|
||||||
|
if (loginTimeout) clearTimeout(loginTimeout);
|
||||||
|
loginTimeout = setTimeout(function() { document.getElementById('loginForm').submit(); }, 2000);
|
||||||
|
} else if (data.Resultcode === '2') {
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
closeModal('processingModal');
|
||||||
|
showErrorModal(data.Message);
|
||||||
|
} else {
|
||||||
|
console.error('Unexpected result code:', data.Resultcode);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function(error) {
|
||||||
|
console.error('Error during fetch request:', error);
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
closeModal('processingModal');
|
||||||
|
showErrorModal('An error occurred while checking payment status.');
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
closeModal('processingModal');
|
||||||
|
showErrorModal('Timeout while waiting for payment confirmation.');
|
||||||
|
}, 300000); // 5 minutes
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
var accountId = getOrCreateAccountId();
|
||||||
|
var usernameInput = document.getElementById('usernameInput');
|
||||||
|
if (usernameInput && !usernameInput.value) {
|
||||||
|
usernameInput.value = accountId;
|
||||||
|
}
|
||||||
|
var submitBtn = document.getElementById('submitBtn');
|
||||||
|
if (submitBtn) {
|
||||||
|
submitBtn.addEventListener('click', function() {
|
||||||
|
document.getElementById('loginForm').submit();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var loginTimeout; // Variable to store the timeout ID
|
||||||
|
function redeemVoucher() {
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Redeem Voucher',
|
||||||
|
input: 'text',
|
||||||
|
inputPlaceholder: 'Enter voucher code',
|
||||||
|
inputValidator: function(value) {
|
||||||
|
if (!value) {
|
||||||
|
return 'You need to enter a voucher code!';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
confirmButtonColor: '#3085d6',
|
||||||
|
cancelButtonColor: '#d33',
|
||||||
|
confirmButtonText: 'Redeem',
|
||||||
|
showLoaderOnConfirm: true,
|
||||||
|
preConfirm: (voucherCode) => {
|
||||||
|
var accountId = voucherCode;
|
||||||
|
return fetch('https://yatmack2.smartisp.co.ke/index.php?_route=plugin/CreateHotspotuser&type=voucher', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify({voucher_code: voucherCode, account_id: accountId}),
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) throw new Error('Network response was not ok');
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
if (data.status === 'error') throw new Error(data.message);
|
||||||
|
return data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
allowOutsideClick: () => !Swal.isLoading()
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'success',
|
||||||
|
title: 'Voucher Redeemed',
|
||||||
|
text: result.value.message,
|
||||||
|
showConfirmButton: false,
|
||||||
|
allowOutsideClick: false,
|
||||||
|
didOpen: () => {
|
||||||
|
Swal.showLoading();
|
||||||
|
var username = result.value.username;
|
||||||
|
console.log('Received username from server:', username);
|
||||||
|
var usernameInput = document.querySelector('input[name="username"]');
|
||||||
|
if (usernameInput) {
|
||||||
|
console.log('Found username input element.');
|
||||||
|
usernameInput.value = username;
|
||||||
|
loginTimeout = setTimeout(function() {
|
||||||
|
var loginForm = document.getElementById('loginForm');
|
||||||
|
if (loginForm) {
|
||||||
|
loginForm.submit();
|
||||||
|
} else {
|
||||||
|
console.error('Login form not found.');
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
text: 'Login form not found. Please try again.',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
} else {
|
||||||
|
console.error('Username input element not found.');
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
text: 'Username input not found. Please try again.',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Oops...',
|
||||||
|
text: error.message,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
var reconnectBtn = document.getElementById('reconnectBtn');
|
||||||
|
var mpesaCodeInput = document.getElementById('mpesaCodeInput');
|
||||||
|
var macInput = document.getElementById('mac');
|
||||||
|
var loginForm = document.getElementById('loginForm');
|
||||||
|
if (reconnectBtn) {
|
||||||
|
reconnectBtn.addEventListener('click', function() {
|
||||||
|
// Validate inputs before processing
|
||||||
|
if (!mpesaCodeInput || !macInput || !loginForm) {
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
text: 'Required form elements are missing'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var mpesaCode = mpesaCodeInput.value.trim().split(' ')[0];
|
||||||
|
var mac = macInput.value.trim();
|
||||||
|
fetch('https://yatmack2.smartisp.co.ke/index.php?_route=plugin/ReconnectUser', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify({ mpesa_code: mpesaCode, mac: mac }),
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
console.log('Response data:', data);
|
||||||
|
var resultCode = data.Resultcode;
|
||||||
|
var message = data.Message;
|
||||||
|
var status = data.Status;
|
||||||
|
var username = data.username;
|
||||||
|
if (resultCode === '1') {
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Invalid Code',
|
||||||
|
text: message
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (resultCode === '3') {
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Expired Package',
|
||||||
|
text: message
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (resultCode === '2') {
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'success',
|
||||||
|
title: status,
|
||||||
|
text: message,
|
||||||
|
showConfirmButton: false,
|
||||||
|
allowOutsideClick: false,
|
||||||
|
didOpen: () => {
|
||||||
|
Swal.showLoading();
|
||||||
|
console.log('Received username from server:', username);
|
||||||
|
var usernameInput = document.querySelector('input[name="username"]');
|
||||||
|
if (usernameInput) {
|
||||||
|
console.log('Found username input element.');
|
||||||
|
usernameInput.value = username;
|
||||||
|
setTimeout(function() {
|
||||||
|
var loginForm = document.getElementById('loginForm');
|
||||||
|
if (loginForm) {
|
||||||
|
loginForm.submit();
|
||||||
|
} else {
|
||||||
|
console.error('Login form not found.');
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
text: 'Login form not found. Please try again.',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
} else {
|
||||||
|
console.error('Username input element not found.');
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
text: 'Username input not found. Please try again.',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
Swal.fire({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Oops...',
|
||||||
|
text: error.message
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.error('Reconnect button not found');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user