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

Redesigns login page

main
Yasen Pramatarov 2025-11-19 19:54:16 +02:00
parent 9908f555b2
commit 67cc2a67e8
2 changed files with 125 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/templates/form-login.php
View File

@ -1,34 +1,44 @@
<!-- login form -->
<div class="card text-center w-50 mx-auto">
<h2 class="card-header">Login</h2>
<div class="card-body">
<p class="card-text"><strong>Welcome to <?= htmlspecialchars($config['site_name']); ?>!</strong><br />Please enter login credentials:</p>
<form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=login">
<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>
<?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="mb-3">
<label for="username" class="form-label">Username</label>
<div class="input-group auth-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"
pattern="[A-Za-z0-9_\-]{3,20}" title="3-20 characters, letters, numbers, - and _"
value="<?= htmlspecialchars($_POST['username'] ?? '') ?>"
required />
</div>
<div class="form-group mb-3">
<input type="password" class="form-control w-50 mx-auto" name="password" placeholder="Password"
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<div class="input-group auth-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"
pattern=".{8,}" title="Eight or more characters"
required />
</div>
<div class="form-group mb-3">
<label for="remember_me">
<input type="checkbox" id="remember_me" name="remember_me" />
remember me
</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>
<?php if (isset($_GET['redirect'])): ?>
<input type="hidden" name="redirect" value="<?php echo htmlspecialchars($_GET['redirect']); ?>">
<?php endif; ?>
<input type="submit" class="btn btn-primary" value="Login" />
<button type="submit" class="btn btn-primary auth-submit w-100">Login</button>
</form>
<div class="mt-3">
<a href="?page=login&action=forgot">forgot password?</a>
</div>
</div>
</div>
<!-- /login form -->

94
public_html/static/css/main.css
View File

@ -264,6 +264,100 @@ body {
gap: 1rem;
}
/* Auth forms */
.auth-card {
max-width: 420px;
margin-top: 3rem;
margin-bottom: 3rem;
background: rgba(255, 255, 255, 0.97);
border-radius: 1.25rem;
box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15);
border: none;
}
.auth-card-body {
padding: 2.5rem 2.75rem 2.25rem;
}
.auth-header {
text-align: left;
margin-bottom: 2rem;
}
.auth-eyebrow {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #94a3b8;
margin-bottom: 0.4rem;
}
.auth-title {
font-size: 1.6rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 0.4rem;
}
.auth-subtitle {
margin: 0;
color: #64748b;
font-size: 0.95rem;
}
.auth-input-group .input-group-text {
background: transparent;
border-right: none;
color: #94a3b8;
}
.auth-input-group .form-control {
border-left: none;
border-radius: 0 0.65rem 0.65rem 0;
}
.auth-input-group .input-group-text,
.auth-input-group .form-control {
border-color: rgba(148, 163, 184, 0.8);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-input-group .form-control:focus {
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}
.auth-remember .form-check-input {
margin-right: 0.35rem;
}
.auth-link {
font-size: 0.85rem;
color: #3b82f6;
text-decoration: none;
}
.auth-link:hover {
text-decoration: underline;
}
.auth-submit {
padding: 0.85rem 1rem;
border-radius: 0.85rem;
font-weight: 600;
letter-spacing: 0.03em;
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.35);
}
@media (max-width: 576px) {
.auth-card-body {
padding: 2rem 1.75rem;
}
.auth-title {
font-size: 1.35rem;
}
}
.modern-header-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);