yisroelbaum/Goal-Calibration
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style login page with auth-card layout

Browse source 
introduce .auth-shell and .auth-card classes for the centered,
narrow-card layout shared by login and register, then apply them
to the login template. form ids and the #login-error element are
preserved so the existing cypress auth flows still target them.
This commit is contained in:
Yisroel Baum 2026-05-01 11:33:24 +03:00
parent e51378b8c7
commit a20d12177e
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
2 changed files with 43 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

18
public/css/app.css
View file

@ -397,6 +397,24 @@ form {
font-size: var(--font-size-sm);
}
.auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-5) var(--space-4);
}
.auth-card {
width: 100%;
max-width: 24rem;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: var(--space-6);
}
.muted {
color: var(--color-text-muted);
}

42
views/templates/login.php
View file

@ -7,23 +7,31 @@
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<h1>Login</h1>
<form id="login-form">
<label>Email
<input type="email" id="email" name="email" required />
</label>
<label>Password
<input
type="password"
id="password"
name="password"
required
/>
</label>
<button type="submit">Login</button>
</form>
<p id="login-error" hidden></p>
<p><a href="/register">Register</a></p>
<main class="auth-shell">
<div class="auth-card stack">
<h1>Login</h1>
<form id="login-form" class="stack">
<label>Email
<input type="email" id="email" name="email" required />
</label>
<label>Password
<input
type="password"
id="password"
name="password"
required
/>
</label>
<button type="submit" class="btn btn-primary full-width">
Login
</button>
</form>
<p id="login-error" class="error" hidden></p>
<p class="muted">
<a href="/register">Need an account? Register</a>
</p>
</div>
</main>
<script src="/js/auth.js"></script>
</body>
</html>