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.Authorization" Version="10.0.1"/>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" 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="Riok.Mapperly" Version="4.3.1-next.0"/>
<PackageReference Include="ShadcnBlazor" Version="1.0.10" /> <PackageReference Include="ShadcnBlazor" Version="1.0.11" />
<PackageReference Include="ShadcnBlazor.Extras" Version="1.0.10" /> <PackageReference Include="ShadcnBlazor.Extras" Version="1.0.11" />
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>

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

@@ -1,10 +1,9 @@
@using Moonlight.Frontend.UI.Admin.Components @using Moonlight.Frontend.UI.Admin.Components
@using Moonlight.Shared.Http.Requests.ApiKeys @using Moonlight.Shared.Http.Requests.ApiKeys
@using ShadcnBlazor.Dialogs @using ShadcnBlazor.Dialogs
@using ShadcnBlazor.Extras.Common @using ShadcnBlazor.Extras.Forms
@using ShadcnBlazor.Extras.FormHandlers @using ShadcnBlazor.Fields
@using ShadcnBlazor.Inputs @using ShadcnBlazor.Inputs
@using ShadcnBlazor.Labels
@inherits ShadcnBlazor.Extras.Dialogs.DialogBase @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
@@ -15,56 +14,57 @@
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="SubmitAsync"> <EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
<div class="flex flex-col gap-6">
<FormValidationSummary />
<div class="grid gap-2"> <FieldGroup>
<Label for="keyName">Name</Label> <DataAnnotationsValidator/>
<TextInputField @bind-Value="Request.Name" id="keyName" placeholder="My API key" /> <FormValidationSummary/>
</div>
<div class="grid gap-2"> <FieldSet>
<Label for="keyDescription">Description</Label> <Field>
<textarea <FieldLabel for="keyName">Name</FieldLabel>
@bind="Request.Description" <TextInputField @bind-Value="Request.Name" id="keyName" placeholder="My API key"/>
id="keyDescription" </Field>
maxlength="100" <Field>
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" <FieldLabel for="keyDescription">Description</FieldLabel>
placeholder="What this key is for"> <TextareaInputField @bind-Value="Request.Description" id="keyDescription" placeholder="What this key is for"/>
</Field>
</textarea> <Field>
</div> <FieldLabel>Permissions</FieldLabel>
<FieldContent>
<div class="grid gap-2"> <PermissionSelector Permissions="Permissions"/>
<Label>Permissions</Label> </FieldContent>
<PermissionSelector Permissions="Permissions" /> </Field>
</div> </FieldSet>
</div> <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
</FormHandler> <SubmitButton>Save changes</SubmitButton>
</Field>
<DialogFooter ClassName="justify-end gap-x-1"> </FieldGroup>
<WButtom OnClick="() => FormHandler.SubmitAsync()">Save changes</WButtom> </EnhancedEditForm>
</DialogFooter>
@code @code
{ {
[Parameter] public Func<CreateApiKeyDto, Task> OnSubmit { get; set; } [Parameter] public Func<CreateApiKeyDto, Task> OnSubmit { get; set; }
private CreateApiKeyDto Request; private CreateApiKeyDto Request;
private FormHandler FormHandler;
private List<string> Permissions = new(); private List<string> Permissions = new();
protected override void OnInitialized() 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(); Request.Permissions = Permissions.ToArray();
await OnSubmit.Invoke(Request); await OnSubmit.Invoke(Request);
await CloseAsync(); await CloseAsync();
return true;
} }
} }

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

