lindeas
/
jilo-web
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 7 Wiki Activity

Changes credentials pages to action-card. Deletes unused credentials.php

main
Yasen Pramatarov 2025-12-14 16:10:15 +02:00
parent 19521b432d
commit 8280f66b6d
4 changed files with 179 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
app/templates/credentials-2fa-setup.php
View File

@ -4,88 +4,93 @@
*/ */
?> ?>
<div class="tm-cred-card mx-auto"> <div class="action-card">
<div class="tm-profile-header"> <div class="action-card-header">
<p class="tm-profile-eyebrow">Security</p> <p class="action-eyebrow">Security</p>
<h2 class="tm-profile-title">Set up two-factor authentication</h2> <h2 class="action-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> <p class="action-subtitle">Protect your account with an extra verification step whenever you sign in.</p>
</div> </div>
<div class="action-card-body">
<div class="tm-cred-intro alert alert-info"> <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. 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> </div>
<?php endif; ?>
<?php if (isset($setupData) && is_array($setupData)): ?> <?php if (isset($error)): ?>
<div class="tm-cred-steps"> <div class="alert alert-danger mb-4">
<div class="tm-cred-step"> <?php echo htmlspecialchars($error); ?>
<h3>1. Install an authenticator app</h3>
<p>Use any TOTP-compatible app such as Google Authenticator, Microsoft Authenticator, or Authy.</p>
</div> </div>
<?php endif; ?>
<div class="tm-cred-step"> <?php if (isset($setupData) && is_array($setupData)): ?>
<h3>2. Scan the QR code</h3> <div class="tm-cred-steps">
<p>Open your authenticator app and scan the QR code below.</p> <div class="tm-cred-step">
<div class="tm-cred-qr"> <h3>1. Install an authenticator app</h3>
<div id="qrcode"></div> <p>Use any TOTP-compatible app such as Google Authenticator, Microsoft Authenticator, or Authy.</p>
<div class="tm-cred-secret"> </div>
<small>Can&apos;t scan? Enter this code manually:</small>
<code><?php echo htmlspecialchars($setupData['secret']); ?></code> <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&apos;t scan? Enter this code manually:</small>
<code><?php echo htmlspecialchars($setupData['secret']); ?></code>
</div>
</div> </div>
</div> </div>
</div>
<div class="tm-cred-step"> <div class="tm-cred-step">
<h3>3. Verify setup</h3> <h3>3. Verify setup</h3>
<p>Enter the 6-digit code shown in your authenticator app.</p> <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> <form method="post" action="?page=credentials&item=2fa&action=setup" class="action-form" novalidate>
<div class="mb-3"> <div class="action-form-group">
<label for="setup_code" class="form-label">One-time code</label> <label for="setup_code" class="action-form-label">One-time code</label>
<input type="text" <input type="text"
id="setup_code" id="setup_code"
name="code" name="code"
class="form-control" class="form-control action-form-control"
pattern="[0-9]{6}" pattern="[0-9]{6}"
maxlength="6" maxlength="6"
required required
placeholder="000000"> 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> </div>
<button class="btn btn-outline-secondary mt-3" onclick="window.print()">
<input type="hidden" name="secret" value="<?php echo htmlspecialchars($setupData['secret']); ?>"> Print backup codes
<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> </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> </div>
<button class="btn btn-outline-secondary mt-3" onclick="window.print()">
Print backup codes
</button>
</div> </div>
</div> <?php else: ?>
<?php else: ?> <div class="alert alert-danger">
<div class="alert alert-danger"> Failed to generate 2FA setup data. Please try again.
Failed to generate 2FA setup data. Please try again. </div>
</div> <div class="action-actions">
<a href="?page=credentials" class="btn btn-primary">Back to credentials</a> <a href="?page=credentials" class="btn btn-primary">Back to credentials</a>
<?php endif; ?> </div>
<?php endif; ?>
</div>
</div> </div>
<?php if (isset($setupData) && is_array($setupData)): ?> <?php if (isset($setupData) && is_array($setupData)): ?>

49
app/templates/credentials-2fa-verify.php
View File

