From 136620f1e642a011cf90a717328604e1b7ba30d1 Mon Sep 17 00:00:00 2001
From: ChiaraBm <chiara.bm04@gmail.com>
Date: Thu, 29 Jan 2026 08:58:12 +0100
Subject: [PATCH] Updated all forms to use the EnhancedEditForm and blazors
 native validation. Fixed smaller issues after upgrading to ShadcnBlazor
 1.0.11

---
 Moonlight.Frontend/Moonlight.Frontend.csproj  |   4 +-
 .../UI/Admin/Modals/CreateApiKeyDialog.razor  |  74 ++++-----
 .../UI/Admin/Modals/CreateRoleDialog.razor    |  78 +++++-----
 .../UI/Admin/Modals/CreateUserDialog.razor    |  59 ++++----
 .../Modals/ManageRoleMembersDialog.razor      |   8 +-
 .../UI/Admin/Modals/UpdateApiKeyDialog.razor  |  65 ++++----
 .../UI/Admin/Modals/UpdateRoleDialog.razor    |  79 +++++-----
 .../UI/Admin/Modals/UpdateUserDialog.razor    |  62 ++++----
 .../UI/Admin/Views/Sys/Diagnose.razor         |   4 +-
 .../UI/Admin/Views/Sys/Index.razor            |   8 -
 .../UI/Admin/Views/Sys/Instance.razor         |  24 ++-
 .../UI/Admin/Views/Sys/Themes/Create.razor    | 140 ++++++++---------
 .../UI/Admin/Views/Sys/Themes/Update.razor    | 143 +++++++++---------
 .../Http/Requests/ApiKeys/CreateApiKeyDto.cs  |   5 +-
 .../Http/Requests/ApiKeys/UpdateApiKeyDto.cs  |   4 +-
 15 files changed, 362 insertions(+), 395 deletions(-)

diff --git a/Moonlight.Frontend/Moonlight.Frontend.csproj b/Moonlight.Frontend/Moonlight.Frontend.csproj
index 404f41d0..2cfb72cf 100644
--- a/Moonlight.Frontend/Moonlight.Frontend.csproj
+++ b/Moonlight.Frontend/Moonlight.Frontend.csproj
@@ -24,8 +24,8 @@
         <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="10.0.1"/>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1"/>
         <PackageReference Include="Riok.Mapperly" Version="4.3.1-next.0"/>
-        <PackageReference Include="ShadcnBlazor" Version="1.0.10" />
-        <PackageReference Include="ShadcnBlazor.Extras" Version="1.0.10" />
+        <PackageReference Include="ShadcnBlazor" Version="1.0.11" />
+        <PackageReference Include="ShadcnBlazor.Extras" Version="1.0.11" />
     </ItemGroup>
 
     <ItemGroup>
diff --git a/Moonlight.Frontend/UI/Admin/Modals/CreateApiKeyDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/CreateApiKeyDialog.razor
index 0969beb7..5fe70954 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/CreateApiKeyDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/CreateApiKeyDialog.razor
@@ -1,10 +1,9 @@
 @using Moonlight.Frontend.UI.Admin.Components
 @using Moonlight.Shared.Http.Requests.ApiKeys
 @using ShadcnBlazor.Dialogs
-@using ShadcnBlazor.Extras.Common
-@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Extras.Forms
+@using ShadcnBlazor.Fields
 @using ShadcnBlazor.Inputs
-@using ShadcnBlazor.Labels
 
 @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
 
@@ -15,56 +14,57 @@
     </DialogDescription>
 </DialogHeader>
 
-<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="SubmitAsync">
-    <div class="flex flex-col gap-6">
-        <FormValidationSummary />
+<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
 
-        <div class="grid gap-2">
-            <Label for="keyName">Name</Label>
-            <TextInputField @bind-Value="Request.Name" id="keyName" placeholder="My API key" />
-        </div>
-
-        <div class="grid gap-2">
-            <Label for="keyDescription">Description</Label>
-            <textarea
-                @bind="Request.Description"
-                id="keyDescription"
-                maxlength="100"
-                class="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
-                placeholder="What this key is for">
-            
-            </textarea>
-        </div>
-
-        <div class="grid gap-2">
-            <Label>Permissions</Label>
-            <PermissionSelector Permissions="Permissions" />
-        </div>
-    </div>
-</FormHandler>
-
-<DialogFooter ClassName="justify-end gap-x-1">
-    <WButtom OnClick="() => FormHandler.SubmitAsync()">Save changes</WButtom>
-</DialogFooter>
+    <FieldGroup>
+        <DataAnnotationsValidator/>
+        <FormValidationSummary/>
+        
+        <FieldSet>
+            <Field>
+                <FieldLabel for="keyName">Name</FieldLabel>
+                <TextInputField @bind-Value="Request.Name" id="keyName" placeholder="My API key"/>
+            </Field>
+            <Field>
+                <FieldLabel for="keyDescription">Description</FieldLabel>
+                <TextareaInputField @bind-Value="Request.Description" id="keyDescription" placeholder="What this key is for"/>
+            </Field>
+            <Field>
+                <FieldLabel>Permissions</FieldLabel>
+                <FieldContent>
+                    <PermissionSelector Permissions="Permissions"/>
+                </FieldContent>
+            </Field>
+        </FieldSet>
+        <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
+            <SubmitButton>Save changes</SubmitButton>
+        </Field>
+    </FieldGroup>
+</EnhancedEditForm>
 
 @code
 {
     [Parameter] public Func<CreateApiKeyDto, Task> OnSubmit { get; set; }
 
     private CreateApiKeyDto Request;
-    private FormHandler FormHandler;
 
-    private List<string> Permissions = new(); 
+    private List<string> Permissions = new();
 
     protected override void OnInitialized()
     {
-        Request = new();
+        Request = new()
+        {
+            Permissions = []
+        };
     }
 
-    private async Task SubmitAsync()
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
     {
         Request.Permissions = Permissions.ToArray();
+
         await OnSubmit.Invoke(Request);
+
         await CloseAsync();
+        return true;
     }
 }
\ No newline at end of file
diff --git a/Moonlight.Frontend/UI/Admin/Modals/CreateRoleDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/CreateRoleDialog.razor
index 2070f74b..ce98ea80 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/CreateRoleDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/CreateRoleDialog.razor
@@ -1,11 +1,9 @@
 @using Moonlight.Frontend.UI.Admin.Components
 @using Moonlight.Shared.Http.Requests.Roles
-@using ShadcnBlazor.Buttons
 @using ShadcnBlazor.Dialogs
-@using ShadcnBlazor.Extras.Common
-@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Extras.Forms
+@using ShadcnBlazor.Fields
 @using ShadcnBlazor.Inputs
-@using ShadcnBlazor.Labels
 
 @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
 
@@ -18,41 +16,36 @@
     </DialogDescription>
 </DialogHeader>
 
-<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="OnSubmitAsync">
-    <div class="flex flex-col gap-6">
-
+<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
+    <FieldGroup>
         <FormValidationSummary/>
+        <DataAnnotationsValidator/>
 
-        <div class="grid gap-2">
-            <Label for="roleName">Name</Label>
-            <TextInputField
-                @bind-Value="Request.Name"
-                id="roleName"
-                placeholder="My fancy role"/>
-        </div>
-
-        <div class="grid gap-2">
-            <Label for="roleDescription">Description</Label>
-            <textarea
-                @bind="Request.Description"
-                id="roleDescription"
-                maxlength="100"
-                class="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
-                placeholder="Describe what the role should be used for">
-                
-            </textarea>
-        </div>
-        
-        <div class="grid gap-2">
-            <Label>Permissions</Label>
-            <PermissionSelector Permissions="Permissions" />
-        </div>
-    </div>
-</FormHandler>
-
-<DialogFooter ClassName="justify-end gap-x-1">
-    <WButtom OnClick="SubmitAsync">Save changes</WButtom>
-</DialogFooter>
+        <FieldSet>
+            <Field>
+                <FieldLabel for="roleName">Name</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Name"
+                    id="roleName"
+                    placeholder="My fancy role"/>
+            </Field>
+            <Field>
+                <FieldLabel for="keyDescription">Description</FieldLabel>
+                <TextareaInputField @bind-Value="Request.Description" id="keyDescription"
+                                    placeholder="Describe what the role should be used for"/>
+            </Field>
+            <Field>
+                <FieldLabel>Permissions</FieldLabel>
+                <FieldContent>
+                    <PermissionSelector Permissions="Permissions"/>
+                </FieldContent>
+            </Field>
+        </FieldSet>
+        <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
+            <SubmitButton>Save changes</SubmitButton>
+        </Field>
+    </FieldGroup>
+</EnhancedEditForm>
 
 @code
 {
@@ -60,7 +53,6 @@
 
     private CreateRoleDto Request;
     private List<string> Permissions;
-    private FormHandler FormHandler;
 
     protected override void OnInitialized()
     {
@@ -68,19 +60,17 @@
         {
             Permissions = []
         };
-        
+
         Permissions = new();
     }
 
-    private async Task SubmitAsync()
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
     {
         Request.Permissions = Permissions.ToArray();
-        await FormHandler.SubmitAsync();
-    }
 
-    private async Task OnSubmitAsync()
-    {
         await OnSubmit.Invoke(Request);
         await CloseAsync();
+
+        return true;
     }
 }
diff --git a/Moonlight.Frontend/UI/Admin/Modals/CreateUserDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/CreateUserDialog.razor
index 523713a3..ebf8e442 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/CreateUserDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/CreateUserDialog.razor
@@ -1,9 +1,8 @@
 @using Moonlight.Shared.Http.Requests.Users
 @using ShadcnBlazor.Dialogs
-@using ShadcnBlazor.Extras.Common
-@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Extras.Forms
+@using ShadcnBlazor.Fields
 @using ShadcnBlazor.Inputs
-@using ShadcnBlazor.Labels
 
 @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
 
@@ -16,50 +15,50 @@
     </DialogDescription>
 </DialogHeader>
 
-<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="SubmitAsync">
-    <div class="flex flex-col gap-6">
+<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
 
+    <FieldGroup>
         <FormValidationSummary/>
+        <DataAnnotationsValidator/>
 
-        <div class="grid gap-2">
-            <Label for="username">Username</Label>
-            <TextInputField
-                @bind-Value="Request.Username"
-                id="username"
-                placeholder="Name of the user"/>
-        </div>
-
-        <div class="grid gap-2">
-            <Label for="emailAddress">Email Address</Label>
-            <TextInputField
-                @bind-Value="Request.Email"
-                id="emailAddress"
-                Type="email"
-                placeholder="email@of.user"/>
-        </div>
-    </div>
-</FormHandler>
-
-<DialogFooter ClassName="justify-end gap-x-1">
-    <WButtom OnClick="_ => FormHandler.SubmitAsync()">Save changes</WButtom>
-</DialogFooter>
+        <FieldSet>
+            <Field>
+                <FieldLabel for="username">Username</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Username"
+                    id="username"
+                    placeholder="Name of the user"/>
+            </Field>
+            <Field>
+                <FieldLabel for="emailAddress">Email Address</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Email"
+                    id="emailAddress"
+                    placeholder="email@of.user"/>
+            </Field>
+        </FieldSet>
+        <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
+            <SubmitButton>Save changes</SubmitButton>
+        </Field>
+    </FieldGroup>
+</EnhancedEditForm>
 
 @code
 {
     [Parameter] public Func<CreateUserDto, Task> OnSubmit { get; set; }
 
     private CreateUserDto Request;
-    private FormHandler FormHandler;
 
     protected override void OnInitialized()
     {
         Request = new();
     }
 
-    private async Task SubmitAsync()
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
     {
         await OnSubmit.Invoke(Request);
-
         await CloseAsync();
+
+        return true;
     }
 }
diff --git a/Moonlight.Frontend/UI/Admin/Modals/ManageRoleMembersDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/ManageRoleMembersDialog.razor
index 6abb099a..4dc004fa 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/ManageRoleMembersDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/ManageRoleMembersDialog.razor
@@ -32,9 +32,9 @@
                   SearchPlaceholder="Search user"
                   ValueSelector="dto => dto.Username"
                   Source="LoadUsersAsync"/>
-        <WButtom OnClick="AddAsync" Variant="ButtonVariant.Outline" Size="ButtonSize.Icon">
+        <WButton OnClick="AddAsync" Variant="ButtonVariant.Outline" Size="ButtonSize.Icon">
             <PlusIcon/>
-        </WButtom>
+        </WButton>
     </div>
 </div>
 <div class="mt-3">
@@ -50,9 +50,9 @@
             <CellTemplate>
                 <TableCell>
                     <div class="flex justify-end me-1.5">
-                        <WButtom OnClick="_ => RemoveAsync(context)" Variant="ButtonVariant.Destructive" Size="ButtonSize.Icon">
+                        <WButton OnClick="_ => RemoveAsync(context)" Variant="ButtonVariant.Destructive" Size="ButtonSize.Icon">
                             <TrashIcon/>
-                        </WButtom>
+                        </WButton>
                     </div>
                 </TableCell>
             </CellTemplate>
diff --git a/Moonlight.Frontend/UI/Admin/Modals/UpdateApiKeyDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/UpdateApiKeyDialog.razor
index 6f0db39f..3f2f62e9 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/UpdateApiKeyDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/UpdateApiKeyDialog.razor
@@ -3,10 +3,9 @@
 @using Moonlight.Shared.Http.Requests.ApiKeys
 @using Moonlight.Shared.Http.Responses.ApiKeys
 @using ShadcnBlazor.Dialogs
-@using ShadcnBlazor.Extras.Common
-@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Extras.Forms
+@using ShadcnBlazor.Fields
 @using ShadcnBlazor.Inputs
-@using ShadcnBlazor.Labels
 
 @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
 
@@ -17,37 +16,32 @@
     </DialogDescription>
 </DialogHeader>
 
-<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="SubmitAsync">
-    <div class="flex flex-col gap-6">
-        <FormValidationSummary />
+<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
+    <FieldGroup>
+        <FormValidationSummary/>
+        <DataAnnotationsValidator/>
 
-        <div class="grid gap-2">
-            <Label for="keyName">Name</Label>
-            <TextInputField @bind-Value="Request.Name" id="keyName" placeholder="My API key" />
-        </div>
-
-        <div class="grid gap-2">
-            <Label for="keyDescription">Description</Label>
-            <textarea
-                @bind="Request.Description"
-                id="keyDescription"
-                maxlength="100"
-                class="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
-                placeholder="What this key is for">
-            
-            </textarea>
-        </div>
-
-        <div class="grid gap-2">
-            <Label>Permissions</Label>
-            <PermissionSelector Permissions="Permissions" />
-        </div>
-    </div>
-</FormHandler>
-
-<DialogFooter ClassName="justify-end gap-x-1">
-    <WButtom OnClick="_ => FormHandler.SubmitAsync()">Save changes</WButtom>
-</DialogFooter>
+        <FieldSet>
+            <Field>
+                <FieldLabel for="keyName">Name</FieldLabel>
+                <TextInputField @bind-Value="Request.Name" id="keyName" placeholder="My API key"/>
+            </Field>
+            <Field>
+                <FieldLabel for="keyDescription">Description</FieldLabel>
+                <TextareaInputField @bind-Value="Request.Description" id="keyDescription" placeholder="What this key is for"/>
+            </Field>
+            <Field>
+                <FieldLabel>Permissions</FieldLabel>
+                <FieldContent>
+                    <PermissionSelector Permissions="Permissions"/>
+                </FieldContent>
+            </Field>
+        </FieldSet>
+        <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
+            <SubmitButton>Save changes</SubmitButton>
+        </Field>
+    </FieldGroup>
+</EnhancedEditForm>
 
 @code
 {
@@ -55,7 +49,6 @@
     [Parameter] public ApiKeyDto Key { get; set; }
 
     private UpdateApiKeyDto Request;
-    private FormHandler FormHandler;
     private List<string> Permissions = new();
 
     protected override void OnInitialized()
@@ -64,10 +57,12 @@
         Permissions = Key.Permissions.ToList();
     }
 
-    private async Task SubmitAsync()
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
     {
         Request.Permissions = Permissions.ToArray();
         await OnSubmit.Invoke(Request);
         await CloseAsync();
+
+        return true;
     }
 }
\ No newline at end of file
diff --git a/Moonlight.Frontend/UI/Admin/Modals/UpdateRoleDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/UpdateRoleDialog.razor
index f70fa989..1c5870cb 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/UpdateRoleDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/UpdateRoleDialog.razor
@@ -2,12 +2,10 @@
 @using Moonlight.Frontend.UI.Admin.Components
 @using Moonlight.Shared.Http.Requests.Roles
 @using Moonlight.Shared.Http.Responses.Admin
-@using ShadcnBlazor.Buttons
 @using ShadcnBlazor.Dialogs
-@using ShadcnBlazor.Extras.Common
-@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Extras.Forms
+@using ShadcnBlazor.Fields
 @using ShadcnBlazor.Inputs
-@using ShadcnBlazor.Labels
 
 @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
 
@@ -20,50 +18,44 @@
     </DialogDescription>
 </DialogHeader>
 
-<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="OnSubmitAsync">
-    <div class="flex flex-col gap-6">
-
+<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
+    <FieldGroup>
         <FormValidationSummary/>
+        <DataAnnotationsValidator/>
 
-        <div class="grid gap-2">
-            <Label for="roleName">Name</Label>
-            <TextInputField
-                @bind-Value="Request.Name"
-                id="roleName"
-                placeholder="My fancy role"/>
-        </div>
-
-        <div class="grid gap-2">
-            <Label for="roleDescription">Description</Label>
-            <textarea
-                @bind="Request.Description"
-                id="roleDescription"
-                maxlength="100"
-                class="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
-                placeholder="Describe what the role should be used for">
-                
-            </textarea>
-        </div>
-        
-        <div class="grid gap-2">
-            <Label>Permissions</Label>
-            <PermissionSelector Permissions="Permissions" />
-        </div>
-    </div>
-</FormHandler>
-
-<DialogFooter ClassName="justify-end gap-x-1">
-    <WButtom OnClick="SubmitAsync">Save changes</WButtom>
-</DialogFooter>
+        <FieldSet>
+            <Field>
+                <FieldLabel for="roleName">Name</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Name"
+                    id="roleName"
+                    placeholder="My fancy role"/>
+            </Field>
+            <Field>
+                <FieldLabel for="keyDescription">Description</FieldLabel>
+                <TextareaInputField @bind-Value="Request.Description" id="keyDescription"
+                                    placeholder="Describe what the role should be used for"/>
+            </Field>
+            <Field>
+                <FieldLabel>Permissions</FieldLabel>
+                <FieldContent>
+                    <PermissionSelector Permissions="Permissions"/>
+                </FieldContent>
+            </Field>
+        </FieldSet>
+        <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
+            <SubmitButton>Save changes</SubmitButton>
+        </Field>
+    </FieldGroup>
+</EnhancedEditForm>
 
 @code
 {
     [Parameter] public Func<UpdateRoleDto, Task> OnSubmit { get; set; }
     [Parameter] public RoleDto Role { get; set; }
-    
+
     private UpdateRoleDto Request;
     private List<string> Permissions;
-    private FormHandler FormHandler;
 
     protected override void OnInitialized()
     {
@@ -71,15 +63,12 @@
         Permissions = Role.Permissions.ToList();
     }
 
-    private async Task SubmitAsync()
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
     {
         Request.Permissions = Permissions.ToArray();
-        await FormHandler.SubmitAsync();
-    }
-
-    private async Task OnSubmitAsync()
-    {
         await OnSubmit.Invoke(Request);
         await CloseAsync();
+
+        return true;
     }
 }
diff --git a/Moonlight.Frontend/UI/Admin/Modals/UpdateUserDialog.razor b/Moonlight.Frontend/UI/Admin/Modals/UpdateUserDialog.razor
index 0418d1ea..d564202a 100644
--- a/Moonlight.Frontend/UI/Admin/Modals/UpdateUserDialog.razor
+++ b/Moonlight.Frontend/UI/Admin/Modals/UpdateUserDialog.razor
@@ -2,10 +2,9 @@
 @using Moonlight.Shared.Http.Requests.Users
 @using Moonlight.Shared.Http.Responses.Users
 @using ShadcnBlazor.Dialogs
-@using ShadcnBlazor.Extras.Common
-@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Extras.Forms
+@using ShadcnBlazor.Fields
 @using ShadcnBlazor.Inputs
-@using ShadcnBlazor.Labels
 
 @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
 
@@ -18,51 +17,50 @@
     </DialogDescription>
 </DialogHeader>
 
-<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="SubmitAsync">
-    <div class="flex flex-col gap-6">
-
+<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
+    <FieldGroup>
         <FormValidationSummary/>
+        <DataAnnotationsValidator/>
 
-        <div class="grid gap-2">
-            <Label for="username">Username</Label>
-            <TextInputField
-                @bind-Value="Request.Username"
-                id="username"
-                placeholder="Name of the user"/>
-        </div>
-
-        <div class="grid gap-2">
-            <Label for="emailAddress">Email Address</Label>
-            <TextInputField
-                @bind-Value="Request.Email"
-                id="emailAddress"
-                Type="email"
-                placeholder="email@of.user"/>
-        </div>
-    </div>
-</FormHandler>
-
-<DialogFooter ClassName="justify-end gap-x-1">
-    <WButtom OnClick="_ => FormHandler.SubmitAsync()">Save changes</WButtom>
-</DialogFooter>
+        <FieldSet>
+            <Field>
+                <FieldLabel for="username">Username</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Username"
+                    id="username"
+                    placeholder="Name of the user"/>
+            </Field>
+            <Field>
+                <FieldLabel for="emailAddress">Email Address</FieldLabel>
+                <TextInputField
+                    @bind-Value="Request.Email"
+                    id="emailAddress"
+                    placeholder="email@of.user"/>
+            </Field>
+        </FieldSet>
+        <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
+            <SubmitButton>Save changes</SubmitButton>
+        </Field>
+    </FieldGroup>
+</EnhancedEditForm>
 
 @code
 {
     [Parameter] public Func<UpdateUserDto, Task> OnSubmit { get; set; }
     [Parameter] public UserDto User { get; set; }
-    
+
     private UpdateUserDto Request;
-    private FormHandler FormHandler;
 
     protected override void OnInitialized()
     {
         Request = UserMapper.ToUpdate(User);
     }
 
-    private async Task SubmitAsync()
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
     {
         await OnSubmit.Invoke(Request);
-
         await CloseAsync();
+
+        return true;
     }
 }
diff --git a/Moonlight.Frontend/UI/Admin/Views/Sys/Diagnose.razor b/Moonlight.Frontend/UI/Admin/Views/Sys/Diagnose.razor
index 0cac7f81..f6433df8 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Diagnose.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Diagnose.razor
@@ -44,10 +44,10 @@
                 </Alert>
             </CardContent>
             <CardFooter ClassName="justify-end">
-                <WButtom OnClick="DiagnoseAsync" disabled="@(!AccessResult.Succeeded)">
+                <WButton OnClick="DiagnoseAsync" disabled="@(!AccessResult.Succeeded)">
                     <StethoscopeIcon/>
                     Start diagnostics
-                </WButtom>
+                </WButton>
             </CardFooter>
         </Card>
     </div>
diff --git a/Moonlight.Frontend/UI/Admin/Views/Sys/Index.razor b/Moonlight.Frontend/UI/Admin/Views/Sys/Index.razor
index 3675d5cc..7d764378 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Index.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Index.razor
@@ -38,14 +38,6 @@
     </TabsList>
     <TabsContent Value="settings">
         <Card ClassName="mt-5">
-            <CardContent>
-                <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
-                    <div class="col-span-1 grid gap-3">
-                        <Label for="instance-name">Instance Name</Label>
-                        <TextInputField id="instance-name" />
-                    </div>
-                </div>
-            </CardContent>
             <CardFooter ClassName="justify-end">
                 <Button>
                     <SaveIcon />
diff --git a/Moonlight.Frontend/UI/Admin/Views/Sys/Instance.razor b/Moonlight.Frontend/UI/Admin/Views/Sys/Instance.razor
index 058e35cf..fd2c865a 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Instance.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Instance.razor
@@ -28,23 +28,21 @@
                         <CardContent>
                             <FieldGroup>
                                 <FieldSet>
-                                    <FieldLegend>Update instance</FieldLegend>
-                                    <FieldDescription>
-                                        Select the version you want to update to
-                                    </FieldDescription>
                                     <Field>
                                         <FieldLabel>
                                             Version
                                         </FieldLabel>
