Skip to content

Commit 28ef1e7

Browse files
mckaragozmckaragoz
authored
refactor(samples): consolidate shared components across Blazor samples (#81)
* Add Shared Sample Project and Remove Sample Code Duplication * Brand and Common Folders * DarkModeManager Duplication * Pages and Layouts * Interactive Wasm Setup Fix & Docs Sample Page Description * CSS & Layout * Shared.Hub Project * Cleanup
1 parent 9632eaa commit 28ef1e7

276 files changed

Lines changed: 1691 additions & 15675 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎UltimateAuth.slnx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
<Project Path="samples/blazor-server/CodeBeam.UltimateAuth.Sample.BlazorServer/CodeBeam.UltimateAuth.Sample.BlazorServer.csproj" />
1414
<Project Path="samples/blazor-standalone-wasm/CodeBeam.UltimateAuth.Sample.BlazorStandaloneWasm/CodeBeam.UltimateAuth.Sample.BlazorStandaloneWasm.csproj" Id="27bd3c4d-65a9-4c70-a6c9-4178b1897730" />
1515
<Project Path="samples/CodeBeam.UltimateAuth.Sample.Seed/CodeBeam.UltimateAuth.Sample.Seed.csproj" Id="c79b227b-409e-439d-97df-8979a3dc1a60" />
16+
<Project Path="samples/CodeBeam.UltimateAuth.Sample.Shared.Hub/CodeBeam.UltimateAuth.Sample.Shared.Hub.csproj" Id="74bde9eb-9997-479e-846d-ed205195d3c3" />
17+
<Project Path="samples/CodeBeam.UltimateAuth.Sample.Shared/CodeBeam.UltimateAuth.Sample.Shared.csproj" Id="9edb3d33-3814-4c95-88b0-488c5b4fa25c" />
1618
<Project Path="samples/int-wasm/CodeBeam.UAuth.Sample.IntWasm/CodeBeam.UAuth.Sample.IntWasm.Client/CodeBeam.UAuth.Sample.IntWasm.Client.csproj" Id="f17355ac-c53c-44e8-b372-a258493bf950" />
1719
<Project Path="samples/int-wasm/CodeBeam.UAuth.Sample.IntWasm/CodeBeam.UAuth.Sample.IntWasm/CodeBeam.UAuth.Sample.IntWasm.csproj" Id="65386675-4cf7-4745-b4d7-544b6404e0c3" />
1820
<Project Path="samples/resource-api/CodeBeam.UltimateAuth.Sample.ResourceApi.EfCore/CodeBeam.UltimateAuth.Sample.ResourceApi.EfCore.csproj" Id="ac247836-455a-4a71-9a52-73587c2393f3" />

‎docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/CodeBeam.UltimateAuth.Docs.Wasm.Client.csproj‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
</PropertyGroup>
1212

1313
<ItemGroup>
14-
<PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="9.0.4" />
15-
<PackageReference Include="CodeBeam.MudBlazor.Extensions.Code" Version="9.0.1" />
16-
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.5" />
17-
<PackageReference Include="MudBlazor" Version="9.3.0" />
14+
<PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="9.2.0" />
15+
<PackageReference Include="CodeBeam.MudBlazor.Extensions.Code" Version="9.1.1" />
16+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.13" />
17+
<PackageReference Include="MudBlazor" Version="9.11.0" />
1818
</ItemGroup>
1919

2020
<Target Name="BuildDocs" BeforeTargets="Build">

‎docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Samples.razor‎

Lines changed: 113 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<MudStack Spacing="4" Class="text-center">
66
<MudText Typo="Typo.h3"><b>Samples</b></MudText>
77
<MudText Typo="Typo.subtitle2">Explore working examples and see UltimateAuth in action.</MudText>
8-
<MudText Typo="Typo.caption">Interactive online samples are coming soon.</MudText>
8+
<MudText Typo="Typo.caption">Identity Lab (hosted live demo) is coming soon.</MudText>
99

1010
<MudDivider />
1111

@@ -15,6 +15,14 @@
1515
</MudText>
1616

1717
<MudGrid>
18+
<MudItem xs="12">
19+
<MudPaper Class="pa-4 d-flex flex-column align-center justify-center" Style="background: transparent; min-height: 200px" Outlined="true" Elevation="0">
20+
<MudText Typo="Typo.h6">Sample.Shared</MudText>
21+
<MudText Typo="Typo.subtitle2">Shared component designs across all modern .NET platforms.</MudText>
22+
<MudButton Class="mt-4" Variant="Variant.Filled" Href="https://github.com/CodeBeamOrg/UltimateAuth/tree/dev/samples/shared" Target="_blank" StartIcon="@Icons.Material.Outlined.OpenInNew">View Source Code on GitHub</MudButton>
23+
</MudPaper>
24+
</MudItem>
25+
1826
<MudItem xs="12" md="6">
1927
<MudPaper Class="pa-4 d-flex flex-column align-center justify-center" Style="background: transparent; min-height: 200px" Outlined="true" Elevation="0">
2028
<MudText Typo="Typo.h6">Blazor Server (EF Core)</MudText>
@@ -31,17 +39,33 @@
3139
</MudPaper>
3240
</MudItem>
3341

34-
<MudItem xs="12">
42+
<MudItem xs="12" md="6">
3543
<MudPaper Class="pa-4 d-flex flex-column align-center justify-center" Style="background: transparent; min-height: 200px" Outlined="true" Elevation="0">
36-
<MudText Typo="Typo.h6">Blazor WASM (Standalone)</MudText>
44+
<MudText Typo="Typo.h6">Blazor Standalone WASM</MudText>
3745
<MudText Typo="Typo.subtitle2">Client-side sample using Hybrid authentication model.</MudText>
3846
<MudButton Class="mt-4" Variant="Variant.Filled" Href="https://github.com/CodeBeamOrg/UltimateAuth/tree/dev/samples/blazor-standalone-wasm/CodeBeam.UltimateAuth.Sample.BlazorStandaloneWasm" Target="_blank" StartIcon="@Icons.Material.Outlined.OpenInNew">View Source Code on GitHub</MudButton>
3947
</MudPaper>
4048
</MudItem>
4149

4250
<MudItem xs="12" md="6">
4351
<MudPaper Class="pa-4 d-flex flex-column align-center justify-center" Style="background: transparent; min-height: 200px" Outlined="true" Elevation="0">
44-
<MudText Typo="Typo.h6">UAuthHub</MudText>
52+
<MudText Typo="Typo.h6">Blazor Interactive WASM</MudText>
53+
<MudText Typo="Typo.subtitle2">Client-side interactive render mode sample using Hybrid authentication model.</MudText>
54+
<MudButton Class="mt-4" Variant="Variant.Filled" Href="https://github.com/CodeBeamOrg/UltimateAuth/tree/dev/samples/int-wasm/CodeBeam.UAuth.Sample.IntWasm" Target="_blank" StartIcon="@Icons.Material.Outlined.OpenInNew">View Source Code on GitHub</MudButton>
55+
</MudPaper>
56+
</MudItem>
57+
58+
<MudItem xs="12" md="6">
59+
<MudPaper Class="pa-4 d-flex flex-column align-center justify-center" Style="background: transparent; min-height: 200px" Outlined="true" Elevation="0">
60+
<MudText Typo="Typo.h6">UAuthHub (EF Core)</MudText>
61+
<MudText Typo="Typo.subtitle2">Complete Auth server with UI, working together with WASM client and EF Core.</MudText>
62+
<MudButton Class="mt-4" Variant="Variant.Filled" Href="https://github.com/CodeBeamOrg/UltimateAuth/tree/dev/samples/UAuthHub/CodeBeam.UltimateAuth.Sample.UAuthHub.EFCore" Target="_blank" StartIcon="@Icons.Material.Outlined.OpenInNew">View Source Code on GitHub</MudButton>
63+
</MudPaper>
64+
</MudItem>
65+
66+
<MudItem xs="12" md="6">
67+
<MudPaper Class="pa-4 d-flex flex-column align-center justify-center" Style="background: transparent; min-height: 200px" Outlined="true" Elevation="0">
68+
<MudText Typo="Typo.h6">UAuthHub (InMemory)</MudText>
4569
<MudText Typo="Typo.subtitle2">Complete Auth server with UI, working together with WASM client.</MudText>
4670
<MudButton Class="mt-4" Variant="Variant.Filled" Href="https://github.com/CodeBeamOrg/UltimateAuth/tree/dev/samples/UAuthHub/CodeBeam.UltimateAuth.Sample.UAuthHub" Target="_blank" StartIcon="@Icons.Material.Outlined.OpenInNew">View Source Code on GitHub</MudButton>
4771
</MudPaper>
@@ -54,20 +78,91 @@
5478
<MudButton Class="mt-4" Variant="Variant.Filled" Href="https://github.com/CodeBeamOrg/UltimateAuth/tree/dev/samples/resource-api/CodeBeam.UltimateAuth.Sample.ResourceApi" Target="_blank" StartIcon="@Icons.Material.Outlined.OpenInNew">View Source Code on GitHub</MudButton>
5579
</MudPaper>
5680
</MudItem>
57-
</MudGrid>
58-
59-
<MudAlert Severity="Severity.Info" Class="mt-6" ContentAlignment="HorizontalAlignment.Center">
60-
<b>WASM Sample Setup:</b><br />
61-
Start the following projects together:<br />
62-
(1) UAuthHub<br />
63-
(2) ResourceApi<br />
64-
(3) BlazorStandaloneWasm<br />
65-
After opening the solution, configure multiple startup projects in Visual Studio.
66-
</MudAlert>
67-
68-
<MudAlert Severity="Severity.Info" Class="my-6">
69-
Each sample refreshes (clear + seed) it's data on each restart. When you close application it will be reset.
70-
</MudAlert>
81+
</MudGrid>
82+
83+
84+
<MudDivider Class="my-6" />
85+
86+
<MudStack Spacing="3" Class="text-start">
87+
88+
<MudText Typo="Typo.h5" Align="Align.Center">
89+
<b>Running the Samples</b>
90+
</MudText>
91+
92+
<MudText Typo="Typo.body2" Align="Align.Center">
93+
The samples are preconfigured with different hosting and storage setups.
94+
Follow the project combinations below to run them locally.
95+
</MudText>
96+
97+
<MudPaper Outlined="true" Elevation="0" Class="pa-4">
98+
<MudStack Spacing="2">
99+
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
100+
<MudText Typo="Typo.h6">Blazor Server</MudText>
101+
<MudChip T="string" Color="Color.Success" Variant="Variant.Outlined" Size="Size.Small">Standalone</MudChip>
102+
</MudStack>
103+
104+
<MudText Typo="Typo.body2">
105+
Run either Blazor Server (InMemory) or Blazor Server (EF Core) independently.
106+
No additional projects are required.
107+
</MudText>
108+
</MudStack>
109+
</MudPaper>
110+
111+
<MudPaper Outlined="true" Elevation="0" Class="pa-4">
112+
<MudStack Spacing="2">
113+
<MudStack Row="true"AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
114+
<MudText Typo="Typo.h6">Blazor Standalone WASM</MudText>
115+
<MudChip T="string" Variant="Variant.Outlined" Size="Size.Small">3 Projects</MudChip>
116+
</MudStack>
117+
118+
<MudText Typo="Typo.body2">Start these projects together:</MudText>
119+
120+
<MudStack Spacing="1" Class="pl-3">
121+
<MudText Typo="Typo.body2">1. UAuthHub</MudText>
122+
<MudText Typo="Typo.body2">2. ResourceApi</MudText>
123+
<MudText Typo="Typo.body2">3. BlazorStandaloneWasm</MudText>
124+
</MudStack>
125+
126+
<MudText Typo="Typo.caption" Color="Color.Info">Preconfigured with InMemory storage.</MudText>
127+
</MudStack>
128+
</MudPaper>
129+
130+
<MudPaper Outlined="true" Elevation="0" Class="pa-4">
131+
<MudStack Spacing="2">
132+
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
133+
<MudText Typo="Typo.h6">Blazor Interactive WASM</MudText>
134+
<MudChip T="string" Variant="Variant.Outlined" Size="Size.Small">3 Projects</MudChip>
135+
</MudStack>
136+
137+
<MudText Typo="Typo.body2">Start these projects together:</MudText>
138+
139+
<MudStack Spacing="1" Class="pl-3">
140+
<MudText Typo="Typo.body2">1. UAuthHub EF Core</MudText>
141+
<MudText Typo="Typo.body2">2. Resource API EF Core</MudText>
142+
<MudText Typo="Typo.body2">3. Blazor Interactive WASM</MudText>
143+
</MudStack>
144+
145+
<MudText Typo="Typo.caption" Color="Color.Info">Preconfigured with EF Core storage.</MudText>
146+
</MudStack>
147+
</MudPaper>
148+
149+
<MudAlert Severity="Severity.Info" Variant="Variant.Text">
150+
<b>Storage flexibility:</b>
151+
These are sample configurations, not framework limitations.
152+
Both WASM hosting models can use InMemory or EF Core backends.
153+
The combinations above are simply the preconfigured examples provided in this repository.
154+
</MudAlert>
155+
156+
<MudText Typo="Typo.body2" Align="Align.Center">
157+
In Visual Studio, open <b>Configure Startup Projects</b>, select <b>Multiple startup projects</b>, and set the required projects to <b>Start</b>.
158+
</MudText>
159+
160+
<MudAlert Severity="Severity.Info" Variant="Variant.Text">
161+
<b>Sample Data:</b>
162+
Sample data is reset and seeded again on each restart in the provided demo configurations.
163+
</MudAlert>
164+
</MudStack>
165+
71166
</MudStack>
72167
</MudContainer>
73168
</MudPage>

‎docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<ItemGroup>
1212
<ProjectReference Include="..\CodeBeam.UltimateAuth.Docs.Wasm.Client\CodeBeam.UltimateAuth.Docs.Wasm.Client.csproj" />
13-
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="10.0.5" />
13+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="10.0.13" />
1414
</ItemGroup>
1515

1616
</Project>

‎samples/CodeBeam.UltimateAuth.Sample.Shared.Hub/CodeBeam.UltimateAuth.Sample.Shared.Hub.csproj‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Razor">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net10.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
</PropertyGroup>
8+
9+
10+
<ItemGroup>
11+
<SupportedPlatform Include="browser" />
12+
</ItemGroup>
13+
14+
<ItemGroup>
15+
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="10.0.13" />
16+
</ItemGroup>
17+
18+
<ItemGroup>
19+
<ProjectReference Include="..\..\src\CodeBeam.UltimateAuth.Server\CodeBeam.UltimateAuth.Server.csproj" />
20+
<ProjectReference Include="..\CodeBeam.UltimateAuth.Sample.Shared\CodeBeam.UltimateAuth.Sample.Shared.csproj" />
21+
</ItemGroup>
22+
23+
</Project>

‎samples/CodeBeam.UltimateAuth.Sample.Shared.Hub/Components/Page/SampleHubHome.razor‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@inherits UAuthHubPageBase
2+
@implements IDisposable
3+
4+
@inject IUAuthClient UAuthClient
5+
@inject IAuthStore AuthStore
6+
@inject IHubFlowService HubFlowService
7+
@inject IPkceService PkceService
8+
@inject IHubCredentialResolver HubCredentialResolver
9+
@inject IClientStorage BrowserStorage
10+
@inject ISnackbar Snackbar
11+
@inject IUAuthClientProductInfoProvider ClientProductInfoProvider
12+
@inject IDeviceIdProvider DeviceIdProvider
13+
@inject IDialogService DialogService
14+
@inject IOptions<UAuthClientOptions> Options
15+
16+
<MudPage FullScreen="FullScreen.FullWithoutAppbar" Column="1" Row="1">
17+
<MudContainer Class="d-flex align-center justify-center" MaxWidth="MaxWidth.Medium" Gutters="false">
18+
<MudGrid Spacing="0">
19+
<MudItem Class="order-1 order-sm-0" xs="12" sm="6">
20+
<MudPaper Class="mud-theme-secondary uauth-login-paper pa-8 d-flex flex-column align-center justify-center" Elevation="3">
21+
<MudStack Class="my-4">
22+
<div class="uauth-brand-glow uauth-logo-slide d-flex justify-center">
23+
<UAuthLogo Size="90" ShieldColor="#f6f5ae" KeyColor="var(--mud-palette-secondary)" />
24+
</div>
25+
<MudText Style="font-weight: 700" Typo="Typo.h4" Align="Align.Center">UAuthHub</MudText>
26+
<MudText Align="Align.Center">The centralized AuthServer for your application.</MudText>
27+
</MudStack>
28+
29+
<MudDivider />
30+
31+
<MudStack Class="mt-4" Wrap="Wrap.Wrap" Spacing="0">
32+
<MudText Typo="Typo.subtitle2" Align="Align.Center"><b>@_productInfo?.ProductName</b> v @_productInfo?.Version</MudText>
33+
<MudText Typo="Typo.subtitle2" Align="Align.Center">Client Profile: @_productInfo?.ClientProfile.ToString()</MudText>
34+
<MudText Typo="Typo.subtitle2" Align="Align.Center">@_productInfo?.FrameworkDescription</MudText>
35+
</MudStack>
36+
</MudPaper>
37+
</MudItem>
38+
39+
<MudItem Class="order-0 order-sm-1" xs="12" sm="6">
40+
<MudPaper Class="uauth-login-paper pa-8" Elevation="3">
41+
<UAuthLoginForm @ref="_loginForm" Identifier="@_username" Secret="@_password" LoginType="UAuthLoginType.Pkce" SubmitMode="UAuthSubmitMode.TryAndCommit" OnTryResult="@HandleLoginResult">
42+
<MudStack Class="mud-width-full">
43+
<MudStack Row="true" AlignItems="AlignItems.Center">
44+
<UAuthLogo Size="48" ShieldColor="var(--mud-palette-primary)" KeyColor="white" />
45+
<MudText Typo="Typo.h5">
46+
<MudText Style="font-weight: 700" Inline="true" Typo="Typo.h5" Color="Color.Primary">Sign <MudText Inline="true" Style="font-weight: 700" Typo="Typo.h5" Color="Color.Secondary">In</MudText></MudText>
47+
</MudText>
48+
</MudStack>
49+
<MudTextField @bind-Value="@_username" Variant="Variant.Outlined" Label="Username" Required="true" Immediate="true" HelperText="@(_remainingAttempts != null ? $"Remaining Attempts: {_remainingAttempts}" : null)" />
50+
<MudPasswordField @bind-Value="@_password" Variant="Variant.Outlined" Label="Password" Required="true" Immediate="true" />
51+
<MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@_isLocked" ButtonType="ButtonType.Submit">Login</MudButton>
52+
@if (_isLocked)
53+
{
54+
<MudAlert NoIcon="true" Severity="Severity.Error" Variant="Variant.Filled">
55+
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
56+
<MudStack Spacing="0">
57+
<MudText Typo="Typo.subtitle2">Your account is locked.</MudText>
58+
<MudText Typo="Typo.subtitle2">Try again in </MudText>
59+
</MudStack>
60+
<MudProgressCircular Class="mud-theme-error" Value="@_progressPercent" Max="100" Size="Size.Large">
61+
@_remaining.Minutes.ToString("00"):@_remaining.Seconds.ToString("00")
62+
</MudProgressCircular>
63+
</MudStack>
64+
</MudAlert>
65+
}
66+
</MudStack>
67+
</UAuthLoginForm>
68+
<MudAlert Severity="Severity.Info" Variant="Variant.Text" Dense="true">
69+
Default sample users:
70+
<b>admin/admin</b> (Admin),
71+
<b>user/user</b> (Standard User)
72+
</MudAlert>
73+
74+
<MudDivider Class="my-8" />
75+
76+
<MudStack Class="mud-width-full">
77+
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ProgrammaticPkceLogin">Programmatic Login</MudButton>
78+
<MudText Style="color: var(--mud-palette-text-secondary)" Typo="Typo.subtitle2" Align="Align.Center">Login programmatically as admin/admin.</MudText>
79+
</MudStack>
80+
81+
@* <MudDivider Class="my-2" /> *@
82+
83+
<MudStack>
84+
@* TODO: Enhance sample *@
85+
@* <MudText Align="Align.Center" Typo="Typo.subtitle2"><MudLink Class="cursor-pointer" OnClick="OpenResetDialog">Forgot Password</MudLink></MudText> *@
86+
@* <MudText Align="Align.Center" Typo="Typo.subtitle2">Don't have an account? <MudLink Class="cursor-pointer" Href="/register">SignUp</MudLink></MudText> *@
87+
</MudStack>
88+
</MudPaper>
89+
</MudItem>
90+
</MudGrid>
91+
</MudContainer>
92+
</MudPage>

samples/UAuthHub/CodeBeam.UltimateAuth.Sample.UAuthHub.EFCore/Components/Pages/Home.razor.cs renamed to samples/CodeBeam.UltimateAuth.Sample.Shared.Hub/Components/Page/SampleHubHome.razor.cs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
using CodeBeam.UltimateAuth.Server.Stores;
88
using MudBlazor;
99

10-
namespace CodeBeam.UltimateAuth.Sample.UAuthHub.EFCore.Components.Pages;
10+
namespace CodeBeam.UltimateAuth.Sample.Shared.Hub.Components.Page;
1111

12-
public partial class Home
12+
public partial class SampleHubHome
1313
{
1414
private string? _username;
1515
private string? _password;

0 commit comments

Comments
 (0)