@ -4,27 +4,26 @@
*/ */
?> ?>
<div class="auth-card mx-auto"> <div class="action-card">
<div class="auth-card-body"> <div class="action-card-header">
<div class="auth-header"> <p class="action-eyebrow">Security check</p>
<p class="auth-eyebrow">Security check</p> <h2 class="action-title">Two-factor authentication</h2>
<h2 class="auth-title">Two-factor authentication</h2> <p class="action-subtitle">Enter the 6-digit code from your authenticator app to continue.</p>
<p class="auth-subtitle">Enter the 6-digit code from your authenticator app to continue.</p> </div>
</div> <div class="action-card-body">
<?php if (isset($error)): ?> <?php if (isset($error)): ?>
<div class="alert alert-danger mb-4"> <div class="alert alert-danger mb-4">
<?php echo htmlspecialchars($error); ?> <?php echo htmlspecialchars($error); ?>
</div> </div>
<?php endif; ?> <?php endif; ?>
<form method="post" action="?page=login&action=verify" class="auth-form" novalidate> <form method="post" action="?page=login&action=verify" class="action-form" novalidate>
<div class="text-center mb-3"> <div class="action-form-group">
<label for="code" class="form-label">One-time code</label> <label for="code" class="action-form-label">One-time code</label>
<input type="text" <input type="text"
id="code" id="code"
name="code" name="code"
class="form-control text-center auth-otp-input" class="form-control action-form-control text-center"
pattern="[0-9]{6}" pattern="[0-9]{6}"
maxlength="6" maxlength="6"
inputmode="numeric" inputmode="numeric"
@ -36,26 +35,28 @@
<input type="hidden" name="user_id" value="<?php echo htmlspecialchars($userId); ?>"> <input type="hidden" name="user_id" value="<?php echo htmlspecialchars($userId); ?>">
<button type="submit" class="btn btn-primary auth-submit w-100"> <div class="action-actions">
Verify code <button type="submit" class="btn btn-primary">
</button> Verify code
</button>
</div>
</form> </form>
<div class="mt-4 text-center"> <div class="mt-4 text-center">
<p class="text-muted mb-2">Lost access to your authenticator app?</p> <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 Use a backup code
</button> </button>
</div> </div>
<div class="collapse mt-3" id="backupCodeForm"> <div class="collapse mt-3" id="backupCodeForm">
<form method="post" action="?page=login&action=verify" class="auth-form" novalidate> <form method="post" action="?page=login&action=verify" class="action-form" novalidate>
<div class="mb-3"> <div class="action-form-group">
<label for="backup_code" class="form-label">Backup code</label> <label for="backup_code" class="action-form-label">Backup code</label>
<input type="text" <input type="text"
id="backup_code" id="backup_code"
name="backup_code" name="backup_code"
class="form-control" class="form-control action-form-control"
pattern="[a-f0-9]{8}" pattern="[a-f0-9]{8}"
maxlength="8" maxlength="8"
required required
@ -64,9 +65,11 @@
<input type="hidden" name="user_id" value="<?php echo htmlspecialchars($userId); ?>"> <input type="hidden" name="user_id" value="<?php echo htmlspecialchars($userId); ?>">
<button type="submit" class="btn btn-secondary w-100"> <div class="action-actions">
Use backup code <button type="submit" class="btn btn-secondary">
</button> Use backup code
</button>
</div>
</form> </form>
</div> </div>
</div> </div>

148
app/templates/credentials-manage.php
View File

@ -5,80 +5,87 @@
*/ */
?> ?>
<div class="tm-cred-card mx-auto"> <div class="action-card">
<div class="tm-profile-header"> <div class="action-card-header">
<p class="tm-profile-eyebrow">Security</p> <p class="action-eyebrow">Security</p>
<h2 class="tm-profile-title">Manage credentials</h2> <h2 class="action-title">Manage credentials</h2>
<p class="tm-profile-subtitle">Update your password and keep two-factor authentication status in one place.</p> <p class="action-subtitle">Update your password and keep two-factor authentication status in one place.</p>
</div> </div>
<div class="action-card-body">
<div class="tm-cred-grid"> <div class="tm-cred-grid">
<section class="tm-cred-panel"> <section class="tm-cred-panel">
<div class="tm-cred-panel-head"> <div class="tm-cred-panel-head">
<div> <div>
<h3>Change password</h3> <h3>Change password</h3>
<p>Choose a strong password to keep your account safe.</p> <p>Choose a strong password to keep your account safe.</p>
</div>
<span class="badge bg-light text-dark">Required</span>
</div> </div>
<span class="badge bg-light text-dark">Required</span> <form method="post" action="?page=credentials&item=password" class="action-form" novalidate>
</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">
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>"> <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 <div class="action-form-group">
</button> <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> </form>
<?php else: ?> </section>
<div class="alert alert-warning d-flex align-items-center gap-2">
<i class="fas fa-lock"></i> <section class="tm-cred-panel">
<span>Two-factor authentication is not enabled yet.</span> <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> </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']); ?>"> <?php if ($has2fa): ?>
<button type="submit" class="btn btn-outline-primary w-100"> <div class="alert alert-success d-flex align-items-center gap-2">
Set up 2FA <i class="fas fa-shield-check"></i>
</button> <span>Two-factor authentication is currently enabled.</span>
</form> </div>
<?php endif; ?> <form method="post" action="?page=credentials&item=2fa&action=disable" class="action-form">
</section> <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>
</div> </div>
@ -89,4 +96,5 @@ document.getElementById('confirm_password').addEventListener('input', function()
} else { } else {
this.setCustomValidity(''); this.setCustomValidity('');
} }
});</script> });
</script>

51
app/templates/credentials.php
View File

@ -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>