Updated UI / UX MFA enforcement

This commit is contained in:
johnnyq 2025-01-28 19:23:25 -05:00
parent 52ad2ba322
commit 02fdc66af9
1 changed files with 4 additions and 52 deletions

View File

@ -40,53 +40,22 @@ $data = "otpauth://totp/ITFlow:$session_email?secret=$token";
<!-- Theme style -->
<link rel="stylesheet" href="plugins/adminlte/css/adminlte.min.css">
<link href="plugins/toastr/toastr.min.css" rel="stylesheet">
<!-- CSS to allow regular button to show as block button in mobile response view using the class btn-responsive -->
<style>
/*
For screens below 576px (xs):
- Make the button full-width, display:block
*/
@media (max-width: 575.98px) {
.btn-responsive {
display: block;
width: 100%;
}
}
/*
For screens 576px (sm) and above:
- Revert to an inline style
*/
@media (min-width: 576px) {
.btn-responsive {
display: inline-block;
width: auto;
}
}
</style>
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/toastr/toastr.min.js"></script>
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed accent-<?php echo nullable_htmlentities($config_theme); ?>">
<body class="bg-light">
<div class="wrapper text-sm">
<div class="container col-md-5">
<?php require_once 'includes/inc_alert_feedback.php'; ?>
<div class="card card-dark mt-5">
<div class="card-header py-2">
<h3 class="card-title mt-2"><i class="fas fa-shield-alt mr-2"></i>Multi-Factor Authentication Enforcement</h3>
<div class="card-tools">
<a href="post.php?logout" class="btn btn-light btn-sm text-dark">
<i class="fa fa-door-open mr-2"></i>Logout
</a>
</div>
<div class="card-header">
<h3 class="card-title"><i class="fas fa-shield-alt mr-2"></i>Multi-Factor Authentication Enforcement</h3>
</div>
<div class="card-body">
<form action="post.php" method="post" autocomplete="off">
@ -112,7 +81,7 @@ $data = "otpauth://totp/ITFlow:$session_email?secret=$token";
</div>
<input type="text" class="form-control" inputmode="numeric" pattern="[0-9]*" minlength="6" maxlength="6" name="verify_code" placeholder="Enter 6 digit code to verify MFA" required>
<div class="input-group-append">
<button type="submit" name="enable_mfa" class="btn btn-primary text-bold"><i class="fa fa-check mr-2"></i>Enable</button>
<button type="submit" name="enable_mfa" class="btn btn-primary"><i class="fa fa-check mr-2"></i>Enable</button>
</div>
</div>
</div>
@ -131,17 +100,8 @@ $data = "otpauth://totp/ITFlow:$session_email?secret=$token";
<!-- Custom js-->
<script src="plugins/clipboardjs/clipboard.min.js"></script>
<!-- AdminLTE App -->
<script src="plugins/adminlte/js/adminlte.min.js"></script>
<script>
//Prevents resubmit on forms
if(window.history.replaceState){
window.history.replaceState(null, null, window.location.href);
}
// Slide alert up after 4 secs
$("#alert").fadeTo(5000, 500).slideUp(500, function(){
$("#alert").slideUp(500);
@ -149,10 +109,6 @@ $("#alert").fadeTo(5000, 500).slideUp(500, function(){
// ClipboardJS
//Fix to allow Clipboard Copying within Bootstrap Modals
//For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the container value.
$.fn.modal.Constructor.prototype._enforceFocus = function() {};
// Tooltip
$('button').tooltip({
@ -186,10 +142,6 @@ clipboard.on('error', function(e) {
hideTooltip(e.trigger);
});
// Enable Popovers
$(function () {
$('[data-toggle="popover"]').popover()
});
</script>
<script src="js/confirm_modal.js"></script>
</body>