Updated mooncore version. Fixed tailwind forms plugin layering issues. Added tags input for permissions for api keys and users

Moonlight.Client/Moonlight.Client.csproj

@@ -26,7 +26,7 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.5" PrivateAssets="all" />
     <PackageReference Include="MoonCore" Version="1.8.8" />
     <PackageReference Include="MoonCore.Blazor" Version="1.3.0" />
-    <PackageReference Include="MoonCore.Blazor.Tailwind" Version="1.4.5" />
+    <PackageReference Include="MoonCore.Blazor.Tailwind" Version="1.4.6" />
   </ItemGroup>
   <ItemGroup>
     <None Include="**\*.cs" Exclude="storage\**\*;bin\**\*;obj\**\*">

Moonlight.Client/Styles/exports.css

@@ -5,7 +5,7 @@
 
 @import "./additions/buttons.css" layer(components);
 @import "./additions/cards.css" layer(components);
-@import "./additions/forms.css" layer(utilities);
+@import "./additions/forms.css" layer(components);
 @import "./additions/progress.css" layer(components);
 @import "./additions/scrollbar.css" layer(components);
 @import "./additions/loaders.css" layer(components);

Moonlight.Client/Styles/mappings/mooncore.map

@@ -75,6 +75,36 @@
   "card-title",
   "card-body",
   "card-footer",
+  "form-input",
+  "form-textarea",
+  "form-multiselect",
+  "form-select",
+  "form-checkbox",
+  "form-radio",
+  "form-checkbox",
+  "25rem;",
+  "form-input",
+  "form-textarea",
+  "form-multiselect",
+  "form-select",
+  "1))",
+  "1));",
+  "form-input",
+  "form-textarea",
+  "form-select",
+  "form-checkbox",
+  "form-radio",
+  "511",
+  "262",
+  "966)",
+  "form-switch",
+  "form-switch",
+  "form-switch",
+  "15s",
+  "form-switch",
+  "form-switch",
+  "form-switch",
+  "form-switch",
   "progress",
   "progress-bar",
   "6s",
@@ -166,43 +196,6 @@
   "ml-3",
   "ml-4",
   "ml-auto",
-  "form-checkbox",
-  "6%",
-  "245",
-  "881);",
-  "6%",
-  "245",
-  "881);",
-  "w3.org/2000/svg\u0027%3e%3cpath",
-  "207",
-  "793a1",
-  "414l-5",
-  "414",
-  "414-1.414L6.5",
-  "086l4.293-4.293a1",
-  "414",
-  "w3.org/2000/svg\u0027",
-  "form-radio",
-  "6%",
-  "245",
-  "881);",
-  "6%",
-  "245",
-  "881);",
-  "w3.org/2000/svg\u0027%3e%3ccircle",
-  "form-input",
-  "5rem;",
-  "75rem;",
-  "5rem;",
-  "75rem;",
-  "5rem;",
-  "6%",
-  "245",
-  "881);",
-  "6%",
-  "245",
-  "881);",
-  "5em;",
   "block",
   "flex",
   "grid",
@@ -268,37 +261,6 @@
   "cursor-not-allowed",
   "cursor-pointer",
   "list-disc",
-  "form-select",
-  "5rem;",
-  "75rem;",
-  "5rem;",
-  "75rem;",
-  "5rem;",
-  "6%",
-  "245",
-  "881);",
-  "6%",
-  "245",
-  "881);",
-  "w3.org/2000/svg\u0027",
-  "5\u0027",
-  "5rem",
-  "5em",
-  "5em;",
-  "5rem;",
-  "75rem;",
-  "form-textarea",
-  "5rem;",
-  "75rem;",
-  "5rem;",
-  "75rem;",
-  "5rem;",
-  "6%",
-  "245",
-  "881);",
-  "6%",
-  "245",
-  "881);",
   "grid-flow-col",
   "grid-cols-1",
   "grid-cols-2",
@@ -405,6 +367,7 @@
   "fill-current",
   "fill-primary",
   "p-0",
+  "p-1",
   "p-2",
   "p-3",
   "p-4",
@@ -613,35 +576,5 @@
   "dark:disabled:border-gray-700",
   "dark:disabled:bg-gray-800",
   "dark:disabled:text-gray-600",
-  "dark:disabled:placeholder:text-gray-600",
+  "dark:disabled:placeholder:text-gray-600"
-  "form-input",
-  "form-textarea",
-  "form-multiselect",
-  "form-select",
-  "form-checkbox",
-  "form-radio",
-  "form-checkbox",
-  "25rem;",
-  "form-input",
-  "form-textarea",
-  "form-multiselect",
-  "form-select",
-  "1))",
-  "1));",
-  "form-input",
-  "form-textarea",
-  "form-select",
-  "form-checkbox",
-  "form-radio",
-  "511",
-  "262",
-  "966)",
-  "form-switch",
-  "form-switch",
-  "form-switch",
-  "15s",
-  "form-switch",
-  "form-switch",
-  "form-switch",
-  "form-switch"
 ]

Moonlight.Client/Styles/style.css

@@ -6,7 +6,9 @@
 @import "./exports.css";
 @import "moonlight/nuget.css";
 
-@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/forms" {
+    strategy: "base";
+}
 
 @source "../**/*.razor";
 @source "../**/*.cs";

Moonlight.Client/UI/Views/Admin/Api/Create.razor

