feat: admin app dark theme

* build: bump bootstrap * feat: admin app dark theme --------- Co-authored-by: github-actions <[email protected]>
Aguafrommars · Mar 8, 2023 · 25da138 · 25da138
1 parent f2af2aa
commit 25da138
Show file tree

Hide file tree

Showing 41 changed files with 4,099 additions and 178 deletions.
diff --git a/src/Aguacongas.TheIdServer.BlazorApp/App.razor b/src/Aguacongas.TheIdServer.BlazorApp/App.razor
@@ -3,6 +3,8 @@
 @using Microsoft.Extensions.Logging
 @inject LazyAssemblyLoader _assemblyLoader
 @inject ILogger<App> _logger
+@inject ThemeService _themeService
+
 <CascadingAuthenticationState>
     <Router AppAssembly="@typeof(Program).Assembly"
             AdditionalAssemblies="@_lazyLoadedAssemblies" OnNavigateAsync="@OnNavigateAsync">

diff --git a/src/Aguacongas.TheIdServer.BlazorApp/App.razor.cs b/src/Aguacongas.TheIdServer.BlazorApp/App.razor.cs
@@ -1,5 +1,6 @@
 // Project: Aguafrommars/TheIdServer
 // Copyright (c) 2023 @Olivier Lefebvre
+using Aguacongas.TheIdServer.BlazorApp.Services;
 using Microsoft.AspNetCore.Components.Routing;
 using System.Reflection;
 
@@ -30,7 +31,13 @@ public partial class App
             "Settings"
         };
 
