220 lines
8.4 KiB
PHP
220 lines
8.4 KiB
PHP
<!DOCTYPE html>
|
|
<html class="no-js css-menubar" lang="en">
|
|
<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, user-scalable=0, minimal-ui">
|
|
<title>Tweefactorauthenticatie - DBOIS</title>
|
|
|
|
<link rel="icon" href="css/images/dbo-01-80x80.png" type="image/png">
|
|
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" href="css/vendor/bootstrap.min.css?v=<?=$this->version?>">
|
|
<link rel="stylesheet" href="css/vendor/bootstrap-extend.css?v=<?=$this->version?>">
|
|
<link rel="stylesheet" href="css/vendor/site.min.css?v=<?=$this->version?>">
|
|
|
|
<!-- Plugins -->
|
|
<link rel="stylesheet" href="css/vendor/plugins/asscrollable/asScrollable.css?v=<?=$this->version?>">
|
|
<link rel="stylesheet" href="css/vendor/plugins/switchery/switchery.css?v=<?=$this->version?>">
|
|
<link rel="stylesheet" href="css/vendor/plugins/slidepanel/slidePanel.css?v=<?=$this->version?>">
|
|
<link rel="stylesheet" href="css/vendor/plugins/flag-icon-css/flag-icon.css?v=<?=$this->version?>">
|
|
<link rel="stylesheet" href="css/login-v3.css?v=<?=$this->version?>">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="stylesheet" href="fonts/web-icons/web-icons.min.css?v=<?=$this->version?>">
|
|
<link rel="stylesheet" href="fonts/brand-icons/brand-icons.min.css?v=<?=$this->version?>">
|
|
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic'>
|
|
|
|
<style>
|
|
.verification-code-input {
|
|
text-align: center;
|
|
font-size: 32px;
|
|
letter-spacing: 8px;
|
|
font-weight: bold;
|
|
padding: 20px;
|
|
}
|
|
.resend-link {
|
|
margin-top: 20px;
|
|
display: inline-block;
|
|
}
|
|
.method-icon {
|
|
font-size: 48px;
|
|
color: #348eda;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="animsition page-login-v3 layout-full">
|
|
<!-- Page -->
|
|
<?php $this->load->view('specials/tellme_modal'); ?>
|
|
<div class="page vertical-align text-center" data-animsition-in="fade-in" data-animsition-out="fade-out">
|
|
<div class="page-content vertical-align-middle animation-slide-top animation-duration-1">
|
|
<div class="panel" id="verify2fa-form">
|
|
<div class="panel-body">
|
|
<div class="brand">
|
|
<img class="brand-img" src="css/images/logo_dbo.png" alt="DBOIS">
|
|
<h2 class="brand-text font-size-18">projectbeheer</h2>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="method-icon" data-bind="visible: method() === 'email'">
|
|
<i class="icon wb-envelope" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="method-icon" data-bind="visible: method() === 'authenticator'">
|
|
<i class="icon wb-mobile" aria-hidden="true"></i>
|
|
</div>
|
|
|
|
<h3>Tweefactorauthenticatie</h3>
|
|
|
|
<p data-bind="visible: method() === 'email'">
|
|
Voer de 6-cijferige code in die naar uw e-mail is verzonden.
|
|
</p>
|
|
<p data-bind="visible: method() === 'authenticator'">
|
|
Voer de 6-cijferige code in van uw authenticator app.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="form-group form-material floating mt-40" data-plugin="formMaterial">
|
|
<input type="text"
|
|
class="form-control verification-code-input"
|
|
name="verification_code"
|
|
maxlength="6"
|
|
data-bind="textInput: verificationCode, event: { keyup: handleKeyup }"
|
|
autocomplete="off"
|
|
autofocus />
|
|
<label class="floating-label">Verificatiecode</label>
|
|
</div>
|
|
|
|
<div data-bind="visible: errorMessage()" class="alert alert-danger">
|
|
<span data-bind="text: errorMessage"></span>
|
|
</div>
|
|
|
|
<button type="button"
|
|
class="btn btn-primary btn-block btn-lg mt-40"
|
|
data-bind="click: verify, enable: verificationCode().length === 6 && !isVerifying()">
|
|
<span data-bind="visible: !isVerifying()">Verifiëren</span>
|
|
<span data-bind="visible: isVerifying()">Verifiëren...</span>
|
|
</button>
|
|
|
|
<div data-bind="visible: method() === 'email'">
|
|
<a href="#" class="resend-link" data-bind="click: resendOtp, enable: !isResending()">
|
|
<span data-bind="visible: !isResending()">Code opnieuw verzenden</span>
|
|
<span data-bind="visible: isResending()">Verzenden...</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mt-20">
|
|
<a href="/login/logout">Annuleren</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="page-copyright page-copyright-inverse">
|
|
<p>© 2018. De Beleidsonderzoekers</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<!-- End Page -->
|
|
|
|
<!-- Core -->
|
|
<script src="js/vendor/jquery/jquery.js?v=<?=$this->version?>"></script>
|
|
<script src="js/vendor/popper-js/umd/popper.min.js?v=<?=$this->version?>"></script>
|
|
<script src="js/vendor/bootstrap/bootstrap.js?v=<?=$this->version?>"></script>
|
|
<script src="js/vendor/animsition/animsition.js?v=<?=$this->version?>"></script>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/vendor/Config.js?v=<?=$this->version?>"></script>
|
|
<script src="js/vendor/Knockout.min.js?v=<?=$this->version?>"></script>
|
|
<script src="js/lib/modules/specials/tellmeModule.js?v=<?=$this->version?>"></script>
|
|
<script src="js/lib/helpers.js?v=<?=$this->version?>"></script>
|
|
|
|
<script>
|
|
function Verify2FAViewModel() {
|
|
var self = this;
|
|
|
|
self.method = ko.observable('<?= $method ?>');
|
|
self.verificationCode = ko.observable('');
|
|
self.errorMessage = ko.observable('');
|
|
self.isVerifying = ko.observable(false);
|
|
self.isResending = ko.observable(false);
|
|
|
|
self.verify = function() {
|
|
if (self.verificationCode().length !== 6) {
|
|
return;
|
|
}
|
|
|
|
self.errorMessage('');
|
|
self.isVerifying(true);
|
|
|
|
$.ajax({
|
|
url: '/login/verify2fa',
|
|
method: 'POST',
|
|
data: { code: self.verificationCode() },
|
|
success: function(response) {
|
|
if (response.success) {
|
|
// Redirect to main application
|
|
window.location.href = '/';
|
|
} else {
|
|
self.errorMessage(response.message || 'Ongeldige verificatiecode');
|
|
self.verificationCode('');
|
|
}
|
|
self.isVerifying(false);
|
|
},
|
|
error: function() {
|
|
self.errorMessage('Er is een fout opgetreden. Probeer het opnieuw.');
|
|
self.isVerifying(false);
|
|
}
|
|
});
|
|
};
|
|
|
|
self.resendOtp = function() {
|
|
self.isResending(true);
|
|
self.errorMessage('');
|
|
|
|
$.ajax({
|
|
url: '/login/resendOtp',
|
|
method: 'POST',
|
|
success: function(response) {
|
|
if (response.success) {
|
|
alert(response.message || 'Nieuwe code verzonden');
|
|
} else {
|
|
self.errorMessage(response.message || 'Kan code niet opnieuw verzenden');
|
|
}
|
|
self.isResending(false);
|
|
},
|
|
error: function() {
|
|
self.errorMessage('Er is een fout opgetreden. Probeer het opnieuw.');
|
|
self.isResending(false);
|
|
}
|
|
});
|
|
|
|
return false;
|
|
};
|
|
|
|
self.handleKeyup = function(data, event) {
|
|
// Clear error message on input
|
|
self.errorMessage('');
|
|
|
|
// Auto-submit when 6 digits entered and Enter is pressed
|
|
if (self.verificationCode().length === 6 && event.keyCode === 13) {
|
|
self.verify();
|
|
}
|
|
|
|
// Only allow digits
|
|
var sanitized = self.verificationCode().replace(/[^0-9]/g, '');
|
|
if (sanitized !== self.verificationCode()) {
|
|
self.verificationCode(sanitized);
|
|
}
|
|
|
|
return true;
|
|
};
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
ko.applyBindings(new Verify2FAViewModel());
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|