@@ -1,11 +1,9 @@
@using Moonlight.Frontend.UI.Admin.Components @using Moonlight.Frontend.UI.Admin.Components
@using Moonlight.Shared.Http.Requests.Roles @using Moonlight.Shared.Http.Requests.Roles
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Dialogs @using ShadcnBlazor.Dialogs
@using ShadcnBlazor.Extras.Common @using ShadcnBlazor.Extras.Forms
@using ShadcnBlazor.Extras.FormHandlers @using ShadcnBlazor.Fields
@using ShadcnBlazor.Inputs @using ShadcnBlazor.Inputs
@using ShadcnBlazor.Labels
@inherits ShadcnBlazor.Extras.Dialogs.DialogBase @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
@@ -18,41 +16,36 @@
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="OnSubmitAsync"> <EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
<div class="flex flex-col gap-6"> <FieldGroup>
<FormValidationSummary/> <FormValidationSummary/>
<DataAnnotationsValidator/>
<div class="grid gap-2"> <FieldSet>
<Label for="roleName">Name</Label> <Field>
<TextInputField <FieldLabel for="roleName">Name</FieldLabel>
@bind-Value="Request.Name" <TextInputField
id="roleName" @bind-Value="Request.Name"
placeholder="My fancy role"/> id="roleName"
</div> placeholder="My fancy role"/>
</Field>
<div class="grid gap-2"> <Field>
<Label for="roleDescription">Description</Label> <FieldLabel for="keyDescription">Description</FieldLabel>
<textarea <TextareaInputField @bind-Value="Request.Description" id="keyDescription"
@bind="Request.Description" placeholder="Describe what the role should be used for"/>
id="roleDescription" </Field>
maxlength="100" <Field>
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" <FieldLabel>Permissions</FieldLabel>
placeholder="Describe what the role should be used for"> <FieldContent>
<PermissionSelector Permissions="Permissions"/>
</textarea> </FieldContent>
</div> </Field>
</FieldSet>
<div class="grid gap-2"> <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
<Label>Permissions</Label> <SubmitButton>Save changes</SubmitButton>
<PermissionSelector Permissions="Permissions" /> </Field>
</div> </FieldGroup>
</div> </EnhancedEditForm>
</FormHandler>
<DialogFooter ClassName="justify-end gap-x-1">
<WButtom OnClick="SubmitAsync">Save changes</WButtom>
</DialogFooter>
@code @code
{ {
@@ -60,7 +53,6 @@
private CreateRoleDto Request; private CreateRoleDto Request;
private List<string> Permissions; private List<string> Permissions;
private FormHandler FormHandler;
protected override void OnInitialized() protected override void OnInitialized()
{ {
@@ -72,15 +64,13 @@
Permissions = new(); Permissions = new();
} }
private async Task SubmitAsync() private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
{ {
Request.Permissions = Permissions.ToArray(); Request.Permissions = Permissions.ToArray();
await FormHandler.SubmitAsync();
}
private async Task OnSubmitAsync()
{
await OnSubmit.Invoke(Request); await OnSubmit.Invoke(Request);
await CloseAsync(); await CloseAsync();
return true;
} }
} }

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

@@ -1,9 +1,8 @@
@using Moonlight.Shared.Http.Requests.Users @using Moonlight.Shared.Http.Requests.Users
@using ShadcnBlazor.Dialogs @using ShadcnBlazor.Dialogs
@using ShadcnBlazor.Extras.Common @using ShadcnBlazor.Extras.Forms
@using ShadcnBlazor.Extras.FormHandlers @using ShadcnBlazor.Fields
@using ShadcnBlazor.Inputs @using ShadcnBlazor.Inputs
@using ShadcnBlazor.Labels
@inherits ShadcnBlazor.Extras.Dialogs.DialogBase @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
@@ -16,50 +15,50 @@
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="SubmitAsync"> <EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
<div class="flex flex-col gap-6">
<FieldGroup>
<FormValidationSummary/> <FormValidationSummary/>
<DataAnnotationsValidator/>
<div class="grid gap-2"> <FieldSet>
<Label for="username">Username</Label> <Field>
<TextInputField <FieldLabel for="username">Username</FieldLabel>
@bind-Value="Request.Username" <TextInputField
id="username" @bind-Value="Request.Username"
placeholder="Name of the user"/> id="username"
</div> placeholder="Name of the user"/>
</Field>
<div class="grid gap-2"> <Field>
<Label for="emailAddress">Email Address</Label> <FieldLabel for="emailAddress">Email Address</FieldLabel>
<TextInputField <TextInputField
@bind-Value="Request.Email" @bind-Value="Request.Email"
id="emailAddress" id="emailAddress"
Type="email" placeholder="email@of.user"/>
placeholder="email@of.user"/> </Field>
</div> </FieldSet>
</div> <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
</FormHandler> <SubmitButton>Save changes</SubmitButton>
</Field>
<DialogFooter ClassName="justify-end gap-x-1"> </FieldGroup>
<WButtom OnClick="_ => FormHandler.SubmitAsync()">Save changes</WButtom> </EnhancedEditForm>
</DialogFooter>
@code @code
{ {
[Parameter] public Func<CreateUserDto, Task> OnSubmit { get; set; } [Parameter] public Func<CreateUserDto, Task> OnSubmit { get; set; }
private CreateUserDto Request; private CreateUserDto Request;
private FormHandler FormHandler;
protected override void OnInitialized() protected override void OnInitialized()
{ {
Request = new(); Request = new();
} }
private async Task SubmitAsync() private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
{ {
await OnSubmit.Invoke(Request); await OnSubmit.Invoke(Request);
await CloseAsync(); await CloseAsync();
return true;
} }
} }

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

