Changes action pages to uniform action-card design
parent
2639a0f60a
commit
19521b432d
|
|
@ -1,43 +1,51 @@
|
|||
<!-- login form -->
|
||||
<div class="auth-card mx-auto">
|
||||
<div class="auth-card-body">
|
||||
<div class="auth-header">
|
||||
<p class="auth-eyebrow">Welcome back</p>
|
||||
<h2 class="auth-title">Sign in to <?= htmlspecialchars($config['site_name']); ?></h2>
|
||||
<p class="auth-subtitle">Enter your credentials to continue</p>
|
||||
</div>
|
||||
<form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=login" class="auth-form" novalidate>
|
||||
<div class="action-card">
|
||||
<div class="action-card-header">
|
||||
<p class="action-eyebrow">Welcome back</p>
|
||||
<h2 class="action-title">Sign in</h2>
|
||||
<p class="action-subtitle">Enter your credentials to continue to <?= htmlspecialchars($config['site_name']); ?></p>
|
||||
</div>
|
||||
|
||||
<div class="action-card-body">
|
||||
<form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=login" class="action-form" novalidate>
|
||||
<?php include CSRF_TOKEN_INCLUDE; ?>
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<div class="input-group auth-input-group">
|
||||
<div class="action-form-group">
|
||||
<label for="username" class="action-form-label">Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fas fa-user"></i></span>
|
||||
<input type="text" id="username" class="form-control" name="username" placeholder="Username"
|
||||
<input type="text" id="username" class="form-control action-form-control" name="username" placeholder="Username"
|
||||
pattern="[A-Za-z0-9_\-]{3,20}" title="3-20 characters, letters, numbers, - and _"
|
||||
value="<?= htmlspecialchars($_POST['username'] ?? '') ?>"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<div class="input-group auth-input-group">
|
||||
|
||||
<div class="action-form-group">
|
||||
<label for="password" class="action-form-label">Password</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fas fa-lock"></i></span>
|
||||
<input type="password" id="password" class="form-control" name="password" placeholder="Password"
|
||||
<input type="password" id="password" class="form-control action-form-control" name="password" placeholder="Password"
|
||||
pattern=".{8,}" title="Eight or more characters"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-4 auth-remember">
|
||||
<label class="form-check-label" for="remember_me">
|
||||
<input class="form-check-input" type="checkbox" id="remember_me" name="remember_me" />
|
||||
Remember me
|
||||
</label>
|
||||
<a class="auth-link" href="?page=login&action=forgot">Forgot password?</a>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="remember" name="remember" class="form-check-input" <?= isset($_POST['remember']) ? 'checked' : '' ?>>
|
||||
<label for="remember" class="form-check-label">Remember me</label>
|
||||
</div>
|
||||
<a href="<?= htmlspecialchars($app_root) ?>?page=login&action=forgot" class="text-decoration-none">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<div class="action-actions">
|
||||
<button type="submit" class="btn btn-primary w-100">
|
||||
<i class="fas fa-sign-in-alt me-2"></i>Sign in
|
||||
</button>
|
||||
</div>
|
||||
<?php if (isset($_GET['redirect'])): ?>
|
||||
<input type="hidden" name="redirect" value="<?php echo htmlspecialchars($_GET['redirect']); ?>">
|
||||
<?php endif; ?>
|
||||
<button type="submit" class="btn btn-primary auth-submit w-100">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,39 @@
|
|||
|
||||
<div class="auth-card mx-auto">
|
||||
<div class="auth-card-body">
|
||||
<div class="auth-header">
|
||||
<p class="auth-eyebrow">Forgot password</p>
|
||||
<h2 class="auth-title">Reset your access</h2>
|
||||
<p class="auth-subtitle">Enter the email linked to your account and if it exists in our records we will send you reset instructions.</p>
|
||||
</div>
|
||||
<form method="post" action="?page=login&action=forgot" class="auth-form" novalidate>
|
||||
<div class="action-card">
|
||||
<div class="action-card-header">
|
||||
<p class="action-eyebrow">Account recovery</p>
|
||||
<h2 class="action-title">Forgot password</h2>
|
||||
<p class="action-subtitle">Enter your email address and we'll send you reset instructions if it exists in our records</p>
|
||||
</div>
|
||||
|
||||
<div class="action-card-body">
|
||||
<form method="post" action="?page=login&action=forgot" class="action-form" novalidate>
|
||||
<?php include CSRF_TOKEN_INCLUDE; ?>
|
||||
<div class="mb-4">
|
||||
<label for="email" class="form-label">Email address</label>
|
||||
<div class="input-group auth-input-group">
|
||||
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
|
||||
<input type="email"
|
||||
class="form-control"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="you@example.com"
|
||||
value="<?= htmlspecialchars($_POST['email'] ?? '') ?>"
|
||||
required
|
||||
autocomplete="email">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary auth-submit w-100">
|
||||
Send reset instructions
|
||||
</button>
|
||||
</form>
|
||||
<div class="mt-4 text-center">
|
||||
<a class="auth-link" href="?page=login">Back to login</a>
|
||||
<div class="action-form-group">
|
||||
<label for="email" class="action-form-label">Email address</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
|
||||
<input type="email"
|
||||
class="form-control action-form-control"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="you@example.com"
|
||||
value="<?= htmlspecialchars($_POST['email'] ?? '') ?>"
|
||||
required
|
||||
autocomplete="email">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-paper-plane me-2"></i>Send reset instructions
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<a href="?page=login" class="text-decoration-none">← Back to login</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,20 @@
|
|||
|
||||
<div class="auth-card mx-auto">
|
||||
<div class="auth-card-body">
|
||||
<div class="auth-header">
|
||||
<p class="auth-eyebrow">Secure account</p>
|
||||
<h2 class="auth-title">Choose a new password</h2>
|
||||
<p class="auth-subtitle">Create a password that is at least 8 characters long. We will sign you in once it is updated.</p>
|
||||
</div>
|
||||
<form method="post" action="?page=login&action=reset&token=<?= htmlspecialchars(urlencode($token)) ?>" class="auth-form" novalidate>
|
||||
<div class="action-card">
|
||||
<div class="action-card-header">
|
||||
<p class="action-eyebrow">Account recovery</p>
|
||||
<h2 class="action-title">Reset password</h2>
|
||||
<p class="action-subtitle">Create a new password that is at least 8 characters long</p>
|
||||
</div>
|
||||
|
||||
<div class="action-card-body">
|
||||
<form method="post" action="?page=login&action=reset&token=<?= htmlspecialchars(urlencode($token)) ?>" class="action-form" novalidate>
|
||||
<?php include CSRF_TOKEN_INCLUDE; ?>
|
||||
<div class="mb-3">
|
||||
<label for="new_password" class="form-label">New password</label>
|
||||
<div class="input-group auth-input-group">
|
||||
<div class="action-form-group">
|
||||
<label for="new_password" class="action-form-label">New password</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fas fa-key"></i></span>
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
class="form-control action-form-control"
|
||||
id="new_password"
|
||||
name="new_password"
|
||||
placeholder="Enter new password"
|
||||
|
|
@ -22,24 +23,31 @@
|
|||
autocomplete="new-password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="confirm_password" class="form-label">Confirm password</label>
|
||||
<div class="input-group auth-input-group">
|
||||
|
||||
<div class="action-form-group">
|
||||
<label for="confirm_password" class="action-form-label">Confirm password</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fas fa-check"></i></span>
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
class="form-control action-form-control"
|
||||
id="confirm_password"
|
||||
name="confirm_password"
|
||||
placeholder="Re-enter new password"
|
||||
placeholder="Confirm new password"
|
||||
required
|
||||
minlength="8"
|
||||
autocomplete="new-password">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary auth-submit w-100">
|
||||
Set new password
|
||||
</button>
|
||||
|
||||
<div class="action-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-lock me-2"></i>Update password
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<a href="?page=login" class="text-decoration-none">← Back to login</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +1,52 @@
|
|||
<!-- registration form -->
|
||||
<div class="card text-center w-50 mx-auto">
|
||||
<h2 class="card-header">Register</h2>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Enter credentials for registration:</p>
|
||||
<form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=register">
|
||||
<div class="action-card">
|
||||
<div class="action-card-header">
|
||||
<p class="action-eyebrow">Create account</p>
|
||||
<h2 class="action-title">Register</h2>
|
||||
<p class="action-subtitle">Enter your credentials to create a new account</p>
|
||||
</div>
|
||||
|
||||
<div class="action-card-body">
|
||||
<form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=register" class="action-form">
|
||||
<?php include CSRF_TOKEN_INCLUDE; ?>
|
||||
<div class="form-group mb-3">
|
||||
<input type="text" class="form-control w-50 mx-auto" name="username" placeholder="Username"
|
||||
<div class="action-form-group">
|
||||
<label for="username" class="action-form-label">Username</label>
|
||||
<input type="text" class="form-control action-form-control" name="username" placeholder="Username"
|
||||
pattern="[A-Za-z0-9_\-]{3,20}" title="3-20 characters, letters, numbers, - and _"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group mb-3">
|
||||
<input type="password" class="form-control w-50 mx-auto" name="password" placeholder="Password"
|
||||
|
||||
<div class="action-form-group">
|
||||
<label for="password" class="action-form-label">Password</label>
|
||||
<input type="password" class="form-control action-form-control" name="password" placeholder="Password"
|
||||
pattern=".{8,}" title="Eight or more characters"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group mb-3">
|
||||
<input type="password" class="form-control w-50 mx-auto" name="confirm_password" placeholder="Confirm password"
|
||||
|
||||
<div class="action-form-group">
|
||||
<label for="confirm_password" class="action-form-label">Confirm Password</label>
|
||||
<input type="password" class="form-control action-form-control" name="confirm_password" placeholder="Confirm password"
|
||||
pattern=".{8,}" title="Eight or more characters"
|
||||
required />
|
||||
</div>
|
||||
<div class="form-group mb-3">
|
||||
|
||||
<div class="action-form-group">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="terms" name="terms" required>
|
||||
<label class="form-check-label" for="terms">
|
||||
<input type="checkbox" class="form-check-input" id="terms" name="terms" required>
|
||||
I agree to the <a href="<?= htmlspecialchars($app_root) ?>?page=terms" target="_blank">terms & conditions</a> and <a href="<?= htmlspecialchars($app_root) ?>?page=privacy" target="_blank">privacy policy</a>
|
||||
</label>
|
||||
</div>
|
||||
<small class="text-muted mt-2">
|
||||
<small class="text-muted mt-2 d-block">
|
||||
We use cookies to improve your experience. See our <a href="<?= htmlspecialchars($app_root) ?>?page=cookies" target="_blank">cookies policy</a>
|
||||
</small>
|
||||
</div>
|
||||
<input type="submit" class="btn btn-primary" value="Register" />
|
||||
|
||||
<div class="action-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-user-plus me-2"></i>Create account
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue