dyzulk/twinpath-hotspot-themes
1
0
Fork 0
mirror of https://github.com/dyzulk/twinpath-hotspot-themes.git synced 2026-01-26 05:25:40 +07:00
Code Issues Packages Projects Releases 2 Wiki Activity

Feature: Implement Voucher Check (Opsi A) with 3-tab UI

Browse Source
This commit is contained in:
dyzulk
2026-01-12 09:47:24 +07:00
parent 1036249082
commit 77a66a643a
6 changed files with 148 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
js/config.js
View File

@@ -2,12 +2,12 @@ const brandConfig = {
brandName: "TwinpathNet",
portalUrl: "http://welcome.dyzulk.com/login",
allowedDomains: [
"welcome.dyzulk.com", // Main Portal
"10.0.0.1", // Default Gateway (Local IP)
"dyzulk.com" // Custom Domain
"welcome.dyzulk.com"
],
creditName: "dyzulk.com",
creditUrl: "https://dyzulk.com",
mikhmonUrl: "https://mikhmon.dyzulk.com",
mikhmonSession: "Twinpath-Net",
assets: {
logo: "img/logo-twinpath.svg",
icon_ticket: "svg/ticket.svg",
@@ -23,7 +23,8 @@ const brandConfig = {
icon_clock: "svg/clock.svg",
icon_upload: "svg/upload-cloud.svg",
icon_download: "svg/download-cloud.svg",
icon_wifi: "svg/wifi.svg"
icon_wifi: "svg/wifi.svg",
icon_search: "svg/search.svg"
}
};

20
js/languages.js
View File

@@ -54,7 +54,15 @@ const translations = {
qr_err_unauthorized: "Domain Tidak Sah",
qr_err_invalid_url: "URL Login Hotspot Tidak Sah",
qr_err_invalid_content: "Konten Tidak Sah (Hanya URL)",
qr_err_parse: "Gagal Membaca QR"
qr_err_parse: "Gagal Membaca QR",
tab_info: "Info",
info_label: "Cek Masa Aktif",
check_btn: "Cek Status",
check_loading: "Mengecek voucher...",
check_not_found: "Voucher tidak ditemukan atau belum aktif.",
check_expired: "Voucher sudah kadaluarsa.",
check_valid_until: "Aktif sampai",
check_quota_remaining: "Sisa Kuota"
},
en: {
lang_name: "English",
@@ -111,7 +119,15 @@ const translations = {
qr_err_unauthorized: "Unauthorized Domain",
qr_err_invalid_url: "Invalid Hotspot Login URL",
qr_err_invalid_content: "Invalid Content (Only URL allowed)",
qr_err_parse: "QR Parse Error"
qr_err_parse: "QR Parse Error",
tab_info: "Info",
info_label: "Check Validity",
check_btn: "Check Status",
check_loading: "Checking voucher...",
check_not_found: "Voucher not found or not active.",
check_expired: "Voucher has expired.",
check_valid_until: "Valid until",
check_quota_remaining: "Quota Remaining"
}
};

27
js/qr-scanner.js
View File

@@ -87,14 +87,28 @@ function handleDecodedText(decodedText) {
const overlay = document.getElementById('qr-confirm-overlay');
const confirmUser = document.getElementById('confirm-user');
const connectBtn = document.querySelector('button[onclick="proceedSubmit()"]');
const confirmMsg = document.querySelector('[data-i18n="confirm_msg"]');
// Determine mode from active tab
const activeTab = document.querySelector('.tab-btn.active');
const isInfoMode = activeTab && activeTab.onclick.toString().includes('info');
if (overlay && confirmUser) {
if (isUnauthorized) {
confirmUser.innerHTML = `<span style="color: #ff4d4d;">Blocked: ${blockReason}</span>`;
if (connectBtn) connectBtn.style.display = 'none';
} else {
confirmUser.innerText = username;
if (connectBtn) connectBtn.style.display = 'block';
if (connectBtn) {
connectBtn.style.display = 'block';
if (isInfoMode) {
connectBtn.innerText = getTranslation('check_btn');
if (confirmMsg) confirmMsg.innerText = getTranslation('info_label');
} else {
connectBtn.innerText = getTranslation('connect_btn');
if (confirmMsg) confirmMsg.innerText = getTranslation('confirm_msg');
}
}
}
overlay.classList.remove('hidden');
}
@@ -111,6 +125,17 @@ function cancelConfirm() {
}
function proceedSubmit() {
// Determine mode from active tab
const activeTab = document.querySelector('.tab-btn.active');
const isInfoMode = activeTab && activeTab.onclick.toString().includes('info');
if (isInfoMode) {
const username = document.getElementById('confirm-user').innerText;
checkVoucher(username);
closeQR();
return;
}
// If it's a URL, redirect directly
if (scannedUrl) {
console.log("Redirecting to scanned URL:", scannedUrl);

100
js/script.js
View File

@@ -1,38 +1,43 @@
function setMode(mode) {
const voucherMode = document.getElementById('voucher-mode');
const memberMode = document.getElementById('member-mode');
const voucherTab = document.querySelector('.tab-btn:nth-child(1)');
const memberTab = document.querySelector('.tab-btn:nth-child(2)');
const infoMode = document.getElementById('info-mode');
const tabs = document.querySelectorAll('.tab-btn');
const loginBtn = document.getElementById('login-btn');
const checkBtn = document.getElementById('check-btn');
const form = document.login;
// Reset visibility
[voucherMode, memberMode, infoMode, loginBtn, checkBtn].forEach(el => {
if (el) el.classList.add('hidden');
});
tabs.forEach(t => t.classList.remove('active'));
if (mode === 'voucher') {
voucherMode.classList.remove('hidden');
memberMode.classList.add('hidden');
voucherTab.classList.add('active');
memberTab.classList.remove('active');
// Sync to form immediately
if (voucherMode) voucherMode.classList.remove('hidden');
if (loginBtn) loginBtn.classList.remove('hidden');
tabs[0].classList.add('active');
if (form) {
const code = document.getElementById('voucher-input').value;
form.username.value = code;
form.password.value = document.getElementById('voucher-pass').value || code;
}
} else {
voucherMode.classList.add('hidden');
memberMode.classList.remove('hidden');
voucherTab.classList.remove('active');
memberTab.classList.add('active');
// Sync to form immediately
} else if (mode === 'member') {
if (memberMode) memberMode.classList.remove('hidden');
if (loginBtn) loginBtn.classList.remove('hidden');
tabs[1].classList.add('active');
if (form) {
form.username.value = document.getElementById('member-user').value;
form.password.value = document.getElementById('member-pass').value;
}
} else if (mode === 'info') {
if (infoMode) infoMode.classList.remove('hidden');
if (checkBtn) checkBtn.classList.remove('hidden');
tabs[2].classList.add('active');
}
// Update login button text based on mode
const loginBtn = document.getElementById('login-btn');
if (loginBtn) {
// Update login button text based on mode (only for voucher/member)
if (loginBtn && (mode === 'voucher' || mode === 'member')) {
const lang = localStorage.getItem('twinpath_lang') || 'en';
const key = mode === 'voucher' ? 'login_voucher' : 'login_member';
loginBtn.setAttribute('data-i18n', key);
@@ -176,6 +181,65 @@ function updateProgressBars() {
}
}
function checkVoucher(forceCode = null) {
const input = document.getElementById('info-input');
const code = forceCode || (input ? input.value.trim() : "");
if (!code) return;
const overlay = document.getElementById('qr-confirm-overlay');
const confirmUser = document.getElementById('confirm-user');
const confirmMsg = document.querySelector('[data-i18n="confirm_msg"]');
const connectBtn = document.querySelector('button[onclick="proceedSubmit()"]');
// Show loading state in overlay
if (overlay && confirmUser) {
confirmUser.innerText = getTranslation('check_loading');
if (connectBtn) connectBtn.style.display = 'none';
overlay.classList.remove('hidden');
}
const mikhmonUrl = brandConfig.mikhmonUrl;
const session = brandConfig.mikhmonSession;
const url = `${mikhmonUrl}/status/index.php?session=${session}&nama=${code}&json=true`;
fetch(url)
.then(response => response.json())
.then(data => {
if (data.status === 'active') {
confirmUser.innerHTML = `
<div style="font-size: 0.85rem; text-align: left; margin-top: 5px;">
<div style="margin-bottom: 8px; border-bottom: 1px solid #333; padding-bottom: 4px; color: #50e3c2; font-weight: bold;">${data.profile}</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div>
<div style="font-size: 0.65rem; color: #888;">UPTIME</div>
<div style="color: #fff;">${data.uptime}</div>
</div>
<div>
<div style="font-size: 0.65rem; color: #888;">QUOTA</div>
<div style="color: #fff;">${data.data_left}</div>
</div>
</div>
<div style="margin-top: 10px;">
<div style="font-size: 0.65rem; color: #888;">EXPIRED AT</div>
<div style="color: #ff4d4d; font-family: monospace;">${data.expired_at}</div>
</div>
</div>
`;
if (confirmMsg) confirmMsg.innerText = getTranslation('success_title');
} else if (data.status === 'expired') {
confirmUser.innerHTML = `<span style="color: #ff4d4d;">${getTranslation('check_expired')}</span>`;
if (confirmMsg) confirmMsg.innerText = getTranslation('failed_title');
} else {
confirmUser.innerHTML = `<span style="color: #aaa;">${getTranslation('check_not_found')}</span>`;
if (confirmMsg) confirmMsg.innerText = getTranslation('failed_title');
}
})
.catch(err => {
console.error("AJAX Error:", err);
confirmUser.innerHTML = `<span style="color: #ff4d4d;">CORS/Connection Error</span><br><small style="font-size: 10px; color: #666;">Check Mikhmon Address & CORS</small>`;
});
}
function initDashboard() {
// 1. Set Greetings
const greetingEl = document.getElementById('greeting-text');

17
login.html
View File

@@ -53,6 +53,9 @@
<div class="tab-btn" onclick="setMode('member')">
<img src="svg/user.svg" alt="" data-asset="icon_user"> <span data-i18n="tab_member">Member</span>
</div>
<div class="tab-btn" onclick="setMode('info')">
<img src="svg/clock.svg" alt="" data-asset="icon_clock"> <span data-i18n="tab_info">Info</span>
</div>
</div>
<!-- Login Form -->
@@ -94,11 +97,23 @@
</div>
</div>
<!-- Info/Check Mode -->
<div id="info-mode" class="hidden">
<div class="input-group">
<label class="input-label" data-i18n="info_label">Check Validity</label>
<div class="input-wrapper">
<img src="svg/search.svg" class="input-icon-img" alt="" data-asset="icon_search">
<input type="text" id="info-input" class="input-field input-with-icon" data-i18n="voucher_placeholder" placeholder="Enter code to check...">
</div>
</div>
</div>
<!-- Action Buttons -->
<div style="display: grid; gap: 0.75rem;">
<button type="submit" id="login-btn" class="btn btn-primary" data-i18n="login_voucher">Use Voucher</button>
<button type="button" id="check-btn" class="btn btn-primary hidden" onclick="checkVoucher()" data-i18n="check_btn">Check Status</button>
<button type="button" class="btn btn-outline" onclick="openQR()">
<button type="button" class="btn btn-outline" id="scan-btn" onclick="openQR()">
<img src="svg/scan-line.svg" width="16" height="16" alt="" data-asset="icon_scan" style="margin-right: 0.5rem; vertical-align: text-bottom;">
<span data-i18n="scan_btn">Scan QR Code</span>
</button>

1
svg/search.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 278 B