-        private Task OnNavigateAsync(NavigationContext args)
+        protected override async Task OnInitializedAsync()
+        {
+            await base.OnInitializedAsync().ConfigureAwait(false);
+            await _themeService.InitAsync().ConfigureAwait(false);
+        }
+
+    private Task OnNavigateAsync(NavigationContext args)
         {
             var path = args.Path.Split("/")[0];
             if (path == "protectresource")

diff --git a/src/Aguacongas.TheIdServer.BlazorApp/Shared/MainLayout.razor b/src/Aguacongas.TheIdServer.BlazorApp/Shared/MainLayout.razor
@@ -3,14 +3,15 @@
 
 @inherits LayoutComponentBase
 
-<div class="sidebar bg-light">
+<div class="sidebar">
     <NavMenu />
 </div>
 
-<div class="main bg-light mb-2">
-    <div class="top-row px-4 auth">
+<div class="main mb-2">
+    <div class="nav top-row px-4 auth bg-body-secondary">
         <EntityInfo />
         <LoginDisplay />
+        <ThemeButton />
     </div>
     <div class="content px-4">
         @if (IsClientSide)

diff --git a/src/Aguacongas.TheIdServer.BlazorApp/wwwroot/css/app.css b/src/Aguacongas.TheIdServer.BlazorApp/wwwroot/css/app.css
@@ -33,20 +33,13 @@ span.input-group-text.oi {
 }
 
     .main .top-row {
-        background-color: #e6e6e6;
-        border-bottom: 1px solid #d6d5d5;
         justify-content: flex-end;
     }
 
         .main .top-row > a, .main .top-row .btn-link {
             white-space: nowrap;
         }
 
-.sidebar .top-row {
-    background-color: #e6e6e6;
-    border-bottom: 1px solid #d6d5d5;
-}
-
 .sidebar .navbar-brand {
     font-size: 1.1rem;
 }
@@ -72,7 +65,6 @@ span.input-group-text.oi {
     }
 
     .nav-item a {
-        color: #373737;
         border-radius: 4px;
         height: 3rem;
         display: flex;
@@ -82,17 +74,14 @@ span.input-group-text.oi {
 
         .nav-item a.active {
             background-color: rgba(0,0,0,0.25);
-            color: black;
         }
 
         .nav-item a:hover {
             background-color: rgba(0,0,0,0.1);
-            color: black;
         }
 
 .nav-text {
     font-size: 0.9rem;
-    color: #969595;
 }
 
 .content {

diff --git a/src/Aguacongas.TheIdServer.BlazorApp/wwwroot/index.html b/src/Aguacongas.TheIdServer.BlazorApp/wwwroot/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>TheIdServer Admin</title>
     <base href="/" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
     <script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
     <link href="css/app.css" rel="stylesheet" />
 </head>
-<body class="bg-light">
+<body>
     <app>
         <div class="main">
             <div class="content px-4">

diff --git a/src/Aguacongas.TheIdServer.Duende/Extensions/ServiceCollectionExtensions.cs b/src/Aguacongas.TheIdServer.Duende/Extensions/ServiceCollectionExtensions.cs
@@ -187,20 +187,21 @@ public static IServiceCollection AddTheIdServer(this IServiceCollection services
 
             services.AddRemoteAuthentication<RemoteAuthenticationState, RemoteUserAccount, OidcProviderOptions>();
             services.Configure<HostModelOptions>(configurationManager.GetSection(nameof(HostModelOptions)))
-                 .AddScoped<LazyAssemblyLoader>()
-                 .AddScoped<AuthenticationStateProvider, RemoteAuthenticationService>()
-                 .AddScoped<NavigationManager, PreRenderNavigationManager>()
-                 .AddScoped<ISharedStringLocalizerAsync, Aguacongas.TheIdServer.BlazorApp.Infrastructure.Services.StringLocalizer>()
-                 .AddTransient<IReadOnlyCultureStore, PreRenderCultureStore>()
-                 .AddTransient<IReadOnlyLocalizedResourceStore, PreRenderLocalizedResourceStore>()
-                 .AddTransient<IAccessTokenProvider, AccessTokenProvider>()
-                 .AddTransient<JSInterop.IJSRuntime, JSRuntime>()
-                 .AddTransient<IKeyStore<ECDsaEncryptorDescriptor>, KeyStore<ECDsaEncryptorDescriptor, Aguacongas.IdentityServer.KeysRotation.ECDsaEncryptorDescriptor>>()
-                 .AddTransient<IKeyStore<RsaEncryptorDescriptor>, KeyStore<RsaEncryptorDescriptor, Aguacongas.IdentityServer.KeysRotation.RsaEncryptorDescriptor>>()
-                 .AddTransient<IKeyStore<IAuthenticatedEncryptorDescriptor>, KeyStore<IAuthenticatedEncryptorDescriptor, ConfigurationModel.IAuthenticatedEncryptorDescriptor>>()
-                 .AddAdminApplication(new Settings())
-                 .AddDatabaseDeveloperPageExceptionFilter()
-                 .AddRazorPages(options => options.Conventions.AuthorizeAreaFolder("Identity", "/Account"));
+                .AddScoped<ThemeService>()
+                .AddScoped<LazyAssemblyLoader>()
+                .AddScoped<AuthenticationStateProvider, RemoteAuthenticationService>()
+                .AddScoped<NavigationManager, PreRenderNavigationManager>()
+                .AddScoped<ISharedStringLocalizerAsync, Aguacongas.TheIdServer.BlazorApp.Infrastructure.Services.StringLocalizer>()
+                .AddTransient<IReadOnlyCultureStore, PreRenderCultureStore>()
+                .AddTransient<IReadOnlyLocalizedResourceStore, PreRenderLocalizedResourceStore>()
+                .AddTransient<IAccessTokenProvider, AccessTokenProvider>()
+                .AddTransient<JSInterop.IJSRuntime, JSRuntime>()
+                .AddTransient<IKeyStore<ECDsaEncryptorDescriptor>, KeyStore<ECDsaEncryptorDescriptor, Aguacongas.IdentityServer.KeysRotation.ECDsaEncryptorDescriptor>>()
+                .AddTransient<IKeyStore<RsaEncryptorDescriptor>, KeyStore<RsaEncryptorDescriptor, Aguacongas.IdentityServer.KeysRotation.RsaEncryptorDescriptor>>()
+                .AddTransient<IKeyStore<IAuthenticatedEncryptorDescriptor>, KeyStore<IAuthenticatedEncryptorDescriptor, ConfigurationModel.IAuthenticatedEncryptorDescriptor>>()
+                .AddAdminApplication(new Settings())
+                .AddDatabaseDeveloperPageExceptionFilter()
+                .AddRazorPages(options => options.Conventions.AuthorizeAreaFolder("Identity", "/Account"));
 
             ConfigureHealthChecks(services, dbType, isProxy, configurationManager);
 

diff --git a/src/Aguacongas.TheIdServer.Duende/Views/Shared/_Layout.cshtml b/src/Aguacongas.TheIdServer.Duende/Views/Shared/_Layout.cshtml
@@ -24,8 +24,8 @@ Copyright (c) 2023 @Olivier Lefebvre
     <link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
     <link rel="stylesheet"
           href="@SiteOptions.BOOTSTRAPCSSURL"
-          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
-        crossorigin="anonymous" 
+          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
+          crossorigin="anonymous" 
         referrerpolicy="no-referrer" /> 
     <link rel="stylesheet" href="~/css/site.min.css" />
     <script src="@SiteOptions.JQUERYURL"

diff --git a/src/Aguacongas.TheIdServer/Models/SiteOptions.cs b/src/Aguacongas.TheIdServer/Models/SiteOptions.cs
@@ -5,8 +5,8 @@ namespace Aguacongas.TheIdServer.Models
 {
     public class SiteOptions
     {
-        public static readonly string BOOTSTRAPCSSURL = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css";
-        public static readonly string BOOTSTRAPJSURL = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js";
+        public static readonly string BOOTSTRAPCSSURL = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css";
+        public static readonly string BOOTSTRAPJSURL = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js";
         public static readonly string JQUERYURL = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js";
 
         public string Name { get; set; }

diff --git a/src/Aguacongas.TheIdServer/Pages/_Host.cshtml b/src/Aguacongas.TheIdServer/Pages/_Host.cshtml
@@ -8,30 +8,30 @@ Copyright (c) 2023 @Olivier Lefebvre
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>TheIdServer Admin</title>
     <base href="/" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link href="@SiteOptions.BOOTSTRAPCSSURL"
-          rel="stylesheet" 
-        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
-        crossorigin="anonymous">
+          rel="stylesheet"
+          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
+          crossorigin="anonymous">
     <script src="@SiteOptions.JQUERYURL"
         asp-fallback-src="~/lib/jquery/jquery.min.js"
         asp-fallback-test="window.jQuery"   
         integrity="sha512-6ORWJX/LrnSjBzwefdNUyLCMTIsGoNP6NftMy2UAm1JBm6PRZCO1d7OHBStWpVFZLO+RerTvqX/Z9mBFfCJZ4A==" 
         crossorigin="anonymous" 
         referrerpolicy="no-referrer"></script>
     <script src="@SiteOptions.BOOTSTRAPJSURL"
-            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 
-        crossorigin="anonymous" 
+            integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
+            crossorigin="anonymous" 
         referrerpolicy="no-referrer"></script>
     <link href="css/app.css" rel="stylesheet" />
 </head>
-<body class="bg-light">
+<body>
     <app>
         <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
     </app>

diff --git a/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/DeleteEntityButton.razor b/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/DeleteEntityButton.razor
@@ -5,7 +5,7 @@
         <!-- Button trigger modal -->
         <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete-entity">
             <span class="oi oi-trash"></span>
-            @Localizer["Delete"]
+            <span class="d-none d-lg-inline">@Localizer["Delete"]</span>
         </button>
 
         <!-- Modal -->

diff --git a/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/EntityInfo.razor b/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/EntityInfo.razor
@@ -1,4 +1,4 @@
 @inject NavigationManager _navigationManager
 @inject IStringLocalizerAsync<EntityInfo> Localizer
 
-<h5 class="me-auto text-black-50 text-capitalize">@_entityType</h5>
+<h5 class="me-auto text-body-secondary text-capitalize">@_entityType</h5>
diff --git a/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/Form/SaveButton.razor b/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/Form/SaveButton.razor
@@ -6,14 +6,14 @@
         {
             <button id="@Id" class="btn me-1 @CssSubClass" type="submit" @onclick="OnClicked">
                 <span class="oi oi-data-transfer-download"></span>
-                @Localizer["Save"]
+                <span class="d-none d-lg-inline">@Localizer["Save"]</span>
             </button>
         }
         else
         {
             <button id="@Id" class="btn me-1 @CssSubClass" type="submit" disabled="@_disabled">
                 <span class="oi oi-data-transfer-download"></span>
-                @Localizer["Save"]
+                <span class="d-none d-lg-inline">@Localizer["Save"]</span>
             </button>
         }
     </Authorized>

diff --git a/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/NavMenu.razor b/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/NavMenu.razor
@@ -1,6 +1,6 @@
 @inject IStringLocalizerAsync<NavMenu> Localizer
 
-<div class="top-row pl-4 navbar navbar-light sticky-top">
+<div class="top-row pl-4 navbar bg-body-secondary sticky-top">
     <a class="ms-3 navbar-brand" href="">
         <img class="logo" src="/logo.png" />
         <span>TheIdServer Admin</span>
@@ -12,71 +12,71 @@
 <div class="@NavMenuCssClass mb-2" @onclick="ToggleNavMenu">
     <ul class="nav flex-column">
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="home" Match="NavLinkMatch.All">
+            <NavLink class="nav-link text-body" href="home" Match="NavLinkMatch.All">
                 <span class="oi oi-home" aria-hidden="true"></span> @Localizer["Home"]
             </NavLink>
         </li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="users">
+            <NavLink class="nav-link text-body" href="users">
                 <span class="oi oi-people" aria-hidden="true"></span> @Localizer["Users"]
             </NavLink>
         </li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="roles">
+            <NavLink class="nav-link text-body" href="roles">
                 <span class="oi oi-shield" aria-hidden="true"></span> @Localizer["Roles"]
             </NavLink>
         </li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="clients">
+            <NavLink class="nav-link text-body" href="clients">
                 <span class="oi oi-browser" aria-hidden="true"></span> @Localizer["Clients"]
             </NavLink>
         </li>
         <li class="nav-text px-4">resources</li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="apis">
+            <NavLink class="nav-link text-body" href="apis">
                 <span class="oi oi-wrench" aria-hidden="true"></span> @Localizer["Apis"]
             </NavLink>
         </li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="apiscopes">
+            <NavLink class="nav-link text-body" href="apiscopes">
                 <span class="oi oi-shield" aria-hidden="true"></span> @Localizer["Scopes"]
             </NavLink>
         </li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="identities">
+            <NavLink class="nav-link text-body" href="identities">
                 <span class="oi oi-puzzle-piece" aria-hidden="true"></span> @Localizer["Identities"]
             </NavLink>
         </li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="relyingparties">
+            <NavLink class="nav-link text-body" href="relyingparties">
                 <span class="oi oi-aperture" aria-hidden="true"></span> @Localizer["Relying parties"]
             </NavLink>
         </li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="externalproviders">
+            <NavLink class="nav-link text-body" href="externalproviders">
                 <span class="oi oi-cloud-upload" aria-hidden="true"></span> @Localizer["Providers"]
             </NavLink>
         </li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="cultures">
+            <NavLink class="nav-link text-body" href="cultures">
                 <span class="oi oi-globe" aria-hidden="true"></span> @Localizer["Cultures"]
             </NavLink>
         </li>
         <li class="nav-text px-4">misc</li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="import">
+            <NavLink class="nav-link text-body" href="import">
                 <span class="oi oi-arrow-circle-bottom" aria-hidden="true"></span> @Localizer["Import"]
             </NavLink>
         </li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="keys">
+            <NavLink class="nav-link text-body" href="keys">
                 <span class="oi oi-key" aria-hidden="true"></span> @Localizer["Keys"]
             </NavLink>
         </li>
         @if (Options?.Value?.ShowSettings == true)
         {
             <li class="nav-item px-3">
-                <NavLink class="nav-link" href="settings">
+                <NavLink class="nav-link text-body" href="settings">
                     <span class="oi oi-cog" aria-hidden="true"></span> @Localizer["Settings"]
                 </NavLink>
             </li>
@@ -85,7 +85,7 @@
             <LoginDisplay />
         </li>
     </ul>
-    <div class="fixed-bottom bg-light col-1">
+    <div class="fixed-bottom row col-1 bg-body">
         <a class="px-3" href="https://github.com/aguacongas/TheIdServer/blob/@GitHash/README.md" target="_blank">@Localizer["About"]</a>
     </div>
 </div>
diff --git a/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/NavMenu.razor.cs b/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/NavMenu.razor.cs
@@ -30,7 +30,7 @@ protected override void OnInitialized()
 
         private string _gitHash;
 
-        string GitHash
+        string  GitHash
         {
             get
             {

diff --git a/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/ThemeButton.razor b/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/ThemeButton.razor
@@ -0,0 +1,4 @@
+@inject ThemeService ThemeService
+<buttong class="btn btn-outline-secondary text-body-emphasis" @onclick="ToggleTheme">
+    <span class="oi oi- @ThemeCss"></span>
+</buttong>
diff --git a/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/ThemeButton.razor.cs b/src/BlazorApp/Aguacongas.TheIdServer.BlazorApp.Components/ThemeButton.razor.cs
@@ -0,0 +1,19 @@
+using System.Threading.Tasks;
+
+namespace Aguacongas.TheIdServer.BlazorApp.Components;
+
+public partial class ThemeButton 
+{
+    string ThemeCss => ThemeService.Theme == "light" ? "oi-moon" : "oi-sun";
+
+    async Task ToggleTheme()
+    {
+        if (ThemeService.Theme == "dark")
+        {
+            await ThemeService.SetThemeAsync("light").ConfigureAwait(false);
+            return;
+        }
+
+        await ThemeService.SetThemeAsync("dark").ConfigureAwait(false);
+    }
+}
diff --git a/...ongas.TheIdServer.BlazorApp.Infrastructure/Extensions/WebAssemblyHostBuilderExtensions.cs b/...ongas.TheIdServer.BlazorApp.Infrastructure/Extensions/WebAssemblyHostBuilderExtensions.cs
@@ -67,8 +67,9 @@ public static void ConfigureServices(IServiceCollection services, IConfiguration
                 })
                 .AddAccountClaimsPrincipalFactory<ClaimsPrincipalFactory>();
 
-            services.Configure<Settings>(options => configuration.Bind(options))
+            services.Configure<Settings>(configuration.Bind)
                 .Configure<MenuOptions>(options => configuration.GetSection(nameof(MenuOptions)).Bind(options))
+                .AddScoped<ThemeService>()
                 .AddScoped<DynamicConfiguration.ConfigurationService>()
                 .AddScoped<DynamicConfiguration.IConfigurationService, ConfigurationService>()
                 .AddConfigurationService(configuration.GetSection("settingsOptions"))