Skip to content

Commit e979710

Browse files
committed
Enhanced Login Page
1 parent d62cb80 commit e979710

File tree

20 files changed

+369
-161
lines changed

20 files changed

+369
-161
lines changed

samples/UAuthHub/CodeBeam.UltimateAuth.Sample.UAuthHub/CodeBeam.UltimateAuth.Sample.UAuthHub.csproj

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</PropertyGroup>
1010

1111
<ItemGroup>
12-
<PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="9.0.0-rc.1" />
12+
<PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="9.0.0" />
1313
<PackageReference Include="MudBlazor" Version="9.0.0-rc.1" />
1414
</ItemGroup>
1515

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@namespace CodeBeam.UltimateAuth.Sample
2+
@inherits ComponentBase
3+
4+
<svg xmlns="http://www.w3.org/2000/svg"
5+
viewBox="0 0 200 240"
6+
width="@Size"
7+
height="@Size"
8+
style="@BuildStyle()"
9+
class="@Class">
10+
11+
@if (Variant == UAuthLogoVariant.Brand)
12+
{
13+
<path fill="@ShieldColor"
14+
d="M32.39,14.07H167.61c11.27,0,18,6.76,18,18V133.52
15+
c0,22.54-58.59,69.87-85.64,92.41
16+
-27-22.54-85.64-69.87-85.64-92.41V32.1
17+
C14.36,20.83,21.12,14.07,32.39,14.07Z" />
18+
19+
<path fill="@KeyColor"
20+
fill-rule="evenodd"
21+
d="@KeyPath" />
22+
}
23+
else
24+
{
25+
<path d="M32.39,14.07H167.61c11.27,0,18,6.76,18,18V133.52
26+
c0,22.54-58.59,69.87-85.64,92.41
27+
-27-22.54-85.64-69.87-85.64-92.41V32.1
28+
C14.36,20.83,21.12,14.07,32.39,14.07Z" />
29+
30+
<path fill-rule="evenodd"
31+
d="@KeyPath" />
32+
}
33+
</svg>
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
using Microsoft.AspNetCore.Components;
2+
using Microsoft.AspNetCore.Components.Web;
3+
4+
namespace CodeBeam.UltimateAuth.Sample;
5+
6+
public partial class UAuthLogo : ComponentBase
7+
{
8+
[Parameter] public UAuthLogoVariant Variant { get; set; } = UAuthLogoVariant.Brand;
9+
10+
[Parameter] public int Size { get; set; } = 32;
11+
12+
[Parameter] public string? ShieldColor { get; set; } = "#00072d";
13+
[Parameter] public string? KeyColor { get; set; } = "#f6f5ae";
14+
15+
[Parameter] public string? Class { get; set; }
16+
[Parameter] public string? Style { get; set; }
17+
18+
private string BuildStyle()
19+
{
20+
if (Variant == UAuthLogoVariant.Mono)
21+
return $"color: {KeyColor}; {Style}";
22+
23+
return Style ?? "";
24+
}
25+
26+
protected string KeyPath => @"
27+
M120.43,39.44H79.57A11.67,11.67,0,0,0,67.9,51.11V77.37
28+
A11.67,11.67,0,0,0,79.57,89H90.51l3.89,3.9v5.32l-3.8,3.81v81.41H99
29+
v-5.33h13.69V169H108.1v-3.8H99C99,150.76,111.9,153,111.9,153
30+
V99.79h-8V93.32L108.19,89h12.24
31+
A11.67,11.67,0,0,0,132.1,77.37V51.11
32+
A11.67,11.67,0,0,0,120.43,39.44Z
33+
34+
M79.57,48.19h5.84a2.92,2.92 0 0 1 2.92,2.92
35+
v5.84a2.92,2.92 0 0 1 -2.92,2.92
36+
h-5.84a2.91,2.91 0 0 1 -2.91,-2.92
37+
v-5.84a2.91,2.91 0 0 1 2.91,-2.92Z
38+
39+
M79.57,68.62h5.84a2.92,2.92 0 0 1 2.92,2.92
40+
v5.83a2.92,2.92 0 0 1 -2.92,2.92
41+
h-5.84a2.91,2.91 0 0 1 -2.91,-2.92
42+
v-5.83a2.91,2.91 0 0 1 2.91,-2.92Z
43+
44+
M114.59,48.19h5.84a2.92,2.92 0 0 1 2.91,2.92
45+
v5.84a2.91,2.91 0 0 1 -2.91,2.91
46+
h-5.84a2.92,2.92 0 0 1 -2.92,-2.91
47+
v-5.84a2.92,2.92 0 0 1 2.92,-2.92Z
48+
49+
M114.59,68.62h5.84a2.92,2.92 0 0 1 2.91,2.92
50+
v5.83a2.91,2.91 0 0 1 -2.91,2.92
51+
h-5.84a2.92,2.92 0 0 1 -2.92,-2.92
52+
v-5.83a2.92,2.92 0 0 1 2.92,-2.92Z
53+
";
54+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
namespace CodeBeam.UltimateAuth.Sample;
2+
3+
public enum UAuthLogoVariant
4+
{
5+
Brand,
6+
Mono
7+
}

samples/blazor-server/CodeBeam.UltimateAuth.Sample.BlazorServer/CodeBeam.UltimateAuth.Sample.BlazorServer.csproj

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<ItemGroup>
1111
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="10.0.1" />
1212
<PackageReference Include="MudBlazor" Version="9.0.0" />
13-
<PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="9.0.0-rc.1" />
13+
<PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="9.0.0" />
1414
<PackageReference Include="Scalar.AspNetCore" Version="2.12.18" />
1515
</ItemGroup>
1616

samples/blazor-server/CodeBeam.UltimateAuth.Sample.BlazorServer/Components/App.razor

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<base href="/" />
88
<link rel="stylesheet" href="app.css" />
9-
<link rel="stylesheet" href="UltimateAuth.BlazorServer.styles.css" />
10-
<link rel="icon" type="image/png" href="favicon.png" />
9+
<link rel="icon" type="image/png" href="UltimateAuth-Logo.png" />
1110

1211
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
1312
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

samples/blazor-server/CodeBeam.UltimateAuth.Sample.BlazorServer/Components/Layout/MainLayout.razor

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,52 @@
11
@inherits LayoutComponentBase
22
@inject IUAuthClient UAuthClient
33
@inject ISnackbar Snackbar
4+
@inject NavigationManager Nav
45

56
<MudLayout>
6-
<MudAppBar Color="Color.Transparent" Dense="true" Elevation="0">
7-
<MudText><b>UltimateAuth</b></MudText>
7+
<MudAppBar Style="backdrop-filter: blur(10px)" Color="Color.Transparent" Dense="true" Elevation="0">
8+
<UAuthLogo />
9+
<MudText Class="ml-2 cursor-pointer" Style="user-select: none" @onclick="@(() => Nav.NavigateTo("/home"))"><b>UltimateAuth</b></MudText>
10+
<MudDivider Class="ml-4 mr-2" Vertical="true" />
811
<MudText Class="ml-2" Typo="Typo.subtitle2">Blazor Server Sample</MudText>
912

1013
<MudSpacer />
1114

12-
<MudMenu AnchorOrigin="Origin.BottomRight" TransformOrigin="Origin.TopRight">
13-
<ActivatorContent>
14-
<div @onclick="@(() => context.ToggleAsync())">
15-
<MudBadge Overlap="true" Dot="true" Color="@GetBadgeColor()">
16-
<MudAvatar Class="cursor-pointer mud-ripple" Variant="Variant.Filled" Color="Color.Primary">
17-
<UAuthStateView>
18-
<Authorized Context="state">
19-
@(state.Identity?.PrimaryUserName?.Substring(0, 1).ToUpper())
20-
</Authorized>
21-
<NotAuthorized>
22-
<MudIcon Icon="@Icons.Material.Filled.Person" />
23-
</NotAuthorized>
24-
</UAuthStateView>
25-
</MudAvatar>
26-
</MudBadge>
27-
</div>
28-
</ActivatorContent>
29-
30-
<ChildContent>
31-
<UAuthStateView RequireActive="true">
32-
<Authorized Context="state">
33-
<MudText Class="px-4 py-2">
34-
<b>@state.Identity?.PrimaryUserName</b>
35-
</MudText>
15+
<UAuthStateView>
16+
<Authorized Context="state">
17+
<MudMenu PopoverClass="mud-theme-primary uauth-menu-popover" AnchorOrigin="Origin.BottomRight" TransformOrigin="Origin.TopRight">
18+
<ActivatorContent>
19+
<div @onclick="@(() => context.ToggleAsync())">
20+
<MudBadge Overlap="true" Dot="true" Color="@GetBadgeColor()">
21+
<MudAvatar Class="cursor-pointer mud-ripple" Variant="Variant.Filled" Color="Color.Primary">
22+
@((state.Identity?.PrimaryUserName ?? "?").Trim().ToUpperInvariant() is var n ? (n.Length >= 2 ? n[..2] : n[..1]) : "?")
23+
</MudAvatar>
24+
</MudBadge>
25+
</div>
26+
</ActivatorContent>
27+
28+
<ChildContent>
29+
<MudText Class="px-4 py-2"><b>@state.Identity?.PrimaryUserName</b></MudText>
30+
<MudText Class="px-4" Typo="Typo.subtitle2">@string.Join(", ", state.Claims.Roles)</MudText>
3631

3732
<MudDivider />
3833

39-
<MudMenuItem Icon="@Icons.Material.Filled.Refresh" Label="Refresh Session" OnClick="@Refresh" />
40-
<MudMenuItem Icon="@Icons.Material.Filled.Logout" Label="Logout" OnClick="@Logout" />
41-
</Authorized>
42-
43-
<Inactive>
44-
<MudMenuItem Label="Reauthenticate" Href="/login" />
45-
</Inactive>
46-
47-
<NotAuthorized>
48-
<MudMenuItem Icon="@Icons.Material.Filled.Login" Label="Sign In" Href="/login" />
49-
</NotAuthorized>
50-
</UAuthStateView>
51-
</ChildContent>
52-
</MudMenu>
34+
<MudMenuItem Icon="@Icons.Material.Filled.Refresh" IconColor="Color.Secondary" Label="Refresh Session" OnClick="@Refresh" />
35+
<MudMenuItem Icon="@Icons.Material.Filled.Logout" IconColor="Color.Secondary" Label="Logout" OnClick="@Logout" />
36+
37+
@if (state.Identity?.SessionState is not null && state.Identity.SessionState != SessionState.Active)
38+
{
39+
<MudDivider />
40+
<MudMenuItem Icon="@Icons.Material.Filled.Login" Label="Reauthenticate" OnClick="@GoToLoginWithReturn" />
41+
}
42+
</ChildContent>
43+
</MudMenu>
44+
</Authorized>
45+
46+
<NotAuthorized>
47+
<MudChip T="string" Style="width: fit-content" Text="Sign In" Color="Color.Primary" Variant="Variant.Filled" Class="cursor-pointer" OnClick="@HandleSignInClick" />
48+
</NotAuthorized>
49+
</UAuthStateView>
5350
</MudAppBar>
5451

5552
<MudMainContent>

samples/blazor-server/CodeBeam.UltimateAuth.Sample.BlazorServer/Components/Layout/MainLayout.razor.cs

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,35 @@ private Color GetBadgeColor()
3838

3939
return Color.Warning;
4040
}
41+
42+
private void HandleSignInClick()
43+
{
44+
var uri = Nav.ToAbsoluteUri(Nav.Uri);
45+
46+
if (uri.AbsolutePath.EndsWith("/login", StringComparison.OrdinalIgnoreCase))
47+
{
48+
Nav.NavigateTo("/login?focus=1", replace: true, forceLoad: true);
49+
return;
50+
}
51+
52+
GoToLoginWithReturn();
53+
}
54+
55+
private void GoToLoginWithReturn()
56+
{
57+
var uri = Nav.ToAbsoluteUri(Nav.Uri);
58+
59+
if (uri.AbsolutePath.EndsWith("/login", StringComparison.OrdinalIgnoreCase))
60+
{
61+
Nav.NavigateTo("/login", replace: true);
62+
return;
63+
}
64+
65+
var current = Nav.ToBaseRelativePath(uri.ToString());
66+
if (string.IsNullOrWhiteSpace(current))
67+
current = "home";
68+
69+
var returnUrl = Uri.EscapeDataString("/" + current.TrimStart('/'));
70+
Nav.NavigateTo($"/login?returnUrl={returnUrl}", replace: true);
71+
}
4172
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@page "/anonymous-test"

samples/blazor-server/CodeBeam.UltimateAuth.Sample.BlazorServer/Components/Pages/Home.razor

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@page "/home"
2-
@using System.Security.Claims
32
@attribute [Authorize]
43

54
@inject IUAuthClient UAuthClient
65
@inject UAuthClientDiagnostics Diagnostics
6+
@using System.Security.Claims
77

8-
<MudPage Class="mud-width-full" FullScreen="FullScreen.Full" Column="1" Row="1">
8+
<MudPage Class="mud-width-full" FullScreen="FullScreen.FullWithoutAppbar" Column="1" Row="1">
99
<MudGrid>
1010
<MudItem xs="12" sm="6">
1111
<MudPaper Class="pa-6">

0 commit comments

Comments
 (0)