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

Improved design of login method selection screen

Browse Source
This commit is contained in:
ChiaraBm
2025-08-20 17:16:19 +02:00
parent 26f955fce2
commit 17cd039c9b
3 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Moonlight.ApiServer/Http/Controllers/LocalAuth/Login.razor
View File

@@ -9,8 +9,7 @@
<div class="flex h-auto min-h-screen items-center justify-center overflow-x-hidden py-10">
<div class="relative flex items-center justify-center px-4 sm:px-6 lg:px-8">
<div
class="bg-base-100 shadow-base-300/20 z-1 w-full space-y-6 rounded-xl p-6 shadow-md sm:min-w-md lg:p-8">
<div class="bg-base-100 shadow-base-300/20 z-1 w-full space-y-6 rounded-xl p-6 shadow-md sm:min-w-md lg:p-8">
<div class="flex justify-center items-center gap-3">
<img src="/_content/Moonlight.Client/svg/logo.svg" class="size-12" alt="brand-logo"/>
</div>

3
Moonlight.ApiServer/Http/Controllers/LocalAuth/Register.razor
View File

@@ -9,8 +9,7 @@
<div class="flex h-auto min-h-screen items-center justify-center overflow-x-hidden py-10">
<div class="relative flex items-center justify-center px-4 sm:px-6 lg:px-8">
<div
class="bg-base-100 shadow-base-300/20 z-1 w-full space-y-6 rounded-xl p-6 shadow-md sm:min-w-md lg:p-8">
<div class="bg-base-100 shadow-base-300/20 z-1 w-full space-y-6 rounded-xl p-6 shadow-md sm:min-w-md lg:p-8">
<div class="flex justify-center items-center gap-3">
<img src="/_content/Moonlight.Client/svg/logo.svg" class="size-12" alt="brand-logo"/>
</div>

56
Moonlight.Client/UI/Partials/LoginSelector.razor
View File

@@ -5,16 +5,28 @@
@inject NavigationManager Navigation
<div class="flex h-screen justify-center items-center">
<div class="sm:max-w-lg">
<div class="w-full card card-body text-center">
<LazyLoader EnableDefaultSpacing="false" Load="Load">
@if (ShowSelection)
{
<h5 class="card-title mb-2.5">Login to Moonlight</h5>
<p class="mb-4">Choose a login provider to start using the app</p>
<div class="flex flex-col w-full mt-5 gap-y-2.5">
<div class="sm:min-w-md">
<div class="bg-base-100 shadow-base-300/20 z-1 w-full space-y-6 rounded-xl p-6 shadow-md lg:p-8">
<LazyLoader EnableDefaultSpacing="false" Load="Load">
@if (ShowSelection)
{
<div class="flex justify-center items-center gap-3">
<img src="/_content/Moonlight.Client/svg/logo.svg" class="size-12" alt="brand-logo"/>
</div>
<div class="text-center">
<h3 class="text-base-content mb-1.5 text-2xl font-semibold">Login into your account</h3>
<p class="text-base-content/80">Chose a login method to continue</p>
</div>
<div class="space-y-4">
@if (AuthSchemes.Length == 0)
{
<div class="alert alert-error text-center">
No auth schemes enabled/available
</div>
}
<div class="mb-4 space-y-4">
@foreach (var scheme in AuthSchemes)
{
var config = Configs.GetValueOrDefault(scheme.Identifier);
@@ -22,7 +34,8 @@
if (config == null) // Ignore all schemes which have no ui configured
continue;
<button @onclick="() => Start(scheme)" class="btn btn-text w-full" style="background-color: @(config.Color)">
<button @onclick="() => Start(scheme)" class="btn btn-text w-full"
style="background-color: @(config.Color)">
<img src="@config.IconUrl"
alt="scheme icon"
class="size-5 object-cover fill-base-content"/>
@@ -30,15 +43,16 @@
</button>
}
</div>
}
else
{
<div class="flex justify-center">
<span class="loading loading-spinner loading-xl"></span>
</div>
}
</LazyLoader>
</div>
</div>
}
else
{
<div class="flex justify-center">
<span class="loading loading-spinner loading-xl"></span>
</div>
}
</LazyLoader>
</div>
</div>
</div>
@@ -66,7 +80,7 @@
// If we only have one auth scheme available
// we want to auto redirect the user without
// showing the selection screen
if (AuthSchemes.Length == 1)
await Start(AuthSchemes[0]);
else