Twofactor authentication and strong password
This commit is contained in:
@@ -33,6 +33,131 @@
|
||||
<body class="animsition page-login-v3 layout-full">
|
||||
<!-- Page -->
|
||||
<?php $this->load->view('specials/tellme_modal'); ?>
|
||||
|
||||
<!-- Password Change Modal -->
|
||||
<div class="modal fade" id="password-change-modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-warning">
|
||||
<h4 class="modal-title">
|
||||
<i class="icon wb-warning" aria-hidden="true"></i>
|
||||
Wachtwoord wijzigen verplicht
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="alert alert-warning">
|
||||
<strong>Let op:</strong> Uw huidige wachtwoord voldoet niet aan de beveiligingseisen.
|
||||
U moet uw wachtwoord wijzigen om door te gaan.
|
||||
</div>
|
||||
|
||||
<h5>Wachtwoordeisen:</h5>
|
||||
<ul class="list-unstyled" data-bind="foreach: passwordRequirements">
|
||||
<li style="padding: 5px 0;">
|
||||
<i class="icon wb-check text-success" aria-hidden="true"></i>
|
||||
<span data-bind="text: $data"></span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- New Password Input -->
|
||||
<div class="form-group form-material floating" data-plugin="formMaterial" style="margin-top: 30px;">
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
id="newPassword"
|
||||
data-bind="textInput: newPassword"
|
||||
autocomplete="new-password" />
|
||||
<label class="floating-label">Nieuw wachtwoord</label>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password Input -->
|
||||
<div class="form-group form-material floating" data-plugin="formMaterial">
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
id="confirmPassword"
|
||||
data-bind="textInput: confirmPassword, event: { keyup: handlePasswordChangeKeyup }"
|
||||
autocomplete="new-password" />
|
||||
<label class="floating-label">Bevestig wachtwoord</label>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div data-bind="visible: passwordChangeError()" class="alert alert-danger" style="margin-top: 20px;">
|
||||
<span data-bind="text: passwordChangeError"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button"
|
||||
class="btn btn-primary btn-lg btn-block"
|
||||
data-bind="click: changePassword, enable: newPassword().length >= 8 && confirmPassword().length >= 8 && !isChangingPassword()">
|
||||
<span data-bind="visible: !isChangingPassword()">Wachtwoord wijzigen</span>
|
||||
<span data-bind="visible: isChangingPassword()">Wijzigen...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2FA Verification Modal -->
|
||||
<div class="modal fade" id="twofactor-modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">
|
||||
<i class="icon wb-lock" aria-hidden="true"></i>
|
||||
Tweefactorauthenticatie
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<!-- Email Method -->
|
||||
<div data-bind="visible: twoFactorMethod() === 'email'">
|
||||
<div style="font-size: 48px; color: #348eda; margin-bottom: 20px;">
|
||||
<i class="icon wb-envelope" aria-hidden="true"></i>
|
||||
</div>
|
||||
<p>Voer de 6-cijferige code in die naar uw e-mail is verzonden.</p>
|
||||
</div>
|
||||
|
||||
<!-- Authenticator Method -->
|
||||
<div data-bind="visible: twoFactorMethod() === 'authenticator'">
|
||||
<div style="font-size: 48px; color: #348eda; margin-bottom: 20px;">
|
||||
<i class="icon wb-mobile" aria-hidden="true"></i>
|
||||
</div>
|
||||
<p>Voer de 6-cijferige code in van uw authenticator app.</p>
|
||||
</div>
|
||||
|
||||
<!-- Code Input -->
|
||||
<div class="form-group" style="margin-top: 30px;">
|
||||
<input type="text"
|
||||
class="form-control text-center"
|
||||
id="twoFactorCode"
|
||||
maxlength="6"
|
||||
placeholder="000000"
|
||||
style="font-size: 32px; letter-spacing: 8px; font-weight: bold;"
|
||||
data-bind="textInput: twoFactorCode, event: { keyup: handleTwoFactorKeyup }"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div data-bind="visible: twoFactorError()" class="alert alert-danger" style="margin-top: 20px;">
|
||||
<span data-bind="text: twoFactorError"></span>
|
||||
</div>
|
||||
|
||||
<!-- Resend Button (Email only) -->
|
||||
<div data-bind="visible: twoFactorMethod() === 'email'" style="margin-top: 20px;">
|
||||
<a href="#" 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>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-bind="click: cancelTwoFactor">Annuleren</button>
|
||||
<button type="button" class="btn btn-primary btn-lg" data-bind="click: verifyTwoFactor, enable: twoFactorCode().length === 6 && !isVerifying()">
|
||||
<span data-bind="visible: !isVerifying()">Verifiëren</span>
|
||||
<span data-bind="visible: isVerifying()">Verifiëren...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="login-form">
|
||||
@@ -116,6 +241,12 @@
|
||||
<script src="js/lib/modules/login/loginModule.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>
|
||||
// Apply bindings for password change modal
|
||||
$(function() {
|
||||
ko.applyBindings(dbo.loginModel, document.getElementById('password-change-modal'));
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user