From 566f30ed3d22b5e4095f8b11fbb628992446fb0d Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Wed, 7 Aug 2024 17:55:49 +0900
Subject: [PATCH] login base

---
 .../Components/Pages/Home.razor               |   7 --
 .../FluentBlazorAuth/FluentBlazorAuth.csproj  |  13 ----
 .../FluentBlazorAuth.sln                      |  15 ++--
 .../Components/App.razor                      |   0
 .../Components/Layout/MainLayout.razor        |   9 +++
 .../Components/Layout/NavMenu.razor           |  13 +++-
 .../Pages/Account/AccessDenied.razor          |   9 +++
 .../Components/Pages/Account/Login.razor      |  65 +++++++++++++++++
 .../Components/Pages/Account/Logout.razor     |  26 +++++++
 .../Components/Pages/Counter.razor            |   0
 .../Components/Pages/Error.razor              |   0
 .../Components/Pages/Home.razor               |  25 +++++++
 .../Components/Pages/Weather.razor            |   0
 .../Components/Routes.razor                   |   0
 .../Components/_Imports.razor                 |   1 +
 .../FluentBlazorAuth/Data/AppDbContext.cs     |  15 ++++
 .../FluentBlazorAuth/FluentBlazorAuth.csproj  |  21 ++++++
 ...0807052911_AddUserAccountModel.Designer.cs |  56 +++++++++++++++
 .../20240807052911_AddUserAccountModel.cs     |  44 ++++++++++++
 .../Migrations/AppDbContextModelSnapshot.cs   |  53 ++++++++++++++
 .../FluentBlazorAuth/Models/UserAccount.cs    |  18 +++++
 .../Models/ViewModels/LoginViewModel.cs       |  13 ++++
 .../FluentBlazorAuth/Program.cs               |  66 ++++++++++++++++++
 .../Properties/launchSettings.json            |   8 +--
 .../appsettings.Development.json              |   0
 .../FluentBlazorAuth/appsettings.json         |  12 ++++
 .../wwwroot/app-cutom.css                     |   0
 .../{ => FluentBlazorAuth}/wwwroot/app.css    |   0
 .../wwwroot/bootstrap/bootstrap.min.css       |   0
 .../wwwroot/bootstrap/bootstrap.min.css.map   |   0
 .../wwwroot/favicon.ico                       | Bin
 FluentBlazorAuth/FluentBlazorAuth/Program.cs  |  29 --------
 .../FluentBlazorAuth/appsettings.json         |   9 ---
 33 files changed, 457 insertions(+), 70 deletions(-)
 delete mode 100644 FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Home.razor
 delete mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.csproj
 rename FluentBlazorAuth/{ => FluentBlazorAuth}/FluentBlazorAuth.sln (52%)
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/Components/App.razor (100%)
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/Components/Layout/MainLayout.razor (68%)
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/Components/Layout/NavMenu.razor (57%)
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/AccessDenied.razor
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/Login.razor
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/Logout.razor
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/Components/Pages/Counter.razor (100%)
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/Components/Pages/Error.razor (100%)
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Home.razor
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/Components/Pages/Weather.razor (100%)
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/Components/Routes.razor (100%)
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/Components/_Imports.razor (89%)
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Data/AppDbContext.cs
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.csproj
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/20240807052911_AddUserAccountModel.Designer.cs
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/20240807052911_AddUserAccountModel.cs
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/AppDbContextModelSnapshot.cs
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Models/UserAccount.cs
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Models/ViewModels/LoginViewModel.cs
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Program.cs
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/Properties/launchSettings.json (80%)
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/appsettings.Development.json (100%)
 create mode 100644 FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/appsettings.json
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/wwwroot/app-cutom.css (100%)
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/wwwroot/app.css (100%)
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/wwwroot/bootstrap/bootstrap.min.css (100%)
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/wwwroot/bootstrap/bootstrap.min.css.map (100%)
 rename FluentBlazorAuth/FluentBlazorAuth/{ => FluentBlazorAuth}/wwwroot/favicon.ico (100%)
 delete mode 100644 FluentBlazorAuth/FluentBlazorAuth/Program.cs
 delete mode 100644 FluentBlazorAuth/FluentBlazorAuth/appsettings.json