@@ -32,9 +32,9 @@
SearchPlaceholder="Search user" SearchPlaceholder="Search user"
ValueSelector="dto => dto.Username" ValueSelector="dto => dto.Username"
Source="LoadUsersAsync"/> Source="LoadUsersAsync"/>
<WButtom OnClick="AddAsync" Variant="ButtonVariant.Outline" Size="ButtonSize.Icon"> <WButton OnClick="AddAsync" Variant="ButtonVariant.Outline" Size="ButtonSize.Icon">
<PlusIcon/> <PlusIcon/>
</WButtom> </WButton>
</div> </div>
</div> </div>
<div class="mt-3"> <div class="mt-3">
@@ -50,9 +50,9 @@
<CellTemplate> <CellTemplate>
<TableCell> <TableCell>
<div class="flex justify-end me-1.5"> <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/> <TrashIcon/>
</WButtom> </WButton>
</div> </div>
</TableCell> </TableCell>
</CellTemplate> </CellTemplate>

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

@@ -3,10 +3,9 @@
@using Moonlight.Shared.Http.Requests.ApiKeys @using Moonlight.Shared.Http.Requests.ApiKeys
@using Moonlight.Shared.Http.Responses.ApiKeys @using Moonlight.Shared.Http.Responses.ApiKeys
@using ShadcnBlazor.Dialogs @using ShadcnBlazor.Dialogs
@using ShadcnBlazor.Extras.Common @using ShadcnBlazor.Extras.Forms
@using ShadcnBlazor.Extras.FormHandlers @using ShadcnBlazor.Fields
@using ShadcnBlazor.Inputs @using ShadcnBlazor.Inputs
@using ShadcnBlazor.Labels
@inherits ShadcnBlazor.Extras.Dialogs.DialogBase @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
@@ -17,37 +16,32 @@
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="SubmitAsync"> <EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
<div class="flex flex-col gap-6"> <FieldGroup>
<FormValidationSummary /> <FormValidationSummary/>
<DataAnnotationsValidator/>
<div class="grid gap-2"> <FieldSet>
<Label for="keyName">Name</Label> <Field>
<TextInputField @bind-Value="Request.Name" id="keyName" placeholder="My API key" /> <FieldLabel for="keyName">Name</FieldLabel>
</div> <TextInputField @bind-Value="Request.Name" id="keyName" placeholder="My API key"/>
</Field>
<div class="grid gap-2"> <Field>
<Label for="keyDescription">Description</Label> <FieldLabel for="keyDescription">Description</FieldLabel>
<textarea <TextareaInputField @bind-Value="Request.Description" id="keyDescription" placeholder="What this key is for"/>
@bind="Request.Description" </Field>
id="keyDescription" <Field>
maxlength="100" <FieldLabel>Permissions</FieldLabel>
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" <FieldContent>
placeholder="What this key is for"> <PermissionSelector Permissions="Permissions"/>
</FieldContent>
</textarea> </Field>
</div> </FieldSet>
<Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
<div class="grid gap-2"> <SubmitButton>Save changes</SubmitButton>
<Label>Permissions</Label> </Field>
<PermissionSelector Permissions="Permissions" /> </FieldGroup>
</div> </EnhancedEditForm>
</div>
</FormHandler>
<DialogFooter ClassName="justify-end gap-x-1">
<WButtom OnClick="_ => FormHandler.SubmitAsync()">Save changes</WButtom>
</DialogFooter>
@code @code
{ {
@@ -55,7 +49,6 @@
[Parameter] public ApiKeyDto Key { get; set; } [Parameter] public ApiKeyDto Key { get; set; }
private UpdateApiKeyDto Request; private UpdateApiKeyDto Request;
private FormHandler FormHandler;
private List<string> Permissions = new(); private List<string> Permissions = new();
protected override void OnInitialized() protected override void OnInitialized()
@@ -64,10 +57,12 @@
Permissions = Key.Permissions.ToList(); Permissions = Key.Permissions.ToList();
} }
private async Task SubmitAsync() private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
{ {
Request.Permissions = Permissions.ToArray(); Request.Permissions = Permissions.ToArray();
await OnSubmit.Invoke(Request); await OnSubmit.Invoke(Request);
await CloseAsync(); await CloseAsync();
return true;
} }
} }

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

@@ -2,12 +2,10 @@
@using Moonlight.Frontend.UI.Admin.Components @using Moonlight.Frontend.UI.Admin.Components
@using Moonlight.Shared.Http.Requests.Roles @using Moonlight.Shared.Http.Requests.Roles
@using Moonlight.Shared.Http.Responses.Admin @using Moonlight.Shared.Http.Responses.Admin
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Dialogs @using ShadcnBlazor.Dialogs
@using ShadcnBlazor.Extras.Common @using ShadcnBlazor.Extras.Forms
@using ShadcnBlazor.Extras.FormHandlers @using ShadcnBlazor.Fields
@using ShadcnBlazor.Inputs @using ShadcnBlazor.Inputs
@using ShadcnBlazor.Labels
@inherits ShadcnBlazor.Extras.Dialogs.DialogBase @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
@@ -20,41 +18,36 @@
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="OnSubmitAsync"> <EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
<div class="flex flex-col gap-6"> <FieldGroup>
<FormValidationSummary/> <FormValidationSummary/>
<DataAnnotationsValidator/>
<div class="grid gap-2"> <FieldSet>
<Label for="roleName">Name</Label> <Field>
<TextInputField <FieldLabel for="roleName">Name</FieldLabel>
@bind-Value="Request.Name" <TextInputField
id="roleName" @bind-Value="Request.Name"
placeholder="My fancy role"/> id="roleName"
</div> placeholder="My fancy role"/>
</Field>
<div class="grid gap-2"> <Field>
<Label for="roleDescription">Description</Label> <FieldLabel for="keyDescription">Description</FieldLabel>
<textarea <TextareaInputField @bind-Value="Request.Description" id="keyDescription"
@bind="Request.Description" placeholder="Describe what the role should be used for"/>
id="roleDescription" </Field>
maxlength="100" <Field>
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" <FieldLabel>Permissions</FieldLabel>
placeholder="Describe what the role should be used for"> <FieldContent>
<PermissionSelector Permissions="Permissions"/>
</textarea> </FieldContent>
</div> </Field>
</FieldSet>
<div class="grid gap-2"> <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
<Label>Permissions</Label> <SubmitButton>Save changes</SubmitButton>
<PermissionSelector Permissions="Permissions" /> </Field>
</div> </FieldGroup>
</div> </EnhancedEditForm>
</FormHandler>
<DialogFooter ClassName="justify-end gap-x-1">
<WButtom OnClick="SubmitAsync">Save changes</WButtom>
</DialogFooter>
@code @code
{ {
@@ -63,7 +56,6 @@
private UpdateRoleDto Request; private UpdateRoleDto Request;
private List<string> Permissions; private List<string> Permissions;
private FormHandler FormHandler;
protected override void OnInitialized() protected override void OnInitialized()
{ {
@@ -71,15 +63,12 @@
Permissions = Role.Permissions.ToList(); Permissions = Role.Permissions.ToList();
} }
private async Task SubmitAsync() private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
{ {
Request.Permissions = Permissions.ToArray(); Request.Permissions = Permissions.ToArray();
await FormHandler.SubmitAsync();
}
private async Task OnSubmitAsync()
{
await OnSubmit.Invoke(Request); await OnSubmit.Invoke(Request);
await CloseAsync(); await CloseAsync();
return true;
} }
} }

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

