mirror of
https://github.com/mivodev/mivo.git
synced 2026-01-26 05:25:42 +07:00
Chore: Bump version to v1.1.0 and implement automated release system
This commit is contained in:
dyzulk
@@ -21,7 +21,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
<!-- Spacer -->
|
||||
</div>
|
||||
<div class="flex gap-2 w-full md:w-auto">
|
||||
<button onclick="openModal('addModal')" class="btn btn-primary w-full md:w-auto">
|
||||
<button onclick="openCorsModal()" class="btn btn-primary w-full md:w-auto">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="settings.add_rule">Add CORS Rule</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -40,7 +40,12 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($rules)): ?>
|
||||
<?php foreach ($rules as $rule): ?>
|
||||
<tr class="table-row-item">
|
||||
<tr class="table-row-item"
|
||||
data-rule-id="<?= $rule['id'] ?>"
|
||||
data-origin="<?= htmlspecialchars($rule['origin']) ?>"
|
||||
data-headers="<?= htmlspecialchars(implode(', ', $rule['headers_arr'])) ?>"
|
||||
data-max-age="<?= $rule['max_age'] ?>"
|
||||
data-methods='<?= json_encode($rule['methods_arr']) ?>'>
|
||||
<td>
|
||||
<div class="text-sm font-medium text-foreground"><?= htmlspecialchars($rule['origin']) ?></div>
|
||||
<div class="text-xs text-accents-4">Max Age: <?= $rule['max_age'] ?>s</div>
|
||||
@@ -57,7 +62,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
</td>
|
||||
<td class="text-right text-sm font-medium">
|
||||
<div class="flex items-center justify-end gap-2 table-actions-reveal">
|
||||
<button onclick="editRule(<?= htmlspecialchars(json_encode($rule)) ?>)" class="btn-icon" title="Edit">
|
||||
<button onclick="openCorsModal(this.closest('tr'))" class="btn-icon" title="Edit">
|
||||
<i data-lucide="edit-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<form action="/settings/api-cors/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm(window.i18n ? window.i18n.t('settings.cors_rule_deleted') : 'Delete CORS Rule?', 'Are you sure you want to delete the CORS rule for <?= htmlspecialchars($rule['origin']) ?>?', 'Delete', 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
|
||||
@@ -85,136 +90,71 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Modal -->
|
||||
<div id="addModal" class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true">
|
||||
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300" onclick="closeModal('addModal')"></div>
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 scale-95 opacity-0 modal-content">
|
||||
<div class="card shadow-2xl">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-bold" data-i18n="settings.add_rule">Add CORS Rule</h3>
|
||||
<button onclick="closeModal('addModal')" class="text-accents-5 hover:text-foreground">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form action="/settings/api-cors/store" method="POST" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.origin">Origin</label>
|
||||
<input type="text" name="origin" class="form-control" placeholder="https://example.com or *" required>
|
||||
<p class="text-xs text-orange-500 dark:text-orange-400 mt-1 font-medium">Use * for all origins (not recommended for production).</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2" data-i18n="settings.methods">Allowed Methods</label>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<?php foreach(['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'HEAD'] as $m): ?>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" name="methods[]" value="<?= $m ?>" class="form-checkbox" <?= in_array($m, ['GET', 'POST']) ? 'checked' : '' ?>>
|
||||
<span class="text-sm"><?= $m ?></span>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.headers">Allowed Headers</label>
|
||||
<input type="text" name="headers" class="form-control" value="*" placeholder="Content-Type, Authorization, *">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.max_age">Max Age (seconds)</label>
|
||||
<input type="number" name="max_age" class="form-control" value="3600">
|
||||
</div>
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="button" onclick="closeModal('addModal')" class="btn btn-secondary mr-2" data-i18n="common.cancel">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" data-i18n="common.save">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Modal -->
|
||||
<div id="editModal" class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true">
|
||||
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300" onclick="closeModal('editModal')"></div>
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 scale-95 opacity-0 modal-content">
|
||||
<div class="card shadow-2xl">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-bold" data-i18n="settings.edit_rule">Edit CORS Rule</h3>
|
||||
<button onclick="closeModal('editModal')" class="text-accents-5 hover:text-foreground">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form action="/settings/api-cors/update" method="POST" class="space-y-4">
|
||||
<input type="hidden" name="id" id="edit_id">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.origin">Origin</label>
|
||||
<input type="text" name="origin" id="edit_origin" class="form-control" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2" data-i18n="settings.methods">Allowed Methods</label>
|
||||
<div class="grid grid-cols-3 gap-2" id="edit_methods_container">
|
||||
<?php foreach(['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'HEAD'] as $m): ?>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" name="methods[]" value="<?= $m ?>" class="form-checkbox edit-method-check" data-method="<?= $m ?>">
|
||||
<span class="text-sm"><?= $m ?></span>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.headers">Allowed Headers</label>
|
||||
<input type="text" name="headers" id="edit_headers" class="form-control">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.max_age">Max Age (seconds)</label>
|
||||
<input type="number" name="max_age" id="edit_max_age" class="form-control">
|
||||
</div>
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="button" onclick="closeModal('editModal')" class="btn btn-secondary mr-2" data-i18n="common.cancel">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" data-i18n="common.save">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
const content = modal.querySelector('.modal-content');
|
||||
modal.classList.remove('hidden');
|
||||
|
||||
// Use double requestAnimationFrame to ensure the browser has painted the hidden->block change
|
||||
// before we trigger the opacity/transform transitions.
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
modal.classList.remove('opacity-0');
|
||||
content.classList.remove('scale-95', 'opacity-0');
|
||||
content.classList.add('scale-100', 'opacity-100');
|
||||
});
|
||||
});
|
||||
}
|
||||
async function openCorsModal(row = null) {
|
||||
const isEdit = !!row;
|
||||
const title = isEdit ? (window.i18n ? window.i18n.t('settings.edit_rule') : 'Edit CORS Rule') : (window.i18n ? window.i18n.t('settings.add_rule') : 'Add CORS Rule');
|
||||
const template = document.getElementById('cors-form-template').innerHTML;
|
||||
const saveBtn = window.i18n ? window.i18n.t('common.save') : 'Save';
|
||||
|
||||
function closeModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
const content = modal.querySelector('.modal-content');
|
||||
modal.classList.add('opacity-0');
|
||||
content.classList.remove('scale-100', 'opacity-100');
|
||||
content.classList.add('scale-95', 'opacity-0');
|
||||
setTimeout(() => { modal.classList.add('hidden'); }, 300);
|
||||
}
|
||||
const preConfirmFn = () => {
|
||||
const form = document.getElementById('cors-form');
|
||||
if (!form.checkValidity()) {
|
||||
form.reportValidity();
|
||||
return false;
|
||||
}
|
||||
form.submit();
|
||||
return true;
|
||||
};
|
||||
|
||||
function editRule(rule) {
|
||||
document.getElementById('edit_id').value = rule.id;
|
||||
document.getElementById('edit_origin').value = rule.origin;
|
||||
document.getElementById('edit_headers').value = rule.headers_arr.join(', ');
|
||||
document.getElementById('edit_max_age').value = rule.max_age;
|
||||
|
||||
// Clear and check checkboxes
|
||||
const methods = rule.methods_arr;
|
||||
document.querySelectorAll('.edit-method-check').forEach(cb => {
|
||||
cb.checked = methods.includes(cb.dataset.method);
|
||||
});
|
||||
|
||||
openModal('editModal');
|
||||
}
|
||||
const onOpenedFn = (popup) => {
|
||||
const form = popup.querySelector('#cors-form');
|
||||
if (isEdit) {
|
||||
form.action = '/settings/api-cors/update';
|
||||
form.querySelector('[name="id"]').value = row.dataset.ruleId;
|
||||
form.querySelector('[name="origin"]').value = row.dataset.origin;
|
||||
form.querySelector('[name="headers"]').value = row.dataset.headers;
|
||||
form.querySelector('[name="max_age"]').value = row.dataset.maxAge;
|
||||
|
||||
const methods = JSON.parse(row.dataset.methods || '[]');
|
||||
form.querySelectorAll('[name="methods[]"]').forEach(cb => {
|
||||
cb.checked = methods.includes(cb.value);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Mivo.modal.form(title, template, saveBtn, preConfirmFn, onOpenedFn);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template id="cors-form-template">
|
||||
<form action="/settings/api-cors/store" method="POST" id="cors-form" class="space-y-4 text-left">
|
||||
<input type="hidden" name="id">
|
||||
<div>
|
||||
<label class="form-label" data-i18n="settings.origin">Origin</label>
|
||||
<input type="text" name="origin" class="w-full" placeholder="https://example.com or *" required>
|
||||
<p class="text-[10px] text-orange-500 dark:text-orange-400 mt-1 font-medium">Use * for all origins (not recommended for production).</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" data-i18n="settings.methods">Allowed Methods</label>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<?php foreach(['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'HEAD'] as $m): ?>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" name="methods[]" value="<?= $m ?>" class="checkbox" <?= in_array($m, ['GET', 'POST']) ? 'checked' : '' ?>>
|
||||
<span class="text-sm font-medium"><?= $m ?></span>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" data-i18n="settings.headers">Allowed Headers</label>
|
||||
<input type="text" name="headers" class="w-full" value="*" placeholder="Content-Type, Authorization, *">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" data-i18n="settings.max_age">Max Age (seconds)</label>
|
||||
<input type="number" name="max_age" class="w-full" value="3600">
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
|
||||
@@ -1,123 +0,0 @@
|
||||
<?php
|
||||
// Use $router variable instead of $session to avoid conflict with header.php logic
|
||||
$router = $router ?? null;
|
||||
$title = $router ? "Edit Router" : "Add Router";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
|
||||
// Safe access helper
|
||||
$val = function($key) use ($router) {
|
||||
return isset($router) && isset($router[$key]) ? htmlspecialchars($router[$key]) : '';
|
||||
};
|
||||
?>
|
||||
|
||||
<div class="w-full max-w-5xl mx-auto mb-16">
|
||||
<div class="mb-8">
|
||||
<a href="/settings/routers" class="inline-flex items-center text-sm text-accents-5 hover:text-foreground transition-colors mb-4">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Back to Settings
|
||||
</a>
|
||||
<h1 class="text-2xl font-bold tracking-tight"><?= $title ?></h1>
|
||||
<p class="text-accents-5">Connect Mikhmon to your RouterOS device.</p>
|
||||
</div>
|
||||
|
||||
<form autocomplete="off" method="post" action="<?= isset($router) ? '/settings/update' : '/settings/store' ?>">
|
||||
<?php if(isset($router)): ?>
|
||||
<input type="hidden" name="id" value="<?= $router['id'] ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="card p-6 md:p-8 space-y-6">
|
||||
<div>
|
||||
<h2 class="text-base font-semibold mb-4">Session Settings</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Session Name</label>
|
||||
<input class="form-control w-full" type="text" name="sessname" id="sessname" placeholder="e.g. router-jakarta-1" value="<?= $val('session_name') ?>" required/>
|
||||
<p class="text-xs text-accents-4">Unique ID. Preview: <span id="sessname-preview" class="font-mono text-primary font-bold">...</span></p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="checkbox" id="quick_access" name="quick_access" class="checkbox" <?= (isset($router['quick_access']) && $router['quick_access'] == 1) ? 'checked' : '' ?> value="1">
|
||||
<label for="quick_access" class="text-sm font-medium cursor-pointer select-none">Show in Quick Access (Home Page)</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-accents-2 pt-6">
|
||||
<h2 class="text-base font-semibold mb-4">Connection Details</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">IP Address</label>
|
||||
<input class="form-control w-full" type="text" name="ipmik" placeholder="192.168.88.1" value="<?= $val('ip_address') ?>" required/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Username</label>
|
||||
<input class="form-control w-full" type="text" name="usermik" placeholder="admin" value="<?= $val('username') ?>" required/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Password</label>
|
||||
<input class="form-control w-full" type="password" name="passmik" <?= isset($router) ? '' : 'required' ?> />
|
||||
<?php if(isset($router)): ?>
|
||||
<p class="text-xs text-accents-4">Leave empty to keep existing password.</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-accents-2 pt-6">
|
||||
<h2 class="text-base font-semibold mb-4">Hotspot Information</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Hotspot Name</label>
|
||||
<input class="form-control w-full" type="text" name="hotspotname" placeholder="My Hotspot ID" value="<?= $val('hotspot_name') ?>" required/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">DNS Name</label>
|
||||
<input class="form-control w-full" type="text" name="dnsname" placeholder="hotspot.net" value="<?= $val('dns_name') ?>" required/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Traffic Interface</label>
|
||||
<div class="flex w-full gap-2">
|
||||
<div class="flex-grow">
|
||||
<select class="custom-select w-full" name="iface" id="iface" data-search="true" required>
|
||||
<option value="<?= $val('interface') ?: 'ether1' ?>"><?= $val('interface') ?: 'ether1' ?></option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="button" id="check-interface-btn" class="btn btn-secondary whitespace-nowrap" title="Check connection and fetch interfaces">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> Check
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Currency</label>
|
||||
<input class="form-control w-full" type="text" name="currency" value="<?= $val('currency') ?: 'Rp' ?>" required/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Auto Reload (Sec)</label>
|
||||
<input class="form-control w-full" type="number" min="10" name="areload" value="<?= $val('reload_interval') ?: 10 ?>" required/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 flex justify-end gap-3">
|
||||
<a href="/settings/routers" class="btn btn-secondary">Cancel</a>
|
||||
<button type="submit" class="btn btn-secondary" name="action" value="save">
|
||||
Save
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" name="action" value="connect">
|
||||
Save & Connect
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/router-form.js"></script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
@@ -22,9 +22,9 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
<div class="hidden md:block">
|
||||
<!-- Spacer or Breadcrumbs if needed -->
|
||||
</div>
|
||||
<a href="/settings/add" class="btn btn-primary w-full md:w-auto">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> Add Router
|
||||
</a>
|
||||
<button onclick="openRouterModal('add')" class="btn btn-primary w-full md:w-auto">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="routers.add_router_title">Add Router</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<?php if (empty($routers)): ?>
|
||||
@@ -34,9 +34,9 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
</div>
|
||||
<h3 class="text-lg font-medium mb-2">No routers configured</h3>
|
||||
<p class="text-accents-5 mb-6 max-w-sm mx-auto">Connect your first MikroTik router to start managing hotspots and vouchers.</p>
|
||||
<a href="/settings/add" class="btn btn-primary">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> Connect Router
|
||||
</a>
|
||||
<button onclick="openRouterModal('add')" class="btn btn-primary">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="routers.add_router_title">Connect Router</span>
|
||||
</button>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="table-container">
|
||||
@@ -53,7 +53,17 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($routers as $router): ?>
|
||||
<tr>
|
||||
<tr class="router-row"
|
||||
data-id="<?= $router['id'] ?>"
|
||||
data-sessname="<?= htmlspecialchars($router['session_name']) ?>"
|
||||
data-ipmik="<?= htmlspecialchars($router['ip_address']) ?>"
|
||||
data-usermik="<?= htmlspecialchars($router['username']) ?>"
|
||||
data-hotspotname="<?= htmlspecialchars($router['hotspot_name']) ?>"
|
||||
data-dnsname="<?= htmlspecialchars($router['dns_name']) ?>"
|
||||
data-iface="<?= htmlspecialchars($router['interface'] ?? 'ether1') ?>"
|
||||
data-currency="<?= htmlspecialchars($router['currency'] ?? 'Rp') ?>"
|
||||
data-areload="<?= htmlspecialchars($router['reload_interval'] ?? '10') ?>"
|
||||
data-quick-access="<?= $router['quick_access'] ?? 0 ?>">
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<div class="h-8 w-8 rounded bg-accents-2 flex items-center justify-center text-xs font-bold mr-3">
|
||||
@@ -80,9 +90,9 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
<a href="/<?= htmlspecialchars($router['session_name']) ?>/dashboard" class="btn btn-secondary btn-sm h-8 px-3">
|
||||
Open
|
||||
</a>
|
||||
<a href="/settings/edit/<?= $router['id'] ?>" class="btn btn-secondary btn-sm h-8 px-3" title="Edit">
|
||||
<button onclick="openRouterModal('edit', this)" class="btn btn-secondary btn-sm h-8 px-3" title="Edit">
|
||||
<i data-lucide="edit-2" class="w-4 h-4"></i>
|
||||
</a>
|
||||
</button>
|
||||
<form action="/settings/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm('Disconnect Router?', 'Are you sure you want to disconnect <?= htmlspecialchars($router['session_name']) ?>?', 'Disconnect', 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
|
||||
<input type="hidden" name="id" value="<?= $router['id'] ?>">
|
||||
<button type="submit" class="btn hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 border border-transparent h-8 px-2" title="Delete">
|
||||
@@ -98,13 +108,239 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
<div class="text-sm text-accents-5">
|
||||
Showing all <?= count($routers) ?> stored sessions
|
||||
</div>
|
||||
<a href="/settings/add" class="btn btn-primary btn-sm w-full sm:w-auto justify-center">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> Add New
|
||||
</a>
|
||||
<button onclick="openRouterModal('add')" class="btn btn-primary btn-sm w-full sm:w-auto justify-center">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="routers.add_router_title">Add New</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="router-form-template">
|
||||
<div class="text-left">
|
||||
<form id="router-form" action="/settings/store" method="POST" class="space-y-6">
|
||||
<input type="hidden" name="id" id="form-id">
|
||||
|
||||
<!-- Session Settings -->
|
||||
<div>
|
||||
<h2 class="text-base font-semibold mb-3 flex items-center gap-2" data-i18n="routers.session_settings">
|
||||
<i data-lucide="settings" class="w-4 h-4"></i> Session Settings
|
||||
</h2>
|
||||
<div class="max-w-md space-y-4">
|
||||
<div class="space-y-1">
|
||||
<label class="form-label" data-i18n="home.session_name">Session Name</label>
|
||||
<input class="w-full" type="text" name="sessname" id="sessname" placeholder="e.g. router-jakarta-1" required/>
|
||||
<p class="text-[10px] text-accents-4 uppercase tracking-tighter mt-1">
|
||||
<span data-i18n="routers.unique_id">Unique ID:</span> <span id="sessname-preview" class="font-mono text-primary font-bold">...</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="checkbox" id="quick_access" name="quick_access" class="checkbox flex-shrink-0" value="1">
|
||||
<label for="quick_access" class="text-xs font-bold cursor-pointer select-none whitespace-nowrap uppercase tracking-wider" data-i18n="routers.show_quick_access">Show in Quick Access</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connection Details -->
|
||||
<div class="border-t border-white/5 pt-6">
|
||||
<h2 class="text-base font-semibold mb-3 flex items-center gap-2" data-i18n="routers.connection_details">
|
||||
<i data-lucide="zap" class="w-4 h-4"></i> Connection Details
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="space-y-1 md:col-span-1">
|
||||
<label class="form-label" data-i18n="home.ip_address">IP Address</label>
|
||||
<input class="w-full" type="text" name="ipmik" placeholder="192.168.88.1" required/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="form-label" data-i18n="login.username">Username</label>
|
||||
<input class="w-full" type="text" name="usermik" placeholder="admin" required/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="form-label" data-i18n="login.password">Password</label>
|
||||
<input class="w-full" type="password" name="passmik" id="passmik" placeholder="••••••••"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hotspot Information -->
|
||||
<div class="border-t border-white/5 pt-6">
|
||||
<h2 class="text-base font-semibold mb-3 flex items-center gap-2" data-i18n="routers.hotspot_info">
|
||||
<i data-lucide="globe" class="w-4 h-4"></i> Hotspot Information
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="form-label" data-i18n="home.hotspot_name">Hotspot Name</label>
|
||||
<input class="w-full" type="text" name="hotspotname" placeholder="My Hotspot ID" required/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="form-label" data-i18n="routers.dns_name">DNS Name</label>
|
||||
<input class="w-full" type="text" name="dnsname" placeholder="hotspot.net" required/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<div class="space-y-1">
|
||||
<label class="form-label" data-i18n="routers.traffic_interface">Traffic Interface</label>
|
||||
<div class="flex w-full gap-2">
|
||||
<div class="flex-grow">
|
||||
<select class="w-full" name="iface" id="iface" data-search="true" required>
|
||||
<option value="ether1">ether1</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="button" id="check-interface-btn" class="btn btn-secondary whitespace-nowrap px-3" title="Check connection">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 mr-1"></i>
|
||||
<span class="text-xs font-bold uppercase tracking-tight" data-i18n="routers.check_connection">Check Connection</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="form-label" data-i18n="routers.currency">Currency</label>
|
||||
<input class="w-full" type="text" name="currency" value="Rp" required/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="form-label" data-i18n="routers.auto_reload">Reload (s)</label>
|
||||
<input class="w-full" type="number" min="2" name="areload" value="10" required/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function openRouterModal(mode, btn = null) {
|
||||
const template = document.getElementById('router-form-template').innerHTML;
|
||||
|
||||
let title = window.i18n ? window.i18n.t('routers.add_router_title') : 'Add Router';
|
||||
let saveBtn = window.i18n ? window.i18n.t('common.save') : 'Save';
|
||||
|
||||
if (mode === 'edit') {
|
||||
title = window.i18n ? window.i18n.t('routers.edit_router_title') : 'Edit Router';
|
||||
saveBtn = window.i18n ? window.i18n.t('common.forms.save_changes') : 'Save Changes';
|
||||
}
|
||||
|
||||
const preConfirmFn = () => {
|
||||
const form = Swal.getHtmlContainer().querySelector('form');
|
||||
if(form.reportValidity()) {
|
||||
form.submit();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const onOpenedFn = (popup) => {
|
||||
const form = popup.querySelector('form');
|
||||
|
||||
// --- Interface Check Logic ---
|
||||
const checkBtn = form.querySelector('#check-interface-btn');
|
||||
const ifaceSelect = form.querySelector('#iface');
|
||||
|
||||
if (checkBtn && ifaceSelect) {
|
||||
checkBtn.addEventListener('click', async () => {
|
||||
const originalHTML = checkBtn.innerHTML;
|
||||
checkBtn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 mr-1 animate-spin"></i><span class="text-xs font-bold uppercase tracking-tight">Checking...</span>';
|
||||
checkBtn.disabled = true;
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
|
||||
const ip = form.querySelector('[name="ipmik"]').value;
|
||||
const user = form.querySelector('[name="usermik"]').value;
|
||||
const pass = form.querySelector('[name="passmik"]').value;
|
||||
const id = form.querySelector('[name="id"]').value || null;
|
||||
|
||||
if (!ip || !user) {
|
||||
Mivo.toast('warning', 'Missing Details', 'IP Address and Username are required');
|
||||
checkBtn.innerHTML = originalHTML;
|
||||
checkBtn.disabled = false;
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/router/interfaces', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ip, user, password: pass, id })
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.success || !data.interfaces) {
|
||||
Mivo.toast('error', 'Fetch Failed', data.error || 'Check credentials');
|
||||
} else {
|
||||
ifaceSelect.innerHTML = '';
|
||||
data.interfaces.forEach(iface => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = iface;
|
||||
opt.textContent = iface;
|
||||
ifaceSelect.appendChild(opt);
|
||||
});
|
||||
|
||||
if (window.Mivo && window.Mivo.components.Select) {
|
||||
const instance = window.Mivo.components.Select.get(ifaceSelect);
|
||||
if (instance) instance.refresh();
|
||||
}
|
||||
Mivo.toast('success', 'Success', 'Interfaces loaded');
|
||||
}
|
||||
} catch (err) {
|
||||
Mivo.toast('error', 'Error', 'Connection failed');
|
||||
} finally {
|
||||
checkBtn.innerHTML = originalHTML;
|
||||
checkBtn.disabled = false;
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Session Name Formatting ---
|
||||
const sessInput = form.querySelector('[name="sessname"]');
|
||||
const sessPreview = form.querySelector('#sessname-preview');
|
||||
if (sessInput && sessPreview) {
|
||||
sessInput.addEventListener('input', (e) => {
|
||||
let val = e.target.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '').replace(/-+/g, '-');
|
||||
e.target.value = val;
|
||||
sessPreview.textContent = val || '...';
|
||||
});
|
||||
}
|
||||
|
||||
if (mode === 'edit' && btn) {
|
||||
const row = btn.closest('tr');
|
||||
form.action = "/settings/update";
|
||||
|
||||
const idInput = form.querySelector('#form-id');
|
||||
idInput.disabled = false;
|
||||
idInput.value = row.dataset.id;
|
||||
|
||||
form.querySelector('[name="sessname"]').value = row.dataset.sessname || '';
|
||||
if(sessPreview) sessPreview.textContent = row.dataset.sessname || '';
|
||||
|
||||
form.querySelector('[name="ipmik"]').value = row.dataset.ipmik || '';
|
||||
form.querySelector('[name="usermik"]').value = row.dataset.usermik || '';
|
||||
form.querySelector('[name="hotspotname"]').value = row.dataset.hotspotname || '';
|
||||
form.querySelector('[name="dnsname"]').value = row.dataset.dnsname || '';
|
||||
form.querySelector('[name="currency"]').value = row.dataset.currency || 'Rp';
|
||||
form.querySelector('[name="areload"]').value = row.dataset.areload || '10';
|
||||
|
||||
const quickCheck = form.querySelector('#quick_access');
|
||||
if(quickCheck) quickCheck.checked = row.dataset.quickAccess == '1';
|
||||
|
||||
// Handle Interface Select
|
||||
const currentIface = row.dataset.iface || 'ether1';
|
||||
ifaceSelect.innerHTML = `<option value="${currentIface}" selected>${currentIface}</option>`;
|
||||
if (window.Mivo && window.Mivo.components.Select) {
|
||||
const instance = window.Mivo.components.Select.get(ifaceSelect);
|
||||
if (instance) instance.refresh();
|
||||
}
|
||||
|
||||
// Password is not populated for security, hint is in placeholder
|
||||
form.querySelector('[name="passmik"]').placeholder = '•••••••• (unchanged)';
|
||||
form.querySelector('[name="passmik"]').required = false;
|
||||
}
|
||||
};
|
||||
|
||||
Mivo.modal.form(title, template, saveBtn, preConfirmFn, onOpenedFn, 'swal-wide');
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
|
||||
@@ -22,8 +22,8 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
<!-- Upload Section -->
|
||||
<section>
|
||||
<div class="card p-8 border-dashed border-2 bg-accents-1 hover:bg-background transition-colors text-center relative group">
|
||||
<form action="/settings/logos/upload" method="POST" enctype="multipart/form-data" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
|
||||
<input type="file" name="logo_file" accept=".png,.jpg,.jpeg,.svg,.gif" onchange="this.form.submit()" class="form-control-file">
|
||||
<form action="/settings/logos/upload" method="POST" enctype="multipart/form-data" class="absolute inset-0 w-full h-full cursor-pointer z-50">
|
||||
<input type="file" name="logo_file" accept=".png,.jpg,.jpeg,.svg,.gif" onchange="this.form.submit()" class="block w-full h-full opacity-0 cursor-pointer">
|
||||
</form>
|
||||
|
||||
<div class="flex flex-col items-center justify-center pointer-events-none">
|
||||
|
||||
@@ -16,13 +16,13 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 flex-shrink-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/settings/templates" class="text-accents-5 hover:text-foreground transition-colors">
|
||||
<a href="/settings/voucher-templates" class="text-accents-5 hover:text-foreground transition-colors">
|
||||
<i data-lucide="arrow-left" class="w-5 h-5"></i>
|
||||
</a>
|
||||
<h1 class="text-xl font-bold tracking-tight text-foreground"><?= $title ?></h1>
|
||||
</div>
|
||||
|
||||
<form id="templateForm" action="<?= $isEdit ? '/settings/templates/update' : '/settings/templates/store' ?>" method="POST" class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full lg:w-auto">
|
||||
<form id="templateForm" action="<?= $isEdit ? '/settings/voucher-templates/update' : '/settings/voucher-templates/store' ?>" method="POST" class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full lg:w-auto">
|
||||
<?php if ($isEdit): ?>
|
||||
<input type="hidden" name="id" value="<?= $template['id'] ?>">
|
||||
<?php endif; ?>
|
||||
@@ -21,7 +21,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
<div class="hidden md:block">
|
||||
<!-- Spacer -->
|
||||
</div>
|
||||
<a href="/settings/templates/add" class="btn btn-primary w-full sm:w-auto justify-center">
|
||||
<a href="/settings/voucher-templates/add" class="btn btn-primary w-full sm:w-auto justify-center">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i>
|
||||
<span data-i18n="settings.new_template">New Template</span>
|
||||
</a>
|
||||
@@ -37,7 +37,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
<i data-lucide="loader-2" class="w-6 h-6 animate-spin text-accents-4"></i>
|
||||
</div>
|
||||
<iframe
|
||||
data-src="/settings/templates/preview/default"
|
||||
data-src="/settings/voucher-templates/preview/default"
|
||||
src="about:blank"
|
||||
class="w-full h-full border-0 pointer-events-none opacity-0 transition-opacity duration-500"
|
||||
scrolling="no"
|
||||
@@ -66,7 +66,7 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
<i data-lucide="loader-2" class="w-6 h-6 animate-spin text-accents-4"></i>
|
||||
</div>
|
||||
<iframe
|
||||
data-src="/settings/templates/preview/<?= $tpl['id'] ?>"
|
||||
data-src="/settings/voucher-templates/preview/<?= $tpl['id'] ?>"
|
||||
src="about:blank"
|
||||
class="w-full h-full border-0 pointer-events-none opacity-0 transition-opacity duration-500"
|
||||
scrolling="no"
|
||||
@@ -87,10 +87,10 @@ require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
<p class="text-sm text-accents-5 mb-4 line-clamp-1">Created: <?= htmlspecialchars($tpl['created_at']) ?></p>
|
||||
|
||||
<div class="flex items-center gap-2 mt-auto">
|
||||
<a href="/settings/templates/edit/<?= $tpl['id'] ?>" class="flex-1 btn btn-primary flex justify-center">
|
||||
<a href="/settings/voucher-templates/edit/<?= $tpl['id'] ?>" class="flex-1 btn btn-primary flex justify-center">
|
||||
<i data-lucide="edit-3" class="w-4 h-4 mr-2"></i> <span data-i18n="common.edit">Edit</span>
|
||||
</a>
|
||||
<form action="/settings/templates/delete" method="POST" class="delete-template-form">
|
||||
<form action="/settings/voucher-templates/delete" method="POST" class="delete-template-form">
|
||||
<input type="hidden" name="id" value="<?= $tpl['id'] ?>">
|
||||
<input type="hidden" name="template_name" value="<?= htmlspecialchars($tpl['name']) ?>">
|
||||
<button type="submit" class="p-2 btn btn-secondary hover:text-red-600 hover:bg-red-50 transition-colors h-9 w-9 flex items-center justify-center">
|
||||
Reference in New Issue
Block a user