diff --git a/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Home.razor b/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Home.razor
deleted file mode 100644
index 96714a2..0000000
--- a/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Home.razor
+++ /dev/null
@@ -1,7 +0,0 @@
-@page "/"
-
-<PageTitle>Home</PageTitle>
-
-<h1>Hello, world!</h1>
-
-Welcome to your new Fluent Blazor app.
\ No newline at end of file
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.csproj b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.csproj
deleted file mode 100644
index 4f5c1bd..0000000
--- a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.csproj
+++ /dev/null
@@ -1,13 +0,0 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
-
-  <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-  </PropertyGroup>
-
-  <ItemGroup>
-	  <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.*-* " />
-    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.*-* " />
-  </ItemGroup>
-</Project>
diff --git a/FluentBlazorAuth/FluentBlazorAuth.sln b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.sln
similarity index 52%
rename from FluentBlazorAuth/FluentBlazorAuth.sln
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.sln
index 8bfcf7e..76bd351 100644
--- a/FluentBlazorAuth/FluentBlazorAuth.sln
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.sln
@@ -3,20 +3,23 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.0.31903.59
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "FluentBlazorAuth", "FluentBlazorAuth\FluentBlazorAuth.csproj", "{96287427-8F1B-40C6-AA28-F43FBE2D2F86}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FluentBlazorAuth", "FluentBlazorAuth\FluentBlazorAuth.csproj", "{A3563BE4-C2CD-4C07-8323-3B065A16F9C5}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
 		Release|Any CPU = Release|Any CPU
 	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{A3563BE4-C2CD-4C07-8323-3B065A16F9C5}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{A3563BE4-C2CD-4C07-8323-3B065A16F9C5}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{A3563BE4-C2CD-4C07-8323-3B065A16F9C5}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{A3563BE4-C2CD-4C07-8323-3B065A16F9C5}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
 	EndGlobalSection
-	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{96287427-8F1B-40C6-AA28-F43FBE2D2F86}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{96287427-8F1B-40C6-AA28-F43FBE2D2F86}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{96287427-8F1B-40C6-AA28-F43FBE2D2F86}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{96287427-8F1B-40C6-AA28-F43FBE2D2F86}.Release|Any CPU.Build.0 = Release|Any CPU
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {35B494B8-8275-4398-ACFA-559F3840260D}
 	EndGlobalSection
 EndGlobal
diff --git a/FluentBlazorAuth/FluentBlazorAuth/Components/App.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/App.razor
similarity index 100%
rename from FluentBlazorAuth/FluentBlazorAuth/Components/App.razor
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/App.razor
diff --git a/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/MainLayout.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/MainLayout.razor
similarity index 68%
rename from FluentBlazorAuth/FluentBlazorAuth/Components/Layout/MainLayout.razor
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/MainLayout.razor
index 061b047..5d01915 100644
--- a/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/MainLayout.razor
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/MainLayout.razor
@@ -3,6 +3,15 @@
 <FluentLayout>
     <FluentHeader>
         FluentBlazorAuth
+        <FluentSpacer/>
+        <AuthorizeView>
+            <NotAuthorized>
+                <FluentAnchor Appearance="Appearance.Neutral" Href="/login">Login</FluentAnchor>
+            </NotAuthorized>
+            <Authorized>
+                <FluentAnchor Appearance="Appearance.Neutral" Href="/logout">Logout</FluentAnchor>
+            </Authorized>
+        </AuthorizeView>
     </FluentHeader>
     <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
         <NavMenu />
diff --git a/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/NavMenu.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/NavMenu.razor
similarity index 57%
rename from FluentBlazorAuth/FluentBlazorAuth/Components/Layout/NavMenu.razor
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/NavMenu.razor
index e1ed3c5..1dde764 100644
--- a/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/NavMenu.razor
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/NavMenu.razor
@@ -6,9 +6,18 @@
     <nav class="sitenav" aria-labelledby="main-menu">
         <FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
             <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