@@ -2,10 +2,9 @@
@using Moonlight.Shared.Http.Requests.Users @using Moonlight.Shared.Http.Requests.Users
@using Moonlight.Shared.Http.Responses.Users @using Moonlight.Shared.Http.Responses.Users
@using ShadcnBlazor.Dialogs @using ShadcnBlazor.Dialogs
@using ShadcnBlazor.Extras.Common @using ShadcnBlazor.Extras.Forms
@using ShadcnBlazor.Extras.FormHandlers @using ShadcnBlazor.Fields
@using ShadcnBlazor.Inputs @using ShadcnBlazor.Inputs
@using ShadcnBlazor.Labels
@inherits ShadcnBlazor.Extras.Dialogs.DialogBase @inherits ShadcnBlazor.Extras.Dialogs.DialogBase
@@ -18,33 +17,32 @@
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="SubmitAsync"> <EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync">
<div class="flex flex-col gap-6"> <FieldGroup>
<FormValidationSummary/> <FormValidationSummary/>
<DataAnnotationsValidator/>
<div class="grid gap-2"> <FieldSet>
<Label for="username">Username</Label> <Field>
<TextInputField <FieldLabel for="username">Username</FieldLabel>
@bind-Value="Request.Username" <TextInputField
id="username" @bind-Value="Request.Username"
placeholder="Name of the user"/> id="username"
</div> placeholder="Name of the user"/>
</Field>
<div class="grid gap-2"> <Field>
<Label for="emailAddress">Email Address</Label> <FieldLabel for="emailAddress">Email Address</FieldLabel>
<TextInputField <TextInputField
@bind-Value="Request.Email" @bind-Value="Request.Email"
id="emailAddress" id="emailAddress"
Type="email" placeholder="email@of.user"/>
placeholder="email@of.user"/> </Field>
</div> </FieldSet>
</div> <Field Orientation="FieldOrientation.Horizontal" ClassName="justify-end">
</FormHandler> <SubmitButton>Save changes</SubmitButton>
</Field>
<DialogFooter ClassName="justify-end gap-x-1"> </FieldGroup>
<WButtom OnClick="_ => FormHandler.SubmitAsync()">Save changes</WButtom> </EnhancedEditForm>
</DialogFooter>
@code @code
{ {
@@ -52,17 +50,17 @@
[Parameter] public UserDto User { get; set; } [Parameter] public UserDto User { get; set; }
private UpdateUserDto Request; private UpdateUserDto Request;
private FormHandler FormHandler;
protected override void OnInitialized() protected override void OnInitialized()
{ {
Request = UserMapper.ToUpdate(User); Request = UserMapper.ToUpdate(User);
} }
private async Task SubmitAsync() private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
{ {
await OnSubmit.Invoke(Request); await OnSubmit.Invoke(Request);
await CloseAsync(); await CloseAsync();
return true;
} }
} }

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

@@ -44,10 +44,10 @@
</Alert> </Alert>
</CardContent> </CardContent>
<CardFooter ClassName="justify-end"> <CardFooter ClassName="justify-end">
<WButtom OnClick="DiagnoseAsync" disabled="@(!AccessResult.Succeeded)"> <WButton OnClick="DiagnoseAsync" disabled="@(!AccessResult.Succeeded)">
<StethoscopeIcon/> <StethoscopeIcon/>
Start diagnostics Start diagnostics
</WButtom> </WButton>
</CardFooter> </CardFooter>
</Card> </Card>
</div> </div>

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

@@ -38,14 +38,6 @@
</TabsList> </TabsList>
<TabsContent Value="settings"> <TabsContent Value="settings">
<Card ClassName="mt-5"> <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"> <CardFooter ClassName="justify-end">
<Button> <Button>
<SaveIcon /> <SaveIcon />

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

