Skip to content

Commit a7dacc2

Browse files
davidortinauCopilot
davidortinau
and
Copilot
committed
Replace default Blazor layout with clean AuthLayout for Account pages
- Create AuthLayout.razor: centered card, dark theme, branded header - Update all Account pages to use AuthLayout instead of default MainLayout - Fix rememberMe parameter to nullable bool (unchecked checkbox not sent) - Remove nested container/row/col wrappers (AuthLayout handles centering) - Add Bootstrap icon for AccessDenied page Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 09fe564 commit a7dacc2

File tree

8 files changed

+195
-212
lines changed

8 files changed

+195
-212
lines changed

‎src/SentenceStudio.WebApp/Auth/AccountEndpoints.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@ public static void MapAccountEndpoints(this WebApplication app)
1414
group.MapPost("/Login", async (
1515
[FromForm] string email,
1616
[FromForm] string password,
17-
[FromForm] bool rememberMe,
17+
[FromForm] bool? rememberMe,
1818
[FromForm] string? returnUrl,
1919
SignInManager<ApplicationUser> signInManager) =>
2020
{
2121
returnUrl ??= "/";
2222

2323
var result = await signInManager.PasswordSignInAsync(
24-
email, password, rememberMe, lockoutOnFailure: false);
24+
email, password, rememberMe ?? false, lockoutOnFailure: false);
2525

2626
if (result.Succeeded)
2727
{

‎src/SentenceStudio.WebApp/Components/Layout/AuthLayout.razor‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@inherits LayoutComponentBase
2+
3+
<div class="d-flex vh-100 align-items-center justify-content-center"
4+
style="background: var(--bs-body-bg, #1a1a2e);">
5+
<div class="w-100" style="max-width: 440px; padding: 1rem;">
6+
<div class="text-center mb-4">
7+
<h1 class="text-primary-ss fs-3 fw-bold">
8+
<i class="bi bi-translate me-2"></i>SentenceStudio
9+
</h1>
10+
</div>
11+
@Body
12+
<div class="text-center mt-4">
13+
<a href="/" class="text-secondary text-decoration-none small">
14+
<i class="bi bi-arrow-left me-1"></i>Back to home
15+
</a>
16+
</div>
17+
</div>
18+
</div>

‎src/SentenceStudio.WebApp/Components/Pages/Account/AccessDenied.razor‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
@page "/Account/AccessDenied"
2-
@layout SentenceStudio.WebApp.Components.Layout.MainLayout
2+
@layout SentenceStudio.WebApp.Components.Layout.AuthLayout
33

44
<PageTitle>Access Denied - Sentence Studio</PageTitle>
55

6-
<div class="container">
7-
<div class="row justify-content-center mt-5">
8-
<div class="col-md-5">
9-
<div class="card shadow-sm">
10-
<div class="card-body p-4 text-center">
11-
<h2 class="card-title mb-4">Access Denied</h2>
12-
<p class="text-muted">
13-
You do not have permission to access this resource.
14-
</p>
15-
<a href="/" class="btn btn-primary">Go Home</a>
16-
</div>
17-
</div>
18-
</div>
6+
<div class="card shadow-sm border-0">
7+
<div class="card-body p-4 text-center">
8+
<i class="bi bi-shield-lock fs-1 text-danger mb-3 d-block"></i>
9+
<h2 class="card-title mb-4">Access Denied</h2>
10+
<p class="text-muted">
11+
You do not have permission to access this resource.
12+
</p>
13+
<a href="/" class="btn btn-primary">Go Home</a>
1914
</div>
2015
</div>

‎src/SentenceStudio.WebApp/Components/Pages/Account/ConfirmEmail.razor‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
11
@page "/Account/ConfirmEmail"
2-
@layout SentenceStudio.WebApp.Components.Layout.MainLayout
2+
@layout SentenceStudio.WebApp.Components.Layout.AuthLayout
33

44
<PageTitle>Confirm Email - Sentence Studio</PageTitle>
55

6-
<div class="container">
7-
<div class="row justify-content-center mt-5">
8-
<div class="col-md-5">
9-
<div class="card shadow-sm">
10-
<div class="card-body p-4 text-center">
11-
<h2 class="card-title mb-4">Confirm Email</h2>
12-
<p class="text-muted">
13-
Processing your email confirmation. You will be redirected shortly.
14-
</p>
15-
<p class="mt-3">
16-
<a href="/Account/Login" class="btn btn-primary">Go to Sign In</a>
17-
</p>
18-
</div>
19-
</div>
20-
</div>
6+
<div class="card shadow-sm border-0">
7+
<div class="card-body p-4 text-center">
8+
<h2 class="card-title mb-4">Confirm Email</h2>
9+
<p class="text-muted">
10+
Processing your email confirmation. You will be redirected shortly.
11+
</p>
12+
<p class="mt-3">
13+
<a href="/Account/Login" class="btn btn-primary">Go to Sign In</a>
14+
</p>
2115
</div>
2216
</div>

‎src/SentenceStudio.WebApp/Components/Pages/Account/ForgotPassword.razor‎

Lines changed: 35 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,44 @@
11
@page "/Account/ForgotPassword"
2-
@layout SentenceStudio.WebApp.Components.Layout.MainLayout
2+
@layout SentenceStudio.WebApp.Components.Layout.AuthLayout
33

44
<PageTitle>Forgot Password - Sentence Studio</PageTitle>
55

6-
<div class="container">
7-
<div class="row justify-content-center mt-5">
8-
<div class="col-md-5">
9-
<div class="card shadow-sm">
10-
<div class="card-body p-4">
11-
<h2 class="card-title text-center mb-4">Forgot Password</h2>
12-
13-
@if (ShowConfirmation)
14-
{
15-
<div class="alert alert-success" role="alert">
16-
If an account with that email exists, a password reset link has been sent.
17-
</div>
18-
<div class="text-center mt-3">
19-
<a href="/Account/Login" class="btn btn-primary">Back to Sign In</a>
20-
</div>
21-
}
22-
else
23-
{
24-
<p class="text-muted mb-3">
25-
Enter your email address and we will send you a link to reset your password.
26-
</p>
27-
28-
<form method="post" action="/account-action/ForgotPassword">
29-
<AntiforgeryToken />
30-
<div class="mb-3">
31-
<label for="email" class="form-label">Email</label>
32-
<input type="email" class="form-control" id="email" name="email"
33-
required autocomplete="username" />
34-
</div>
35-
36-
<button type="submit" class="btn btn-primary w-100">Send Reset Link</button>
37-
</form>
38-
39-
<hr />
40-
41-
<div class="text-center">
42-
<a href="/Account/Login">Back to Sign In</a>
43-
</div>
44-
}
6+
<div class="card shadow-sm border-0">
7+
<div class="card-body p-4">
8+
<h2 class="card-title text-center mb-4">Forgot Password</h2>
9+
10+
@if (ShowConfirmation)
11+
{
12+
<div class="alert alert-success" role="alert">
13+
If an account with that email exists, a password reset link has been sent.
14+
</div>
15+
<div class="text-center mt-3">
16+
<a href="/Account/Login" class="btn btn-primary">Back to Sign In</a>
17+
</div>
18+
}
19+
else
20+
{
21+
<p class="text-muted mb-3">
22+
Enter your email address and we will send you a link to reset your password.
23+
</p>
24+
25+
<form method="post" action="/account-action/ForgotPassword">
26+
<AntiforgeryToken />
27+
<div class="mb-3">
28+
<label for="email" class="form-label">Email</label>
29+
<input type="email" class="form-control" id="email" name="email"
30+
required autocomplete="username" />
4531
</div>
32+
33+
<button type="submit" class="btn btn-primary w-100">Send Reset Link</button>
34+
</form>
35+
36+
<hr />
37+
38+
<div class="text-center">
39+
<a href="/Account/Login">Back to Sign In</a>
4640
</div>
47-
</div>
41+
}
4842
</div>
4943
</div>
5044

‎src/SentenceStudio.WebApp/Components/Pages/Account/Login.razor‎

Lines changed: 46 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,55 @@
11
@page "/Account/Login"
22
@using Microsoft.AspNetCore.Components.Authorization
3-
@layout SentenceStudio.WebApp.Components.Layout.MainLayout
3+
@layout SentenceStudio.WebApp.Components.Layout.AuthLayout
44

55
<PageTitle>Sign In - Sentence Studio</PageTitle>
66

7-
<div class="container">
8-
<div class="row justify-content-center mt-5">
9-
<div class="col-md-5">
10-
<div class="card shadow-sm">
11-
<div class="card-body p-4">
12-
<h2 class="card-title text-center mb-4">Sign In</h2>
13-
14-
@if (!string.IsNullOrEmpty(ErrorMessage))
15-
{
16-
<div class="alert alert-danger" role="alert">@ErrorMessage</div>
17-
}
18-
@if (!string.IsNullOrEmpty(SuccessMessage))
19-
{
20-
<div class="alert alert-success" role="alert">@SuccessMessage</div>
21-
}
22-
23-
<form method="post" action="/account-action/Login">
24-
<AntiforgeryToken />
25-
<input type="hidden" name="returnUrl" value="@ReturnUrl" />
26-
27-
<div class="mb-3">
28-
<label for="email" class="form-label">Email</label>
29-
<input type="email" class="form-control" id="email" name="email"
30-
required autocomplete="username" />
31-
</div>
32-
33-
<div class="mb-3">
34-
<label for="password" class="form-label">Password</label>
35-
<input type="password" class="form-control" id="password" name="password"
36-
required autocomplete="current-password" />
37-
</div>
38-
39-
<div class="mb-3 form-check">
40-
<input type="checkbox" class="form-check-input" id="rememberMe" name="rememberMe" value="true" />
41-
<label class="form-check-label" for="rememberMe">Remember me</label>
42-
</div>
43-
44-
<button type="submit" class="btn btn-primary w-100">Sign In</button>
45-
</form>
46-
47-
<hr />
48-
49-
<div class="text-center">
50-
<p class="mb-1">
51-
<a href="/Account/ForgotPassword">Forgot your password?</a>
52-
</p>
53-
<p class="mb-0">
54-
Don't have an account? <a href="/Account/Register">Create one</a>
55-
</p>
56-
</div>
57-
</div>
7+
<div class="card shadow-sm border-0">
8+
<div class="card-body p-4">
9+
<h2 class="card-title text-center mb-4">Sign In</h2>
10+
11+
@if (!string.IsNullOrEmpty(ErrorMessage))
12+
{
13+
<div class="alert alert-danger" role="alert">@ErrorMessage</div>
14+
}
15+
@if (!string.IsNullOrEmpty(SuccessMessage))
16+
{
17+
<div class="alert alert-success" role="alert">@SuccessMessage</div>
18+
}
19+
20+
<form method="post" action="/account-action/Login">
21+
<AntiforgeryToken />
22+
<input type="hidden" name="returnUrl" value="@ReturnUrl" />
23+
24+
<div class="mb-3">
25+
<label for="email" class="form-label">Email</label>
26+
<input type="email" class="form-control" id="email" name="email"
27+
required autocomplete="username" />
5828
</div>
29+
30+
<div class="mb-3">
31+
<label for="password" class="form-label">Password</label>
32+
<input type="password" class="form-control" id="password" name="password"
33+
required autocomplete="current-password" />
34+
</div>
35+
36+
<div class="mb-3 form-check">
37+
<input type="checkbox" class="form-check-input" id="rememberMe" name="rememberMe" value="true" />
38+
<label class="form-check-label" for="rememberMe">Remember me</label>
39+
</div>
40+
41+
<button type="submit" class="btn btn-primary w-100">Sign In</button>
42+
</form>
43+
44+
<hr />
45+
46+
<div class="text-center">
47+
<p class="mb-1">
48+
<a href="/Account/ForgotPassword">Forgot your password?</a>
49+
</p>
50+
<p class="mb-0">
51+
Don't have an account? <a href="/Account/Register">Create one</a>
52+
</p>
5953
</div>
6054
</div>
6155
</div>

0 commit comments

Comments
 (0)