-            <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
-            <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
         </FluentNavMenu>
+        <AuthorizeView Roles="Administrator,User">
+            <Authorized>
+                <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
+            </Authorized>
+        </AuthorizeView>
+
+        <AuthorizeView Roles="Administrator">
+            <Authorized>
+                <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
+            </Authorized>
+        </AuthorizeView>
     </nav>
 </div>
 
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/AccessDenied.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/AccessDenied.razor
new file mode 100644
index 0000000..150aeb1
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/AccessDenied.razor
@@ -0,0 +1,9 @@
+@page "/access-denied"
+@rendermode InteractiveServer
+
+<FluentStack Class="mt-3" Orientation="Orientation.Vertical" VerticalGap="10" HorizontalAlignment="HorizontalAlignment.Center">
+    <FluentEmoji Value="@(new Emojis.Symbols.Color.Default.NoEntry())" Width="50px" />
+    <FluentLabel Color="Color.Warning">
+        You don't have permission to access this page.
+    </FluentLabel>
+</FluentStack>
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/Login.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/Login.razor
new file mode 100644
index 0000000..e0cf2a7
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/Login.razor
@@ -0,0 +1,65 @@
+@page "/login"
+@using FluentBlazorAuth.Data
+@using FluentBlazorAuth.Models.ViewModels
+@using System.Security.Claims
+@using Microsoft.AspNetCore.Authentication
+@using Microsoft.AspNetCore.Authentication.Cookies
+@inject AppDbContext AppDbContext;
+@inject NavigationManager NavManager;
+@rendermode InteractiveServer
+
+<FluentGrid Class="mt-3" Justify="JustifyContent.Center">
+    <FluentGridItem xs="6">
+        <FluentEditForm Model="@Model" OnValidSubmit="@OnLoginSubmit">
+            <DataAnnotationsValidator/>
+            <FluentValidationSummary/>
+
+            <FluentStack Orientation="Orientation.Vertical" VerticalGap="5" HorizontalAlignment="HorizontalAlignment.Center">
+                <div style="width:100%">
+                    <FluentTextField style="width:100%" @bind-Value="Model.UserName" Label="User Name" Required />
+                    <FluentValidationMessage For="@(() => Model.UserName)"/>
+                </div>
+                <div style="width:100%">
+                    <FluentTextField Style="width:100%" @bind-Value="Model.Password" TextFieldType="TextFieldType.Password" Label="Password" Required />
+                    <FluentValidationMessage For="@(() => Model.Password)" />
+                </div>
+                <div style="width:100%">
+                    <FluentLabel Color="Color.Error">@errorMessage?.ToString()</FluentLabel>
+                </div>
+                <FluentButton Style="width:100%" Type="ButtonType.Submit" Appearance="Appearance.Accent">Login</FluentButton>
+            </FluentStack>
+        </FluentEditForm>
+    </FluentGridItem>
+</FluentGrid>
+
+@code {
+    [CascadingParameter]
+    public HttpContext? HttpContext { get; set; }
+
+    [SupplyParameterFromForm]
+    public LoginViewModel Model { get; set; } = new LoginViewModel();
+    
+    string? errorMessage;
+
+    async Task OnLoginSubmit(EditContext context)
+    {
+        var userAccount = AppDbContext.UserAccounts.Where(u => u.UserName == Model.UserName).FirstOrDefault();
+        if (userAccount is null || userAccount.Password != Model.Password)
+        {
+            errorMessage = "Please login again.";
+            return;
+        }
+
+        var claims = new List<Claim>
+        {
+            new Claim(ClaimTypes.Name, Model.UserName),
+            new Claim(ClaimTypes.Role, userAccount.Role)
+        };
+
+        var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
+        var principal = new ClaimsPrincipal(identity);
+        await HttpContext.SignInAsync(principal);
+
+        NavManager.NavigateTo("/");
+    }
+}
\ No newline at end of file
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/Logout.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/Logout.razor
new file mode 100644
index 0000000..be72528
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/Logout.razor
@@ -0,0 +1,26 @@
+@page "/logout"
+@using Microsoft.AspNetCore.Authentication
+@inject NavigationManager NavManager
+@rendermode InteractiveServer
+
+<FluentStack Class="mt-3" Orientation="Orientation.Vertical" VerticalGap="10" HorizontalAlignment="HorizontalAlignment.Center">
+    <FluentEmoji Value="@(new Emojis.PeopleBody.Color.Default.HandWithFingersSplayed())" Width="50px" />
+    <FluentLabel Color="Color.Warning">
+        You've successfully logged out of the application.
+    </FluentLabel>
+</FluentStack>
+
+@code {
+    [CascadingParameter]
+    public HttpContext HttpContext { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        if (HttpContext.User.Identity.IsAuthenticated)
+            await HttpContext.SignOutAsync();
+
+        NavManager.NavigateTo("/logout", true);
+    }
+}
+
diff --git a/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Counter.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Counter.razor
similarity index 100%
rename from FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Counter.razor
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Counter.razor
diff --git a/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Error.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Error.razor
similarity index 100%
rename from FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Error.razor
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Error.razor
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Home.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Home.razor
new file mode 100644
index 0000000..9e32695
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Home.razor
@@ -0,0 +1,25 @@
+@page "/"
+
+<PageTitle>Home</PageTitle>
+
+<FluentGrid>
+    <FluentGridItem xs="12">
+        <FluentLabel Typo="Typography.H2" Weight="FontWeight.Bolder">Welcome to <span style="color: var(--accent-fill-rest)">Fluent Blazor</span></FluentLabel>
+    </FluentGridItem>
+    <FluentGridItem xs="12">
+        <AuthorizeView>
+            <Authorized>
+                <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center" Wrap="true">
+                    Logged in as <b>@context.User.Identity.Name</b>.
+                    <FluentAnchor Href="/logout">Logout</FluentAnchor>
+                </FluentStack>
+            </Authorized>
+            <NotAuthorized>
+                <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center" Wrap="true">
+                    You are not logged in.
+                    <FluentAnchor Href="/login">Login</FluentAnchor>
+                </FluentStack>
+            </NotAuthorized>
+        </AuthorizeView>
+    </FluentGridItem>
+</FluentGrid>
\ No newline at end of file
diff --git a/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Weather.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Weather.razor
similarity index 100%
rename from FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Weather.razor
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Weather.razor
diff --git a/FluentBlazorAuth/FluentBlazorAuth/Components/Routes.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Routes.razor
similarity index 100%
rename from FluentBlazorAuth/FluentBlazorAuth/Components/Routes.razor
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Routes.razor
diff --git a/FluentBlazorAuth/FluentBlazorAuth/Components/_Imports.razor b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/_Imports.razor
similarity index 89%
rename from FluentBlazorAuth/FluentBlazorAuth/Components/_Imports.razor
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/_Imports.razor
index ad69a0f..4b41315 100644
--- a/FluentBlazorAuth/FluentBlazorAuth/Components/_Imports.razor
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/_Imports.razor
@@ -9,3 +9,4 @@
 @using Microsoft.JSInterop
 @using FluentBlazorAuth
 @using FluentBlazorAuth.Components
