Implemented basic ui for server sharing. Extracted server authorization. Refactoring and small improvements

MoonlightServers.Frontend/UI/Components/Servers/CreateShareModal.razor

@@ -0,0 +1,105 @@
+@using MoonCore.Blazor.Tailwind.Components
+@using MoonlightServers.Shared.Enums
+@using MoonlightServers.Shared.Http.Requests.Client.Servers.Shares
+@using MoonlightServers.Shared.Models
+
+@inherits MoonCore.Blazor.Tailwind.Modals.Components.BaseModal
+
+<div class="text-lg font-semibold mb-5">
+    Create a new share
+</div>
+
+<HandleForm @ref="HandleForm" Model="Request" OnValidSubmit="OnValidSubmit">
+    <div class="mb-8">
+        <label class="block text-sm font-medium leading-6 text-white">Username</label>
+        <input @bind="Request.Username" type="text" class="form-input w-full"/>
+    </div>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-y-5 lg:gap-y-3">
+        @foreach (var name in Names)
+        {
+            var i = Permissions.TryGetValue(name, out var permission) ? (int)permission : -1;
+            
+            <div class="col-span-1 flex flex-row items-center justify-center lg:justify-start">
+                @name
+            </div>
+
+            <div class="col-span-1 flex flex-row items-center justify-center lg:justify-end">
+                <div class="tabs">
+                    <button @onclick="() => Reset(name)"
+                            class="tabs-segment @(i == -1 ? "tabs-segment-active" : "")">
+                        None
+                    </button>
+                    <button @onclick="() => Set(name, ServerPermissionType.Read)"
+                            class="tabs-segment @(i == 0 ? "tabs-segment-active" : "")">
+                        Read
+                    </button>
+                    <button @onclick="() => Set(name, ServerPermissionType.ReadWrite)"
+                            class="tabs-segment @(i == 1 ? "tabs-segment-active" : "")">
+                        Read & Write
+                    </button>
+                </div>
+            </div>
+        }
+    </div>
+</HandleForm>
+
+<div class="mt-8 flex space-x-2">
+    <WButton OnClick="_ => Hide()" CssClasses="btn btn-secondary grow">Cancel</WButton>
+    <WButton OnClick="_ => Submit()" CssClasses="btn btn-primary grow">Create</WButton>
+</div>
+
+@code
+{
+    [Parameter] public string Username { get; set; }
+    [Parameter] public Func<CreateShareRequest, Task> OnSubmit { get; set; }
+
+    private HandleForm HandleForm;
+    private CreateShareRequest Request;
+
+    private Dictionary<string, ServerPermissionType> Permissions = new();
+
+    private string[] Names =
+    [
+        "console",
+        "power",
+        "shares",
+        "files",
+        "variables",
+        "settings"
+    ];
+
+    protected override void OnInitialized()
+    {
+        Request = new()
+        {
+            Username = Username
+        };
+    }
+
+    private async Task Set(string name, ServerPermissionType type)
+    {
+        Permissions[name] = type;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task Reset(string name)
+    {
+        Permissions.Remove(name);
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task Submit()
+        => await HandleForm.Submit();
+
+    private async Task OnValidSubmit()
+    {
+        Request.Permissions = Permissions.Select(x => new ServerSharePermission()
+        {
+            Name = x.Key,
+            Type = x.Value
+        }).ToList();
+
+        await OnSubmit.Invoke(Request);
+        await Hide();
+    }
+}

MoonlightServers.Frontend/UI/Components/Servers/ServerCard.razor

@@ -124,21 +124,34 @@
 
         <div class="hidden 2xl:flex items-center justify-end gap-x-3 2xl:col-span-2">
 
-            <div class="bg-gray-900 bg-opacity-45 py-1 px-2 rounded-lg flex flex-row">
-                <div>
-                    <i class="icon-sparkles"></i>
+            @if (Server.Share != null)
+            {
+                <div class="bg-gray-900 bg-opacity-45 py-1 px-2 rounded-lg flex flex-row col-span-2">
+                    <div>
+                        <i class="icon-share-2"></i>
+                    </div>
+
+                    <div class="ms-3">Shared by <span class="text-primary">@Server.Share.SharedBy</span></div>
+                </div>
+            }
+            else
+            {
+                <div class="bg-gray-900 bg-opacity-45 py-1 px-2 rounded-lg flex flex-row">
+                    <div>
+                        <i class="icon-sparkles"></i>
+                    </div>
+
+                    <div class="ms-3">@Server.StarName</div>
                 </div>
 
-                <div class="ms-3">@Server.StarName</div>
-            </div>
+                <div class="bg-gray-900 bg-opacity-45 py-1 px-2 rounded-lg flex flex-row">
+                    <div>
+                        <i class="icon-database"></i>
+                    </div>
 
-            <div class="bg-gray-900 bg-opacity-45 py-1 px-2 rounded-lg flex flex-row">
-                <div>
-                    <i class="icon-database"></i>
+                    <div class="ms-3">@Server.NodeName</div>
                 </div>
-
-                <div class="ms-3">@Server.NodeName</div>
-            </div>
+            }
         </div>
     </div>
 </a>

MoonlightServers.Frontend/UI/Components/Servers/ServerTabs/BaseServerTab.razor

@@ -8,6 +8,6 @@
     [Parameter] public ServerDetailResponse Server { get; set; }
     [Parameter] public ServerState State { get; set; }
     [Parameter] public string InitialConsoleMessage { get; set; }
-    [Parameter] public HubConnection HubConnection { get; set; }
+    [Parameter] public HubConnection? HubConnection { get; set; }
     [Parameter] public Manage Parent { get; set; }
 }

MoonlightServers.Frontend/UI/Components/Servers/ServerTabs/SharesTab.razor

@@ -0,0 +1,121 @@
+@using MoonCore.Blazor.Tailwind.Alerts
+@using MoonCore.Blazor.Tailwind.Components
+@using MoonCore.Blazor.Tailwind.Modals
+@using MoonCore.Blazor.Tailwind.Toasts
+@using MoonCore.Models
+@using MoonlightServers.Frontend.Services
+@using MoonlightServers.Shared.Http.Requests.Client.Servers.Shares
+@using MoonlightServers.Shared.Http.Responses.Client.Servers.Shares
+
+@inherits BaseServerTab
+
+@inject ServerShareService ShareService
+@inject ModalService ModalService
+@inject ToastService ToastService
+@inject AlertService AlertService
+
+<div class="flex flex-row mb-5">
+    <input @bind="UsernameInput" class="form-input grow placeholder-gray-500 me-1.5" autocomplete="none" placeholder="Enter a username"/>
+    <button @onclick="OpenCreateModal" class="btn btn-primary">
+        <i class="icon-send me-1"></i>
+        <span>Invite</span>
+    </button>
+</div>
+
+<LazyLoader @ref="LazyLoader" Load="Load">
+    @if (Shares.Length == 0)
+    {
+        <IconAlert Title="No shares found" Color="text-primary" Icon="icon-search">
+            Enter a username and press invite to share this server to another user
+        </IconAlert>
+    }
+    else
+    {
+        <div class="grid grid-col-1 gap-y-3">
+            @foreach (var share in Shares)
+            {
+                <div class="col-span-1 card card-body px-5 py-3 flex flex-row items-center justify-between">
+                    <div class="flex justify-start font-semibold">
+                        <i class="icon-user-round me-2"></i>
+                        <span>@share.Username</span>
+                    </div>
+                    <div class="flex justify-end">
+                        <WButton OnClick="_ => OpenUpdateModal(share)" CssClasses="btn btn-primary me-1.5">
+                            <i class="icon-settings-2 me-1"></i>
+                            <span>Edit</span>
+                        </WButton>
+                        <WButton OnClick="_ => Delete(share)" CssClasses="btn btn-danger">
+                            <i class="icon-trash-2 me-1"></i>
+                            <span>Delete</span>
+                        </WButton>
+                    </div>
+                </div>
+            }
+        </div>
+    }
+</LazyLoader>
+
+@code
+{
+    private ServerShareResponse[] Shares;
+
+    private string UsernameInput = "";
+
+    private LazyLoader LazyLoader;
+
+    private async Task Load(LazyLoader _)
+    {
+        Shares = await PagedData<ServerShareResponse>.All(async (page, pageSize)
+            => await ShareService.Get(Server.Id, page, pageSize)
+        );
+    }
+
+    private async Task OpenCreateModal()
+    {
+        await ModalService.Launch<CreateShareModal>(parameters =>
+        {
+            parameters["Username"] = UsernameInput;
+            parameters["OnSubmit"] = SubmitCreate;
+        }, size: "max-w-2xl");
+    }
+
+    private async Task SubmitCreate(CreateShareRequest request)
+    {
+        await ShareService.Create(Server.Id, request);
+
+        await ToastService.Success("Share successfully created");
+        await LazyLoader.Reload();
+    }
+
+    private async Task OpenUpdateModal(ServerShareResponse share)
+    {
+        await ModalService.Launch<UpdateShareModal>(parameters =>
+        {
+            parameters["Share"] = share;
+            parameters["OnSubmit"] = (UpdateShareRequest request) => SubmitUpdate(share.Id, request);
+        }, size: "max-w-2xl");
+    }
+    
+    private async Task SubmitUpdate(int shareId, UpdateShareRequest request)
+    {
+        await ShareService.Update(Server.Id, shareId, request);
+
+        await ToastService.Success("Share successfully updated");
+        await LazyLoader.Reload();
+    }
+
+    private async Task Delete(ServerShareResponse share)
+    {
+        await AlertService.ConfirmDanger(
+            "Share deletion",
+            $"Do you really want to delete the share for the user '{share.Username}'? This cannot be undone",
+            async () =>
+            {
+                await ShareService.Delete(Server.Id, share.Id);
+
+                await ToastService.Success("Successfully deleted share");
+                await LazyLoader.Reload();
+            }
+        );
+    }
+}

MoonlightServers.Frontend/UI/Components/Servers/UpdateShareModal.razor

@@ -0,0 +1,101 @@
+@using MoonCore.Blazor.Tailwind.Components
+@using MoonlightServers.Shared.Enums
+@using MoonlightServers.Shared.Http.Requests.Client.Servers.Shares
+@using MoonlightServers.Shared.Http.Responses.Client.Servers.Shares
+@using MoonlightServers.Shared.Models
+
+@inherits MoonCore.Blazor.Tailwind.Modals.Components.BaseModal
+
+<div class="text-lg font-semibold mb-5">
+    Update share for @Share.Username
+</div>
+
+<HandleForm @ref="HandleForm" Model="Request" OnValidSubmit="OnValidSubmit">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-y-5 lg:gap-y-3">
+        @foreach (var name in Names)
+        {
+            var i = Permissions.TryGetValue(name, out var permission) ? (int)permission : -1;
+            
+            <div class="col-span-1 flex flex-row items-center justify-center lg:justify-start">
+                @name
+            </div>
+
+            <div class="col-span-1 flex flex-row items-center justify-center lg:justify-end">
+                <div class="tabs">
+                    <button @onclick="() => Reset(name)"
+                            class="tabs-segment @(i == -1 ? "tabs-segment-active" : "")">
+                        None
+                    </button>
+                    <button @onclick="() => Set(name, ServerPermissionType.Read)"
+                            class="tabs-segment @(i == 0 ? "tabs-segment-active" : "")">
+                        Read
+                    </button>
+                    <button @onclick="() => Set(name, ServerPermissionType.ReadWrite)"
+                            class="tabs-segment @(i == 1 ? "tabs-segment-active" : "")">
+                        Read & Write
+                    </button>
+                </div>
+            </div>
+        }
+    </div>
+</HandleForm>
+
+<div class="mt-8 flex space-x-2">
+    <WButton OnClick="_ => Hide()" CssClasses="btn btn-secondary grow">Cancel</WButton>
+    <WButton OnClick="_ => Submit()" CssClasses="btn btn-primary grow">Update</WButton>
+</div>
+
+@code
+{
+    [Parameter] public ServerShareResponse Share { get; set; }
+    [Parameter] public Func<UpdateShareRequest, Task> OnSubmit { get; set; }
+
+    private HandleForm HandleForm;
+    private UpdateShareRequest Request;
+
+    private Dictionary<string, ServerPermissionType> Permissions = new();
+
+    private string[] Names =
+    [
+        "console",
+        "power",
+        "shares",
+        "files",
+        "variables",
+        "settings"
+    ];
+
+    protected override void OnInitialized()
+    {
+        Request = new();
+
+        Permissions = Share.Permissions.ToDictionary(x => x.Name, x => x.Type);
+    }
+
+    private async Task Set(string name, ServerPermissionType type)
+    {
+        Permissions[name] = type;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task Reset(string name)
+    {
+        Permissions.Remove(name);
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task Submit()
+        => await HandleForm.Submit();
+
+    private async Task OnValidSubmit()
+    {
+        Request.Permissions = Permissions.Select(x => new ServerSharePermission()
+        {
+            Name = x.Key,
+            Type = x.Value
+        }).ToList();
+
+        await OnSubmit.Invoke(Request);
+        await Hide();
+    }
+}