@@ -28,23 +28,21 @@
<CardContent> <CardContent>
<FieldGroup> <FieldGroup>
<FieldSet> <FieldSet>
<FieldLegend>Update instance</FieldLegend>
<FieldDescription>
Select the version you want to update to
</FieldDescription>
<Field> <Field>
<FieldLabel> <FieldLabel>
Version Version
</FieldLabel> </FieldLabel>
<Select DefaultValue="@SelectedVersion" ValueChanged="x => SelectedVersion = x"> <FieldContent>
<SelectTrigger> <Select DefaultValue="@SelectedVersion" @bind-Value="SelectedVersion">
<SelectValue/> <SelectTrigger ClassName="w-64">
</SelectTrigger> <SelectValue/>
<SelectContent> </SelectTrigger>
<SelectItem Value="v2.1">v2.1</SelectItem> <SelectContent ClassName="w-64">
<SelectItem Value="v2.1.1">v2.1.1</SelectItem> <SelectItem Value="v2.1">v2.1</SelectItem>
</SelectContent> <SelectItem Value="v2.1.1">v2.1.1</SelectItem>
</Select> </SelectContent>
</Select>
</FieldContent>
</Field> </Field>
</FieldSet> </FieldSet>
<Field Orientation="FieldOrientation.Horizontal"> <Field Orientation="FieldOrientation.Horizontal">

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

@@ -6,11 +6,11 @@
@using Moonlight.Frontend.Services @using Moonlight.Frontend.Services
@using Moonlight.Shared.Http.Requests.Themes @using Moonlight.Shared.Http.Requests.Themes
@using ShadcnBlazor.Buttons @using ShadcnBlazor.Buttons
@using ShadcnBlazor.Labels
@using ShadcnBlazor.Cards @using ShadcnBlazor.Cards
@using ShadcnBlazor.Extras.Editors @using ShadcnBlazor.Extras.Editors
@using ShadcnBlazor.Extras.FormHandlers @using ShadcnBlazor.Extras.Forms
@using ShadcnBlazor.Extras.Toasts @using ShadcnBlazor.Extras.Toasts
@using ShadcnBlazor.Fields
@using ShadcnBlazor.Inputs @using ShadcnBlazor.Inputs
@using ShadcnBlazor.Switches @using ShadcnBlazor.Switches
@@ -21,86 +21,89 @@
@inject ToastService ToastService @inject ToastService ToastService
@inject FrontendService FrontendService @inject FrontendService FrontendService
<div class="flex flex-row justify-between"> <EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync" Context="editFormContext">
<div class="flex flex-col"> <div class="flex flex-row justify-between">
<h1 class="text-xl font-semibold">Create theme</h1> <div class="flex flex-col">
<div class="text-muted-foreground"> <h1 class="text-xl font-semibold">Create theme</h1>
Create a new theme <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> </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"> <div class="mt-8">
<Card> <Card>
<CardContent> <CardContent>
<FormHandler @ref="Form" OnValidSubmit="OnSubmitAsync" Model="Request"> <FieldGroup>
<div class="flex flex-col gap-6"> <FormValidationSummary/>
<DataAnnotationsValidator/>
<FormValidationSummary /> <FieldSet ClassName="grid grid-cols-1 lg:grid-cols-2">
<Field>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5"> <FieldLabel for="themeName">Name</FieldLabel>
<div class="col-span-1 grid gap-2">
<Label for="themeName">Name</Label>
<TextInputField <TextInputField
@bind-Value="Request.Name" @bind-Value="Request.Name"
id="themeName" id="themeName"
placeholder="My cool theme"/> placeholder="My cool theme"/>
</div> </Field>
<div class="col-span-1 grid gap-2"> <Field>
<Label for="themeVersion">Version</Label> <FieldLabel for="themeVersion">Version</FieldLabel>
<TextInputField <TextInputField
@bind-Value="Request.Version" @bind-Value="Request.Version"
id="themeVersion" id="themeVersion"
Type="text" Type="text"
placeholder="1.0.0"/> placeholder="1.0.0"/>
</div> </Field>
<div class="col-span-1 grid gap-2"> <Field>
<Label for="themeAuthor">Author</Label> <FieldLabel for="themeAuthor">Author</FieldLabel>
<TextInputField <TextInputField
@bind-Value="Request.Author" @bind-Value="Request.Author"
id="themeAuthor" id="themeAuthor"
Type="text" Type="text"
placeholder="Your name"/> placeholder="Your name"/>
</div> </Field>
<div class="col-span-1 grid gap-2"> <Field>
<Label for="themeAuthor">Is Enabled</Label> <FieldLabel for="themeAuthor">Is Enabled</FieldLabel>
<Switch @bind-Value="Request.IsEnabled" /> <FieldContent>
</div> <Switch @bind-Value="Request.IsEnabled"/>
</div> </FieldContent>
</Field>
</FieldSet>
<Field>
<style>
.cm-editor {
max-height: 400px;
min-height: 400px;
}
</style>
<style> <FieldLabel for="themeAuthor">CSS Content</FieldLabel>
.cm-editor { <FieldContent>
max-height: 400px; <Editor @ref="Editor" Language="EditorLanguage.Css" InitialValue="@Request.CssContent"/>
min-height: 400px; </FieldContent>
} </Field>
</style> </FieldGroup>
</CardContent>
<div class="grid gap-2"> </Card>
<Label for="themeAuthor">CSS Content</Label> </div>
<Editor @ref="Editor" Language="EditorLanguage.Css" InitialValue="@Request.CssContent"/> </EnhancedEditForm>
</div>
</div>
</FormHandler>
</CardContent>
</Card>
</div>
@code @code
{ {
@@ -109,17 +112,12 @@
CssContent = "/* Define your css here */" CssContent = "/* Define your css here */"
}; };
private FormHandler Form;
private Editor Editor; private Editor Editor;
private async Task SubmitAsync() private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
{ {
Request.CssContent = await Editor.GetValueAsync(); Request.CssContent = await Editor.GetValueAsync();
await Form.SubmitAsync();
}
private async Task OnSubmitAsync()
{
await HttpClient.PostAsJsonAsync( await HttpClient.PostAsJsonAsync(
"/api/admin/themes", "/api/admin/themes",
Request, Request,
@@ -134,5 +132,7 @@
await FrontendService.ReloadAsync(); await FrontendService.ReloadAsync();
Navigation.NavigateTo("/admin/system?tab=themes"); Navigation.NavigateTo("/admin/system?tab=themes");
return true;
} }
} }

