292 lines
10 KiB
PHP
292 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tweefactorauthenticatie Instellingen - DBOIS</title>
|
|
|
|
<link rel="icon" href="/css/images/dbo-01-80x80.png" type="image/png">
|
|
<link rel="stylesheet" href="/css/vendor/bootstrap.min.css?v=<?=$version?>">
|
|
<link rel="stylesheet" href="/css/vendor/bootstrap-extend.css?v=<?=$version?>">
|
|
<link rel="stylesheet" href="/css/vendor/site.min.css?v=<?=$version?>">
|
|
|
|
<style>
|
|
.twofactor-container {
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
}
|
|
.method-card {
|
|
border: 2px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
.method-card:hover {
|
|
border-color: #348eda;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
.method-card.active {
|
|
border-color: #68b90f;
|
|
background-color: #f0f8ff;
|
|
}
|
|
.qr-code-container {
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
}
|
|
.qr-code-container img {
|
|
max-width: 250px;
|
|
}
|
|
.verification-code-input {
|
|
text-align: center;
|
|
font-size: 24px;
|
|
letter-spacing: 5px;
|
|
font-weight: bold;
|
|
}
|
|
.secret-code {
|
|
background-color: #f5f5f5;
|
|
padding: 10px;
|
|
font-family: monospace;
|
|
word-break: break-all;
|
|
border-radius: 4px;
|
|
}
|
|
.alert {
|
|
margin: 15px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="twofactor-container">
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Tweefactorauthenticatie Instellingen</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
|
|
<!-- Current Status -->
|
|
<div class="alert alert-info" data-bind="visible: !enabled()">
|
|
<strong>Tweefactorauthenticatie is momenteel uitgeschakeld.</strong>
|
|
<p>Schakel 2FA in om een extra beveiligingslaag aan uw account toe te voegen.</p>
|
|
</div>
|
|
|
|
<div class="alert alert-success" data-bind="visible: enabled">
|
|
<strong>Tweefactorauthenticatie is ingeschakeld</strong>
|
|
<p>Huidige methode: <span data-bind="text: currentMethod"></span></p>
|
|
</div>
|
|
|
|
<!-- Enable/Disable Section -->
|
|
<div data-bind="visible: !enabled()">
|
|
<h4>Kies een 2FA methode:</h4>
|
|
|
|
<div class="method-card" data-bind="click: function() { selectMethod('email'); }, css: { active: selectedMethod() === 'email' }">
|
|
<h5><i class="icon wb-envelope" aria-hidden="true"></i> E-mail</h5>
|
|
<p>Ontvang een eenmalige code via e-mail bij elke inlogpoging.</p>
|
|
</div>
|
|
|
|
<div class="method-card" data-bind="click: function() { selectMethod('authenticator'); }, css: { active: selectedMethod() === 'authenticator' }">
|
|
<h5><i class="icon wb-mobile" aria-hidden="true"></i> Google Authenticator</h5>
|
|
<p>Gebruik een authenticator app zoals Google Authenticator of Authy.</p>
|
|
</div>
|
|
|
|
<button class="btn btn-primary btn-lg" data-bind="click: enableTwoFactor, enable: selectedMethod">
|
|
2FA Inschakelen
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Authenticator Setup -->
|
|
<div data-bind="visible: showAuthenticatorSetup">
|
|
<hr>
|
|
<h4>Google Authenticator Instellen</h4>
|
|
|
|
<div class="qr-code-container">
|
|
<p>Scan deze QR-code met uw authenticator app:</p>
|
|
<img data-bind="attr: { src: qrCodeUrl }" alt="QR Code">
|
|
|
|
<p class="mt-20">Of voer deze code handmatig in:</p>
|
|
<div class="secret-code" data-bind="text: secret"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Voer de 6-cijferige code in om te verifiëren:</label>
|
|
<input type="text"
|
|
class="form-control verification-code-input"
|
|
maxlength="6"
|
|
data-bind="textInput: verificationCode, event: { keyup: handleVerificationKeyup }">
|
|
</div>
|
|
|
|
<button class="btn btn-success" data-bind="click: verifyAuthenticatorSetup, enable: verificationCode().length === 6">
|
|
Verifiëren
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Change Method -->
|
|
<div data-bind="visible: enabled() && !showAuthenticatorSetup()">
|
|
<hr>
|
|
<h4>Methode Wijzigen</h4>
|
|
|
|
<div class="method-card" data-bind="click: function() { selectMethod('email'); }, css: { active: changeToMethod() === 'email' }">
|
|
<h5><i class="icon wb-envelope" aria-hidden="true"></i> E-mail</h5>
|
|
<p>Ontvang een eenmalige code via e-mail bij elke inlogpoging.</p>
|
|
</div>
|
|
|
|
<div class="method-card" data-bind="click: function() { selectMethod('authenticator'); }, css: { active: changeToMethod() === 'authenticator' }">
|
|
<h5><i class="icon wb-mobile" aria-hidden="true"></i> Google Authenticator</h5>
|
|
<p>Gebruik een authenticator app zoals Google Authenticator of Authy.</p>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" data-bind="click: changeMethod, enable: changeToMethod() !== currentMethod()">
|
|
Methode Wijzigen
|
|
</button>
|
|
|
|
<hr>
|
|
|
|
<button class="btn btn-danger" data-bind="click: disableTwoFactor">
|
|
2FA Uitschakelen
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<a href="/" class="btn btn-default">Terug naar Dashboard</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/vendor/jquery/jquery.js?v=<?=$version?>"></script>
|
|
<script src="/js/vendor/bootstrap/bootstrap.js?v=<?=$version?>"></script>
|
|
<script src="/js/vendor/Knockout.min.js?v=<?=$version?>"></script>
|
|
|
|
<script>
|
|
function TwoFactorViewModel() {
|
|
var self = this;
|
|
|
|
self.enabled = ko.observable(<?= $user->two_factor_enabled === 'T' ? 'true' : 'false' ?>);
|
|
self.currentMethod = ko.observable('<?= $user->two_factor_method ?>');
|
|
self.selectedMethod = ko.observable(null);
|
|
self.changeToMethod = ko.observable(null);
|
|
self.showAuthenticatorSetup = ko.observable(false);
|
|
self.qrCodeUrl = ko.observable('');
|
|
self.secret = ko.observable('');
|
|
self.verificationCode = ko.observable('');
|
|
|
|
self.selectMethod = function(method) {
|
|
if (!self.enabled()) {
|
|
self.selectedMethod(method);
|
|
} else {
|
|
self.changeToMethod(method);
|
|
}
|
|
};
|
|
|
|
self.enableTwoFactor = function() {
|
|
if (!self.selectedMethod()) {
|
|
alert('Kies eerst een methode');
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/beheer/TwoFactorController/enable',
|
|
method: 'POST',
|
|
data: { method: self.selectedMethod() },
|
|
success: function(response) {
|
|
if (response.success) {
|
|
if (response.method === 'authenticator') {
|
|
self.qrCodeUrl(response.qrCodeUrl);
|
|
self.secret(response.secret);
|
|
self.showAuthenticatorSetup(true);
|
|
} else {
|
|
alert(response.message);
|
|
location.reload();
|
|
}
|
|
} else {
|
|
alert(response.message);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
self.verifyAuthenticatorSetup = function() {
|
|
$.ajax({
|
|
url: '/beheer/TwoFactorController/verifySetup',
|
|
method: 'POST',
|
|
data: { code: self.verificationCode() },
|
|
success: function(response) {
|
|
if (response.success) {
|
|
alert('Google Authenticator succesvol ingesteld!');
|
|
location.reload();
|
|
} else {
|
|
alert(response.message);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
self.disableTwoFactor = function() {
|
|
if (!confirm('Weet u zeker dat u 2FA wilt uitschakelen?')) {
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/beheer/TwoFactorController/disable',
|
|
method: 'POST',
|
|
success: function(response) {
|
|
if (response.success) {
|
|
alert(response.message);
|
|
location.reload();
|
|
} else {
|
|
alert(response.message);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
self.changeMethod = function() {
|
|
if (!self.changeToMethod()) {
|
|
alert('Kies eerst een methode');
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/beheer/TwoFactorController/changeMethod',
|
|
method: 'POST',
|
|
data: { method: self.changeToMethod() },
|
|
success: function(response) {
|
|
if (response.success) {
|
|
if (response.method === 'authenticator') {
|
|
self.enabled(false);
|
|
self.selectedMethod('authenticator');
|
|
self.qrCodeUrl(response.qrCodeUrl);
|
|
self.secret(response.secret);
|
|
self.showAuthenticatorSetup(true);
|
|
} else {
|
|
alert(response.message);
|
|
location.reload();
|
|
}
|
|
} else {
|
|
alert(response.message);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
self.handleVerificationKeyup = function(data, event) {
|
|
// Auto-verify when 6 digits entered
|
|
if (self.verificationCode().length === 6 && event.keyCode === 13) {
|
|
self.verifyAuthenticatorSetup();
|
|
}
|
|
return true;
|
|
};
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
ko.applyBindings(new TwoFactorViewModel());
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|