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

Improved PWA options. Fully implemented auth

Browse Source
This commit is contained in:
Masu-Baumgartner
2024-10-02 16:31:23 +02:00
parent 522d0c1471
commit a0432eec68
17 changed files with 304 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
Moonlight.Client/UI/Partials/AppHeader.razor
View File

@@ -1,4 +1,8 @@
@using Moonlight.Client.UI.Layouts
@using Moonlight.Client.Services
@using Moonlight.Client.UI.Layouts
@inject IdentityService IdentityService
@inject ToastService ToastService
<div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 bg-gray-800/60 backdrop-blur px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
@if (Layout.ShowMobileNavigation)
@@ -35,7 +39,7 @@
<!-- Profile dropdown -->
<div class="relative">
<button type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<button @onclick="ToggleProfileNav" @onfocusout="ProfileNav_OnFocusOut" type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://masuowo.xyz/assets/images/avatar.png" alt="">
<span class="hidden lg:flex lg:items-center">
@@ -51,17 +55,17 @@
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
Entering: ""
From: "transform scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="hidden absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<div class="@(ShowProfileNav ? "opacity-100" : "opacity-0") transition ease-out duration-100 absolute right-0 z-10 mt-2.5 w-44 origin-top-right rounded-md bg-gray-750 py-2 shadow-lg ring-1 ring-gray-100/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<!-- Active: "bg-gray-50", Not Active: "" -->
<a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="user-menu-item-0">Your profile</a>
<a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="user-menu-item-1">Sign out</a>
<a href="/admin" class="block px-3 py-1 text-sm leading-6 text-gray-100 hover:text-primary-500" role="menuitem" tabindex="-1" id="user-menu-item-0">Your profile</a>
<a @onclick="Logout" @onclick:preventDefault href="#" class="block px-3 py-1 text-sm leading-6 text-gray-100 hover:text-primary-500" role="menuitem" tabindex="-1" id="user-menu-item-1">Sign out</a>
</div>
</div>
</div>
@@ -72,11 +76,42 @@
{
[Parameter] public MainLayout Layout { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
private bool ShowProfileNav = false;
protected override Task OnAfterRenderAsync(bool firstRender)
{
if(!firstRender)
return;
return Task.CompletedTask;
Layout.OnStateChanged += () => InvokeAsync(StateHasChanged);
return Task.CompletedTask;
}
private async Task ToggleProfileNav()
{
ShowProfileNav = !ShowProfileNav;
await InvokeAsync(StateHasChanged);
}
private Task ProfileNav_OnFocusOut()
{
Task.Run(async () =>
{
await Task.Delay(200);
ShowProfileNav = false;
await InvokeAsync(StateHasChanged);
});
return Task.CompletedTask;
}
private async Task Logout()
{
await IdentityService.Logout();
await ToastService.Info("Successfully logged out");
await Layout.Load();
}
}

4
Moonlight.Client/UI/Partials/AppSidebar.razor
View File

@@ -38,8 +38,8 @@
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4">
<div class="flex h-16 shrink-0 items-center">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
<div class="flex h-16 shrink-0 items-center">a
<img class="h-8 w-auto" src="/logo.svg" alt="Moonlight">
</div>
<nav class="flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col gap-y-7">