Implemented api key crud and started adding system page. Added 404 page

Moonlight.Client/Moonlight.Client.csproj

@@ -26,7 +26,6 @@
 
     <ItemGroup>
       <Folder Include="Helpers\" />
-      <Folder Include="UI\Components\" />
       <Folder Include="wwwroot\css\" />
     </ItemGroup>
 

Moonlight.Client/Program.cs

@@ -16,6 +16,7 @@ using Moonlight.Client.Implementations;
 using Moonlight.Client.Interfaces;
 using Moonlight.Client.Services;
 using Moonlight.Client.UI;
+using Moonlight.Client.UI.Forms;
 using Moonlight.Shared.Http.Requests.Auth;
 using Moonlight.Shared.Http.Responses.Auth;
 
@@ -104,6 +105,7 @@ builder.Services.AutoAddServices<Program>();
 
 FormComponentRepository.Set<string, StringComponent>();
 FormComponentRepository.Set<int, IntComponent>();
+FormComponentRepository.Set<DateTime, DateComponent>();
 
 // Interface service
 builder.Services.AddPlugins(configuration =>

Moonlight.Client/UI/App.razor

@@ -9,7 +9,14 @@
     <NotFound>
         <PageTitle>Not found</PageTitle>
         <LayoutView Layout="@typeof(MainLayout)">
-            <p role="alert">Sorry, there's nothing at this address.</p>
+            <div class="flex flex-col justify-center text-center">
+                <img class="h-48 mt-5 mb-3" src="/svg/notfound.svg" alt="Not found illustration"/>
+
+                <h3 class="mt-2 font-semibold text-white text-lg">Page not found</h3>
+                <p class="mt-1 text-gray-300">
+                    The page you requested does not exist
+                </p>
+            </div>
         </LayoutView>
     </NotFound>
 </Router>

Moonlight.Client/UI/Components/StatCard.razor

@@ -0,0 +1,16 @@
+<div class="card card-body">
+    <div class="flex justify-between">
+        <p class="text-xl font-semibold text-slate-200">
+            @Text
+        </p>
+        <i class="@Icon text-4xl text-primary-500"></i>
+    </div>
+    <p class="text-base text-slate-300">@Title</p>
+</div>
+
+@code
+{
+    [Parameter] public string Title { get; set; }
+    [Parameter] public string Text { get; set; }
+    [Parameter] public string Icon { get; set; }
+}

Moonlight.Client/UI/Forms/DateComponent.razor

@@ -0,0 +1,3 @@
+@inherits BaseFormComponent<DateTime>
+
+<input @bind="Binder.Value" type="date" autocomplete="off" class="form-input w-full">

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

@@ -0,0 +1,111 @@
+@page "/admin/api"
+
+@using MoonCore.Blazor.Tailwind.Attributes
+@using MoonCore.Helpers
+@using MoonCore.Models
+@using Moonlight.Shared.Http.Requests.Admin.ApiKeys
+@using Moonlight.Shared.Http.Responses.Admin.ApiKeys
+
+@attribute [RequirePermission("admin.apikeys.read")]
+
+@inject HttpApiClient HttpApiClient
+@inject AlertService AlertService
+
+<div class="grid grid-cols-1 sm:grid-cols-3 mb-8 gap-x-3">
+    <div class="col-span-1 card card-body border-l-4 border-primary-500">
+        <p class="font-medium tracking-wide text-slate-100">
+            API Documentation
+        </p>
+        <a href="/api/swagger" target="_blank" class="mt-2 flex items-center justify-between text-primary-500">
+            <div class="font-medium">Open</div>
+            <div>
+                <i class="bi bi-box-arrow-up-right text-lg text-primary-500"></i>
+            </div>
+        </a>
+    </div>
+
+    <div class="col-span-1 card card-body border-l-4 border-tertiary-500">
+        <p class="font-medium tracking-wide text-slate-100">
+            Learn about the api usage
+        </p>
+        <a href="https://help.moonlightpanel.xyz" target="_blank" class="mt-2 flex items-center justify-between text-primary-500">
+            <div class="font-medium">Open</div>
+            <div>
+                <i class="bi bi-box-arrow-up-right text-lg text-tertiary-500"></i>
+            </div>
+        </a>
+    </div>
+
+    <div class="col-span-1 card card-body border-l-4 border-success-500">
+        <p class="font-medium tracking-wide text-slate-100">
+            Open API Specification
+        </p>
+        <a href="/api/swagger/main" target="_blank" class="mt-2 flex items-center justify-between text-primary-500">
+            <div class="font-medium">Open</div>
+            <div>
+                <i class="bi bi-box-arrow-up-right text-lg text-success-500"></i>
+            </div>
+        </a>
+    </div>
+</div>
+
+<Crud TItem="ApiKeyDetailResponse"
+      TCreateForm="CreateApiKeyRequest"
+      TUpdateForm="UpdateApiKeyRequest"
+      OnConfigure="OnConfigure">
+    <View>
+        <Column TItem="ApiKeyDetailResponse" Field="@(x => x.Id)" Title="Id"/>
+        <Column TItem="ApiKeyDetailResponse" Field="@(x => x.Description)" Title="Description"/>
+        <Column TItem="ApiKeyDetailResponse" Field="@(x => x.ExpiresAt)" Title="Expires at">
+            <Template>
+                @Formatter.FormatDate(context.ExpiresAt)
+            </Template>
+        </Column>
+    </View>
+</Crud>
+
+@code
+{
+    private void OnConfigure(CrudOptions<ApiKeyDetailResponse, CreateApiKeyRequest, UpdateApiKeyRequest> crudOptions)
+    {
+        crudOptions.ItemName = "API Key";
+
+        crudOptions.ItemLoader = async (page, pageSize)
+            => await HttpApiClient.GetJson<PagedData<ApiKeyDetailResponse>>($"api/admin/apikeys?page={page}&pageSize={pageSize}");
+
+        crudOptions.SingleItemLoader = async id
+            => await HttpApiClient.GetJson<ApiKeyDetailResponse>($"api/admin/apikeys/{id}");
+
+        crudOptions.QueryIdentifier = response => response.Id.ToString();
+
+        crudOptions.OnCreate = async request =>
+        {
+            var response = await HttpApiClient.PostJson<CreateApiKeyResponse>("api/admin/apikeys", request);
+
+            await AlertService.Success(
+                "API Key successfully created",
+                $"Copy the following secret. It wont be shown again. '{response.Secret}'"
+            );
+        };
+
+        crudOptions.OnUpdate = async (item, request)
+            => await HttpApiClient.Patch($"api/admin/apikeys/{item.Id}", request);
+
+        crudOptions.OnDelete = async item
+            => await HttpApiClient.Delete($"api/admin/apikeys/{item.Id}");
+
+        crudOptions.OnConfigureCreate = configuration =>
+        {
+            configuration.WithField(x => x.Description);
+            configuration.WithField(x => x.PermissionsJson);
+            configuration.WithField(x => x.ExpiresAt, fieldConfiguration => { fieldConfiguration.DefaultValue = DateTime.UtcNow.AddMonths(1); });
+        };
+
+        crudOptions.OnConfigureUpdate = (_, configuration) =>
+        {
+            configuration.WithField(x => x.Description);
+            configuration.WithField(x => x.PermissionsJson);
+            configuration.WithField(x => x.ExpiresAt);
+        };
+    }
+}

Moonlight.Client/UI/Views/Admin/Sys/Index.razor

@@ -0,0 +1,35 @@
+@page "/admin/system"
+
+@using MoonCore.Blazor.Tailwind.Attributes
+@using Moonlight.Client.UI.Components
+
+@attribute [RequirePermission("admin.system.read")]
+
+<div class="gap-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+    <StatCard Title="CPU Usage" Text="2%" Icon="bi bi-cpu"/>
+    <StatCard Title="Memory Usage" Text="71 MB" Icon="bi bi-memory"/>
+    <StatCard Title="Host OS" Text="Debian 12" Icon="bi bi-motherboard"/>
+    <StatCard Title="Uptime" Text="1d 5h 12h 3s" Icon="bi bi-clock-history"/>
+        
+    <div class="card card-body relative">
+        <div>
+            <div class="absolute rounded-lg p-3 bg-danger-600">
+                <div class="h-6 w-6 flex justify-center items-center">
+                    <i class="bi bi-arrow-repeat text-4xl text-white"></i>
+                </div>
+            </div>
+        </div>
+
+        <div class="ml-16 flex items-center mb-2">
+            <WButton OnClick="Restart" CssClasses="btn btn-danger w-full">Restart</WButton>
+        </div>
+    </div>
+</div>
+
+@code
+{
+    private async Task Restart(WButton _)
+    {
+        
+    }
+}

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

@@ -34,7 +34,7 @@
         crudOptions.SingleItemLoader = async id
             => await HttpApiClient.GetJson<UserDetailResponse>($"api/admin/users/{id}");
         
-        crudOptions.QueryIdentifier = item => item.Id.ToString(); //TODO: Make this default
+        crudOptions.QueryIdentifier = response => response.Id.ToString();
 
         crudOptions.OnCreate = async request
             => await HttpApiClient.Post("api/admin/users", request);