+@using Microsoft.AspNetCore.Components.Authorization
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Data/AppDbContext.cs b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Data/AppDbContext.cs
new file mode 100644
index 0000000..4cf4d42
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Data/AppDbContext.cs
@@ -0,0 +1,15 @@
+using FluentBlazorAuth.Models;
+using Microsoft.EntityFrameworkCore;
+
+namespace FluentBlazorAuth.Data
+{
+    public class AppDbContext : DbContext
+    {
+        public AppDbContext(DbContextOptions options) : base(options)
+        {
+            
+        }
+
+        public DbSet<UserAccount> UserAccounts { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.csproj b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.csproj
new file mode 100644
index 0000000..b015a6c
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.csproj
@@ -0,0 +1,21 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+	  <PackageReference Include="Microsoft.EntityFrameworkCore" Version="8.0.7" />
+	  <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.7">
+	    <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+	    <PrivateAssets>all</PrivateAssets>
+	  </PackageReference>
+	  <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.*-* " />
+	  <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.6.0" />
+    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.*-* " />
+    <PackageReference Include="Pomelo.EntityFrameworkCore.MySql" Version="8.0.2" />
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.7.0" />
+  </ItemGroup>
+</Project>
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/20240807052911_AddUserAccountModel.Designer.cs b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/20240807052911_AddUserAccountModel.Designer.cs
new file mode 100644
index 0000000..e0e69fd
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/20240807052911_AddUserAccountModel.Designer.cs
@@ -0,0 +1,56 @@
+// <auto-generated />
+using FluentBlazorAuth.Data;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Metadata;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+
+#nullable disable
+
+namespace FluentBlazorAuth.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    [Migration("20240807052911_AddUserAccountModel")]
+    partial class AddUserAccountModel
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "8.0.7")
+                .HasAnnotation("Relational:MaxIdentifierLength", 64);
+
+            MySqlModelBuilderExtensions.AutoIncrementColumns(modelBuilder);
+
+            modelBuilder.Entity("FluentBlazorAuth.Models.UserAccount", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("Password")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("varchar(100)");
+
+                    b.Property<string>("Role")
+                        .HasMaxLength(20)
+                        .HasColumnType("varchar(20)");
+
+                    b.Property<string>("UserName")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("varchar(100)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("UserAccounts");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/20240807052911_AddUserAccountModel.cs b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/20240807052911_AddUserAccountModel.cs
new file mode 100644
index 0000000..df5bf0c
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/20240807052911_AddUserAccountModel.cs
@@ -0,0 +1,44 @@
+using Microsoft.EntityFrameworkCore.Metadata;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace FluentBlazorAuth.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddUserAccountModel : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AlterDatabase()
+                .Annotation("MySql:CharSet", "utf8mb4");
+
+            migrationBuilder.CreateTable(
+                name: "UserAccounts",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "int", nullable: false)
+                        .Annotation("MySql:ValueGenerationStrategy", MySqlValueGenerationStrategy.IdentityColumn),
+                    UserName = table.Column<string>(type: "varchar(100)", maxLength: 100, nullable: false)
+                        .Annotation("MySql:CharSet", "utf8mb4"),
+                    Password = table.Column<string>(type: "varchar(100)", maxLength: 100, nullable: false)
+                        .Annotation("MySql:CharSet", "utf8mb4"),
+                    Role = table.Column<string>(type: "varchar(20)", maxLength: 20, nullable: true)
+                        .Annotation("MySql:CharSet", "utf8mb4")
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_UserAccounts", x => x.Id);
+                })
+                .Annotation("MySql:CharSet", "utf8mb4");
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "UserAccounts");
+        }
+    }
+}
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/AppDbContextModelSnapshot.cs b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/AppDbContextModelSnapshot.cs
new file mode 100644
index 0000000..c0069db
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Migrations/AppDbContextModelSnapshot.cs
@@ -0,0 +1,53 @@
+// <auto-generated />
+using FluentBlazorAuth.Data;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Metadata;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+
+#nullable disable
+
+namespace FluentBlazorAuth.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    partial class AppDbContextModelSnapshot : ModelSnapshot
+    {
+        protected override void BuildModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "8.0.7")
+                .HasAnnotation("Relational:MaxIdentifierLength", 64);
+
+            MySqlModelBuilderExtensions.AutoIncrementColumns(modelBuilder);
+
+            modelBuilder.Entity("FluentBlazorAuth.Models.UserAccount", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    MySqlPropertyBuilderExtensions.UseMySqlIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("Password")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("varchar(100)");
+
+                    b.Property<string>("Role")
+                        .HasMaxLength(20)
+                        .HasColumnType("varchar(20)");
+
+                    b.Property<string>("UserName")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("varchar(100)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("UserAccounts");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Models/UserAccount.cs b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Models/UserAccount.cs
new file mode 100644
index 0000000..ba658c1
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Models/UserAccount.cs
@@ -0,0 +1,18 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace FluentBlazorAuth.Models
+{
+    public class UserAccount
+    {
+        public int Id { get; set; }
+
+        [MaxLength(100)]
+        public required string UserName { get; set; }
+
+        [MaxLength(100)]
+        public required string Password { get; set; }
+
+        [MaxLength(20)]
+        public string? Role { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Models/ViewModels/LoginViewModel.cs b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Models/ViewModels/LoginViewModel.cs
new file mode 100644
index 0000000..88354b0
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Models/ViewModels/LoginViewModel.cs
@@ -0,0 +1,13 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace FluentBlazorAuth.Models.ViewModels
+{
+    public class LoginViewModel
+    {
+        [Required(AllowEmptyStrings = false, ErrorMessage = "Please enter the user name.")]
+        public string? UserName { get; set; }
+
+        [Required(AllowEmptyStrings = false, ErrorMessage = "Please enter the password.")]
+        public string? Password { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Program.cs b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Program.cs
new file mode 100644
index 0000000..8258a68
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Program.cs
@@ -0,0 +1,66 @@
+using Microsoft.FluentUI.AspNetCore.Components;
+using FluentBlazorAuth.Components;
+using Microsoft.AspNetCore.Authentication.Cookies;
+using FluentBlazorAuth.Data;
+using Microsoft.EntityFrameworkCore;
+
+namespace FluentBlazorAuth;
+
+public class Program
+{
+    public static void Main(string[] args)
+    {
+        var builder = WebApplication.CreateBuilder(args);
+
+        // Add services to the container.
+        builder.Services.AddRazorComponents()
+            .AddInteractiveServerComponents();
+        builder.Services.AddFluentUIComponents();
+
+        #region Authentication
+        builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
+        .AddCookie(option => 
+        {
+            option.Cookie.Name = "auth_token";
+            option.LoginPath = "/login";
+            option.Cookie.MaxAge = TimeSpan.FromMinutes(30);
+            option.AccessDeniedPath = "/access-denied";
+        });
+        builder.Services.AddAuthorization();
+        builder.Services.AddCascadingAuthenticationState();
+        #endregion
+
+        #region Database
+        var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
+        builder.Services.AddDbContext<AppDbContext>(options =>
+        {
+            options.UseMySql(connectionString, ServerVersion.AutoDetect(connectionString)); 
+        });
+        #endregion
+
+        var app = builder.Build();
+
+        // Configure the HTTP request pipeline.
+        if (!app.Environment.IsDevelopment())
+        {
+            app.UseExceptionHandler("/Error");
+            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+            app.UseHsts();
+        }
+
+        app.UseHttpsRedirection();
+
+        app.UseStaticFiles();
+        app.UseAntiforgery();
+
+        #region Authentication
+        app.UseAuthentication();
+        app.UseAuthorization();
+        #endregion
+
+        app.MapRazorComponents<App>()
+            .AddInteractiveServerRenderMode();
+
+        app.Run();
+    }
+}
diff --git a/FluentBlazorAuth/FluentBlazorAuth/Properties/launchSettings.json b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Properties/launchSettings.json
similarity index 80%
rename from FluentBlazorAuth/FluentBlazorAuth/Properties/launchSettings.json
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Properties/launchSettings.json
index c72a6db..e8b2e9b 100644
--- a/FluentBlazorAuth/FluentBlazorAuth/Properties/launchSettings.json
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Properties/launchSettings.json
@@ -4,8 +4,8 @@
       "windowsAuthentication": false,
       "anonymousAuthentication": true,
       "iisExpress": {
-        "applicationUrl": "http://localhost:32628",
-        "sslPort": 44384
+        "applicationUrl": "http://localhost:22017",
+        "sslPort": 44317
       }
     },
     "profiles": {
@@ -13,7 +13,7 @@
         "commandName": "Project",
         "dotnetRunMessages": true,
         "launchBrowser": true,
-        "applicationUrl": "http://localhost:5217",
+        "applicationUrl": "http://localhost:5048",
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development"
         }
@@ -22,7 +22,7 @@
         "commandName": "Project",
         "dotnetRunMessages": true,
         "launchBrowser": true,
-        "applicationUrl": "https://localhost:7005;http://localhost:5217",
+        "applicationUrl": "https://localhost:7114;http://localhost:5048",
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development"
         }
diff --git a/FluentBlazorAuth/FluentBlazorAuth/appsettings.Development.json b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/appsettings.Development.json
similarity index 100%
rename from FluentBlazorAuth/FluentBlazorAuth/appsettings.Development.json
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/appsettings.Development.json
diff --git a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/appsettings.json b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/appsettings.json
new file mode 100644
index 0000000..db0c061
--- /dev/null
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/appsettings.json
@@ -0,0 +1,12 @@
+{
+  "ConnectionStrings": {
+  "DefaultConnection": "Server=peacecloud.synology.me; Port=23306; Database=BLAZORTEST; Uid=pds; Pwd=Pds92070983!@"
+  },
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}
diff --git a/FluentBlazorAuth/FluentBlazorAuth/wwwroot/app-cutom.css b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/wwwroot/app-cutom.css
similarity index 100%
rename from FluentBlazorAuth/FluentBlazorAuth/wwwroot/app-cutom.css
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/wwwroot/app-cutom.css
diff --git a/FluentBlazorAuth/FluentBlazorAuth/wwwroot/app.css b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/wwwroot/app.css
similarity index 100%
rename from FluentBlazorAuth/FluentBlazorAuth/wwwroot/app.css
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/wwwroot/app.css
diff --git a/FluentBlazorAuth/FluentBlazorAuth/wwwroot/bootstrap/bootstrap.min.css b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/wwwroot/bootstrap/bootstrap.min.css
similarity index 100%
rename from FluentBlazorAuth/FluentBlazorAuth/wwwroot/bootstrap/bootstrap.min.css
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/wwwroot/bootstrap/bootstrap.min.css
diff --git a/FluentBlazorAuth/FluentBlazorAuth/wwwroot/bootstrap/bootstrap.min.css.map b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/wwwroot/bootstrap/bootstrap.min.css.map
similarity index 100%
rename from FluentBlazorAuth/FluentBlazorAuth/wwwroot/bootstrap/bootstrap.min.css.map
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/wwwroot/bootstrap/bootstrap.min.css.map
diff --git a/FluentBlazorAuth/FluentBlazorAuth/wwwroot/favicon.ico b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/wwwroot/favicon.ico
similarity index 100%
rename from FluentBlazorAuth/FluentBlazorAuth/wwwroot/favicon.ico
rename to FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/wwwroot/favicon.ico
diff --git a/FluentBlazorAuth/FluentBlazorAuth/Program.cs b/FluentBlazorAuth/FluentBlazorAuth/Program.cs
deleted file mode 100644
index 7421c82..0000000
--- a/FluentBlazorAuth/FluentBlazorAuth/Program.cs
+++ /dev/null
@@ -1,29 +0,0 @@
-using Microsoft.FluentUI.AspNetCore.Components;
-using FluentBlazorAuth.Components;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddFluentUIComponents();
-
-var app = builder.Build();
-
-// Configure the HTTP request pipeline.
-if (!app.Environment.IsDevelopment())
-{
-    app.UseExceptionHandler("/Error", createScopeForErrors: true);
-    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
-    app.UseHsts();
-}
-
-app.UseHttpsRedirection();
-
-app.UseStaticFiles();
-app.UseAntiforgery();
-
-app.MapRazorComponents<App>()
-    .AddInteractiveServerRenderMode();
-
-app.Run();
diff --git a/FluentBlazorAuth/FluentBlazorAuth/appsettings.json b/FluentBlazorAuth/FluentBlazorAuth/appsettings.json
deleted file mode 100644
index 10f68b8..0000000
--- a/FluentBlazorAuth/FluentBlazorAuth/appsettings.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "Logging": {
-    "LogLevel": {
-      "Default": "Information",
-      "Microsoft.AspNetCore": "Warning"
-    }
-  },
-  "AllowedHosts": "*"
-}