Moonlight-Panel/Moonlight
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated all forms to use the EnhancedEditForm and blazors native validation. Fixed smaller issues after upgrading to ShadcnBlazor 1.0.11

Browse Source
This commit is contained in:
ChiaraBm
2026-01-29 08:58:12 +01:00
parent 9b11360a0e
commit 136620f1e6
15 changed files with 362 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Moonlight.Frontend/Moonlight.Frontend.csproj
View File

@@ -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>

66
Moonlight.Frontend/UI/Admin/Modals/CreateApiKeyDialog.razor
View File

@@ -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">
<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
<FieldGroup>
<DataAnnotationsValidator/>
<FormValidationSummary/>
<div class="grid gap-2">
<Label for="keyName">Name</Label>
<FieldSet>
<Field>
<FieldLabel for="keyName">Name</FieldLabel>
<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>
</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"/>
</div>
</div>
</FormHandler>
<DialogFooter ClassName="justify-end gap-x-1">
<WButtom OnClick="() => FormHandler.SubmitAsync()">Save changes</WButtom>
</DialogFooter>
</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();
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;
}
}

66
Moonlight.Frontend/UI/Admin/Modals/CreateRoleDialog.razor
View File

@@ -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>
<FieldSet>
<Field>
<FieldLabel for="roleName">Name</FieldLabel>
<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>
</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"/>
</div>
</div>
</FormHandler>
<DialogFooter ClassName="justify-end gap-x-1">
<WButtom OnClick="SubmitAsync">Save changes</WButtom>
</DialogFooter>
</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()
{
@@ -72,15 +64,13 @@
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;
}
}

43
Moonlight.Frontend/UI/Admin/Modals/CreateUserDialog.razor
View File

@@ -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>
<FieldSet>
<Field>
<FieldLabel for="username">Username</FieldLabel>
<TextInputField
@bind-Value="Request.Username"
id="username"
placeholder="Name of the user"/>
</div>
<div class="grid gap-2">
<Label for="emailAddress">Email Address</Label>
</Field>
<Field>
<FieldLabel for="emailAddress">Email Address</FieldLabel>
<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>
</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;
}
}

8
Moonlight.Frontend/UI/Admin/Modals/ManageRoleMembersDialog.razor
View File

@@ -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>

59
Moonlight.Frontend/UI/Admin/Modals/UpdateApiKeyDialog.razor
View File

@@ -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">
<EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
<FieldGroup>
<FormValidationSummary/>
<DataAnnotationsValidator/>
<div class="grid gap-2">
<Label for="keyName">Name</Label>
<FieldSet>
<Field>
<FieldLabel for="keyName">Name</FieldLabel>
<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>
</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"/>
</div>
</div>
</FormHandler>
<DialogFooter ClassName="justify-end gap-x-1">
<WButtom OnClick="_ => FormHandler.SubmitAsync()">Save changes</WButtom>
</DialogFooter>
</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;
}
}

67
Moonlight.Frontend/UI/Admin/Modals/UpdateRoleDialog.razor
View File

@@ -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,41 +18,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>
<FieldSet>
<Field>
<FieldLabel for="roleName">Name</FieldLabel>
<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>
</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"/>
</div>
</div>
</FormHandler>
<DialogFooter ClassName="justify-end gap-x-1">
<WButtom OnClick="SubmitAsync">Save changes</WButtom>
</DialogFooter>
</FieldContent>
</Field>
</FieldSet>
<Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
<SubmitButton>Save changes</SubmitButton>
</Field>
</FieldGroup>
</EnhancedEditForm>
@code
{
@@ -63,7 +56,6 @@
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;
}
}

44
Moonlight.Frontend/UI/Admin/Modals/UpdateUserDialog.razor
View File

@@ -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,33 +17,32 @@
</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>
<FieldSet>
<Field>
<FieldLabel for="username">Username</FieldLabel>
<TextInputField
@bind-Value="Request.Username"
id="username"
placeholder="Name of the user"/>
</div>
<div class="grid gap-2">
<Label for="emailAddress">Email Address</Label>
</Field>
<Field>
<FieldLabel for="emailAddress">Email Address</FieldLabel>
<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>
</Field>
</FieldSet>
<Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
<SubmitButton>Save changes</SubmitButton>
</Field>
</FieldGroup>
</EnhancedEditForm>
@code
{
@@ -52,17 +50,17 @@
[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;
}
}

4
Moonlight.Frontend/UI/Admin/Views/Sys/Diagnose.razor
View File

@@ -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>

8
Moonlight.Frontend/UI/Admin/Views/Sys/Index.razor
View File

@@ -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 />

12
Moonlight.Frontend/UI/Admin/Views/Sys/Instance.razor
View File

@@ -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>
<FieldContent>
<Select DefaultValue="@SelectedVersion" @bind-Value="SelectedVersion">
<SelectTrigger ClassName="w-64">
<SelectValue/>
</SelectTrigger>
<SelectContent>
<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">

66
Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
View File

@@ -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,6 +21,7 @@
@inject ToastService ToastService
@inject FrontendService FrontendService
<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>
@@ -37,54 +38,55 @@
</a>
</Slot>
</Button>
<Button @onclick="SubmitAsync">
<SubmitButton>
<CheckIcon/>
Continue
</Button>
</SubmitButton>
</div>
</div>
<div class="mt-8">
<Card>
<CardContent>
<FormHandler @ref="Form" OnValidSubmit="OnSubmitAsync" Model="Request">
<div class="flex flex-col gap-6">
<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>
<Field>
<FieldLabel for="themeAuthor">Is Enabled</FieldLabel>
<FieldContent>
<Switch @bind-Value="Request.IsEnabled"/>
</div>
</div>
</FieldContent>
</Field>
</FieldSet>
<Field>
<style>
.cm-editor {
max-height: 400px;
@@ -92,15 +94,16 @@
}
</style>
<div class="grid gap-2">
<Label for="themeAuthor">CSS Content</Label>
<FieldLabel for="themeAuthor">CSS Content</FieldLabel>
<FieldContent>
<Editor @ref="Editor" Language="EditorLanguage.Css" InitialValue="@Request.CssContent"/>
</div>
</div>
</FormHandler>
</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;
}
}

73
Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor
View File

@@ -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,6 +24,8 @@
@inject ToastService ToastService
@inject FrontendService FrontendService
<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>
@@ -40,55 +42,55 @@
</a>
</Slot>
</Button>
<Button @onclick="SubmitAsync">
<SubmitButton>
<CheckIcon/>
Continue
</Button>
</SubmitButton>
</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">
<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>
<Field>
<FieldLabel for="themeAuthor">Is Enabled</FieldLabel>
<FieldContent>
<Switch @bind-Value="Request.IsEnabled"/>
</div>
</div>
</FieldContent>
</Field>
</FieldSet>
<Field>
<style>
.cm-editor {
max-height: 400px;
@@ -96,16 +98,18 @@
}
</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>
<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
{
@@ -114,7 +118,6 @@
private UpdateThemeDto Request;
private ThemeDto Theme;
private FormHandler Form;
private Editor Editor;
private async Task LoadAsync(LazyLoader _)
@@ -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;
}
}

3
Moonlight.Shared/Http/Requests/ApiKeys/CreateApiKeyDto.cs
View File

@@ -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; }
}

2
Moonlight.Shared/Http/Requests/ApiKeys/UpdateApiKeyDto.cs
View File

@@ -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; }
}