Twofactor authentication and strong password
This commit is contained in:
@@ -0,0 +1,219 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user