@@ -1,8 +1,10 @@
 @page "/admin/api/create"
 
+@using System.Text.Json
 @using MoonCore.Helpers
 @using Moonlight.Shared.Http.Requests.Admin.ApiKeys
 @using Moonlight.Shared.Http.Responses.Admin.ApiKeys
+@using MoonCore.Blazor.Tailwind.Input2
 
 @inject HttpApiClient ApiClient
 @inject NavigationManager Navigation
@@ -33,7 +35,7 @@
             <div class="sm:col-span-2">
                 <label class="block text-sm font-medium leading-6 text-white">Permissions</label>
                 <div class="mt-2">
-                    <input @bind="Request.PermissionsJson" type="email" autocomplete="off" class="form-input w-full">
+                    <InputTag @bind-Value="Permissions" />
                 </div>
             </div>
             <div class="sm:col-span-2">
@@ -50,6 +52,8 @@
 {
     private HandleForm Form;
     private CreateApiKeyRequest Request;
+    
+    private string[] Permissions = [];
 
     protected override void OnInitialized()
     {
@@ -58,6 +62,7 @@
 
     private async Task OnSubmit()
     {
+        Request.PermissionsJson = JsonSerializer.Serialize(Permissions);
         Request.ExpiresAt = Request.ExpiresAt.ToUniversalTime();
         
         var response = await ApiClient.PostJson<CreateApiKeyResponse>("api/admin/apikeys", Request);

Moonlight.Client/UI/Views/Admin/Api/Update.razor

@@ -1,5 +1,6 @@
 @page "/admin/api/{Id:int}"
 
+@using System.Text.Json
 @using MoonCore.Helpers
 @using Moonlight.Shared.Http.Requests.Admin.ApiKeys
 @using Moonlight.Shared.Http.Responses.Admin.ApiKeys

Moonlight.Client/UI/Views/Admin/Users/Create.razor

@@ -1,7 +1,9 @@
 @page "/admin/users/create"
 
+@using System.Text.Json
 @using MoonCore.Helpers
 @using Moonlight.Shared.Http.Requests.Admin.Users
+@using MoonCore.Blazor.Tailwind.Input2
 
 @inject HttpApiClient ApiClient
 @inject NavigationManager Navigation
@@ -34,15 +36,15 @@
                 </div>
             </div>
             <div class="sm:col-span-2">
-                <label class="block text-sm font-medium leading-6 text-white">Password</label>
+                <label class="block text-sm font-medium leading-6 text-white">Permissions</label>
                 <div class="mt-2">
-                    <input @bind="Request.Password" type="password" autocomplete="off" class="form-input w-full">
+                    <InputTag @bind-Value="Permissions" />
                 </div>
             </div>
             <div class="sm:col-span-2">
-                <label class="block text-sm font-medium leading-6 text-white">Permissions</label>
+                <label class="block text-sm font-medium leading-6 text-white">Password</label>
                 <div class="mt-2">
-                    <input @bind="Request.PermissionsJson" type="text" autocomplete="off" class="form-input w-full">
+                    <input @bind="Request.Password" type="password" autocomplete="off" class="form-input w-full">
                 </div>
             </div>
         </div>
@@ -54,6 +56,8 @@
     private HandleForm Form;
     private CreateUserRequest Request;
 
+    private string[] Permissions = [];
+
     protected override void OnInitialized()
     {
         Request = new();
@@ -61,6 +65,8 @@
 
     private async Task OnSubmit()
     {
+        Request.PermissionsJson = JsonSerializer.Serialize(Permissions);
+        
         await ApiClient.Post("api/admin/users", Request);
 
         await ToastService.Success("Successfully created user");

Moonlight.Client/UI/Views/Admin/Users/Update.razor

@@ -1,8 +1,10 @@
 @page "/admin/users/{Id:int}"
 
+@using System.Text.Json
 @using MoonCore.Helpers
 @using Moonlight.Shared.Http.Requests.Admin.Users
 @using Moonlight.Shared.Http.Responses.Admin.Users
+@using MoonCore.Blazor.Tailwind.Input2
 
 @inject HttpApiClient ApiClient
 @inject NavigationManager Navigation
@@ -38,7 +40,7 @@
                 <div class="sm:col-span-2">
                     <label class="block text-sm font-medium leading-6 text-white">Permissions</label>
                     <div class="mt-2">
-                        <input @bind="Request.PermissionsJson" type="text" autocomplete="off" class="form-input w-full">
+                        <InputTag @bind-Value="Permissions" />
                     </div>
                 </div>
                 <div class="sm:col-span-2">
@@ -59,10 +61,14 @@
     private HandleForm Form;
     private UpdateUserRequest Request;
 
+    private string[] Permissions = [];
+
     private async Task Load(LazyLoader _)
     {
         var detail = await ApiClient.GetJson<UserResponse>($"api/admin/users/{Id}");
 
+        Permissions = JsonSerializer.Deserialize<string[]>(detail.PermissionsJson) ?? [];
+
         Request = new()
         {
             Email = detail.Email,
@@ -73,6 +79,8 @@
 
     private async Task OnSubmit()
     {
+        Request.PermissionsJson = JsonSerializer.Serialize(Permissions);
+        
         await ApiClient.Patch($"api/admin/users/{Id}", Request);
 
         await ToastService.Success("Successfully updated user");