122 lines
6.2 KiB
HTML
122 lines
6.2 KiB
HTML
{{ define "content" }}
|
|
<div class="max-w-2xl mx-auto">
|
|
<h1 class="text-3xl font-bold mb-6">Profile</h1>
|
|
<div class="bg-gray-800 p-6 rounded mb-6">
|
|
<p class="mb-4">
|
|
<strong class="text-white">Username:</strong>
|
|
<span class="text-gray-300">admin</span>
|
|
</p>
|
|
<p class="mb-6">
|
|
<strong class="text-white">MFA Status:</strong>
|
|
{{ if .MFAEnabled }}
|
|
<span class="text-green-400 font-bold">Enabled</span>
|
|
{{ else }}
|
|
<span class="text-yellow-400 font-bold">Disabled</span>
|
|
{{ end }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Password Change Form -->
|
|
<div class="bg-gray-800 p-6 rounded mb-6">
|
|
<h2 class="text-xl font-bold mb-4 text-white">Change Password</h2>
|
|
<form method="POST" action="/profile">
|
|
<input type="hidden" name="action" value="change_password">
|
|
<input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
|
|
<div class="mb-4">
|
|
<label class="block text-gray-300 mb-1">Current Password</label>
|
|
<input type="password" name="current_password" required class="w-full p-2 rounded bg-gray-700 text-white">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-gray-300 mb-1">New Password</label>
|
|
<input type="password" name="new_password" required class="w-full p-2 rounded bg-gray-700 text-white">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-gray-300 mb-1">Confirm New Password</label>
|
|
<input type="password" name="confirm_new_password" required class="w-full p-2 rounded bg-gray-700 text-white">
|
|
</div>
|
|
{{ if .MFAEnabled }}
|
|
<div class="mb-4">
|
|
<label class="block text-gray-300 mb-1">MFA Code</label>
|
|
<input type="text" name="mfa_code" required class="w-full p-2 rounded bg-gray-700 text-white">
|
|
</div>
|
|
{{ end }}
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Change Password</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- MFA Toggle Form -->
|
|
<div class="bg-gray-800 p-6 rounded mb-6" id="mfa-toggle">
|
|
<h2 class="text-xl font-bold mb-4 text-white">MFA Management</h2>
|
|
<form method="POST" action="/profile">
|
|
<input type="hidden" name="action" value="toggle_mfa">
|
|
<input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
|
|
{{ if .MFAEnabled }}
|
|
<button type="submit" name="mfa" value="off" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded">Disable MFA</button>
|
|
{{ else if not .MFASetupInProgress }}
|
|
<button type="button" onclick="enableMFA()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">Enable MFA</button>
|
|
{{ end }}
|
|
</form>
|
|
</div>
|
|
|
|
<!-- MFA Setup Section -->
|
|
<div class="bg-gray-800 p-6 rounded mb-6" id="mfa-setup" style="display: {{ if .MFASetupInProgress }}block{{ else }}none{{ end }};">
|
|
<h2 class="text-xl font-bold mb-4 text-white">Setup MFA</h2>
|
|
<p class="text-gray-300 mb-4">Scan the QR code with your authenticator app or enter the secret manually.</p>
|
|
<div class="mb-4">
|
|
<strong class="text-white">Secret:</strong> <code class="bg-gray-900 px-2 py-1 rounded" id="mfa-secret">{{ .MFASecret }}</code>
|
|
</div>
|
|
<div class="mb-4">
|
|
<strong class="text-white">OTP URL:</strong> <code class="bg-gray-900 px-2 py-1 rounded" id="mfa-url">{{ .MFAURL }}</code>
|
|
</div>
|
|
<div class="mb-4">
|
|
<img id="mfa-qr" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ .MFAURL }}" alt="QR Code" class="border border-gray-600" style="display: {{ if .MFASetupInProgress }}block{{ else }}none{{ end }};">
|
|
</div>
|
|
<form method="POST" action="/profile">
|
|
<input type="hidden" name="action" value="confirm_mfa">
|
|
<input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
|
|
<div class="mb-4">
|
|
<label class="block text-gray-300 mb-1">Enter 6-digit code from your app</label>
|
|
<input type="text" name="mfa_code" required class="w-full p-2 rounded bg-gray-700 text-white">
|
|
</div>
|
|
<button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded mr-2">Confirm MFA</button>
|
|
<button type="submit" name="action" value="cancel_mfa" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded">Cancel</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Terminal Commands -->
|
|
<div class="bg-gray-800 p-6 rounded">
|
|
<h2 class="text-xl font-bold mb-4 text-white">Terminal Commands</h2>
|
|
<p class="text-sm text-gray-300 mb-2">
|
|
<strong>Alternative CLI management:</strong>
|
|
</p>
|
|
<p class="text-sm text-gray-400 mt-2">Use the command-line interface with the executable flags:</p>
|
|
<ul class="text-sm text-gray-400 mt-2 ml-4 space-y-1">
|
|
<li>• <code class="bg-gray-900 px-2 py-1 rounded">./unifi-blocklist-app -pw "NewPassword"</code> - Change password</li>
|
|
<li>• <code class="bg-gray-900 px-2 py-1 rounded">./unifi-blocklist-app -mfa on</code> - Enable MFA</li>
|
|
<li>• <code class="bg-gray-900 px-2 py-1 rounded">./unifi-blocklist-app -mfa off</code> - Disable MFA</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function enableMFA() {
|
|
fetch('/api/mfa-setup', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-Token': '{{ .CSRFToken }}'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById('mfa-secret').textContent = data.secret;
|
|
document.getElementById('mfa-url').textContent = data.url;
|
|
document.getElementById('mfa-qr').src = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + encodeURIComponent(data.url);
|
|
document.getElementById('mfa-qr').style.display = 'block';
|
|
document.getElementById('mfa-setup').style.display = 'block';
|
|
document.getElementById('mfa-toggle').style.display = 'none';
|
|
})
|
|
.catch(error => {
|
|
alert('Error enabling MFA: ' + error);
|
|
});
|
|
}
|
|
</script>
|
|
{{ end }} |