-                                        <Select DefaultValue="@SelectedVersion" ValueChanged="x => SelectedVersion = x">
-                                            <SelectTrigger>
-                                                <SelectValue/>
-                                            </SelectTrigger>
-                                            <SelectContent>
-                                                <SelectItem Value="v2.1">v2.1</SelectItem>
-                                                <SelectItem Value="v2.1.1">v2.1.1</SelectItem>
-                                            </SelectContent>
-                                        </Select>
+                                        <FieldContent>
+                                            <Select DefaultValue="@SelectedVersion" @bind-Value="SelectedVersion">
+                                                <SelectTrigger ClassName="w-64">
+                                                    <SelectValue/>
+                                                </SelectTrigger>
+                                                <SelectContent ClassName="w-64">
+                                                    <SelectItem Value="v2.1">v2.1</SelectItem>
+                                                    <SelectItem Value="v2.1.1">v2.1.1</SelectItem>
+                                                </SelectContent>
+                                            </Select>
+                                        </FieldContent>
                                     </Field>
                                 </FieldSet>
                                 <Field Orientation="FieldOrientation.Horizontal">
diff --git a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
index d328fc8e..1c5fa9e5 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
@@ -6,11 +6,11 @@
 @using Moonlight.Frontend.Services
 @using Moonlight.Shared.Http.Requests.Themes
 @using ShadcnBlazor.Buttons
-@using ShadcnBlazor.Labels
 @using ShadcnBlazor.Cards
 @using ShadcnBlazor.Extras.Editors
-@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Extras.Forms
 @using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Fields
 @using ShadcnBlazor.Inputs
 @using ShadcnBlazor.Switches
 
@@ -21,86 +21,89 @@
 @inject ToastService ToastService
 @inject FrontendService FrontendService
 
-<div class="flex flex-row justify-between">
-    <div class="flex flex-col">
-        <h1 class="text-xl font-semibold">Create theme</h1>
-        <div class="text-muted-foreground">
-            Create a new theme
+<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync" Context="editFormContext">
+    <div class="flex flex-row justify-between">
+        <div class="flex flex-col">
+            <h1 class="text-xl font-semibold">Create theme</h1>
+            <div class="text-muted-foreground">
+                Create a new theme
+            </div>
+        </div>
+        <div class="flex flex-row gap-x-1.5">
+            <Button Variant="ButtonVariant.Secondary">
+                <Slot>
+                    <a href="/admin/system?tab=themes" @attributes="context">
+                        <ChevronLeftIcon/>
+                        Back
+                    </a>
+                </Slot>
+            </Button>
+            <SubmitButton>
+                <CheckIcon/>
+                Continue
+            </SubmitButton>
         </div>
     </div>
-    <div class="flex flex-row gap-x-1.5">
-        <Button Variant="ButtonVariant.Secondary">
-            <Slot>
-                <a href="/admin/system?tab=themes" @attributes="context">
-                    <ChevronLeftIcon/>
-                    Back
-                </a>
-            </Slot>
-        </Button>
-        <Button @onclick="SubmitAsync">
-            <CheckIcon/>
-            Continue
-        </Button>
-    </div>
-</div>
 
-<div class="mt-8">
-    <Card>
-        <CardContent>
-            <FormHandler @ref="Form" OnValidSubmit="OnSubmitAsync" Model="Request">
-                <div class="flex flex-col gap-6">
-                    
-                    <FormValidationSummary />
-                    
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
-                        <div class="col-span-1 grid gap-2">
-                            <Label for="themeName">Name</Label>
+    <div class="mt-8">
+        <Card>
+            <CardContent>
+                <FieldGroup>
+                    <FormValidationSummary/>
+                    <DataAnnotationsValidator/>
+
+                    <FieldSet ClassName="grid grid-cols-1 lg:grid-cols-2">
+                        <Field>
+                            <FieldLabel for="themeName">Name</FieldLabel>
                             <TextInputField
                                 @bind-Value="Request.Name"
                                 id="themeName"
                                 placeholder="My cool theme"/>
-                        </div>
+                        </Field>
 
-                        <div class="col-span-1 grid gap-2">
-                            <Label for="themeVersion">Version</Label>
+                        <Field>
+                            <FieldLabel for="themeVersion">Version</FieldLabel>
                             <TextInputField
                                 @bind-Value="Request.Version"
                                 id="themeVersion"
                                 Type="text"
                                 placeholder="1.0.0"/>
-                        </div>
-                        
-                        <div class="col-span-1 grid gap-2">
-                            <Label for="themeAuthor">Author</Label>
+                        </Field>
+
+                        <Field>
+                            <FieldLabel for="themeAuthor">Author</FieldLabel>
                             <TextInputField
                                 @bind-Value="Request.Author"
                                 id="themeAuthor"
                                 Type="text"
                                 placeholder="Your name"/>