137
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.Requests.Themes
@using Moonlight.Shared.Http.Responses.Themes @using Moonlight.Shared.Http.Responses.Themes
@using ShadcnBlazor.Buttons @using ShadcnBlazor.Buttons
@using ShadcnBlazor.Labels
@using ShadcnBlazor.Cards @using ShadcnBlazor.Cards
@using ShadcnBlazor.Extras.Common @using ShadcnBlazor.Extras.Common
@using ShadcnBlazor.Extras.Editors @using ShadcnBlazor.Extras.Editors
@using ShadcnBlazor.Extras.FormHandlers @using ShadcnBlazor.Extras.Forms
@using ShadcnBlazor.Extras.Toasts @using ShadcnBlazor.Extras.Toasts
@using ShadcnBlazor.Fields
@using ShadcnBlazor.Inputs @using ShadcnBlazor.Inputs
@using ShadcnBlazor.Switches @using ShadcnBlazor.Switches
@@ -24,88 +24,92 @@
@inject ToastService ToastService @inject ToastService ToastService
@inject FrontendService FrontendService @inject FrontendService FrontendService
<div class="flex flex-row justify-between"> <LazyLoader Load="LoadAsync">
<div class="flex flex-col"> <EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync" Context="editFormContext">
<h1 class="text-xl font-semibold">Update theme</h1> <div class="flex flex-row justify-between">
<div class="text-muted-foreground"> <div class="flex flex-col">
Update the theme <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>
<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/> <FormValidationSummary/>
<DataAnnotationsValidator/>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5"> <FieldSet ClassName="grid grid-cols-1 lg:grid-cols-2">
<div class="col-span-1 grid gap-2"> <Field>
<Label for="themeName">Name</Label> <FieldLabel for="themeName">Name</FieldLabel>
<TextInputField <TextInputField
@bind-Value="Request.Name" @bind-Value="Request.Name"
id="themeName" id="themeName"
placeholder="My cool theme"/> placeholder="My cool theme"/>
</div> </Field>
<div class="col-span-1 grid gap-2"> <Field>
<Label for="themeVersion">Version</Label> <FieldLabel for="themeVersion">Version</FieldLabel>
<TextInputField <TextInputField
@bind-Value="Request.Version" @bind-Value="Request.Version"
id="themeVersion" id="themeVersion"
Type="text" Type="text"
placeholder="1.0.0"/> placeholder="1.0.0"/>
</div> </Field>
<div class="col-span-1 grid gap-2"> <Field>
<Label for="themeAuthor">Author</Label> <FieldLabel for="themeAuthor">Author</FieldLabel>
<TextInputField <TextInputField
@bind-Value="Request.Author" @bind-Value="Request.Author"
id="themeAuthor" id="themeAuthor"
Type="text" Type="text"
placeholder="Your name"/> placeholder="Your name"/>
</div> </Field>
<div class="col-span-1 grid gap-2"> <Field>
<Label for="themeAuthor">Is Enabled</Label> <FieldLabel for="themeAuthor">Is Enabled</FieldLabel>
<Switch @bind-Value="Request.IsEnabled" /> <FieldContent>
</div> <Switch @bind-Value="Request.IsEnabled"/>
</div> </FieldContent>
</Field>
</FieldSet>
<Field>
<style>
.cm-editor {
max-height: 400px;
min-height: 400px;
}
</style>
<style> <FieldLabel for="themeAuthor">CSS Content</FieldLabel>
.cm-editor { <FieldContent>
max-height: 400px; <Editor @ref="Editor" Language="EditorLanguage.Css"
min-height: 400px; InitialValue="@Request.CssContent"/>
} </FieldContent>
</style> </Field>
</FieldGroup>
<div class="grid gap-2"> </CardContent>
<Label for="themeAuthor">CSS Content</Label> </Card>
<Editor @ref="Editor" Language="EditorLanguage.Css" InitialValue="@Request.CssContent"/> </div>
</div> </EnhancedEditForm>
</div> </LazyLoader>
</FormHandler>
</LazyLoader>
</CardContent>
</Card>
</div>
@code @code
{ {
@@ -114,7 +118,6 @@
private UpdateThemeDto Request; private UpdateThemeDto Request;
private ThemeDto Theme; private ThemeDto Theme;
private FormHandler Form;
private Editor Editor; private Editor Editor;
private async Task LoadAsync(LazyLoader _) private async Task LoadAsync(LazyLoader _)
@@ -125,14 +128,10 @@
Request = ThemeMapper.ToUpdate(Theme); Request = ThemeMapper.ToUpdate(Theme);
} }
private async Task SubmitAsync() private async Task<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
{ {
Request.CssContent = await Editor.GetValueAsync(); Request.CssContent = await Editor.GetValueAsync();
await Form.SubmitAsync();
}
private async Task OnSubmitAsync()
{
await HttpClient.PatchAsJsonAsync( await HttpClient.PatchAsJsonAsync(
$"/api/admin/themes/{Theme.Id}", $"/api/admin/themes/{Theme.Id}",
Request, Request,
@@ -147,5 +146,7 @@
await FrontendService.ReloadAsync(); await FrontendService.ReloadAsync();
Navigation.NavigateTo("/admin/system?tab=themes"); 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 public class CreateApiKeyDto
{ {
[Required]
[MaxLength(30)] [MaxLength(30)]
public string Name { get; set; } public string Name { get; set; }
[MaxLength(300)] public string Description { get; set; } = ""; [MaxLength(300)] public string Description { get; set; } = "";
[Required]
public string[] Permissions { get; set; } 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 public class UpdateApiKeyDto
{ {
[Required]
[MaxLength(30)] [MaxLength(30)]
public string Name { get; set; } public string Name { get; set; }
[MaxLength(300)] public string Description { get; set; } = ""; [MaxLength(300)] public string Description { get; set; } = "";
[Required]
public string[] Permissions { get; set; } public string[] Permissions { get; set; }
} }