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); 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 { .muted {
color: var(--color-text-muted); color: var(--color-text-muted);
} }

42
views/templates/login.php
View file

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