-                        </div>
-                        
-                        <div class="col-span-1 grid gap-2">
-                            <Label for="themeAuthor">Is Enabled</Label>
-                            <Switch @bind-Value="Request.IsEnabled" />
-                        </div>
-                    </div>
-                    
-                    <style>
-                        .cm-editor {
-                            max-height: 400px;
-                            min-height: 400px;
-                        }
-                    </style>
-                    
-                    <div class="grid gap-2">
-                        <Label for="themeAuthor">CSS Content</Label>
-                        <Editor @ref="Editor" Language="EditorLanguage.Css" InitialValue="@Request.CssContent"/>
-                    </div>
-                </div>
-            </FormHandler>
-        </CardContent>
-    </Card>
-</div>
+                        </Field>
+
+                        <Field>
+                            <FieldLabel for="themeAuthor">Is Enabled</FieldLabel>
+                            <FieldContent>
+                                <Switch @bind-Value="Request.IsEnabled"/>
+                            </FieldContent>
+                        </Field>
+                    </FieldSet>
+                    <Field>
+                        <style>
+                            .cm-editor {
+                                max-height: 400px;
+                                min-height: 400px;
+                            }
+                        </style>
+
+                        <FieldLabel for="themeAuthor">CSS Content</FieldLabel>
+                        <FieldContent>
+                            <Editor @ref="Editor" Language="EditorLanguage.Css" InitialValue="@Request.CssContent"/>
+                        </FieldContent>
+                    </Field>
+                </FieldGroup>
+            </CardContent>
+        </Card>
+    </div>
+</EnhancedEditForm>
 
 @code
 {
@@ -109,17 +112,12 @@
         CssContent = "/* Define your css here */"
     };
 
-    private FormHandler Form;
     private Editor Editor;
 
-    private async Task SubmitAsync()
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
     {
         Request.CssContent = await Editor.GetValueAsync();
-        await Form.SubmitAsync();
-    }
 
-    private async Task OnSubmitAsync()
-    {
         await HttpClient.PostAsJsonAsync(
             "/api/admin/themes",
             Request,
@@ -134,5 +132,7 @@
         await FrontendService.ReloadAsync();
 
         Navigation.NavigateTo("/admin/system?tab=themes");
+
+        return true;
     }
 }
\ No newline at end of file
diff --git a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor
index 800ee14c..eed40f9e 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor
@@ -8,12 +8,12 @@
 @using Moonlight.Shared.Http.Requests.Themes
 @using Moonlight.Shared.Http.Responses.Themes
 @using ShadcnBlazor.Buttons
-@using ShadcnBlazor.Labels
 @using ShadcnBlazor.Cards
 @using ShadcnBlazor.Extras.Common
 @using ShadcnBlazor.Extras.Editors
-@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Extras.Forms
 @using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Fields
 @using ShadcnBlazor.Inputs
 @using ShadcnBlazor.Switches
 
@@ -24,99 +24,102 @@
 @inject ToastService ToastService
 @inject FrontendService FrontendService
 
-<div class="flex flex-row justify-between">
-    <div class="flex flex-col">
-        <h1 class="text-xl font-semibold">Update theme</h1>
-        <div class="text-muted-foreground">
-            Update the theme
+<LazyLoader Load="LoadAsync">
+    <EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync" Context="editFormContext">
+        <div class="flex flex-row justify-between">
+            <div class="flex flex-col">
+                <h1 class="text-xl font-semibold">Update theme</h1>
+                <div class="text-muted-foreground">
+                    Update the theme
+                </div>
+            </div>
+            <div class="flex flex-row gap-x-1.5">
+                <Button Variant="ButtonVariant.Secondary">
+                    <Slot>
+                        <a href="/admin/system?tab=themes" @attributes="context">
+                            <ChevronLeftIcon/>
+                            Back
+                        </a>
+                    </Slot>
+                </Button>
+                <SubmitButton>
+                    <CheckIcon/>
+                    Continue
+                </SubmitButton>
+            </div>
         </div>
-    </div>
-    <div class="flex flex-row gap-x-1.5">
-        <Button Variant="ButtonVariant.Secondary">
-            <Slot>
-                <a href="/admin/system?tab=themes" @attributes="context">
-                    <ChevronLeftIcon/>
-                    Back
-                </a>
-            </Slot>
-        </Button>
-        <Button @onclick="SubmitAsync">
-            <CheckIcon/>
-            Continue
-        </Button>
-    </div>
-</div>
-
-<div class="mt-8">
-    <Card>
-        <CardContent>
-            <LazyLoader Load="LoadAsync">
-                <FormHandler @ref="Form" OnValidSubmit="OnSubmitAsync" Model="Request">
-                    <div class="flex flex-col gap-6">
 
+        <div class="mt-8">
+            <Card>
+                <CardContent>
+                    <FieldGroup>
                         <FormValidationSummary/>
+                        <DataAnnotationsValidator/>
 
-                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
-                            <div class="col-span-1 grid gap-2">
-                                <Label for="themeName">Name</Label>
+                        <FieldSet ClassName="grid grid-cols-1 lg:grid-cols-2">
+                            <Field>
+                                <FieldLabel for="themeName">Name</FieldLabel>
                                 <TextInputField
                                     @bind-Value="Request.Name"
                                     id="themeName"
                                     placeholder="My cool theme"/>
-                            </div>
+                            </Field>
 
-                            <div class="col-span-1 grid gap-2">
-                                <Label for="themeVersion">Version</Label>
+                            <Field>
+                                <FieldLabel for="themeVersion">Version</FieldLabel>
                                 <TextInputField
                                     @bind-Value="Request.Version"
                                     id="themeVersion"
                                     Type="text"
                                     placeholder="1.0.0"/>
-                            </div>
+                            </Field>
 
-                            <div class="col-span-1 grid gap-2">
-                                <Label for="themeAuthor">Author</Label>
+                            <Field>
+                                <FieldLabel for="themeAuthor">Author</FieldLabel>
                                 <TextInputField
                                     @bind-Value="Request.Author"
                                     id="themeAuthor"
                                     Type="text"
                                     placeholder="Your name"/>
-                            </div>
+                            </Field>
 
-                            <div class="col-span-1 grid gap-2">
-                                <Label for="themeAuthor">Is Enabled</Label>
-                                <Switch @bind-Value="Request.IsEnabled" />
-                            </div>
-                        </div>
+                            <Field>
+                                <FieldLabel for="themeAuthor">Is Enabled</FieldLabel>
+                                <FieldContent>
+                                    <Switch @bind-Value="Request.IsEnabled"/>
+                                </FieldContent>
+                            </Field>
+                        </FieldSet>
+                        <Field>
+                            <style>
+                                .cm-editor {
+                                    max-height: 400px;
+                                    min-height: 400px;
+                                }
+                            </style>
 
-                        <style>
-                            .cm-editor {
-                                max-height: 400px;
-                                min-height: 400px;
-                            }
-                        </style>
-
-                        <div class="grid gap-2">
-                            <Label for="themeAuthor">CSS Content</Label>
-                            <Editor @ref="Editor" Language="EditorLanguage.Css" InitialValue="@Request.CssContent"/>
-                        </div>
-                    </div>
-                </FormHandler>
-            </LazyLoader>
-        </CardContent>
-    </Card>
-</div>
+                            <FieldLabel for="themeAuthor">CSS Content</FieldLabel>
+                            <FieldContent>
+                                <Editor @ref="Editor" Language="EditorLanguage.Css"
+                                        InitialValue="@Request.CssContent"/>
+                            </FieldContent>
+                        </Field>
+                    </FieldGroup>
+                </CardContent>
+            </Card>
+        </div>
+    </EnhancedEditForm>
+</LazyLoader>
 
 @code
 {
     [Parameter] public int Id { get; set; }
-    
+
     private UpdateThemeDto Request;
     private ThemeDto Theme;
-    
-    private FormHandler Form;
+
     private Editor Editor;
-    
+
     private async Task LoadAsync(LazyLoader _)
     {
         var theme = await HttpClient.GetFromJsonAsync<ThemeDto>($"api/admin/themes/{Id}");
@@ -125,14 +128,10 @@
         Request = ThemeMapper.ToUpdate(Theme);
     }
 
-    private async Task SubmitAsync()
+    private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
     {
         Request.CssContent = await Editor.GetValueAsync();
-        await Form.SubmitAsync();
-    }
 
-    private async Task OnSubmitAsync()
-    {
         await HttpClient.PatchAsJsonAsync(
             $"/api/admin/themes/{Theme.Id}",
             Request,
@@ -147,5 +146,7 @@
         await FrontendService.ReloadAsync();
 
         Navigation.NavigateTo("/admin/system?tab=themes");
+
+        return true;
     }
 }
\ No newline at end of file
diff --git a/Moonlight.Shared/Http/Requests/ApiKeys/CreateApiKeyDto.cs b/Moonlight.Shared/Http/Requests/ApiKeys/CreateApiKeyDto.cs
index 12b28620..0f5e2e65 100644
--- a/Moonlight.Shared/Http/Requests/ApiKeys/CreateApiKeyDto.cs
+++ b/Moonlight.Shared/Http/Requests/ApiKeys/CreateApiKeyDto.cs
@@ -4,10 +4,13 @@ namespace Moonlight.Shared.Http.Requests.ApiKeys;
 
 public class CreateApiKeyDto
 {
+    [Required]
     [MaxLength(30)]
     public string Name { get; set; }
-
+    
     [MaxLength(300)] public string Description { get; set; } = "";
     
+    
+    [Required]
     public string[] Permissions { get; set; }
 }
\ No newline at end of file
diff --git a/Moonlight.Shared/Http/Requests/ApiKeys/UpdateApiKeyDto.cs b/Moonlight.Shared/Http/Requests/ApiKeys/UpdateApiKeyDto.cs
index 20f64b56..d9fcbfc2 100644
--- a/Moonlight.Shared/Http/Requests/ApiKeys/UpdateApiKeyDto.cs
+++ b/Moonlight.Shared/Http/Requests/ApiKeys/UpdateApiKeyDto.cs
@@ -4,10 +4,12 @@ namespace Moonlight.Shared.Http.Requests.ApiKeys;
 
 public class UpdateApiKeyDto
 {
+    [Required]
     [MaxLength(30)]
     public string Name { get; set; }
-
+    
     [MaxLength(300)] public string Description { get; set; } = "";
     
+    [Required]
     public string[] Permissions { get; set; }
 }
\ No newline at end of file