Changes credentials pages to action-card. Deletes unused credentials.php
parent
19521b432d
commit
8280f66b6d
|
|
@ -4,88 +4,93 @@
|
|||
*/
|
||||
?>
|
||||
|
||||
<div class="tm-cred-card mx-auto">
|
||||
<div class="tm-profile-header">
|
||||
<p class="tm-profile-eyebrow">Security</p>
|
||||
<h2 class="tm-profile-title">Set up two-factor authentication</h2>
|
||||
<p class="tm-profile-subtitle">Protect your account with an extra verification step whenever you sign in.</p>
|
||||
<div class="action-card">
|
||||
<div class="action-card-header">
|
||||
<p class="action-eyebrow">Security</p>
|
||||
<h2 class="action-title">Set up two-factor authentication</h2>
|
||||
<p class="action-subtitle">Protect your account with an extra verification step whenever you sign in.</p>
|
||||
</div>
|
||||
|
||||
<div class="tm-cred-intro alert alert-info">
|
||||
Two-factor authentication adds an extra layer of protection. After setup, you will sign in with both your password and a code from your authenticator app.
|
||||
</div>
|
||||
|
||||
<?php if (isset($error)): ?>
|
||||
<div class="alert alert-danger mb-4">
|
||||
<?php echo htmlspecialchars($error); ?>
|
||||
<div class="action-card-body">
|
||||
<div class="alert alert-info">
|
||||
Two-factor authentication adds an extra layer of protection. After setup, you will sign in with both your password and a code from your authenticator app.
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (isset($setupData) && is_array($setupData)): ?>
|
||||
<div class="tm-cred-steps">
|
||||
<div class="tm-cred-step">
|
||||
<h3>1. Install an authenticator app</h3>
|
||||
<p>Use any TOTP-compatible app such as Google Authenticator, Microsoft Authenticator, or Authy.</p>
|
||||
<?php if (isset($error)): ?>
|
||||
<div class="alert alert-danger mb-4">
|
||||
<?php echo htmlspecialchars($error); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="tm-cred-step">
|
||||
<h3>2. Scan the QR code</h3>
|
||||
<p>Open your authenticator app and scan the QR code below.</p>
|
||||
<div class="tm-cred-qr">
|
||||
<div id="qrcode"></div>
|
||||
<div class="tm-cred-secret">
|
||||
<small>Can't scan? Enter this code manually:</small>
|
||||
<code><?php echo htmlspecialchars($setupData['secret']); ?></code>
|
||||
<?php if (isset($setupData) && is_array($setupData)): ?>
|
||||
<div class="tm-cred-steps">
|
||||
<div class="tm-cred-step">
|
||||
<h3>1. Install an authenticator app</h3>
|
||||
<p>Use any TOTP-compatible app such as Google Authenticator, Microsoft Authenticator, or Authy.</p>
|
||||
</div>
|
||||
|
||||
<div class="tm-cred-step">
|
||||
<h3>2. Scan the QR code</h3>
|
||||
<p>Open your authenticator app and scan the QR code below.</p>
|
||||
<div class="tm-cred-qr">
|
||||
<div id="qrcode"></div>
|
||||
<div class="tm-cred-secret">
|
||||
<small>Can't scan? Enter this code manually:</small>
|
||||
<code><?php echo htmlspecialchars($setupData['secret']); ?></code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tm-cred-step">
|
||||
<h3>3. Verify setup</h3>
|
||||
<p>Enter the 6-digit code shown in your authenticator app.</p>
|
||||
<form method="post" action="?page=credentials&item=2fa&action=setup" class="tm-cred-form" novalidate>
|
||||
<div class="mb-3">
|
||||
<label for="setup_code" class="form-label">One-time code</label>
|
||||
<input type="text"
|
||||
id="setup_code"
|
||||
name="code"
|
||||
class="form-control"
|
||||
pattern="[0-9]{6}"
|
||||
maxlength="6"
|
||||
required
|
||||
placeholder="000000">
|
||||
<div class="tm-cred-step">
|
||||
<h3>3. Verify setup</h3>
|
||||
<p>Enter the 6-digit code shown in your authenticator app.</p>
|
||||
<form method="post" action="?page=credentials&item=2fa&action=setup" class="action-form" novalidate>
|
||||
<div class="action-form-group">
|
||||
<label for="setup_code" class="action-form-label">One-time code</label>
|
||||
<input type="text"
|
||||
id="setup_code"
|
||||
name="code"
|
||||
class="form-control action-form-control"
|
||||
pattern="[0-9]{6}"
|
||||
maxlength="6"
|
||||
required
|
||||
placeholder="000000">
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="secret" value="<?php echo htmlspecialchars($setupData['secret']); ?>">
|
||||
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
|
||||
|
||||
<div class="action-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Verify and enable 2FA
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="tm-cred-step">
|
||||
<h3>Backup codes</h3>
|
||||
<p class="text-danger mb-3">
|
||||
Save these codes somewhere secure. Each code can be used once if you lose access to your authenticator app.
|
||||
</p>
|
||||
<div class="tm-cred-backup">
|
||||
<?php foreach ($setupData['backupCodes'] as $code): ?>
|
||||
<code><?php echo htmlspecialchars($code); ?></code>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="secret" value="<?php echo htmlspecialchars($setupData['secret']); ?>">
|
||||
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
|
||||
|
||||
<button type="submit" class="btn btn-primary tm-contact-submit w-100">
|
||||
Verify and enable 2FA
|
||||
<button class="btn btn-outline-secondary mt-3" onclick="window.print()">
|
||||
Print backup codes
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="tm-cred-step">
|
||||
<h3>Backup codes</h3>
|
||||
<p class="text-danger mb-3">
|
||||
Save these codes somewhere secure. Each code can be used once if you lose access to your authenticator app.
|
||||
</p>
|
||||
<div class="tm-cred-backup">
|
||||
<?php foreach ($setupData['backupCodes'] as $code): ?>
|
||||
<code><?php echo htmlspecialchars($code); ?></code>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary mt-3" onclick="window.print()">
|
||||
Print backup codes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="alert alert-danger">
|
||||
Failed to generate 2FA setup data. Please try again.
|
||||
</div>
|
||||
<a href="?page=credentials" class="btn btn-primary">Back to credentials</a>
|
||||
<?php endif; ?>
|
||||
<?php else: ?>
|
||||
<div class="alert alert-danger">
|
||||
Failed to generate 2FA setup data. Please try again.
|
||||
</div>
|
||||
<div class="action-actions">
|
||||
<a href="?page=credentials" class="btn btn-primary">Back to credentials</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (isset($setupData) && is_array($setupData)): ?>
|
||||
|
|
|
|||
|
|
@ -4,27 +4,26 @@
|
|||
*/
|
||||
?>
|
||||
|
||||
<div class="auth-card mx-auto">
|
||||
<div class="auth-card-body">
|
||||
<div class="auth-header">
|
||||
<p class="auth-eyebrow">Security check</p>
|
||||
<h2 class="auth-title">Two-factor authentication</h2>
|
||||
<p class="auth-subtitle">Enter the 6-digit code from your authenticator app to continue.</p>
|
||||
</div>
|
||||
|
||||
<div class="action-card">
|
||||
<div class="action-card-header">
|
||||
<p class="action-eyebrow">Security check</p>
|
||||
<h2 class="action-title">Two-factor authentication</h2>
|
||||
<p class="action-subtitle">Enter the 6-digit code from your authenticator app to continue.</p>
|
||||
</div>
|
||||
<div class="action-card-body">
|
||||
<?php if (isset($error)): ?>
|
||||
<div class="alert alert-danger mb-4">
|
||||
<?php echo htmlspecialchars($error); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<form method="post" action="?page=login&action=verify" class="auth-form" novalidate>
|
||||
<div class="text-center mb-3">
|
||||
<label for="code" class="form-label">One-time code</label>
|
||||
<form method="post" action="?page=login&action=verify" class="action-form" novalidate>
|
||||
<div class="action-form-group">
|
||||
<label for="code" class="action-form-label">One-time code</label>
|
||||
<input type="text"
|
||||
id="code"
|
||||
name="code"
|
||||
class="form-control text-center auth-otp-input"
|
||||
class="form-control action-form-control text-center"
|
||||
pattern="[0-9]{6}"
|
||||
maxlength="6"
|
||||
inputmode="numeric"
|
||||
|
|
@ -36,26 +35,28 @@
|
|||
|
||||
<input type="hidden" name="user_id" value="<?php echo htmlspecialchars($userId); ?>">
|
||||
|
||||
<button type="submit" class="btn btn-primary auth-submit w-100">
|
||||
Verify code
|
||||
</button>
|
||||
<div class="action-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Verify code
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<p class="text-muted mb-2">Lost access to your authenticator app?</p>
|
||||
<button class="btn btn-link auth-link p-0" type="button" data-toggle="collapse" data-target="#backupCodeForm">
|
||||
<button class="btn btn-link p-0" type="button" data-toggle="collapse" data-target="#backupCodeForm">
|
||||
Use a backup code
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="collapse mt-3" id="backupCodeForm">
|
||||
<form method="post" action="?page=login&action=verify" class="auth-form" novalidate>
|
||||
<div class="mb-3">
|
||||
<label for="backup_code" class="form-label">Backup code</label>
|
||||
<form method="post" action="?page=login&action=verify" class="action-form" novalidate>
|
||||
<div class="action-form-group">
|
||||
<label for="backup_code" class="action-form-label">Backup code</label>
|
||||
<input type="text"
|
||||
id="backup_code"
|
||||
name="backup_code"
|
||||
class="form-control"
|
||||
class="form-control action-form-control"
|
||||
pattern="[a-f0-9]{8}"
|
||||
maxlength="8"
|
||||
required
|
||||
|
|
@ -64,9 +65,11 @@
|
|||
|
||||
<input type="hidden" name="user_id" value="<?php echo htmlspecialchars($userId); ?>">
|
||||
|
||||
<button type="submit" class="btn btn-secondary w-100">
|
||||
Use backup code
|
||||
</button>
|
||||
<div class="action-actions">
|
||||
<button type="submit" class="btn btn-secondary">
|
||||
Use backup code
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,80 +5,87 @@
|
|||
*/
|
||||
?>
|
||||
|
||||
<div class="tm-cred-card mx-auto">
|
||||
<div class="tm-profile-header">
|
||||
<p class="tm-profile-eyebrow">Security</p>
|
||||
<h2 class="tm-profile-title">Manage credentials</h2>
|
||||
<p class="tm-profile-subtitle">Update your password and keep two-factor authentication status in one place.</p>
|
||||
<div class="action-card">
|
||||
<div class="action-card-header">
|
||||
<p class="action-eyebrow">Security</p>
|
||||
<h2 class="action-title">Manage credentials</h2>
|
||||
<p class="action-subtitle">Update your password and keep two-factor authentication status in one place.</p>
|
||||
</div>
|
||||
|
||||
<div class="tm-cred-grid">
|
||||
<section class="tm-cred-panel">
|
||||
<div class="tm-cred-panel-head">
|
||||
<div>
|
||||
<h3>Change password</h3>
|
||||
<p>Choose a strong password to keep your account safe.</p>
|
||||
<div class="action-card-body">
|
||||
<div class="tm-cred-grid">
|
||||
<section class="tm-cred-panel">
|
||||
<div class="tm-cred-panel-head">
|
||||
<div>
|
||||
<h3>Change password</h3>
|
||||
<p>Choose a strong password to keep your account safe.</p>
|
||||
</div>
|
||||
<span class="badge bg-light text-dark">Required</span>
|
||||
</div>
|
||||
<span class="badge bg-light text-dark">Required</span>
|
||||
</div>
|
||||
<form method="post" action="?page=credentials&item=password" class="tm-cred-form" novalidate>
|
||||
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="current_password" class="form-label">Current password</label>
|
||||
<input type="password" class="form-control" id="current_password" name="current_password" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="new_password" class="form-label">New password</label>
|
||||
<input type="password" class="form-control" id="new_password" name="new_password" pattern=".{8,}" title="Password must be at least 8 characters long" required>
|
||||
<small class="form-text text-muted">Minimum 8 characters</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="confirm_password" class="form-label">Confirm new password</label>
|
||||
<input type="password" class="form-control" id="confirm_password" name="confirm_password" pattern=".{8,}" required>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary tm-contact-submit w-100">Save new password</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="tm-cred-panel">
|
||||
<div class="tm-cred-panel-head">
|
||||
<div>
|
||||
<h3>Two-factor authentication</h3>
|
||||
<p>Strengthen security with a verification code from your authenticator app.</p>
|
||||
</div>
|
||||
<span class="badge <?= $has2fa ? 'bg-success' : 'bg-warning text-dark' ?>">
|
||||
<?= $has2fa ? 'Enabled' : 'Disabled' ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<?php if ($has2fa): ?>
|
||||
<div class="alert alert-success d-flex align-items-center gap-2">
|
||||
<i class="fas fa-shield-check"></i>
|
||||
<span>Two-factor authentication is currently enabled.</span>
|
||||
</div>
|
||||
<form method="post" action="?page=credentials&item=2fa&action=disable" class="tm-cred-form">
|
||||
<form method="post" action="?page=credentials&item=password" class="action-form" novalidate>
|
||||
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
|
||||
<button type="submit" class="btn btn-outline-danger w-100" onclick="return confirm('Disable two-factor authentication? This will make your account less secure.')">
|
||||
Disable 2FA
|
||||
</button>
|
||||
|
||||
<div class="action-form-group">
|
||||
<label for="current_password" class="action-form-label">Current password</label>
|
||||
<input type="password" class="form-control action-form-control" id="current_password" name="current_password" required>
|
||||
</div>
|
||||
|
||||
<div class="action-form-group">
|
||||
<label for="new_password" class="action-form-label">New password</label>
|
||||
<input type="password" class="form-control action-form-control" id="new_password" name="new_password" pattern=".{8,}" title="Password must be at least 8 characters long" required>
|
||||
<small class="form-text text-muted">Minimum 8 characters</small>
|
||||
</div>
|
||||
|
||||
<div class="action-form-group">
|
||||
<label for="confirm_password" class="action-form-label">Confirm new password</label>
|
||||
<input type="password" class="form-control action-form-control" id="confirm_password" name="confirm_password" pattern=".{8,}" required>
|
||||
</div>
|
||||
|
||||
<div class="action-actions">
|
||||
<button type="submit" class="btn btn-primary">Save new password</button>
|
||||
</div>
|
||||
</form>
|
||||
<?php else: ?>
|
||||
<div class="alert alert-warning d-flex align-items-center gap-2">
|
||||
<i class="fas fa-lock"></i>
|
||||
<span>Two-factor authentication is not enabled yet.</span>
|
||||
</section>
|
||||
|
||||
<section class="tm-cred-panel">
|
||||
<div class="tm-cred-panel-head">
|
||||
<div>
|
||||
<h3>Two-factor authentication</h3>
|
||||
<p>Strengthen security with a verification code from your authenticator app.</p>
|
||||
</div>
|
||||
<span class="badge <?= $has2fa ? 'bg-success' : 'bg-warning text-dark' ?>">
|
||||
<?= $has2fa ? 'Enabled' : 'Disabled' ?>
|
||||
</span>
|
||||
</div>
|
||||
<form method="post" action="?page=credentials&item=2fa&action=setup" class="tm-cred-form">
|
||||
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
|
||||
<button type="submit" class="btn btn-outline-primary w-100">
|
||||
Set up 2FA
|
||||
</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
|
||||
<?php if ($has2fa): ?>
|
||||
<div class="alert alert-success d-flex align-items-center gap-2">
|
||||
<i class="fas fa-shield-check"></i>
|
||||
<span>Two-factor authentication is currently enabled.</span>
|
||||
</div>
|
||||
<form method="post" action="?page=credentials&item=2fa&action=disable" class="action-form">
|
||||
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
|
||||
<div class="action-actions">
|
||||
<button type="submit" class="btn btn-outline-danger" onclick="return confirm('Disable two-factor authentication? This will make your account less secure.')">
|
||||
Disable 2FA
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<?php else: ?>
|
||||
<div class="alert alert-warning d-flex align-items-center gap-2">
|
||||
<i class="fas fa-lock"></i>
|
||||
<span>Two-factor authentication is not enabled yet.</span>
|
||||
</div>
|
||||
<form method="post" action="?page=credentials&item=2fa&action=setup" class="action-form">
|
||||
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
|
||||
<div class="action-actions">
|
||||
<button type="submit" class="btn btn-outline-primary">
|
||||
Set up 2FA
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -89,4 +96,5 @@ document.getElementById('confirm_password').addEventListener('input', function()
|
|||
} else {
|
||||
this.setCustomValidity('');
|
||||
}
|
||||
});</script>
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
|
||||
<!-- Two-Factor Authentication -->
|
||||
<div class="card mt-4">
|
||||
<div class="card-header">
|
||||
<h3>Two-factor authentication</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<?php if ($has2fa): ?>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0">
|
||||
<i class="fas fa-shield-alt text-success"></i>
|
||||
Two-factor authentication is enabled
|
||||
</p>
|
||||
<small class="text-muted">
|
||||
Your account is protected with an authenticator app
|
||||
</small>
|
||||
</div>
|
||||
<form method="post" class="ml-3">
|
||||
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
|
||||
<input type="hidden" name="item" value="2fa">
|
||||
<input type="hidden" name="action" value="disable">
|
||||
<button type="submit" class="btn btn-outline-danger"
|
||||
onclick="return confirm('Are you sure you want to disable two-factor authentication? This will make your account less secure.')">
|
||||
Disable 2FA
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0">
|
||||
<i class="fas fa-shield-alt text-muted"></i>
|
||||
Two-factor authentication is not enabled
|
||||
</p>
|
||||
<small class="text-muted">
|
||||
Add an extra layer of security to your account by requiring both your password and an authentication code
|
||||
</small>
|
||||
</div>
|
||||
<form method="post" class="ml-3">
|
||||
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
|
||||
<input type="hidden" name="item" value="2fa">
|
||||
<input type="hidden" name="action" value="enable">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Enable 2FA
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue