Cleaned up using in project. Improved prohect structure and refactored page names. Upgraded dependencies
This commit is contained in:
181
Moonlight.Frontend/Admin/Setup/Index.razor
Normal file
181
Moonlight.Frontend/Admin/Setup/Index.razor
Normal file
@@ -0,0 +1,181 @@
|
||||
@using LucideBlazor
|
||||
@using Moonlight.Shared.Admin.Setup
|
||||
@using ShadcnBlazor.Buttons
|
||||
@using ShadcnBlazor.Cards
|
||||
@using ShadcnBlazor.Inputs
|
||||
@using ShadcnBlazor.Labels
|
||||
@using ShadcnBlazor.Spinners
|
||||
|
||||
@inject HttpClient HttpClient
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<div class="h-screen w-full flex items-center justify-center">
|
||||
<Card ClassName="w-full max-w-[calc(100%-2rem)] lg:max-w-xl grid gap-4 p-6">
|
||||
@if (IsLoaded)
|
||||
{
|
||||
<div class="space-y-6">
|
||||
@switch (CurrentStep)
|
||||
{
|
||||
case 0:
|
||||
<div
|
||||
class="flex h-56 items-center justify-center rounded-lg bg-linear-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900">
|
||||
<img alt="Moonlight Logo" class="size-34" src="/_content/Moonlight.Frontend/logo.svg"/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-center">
|
||||
<h2 class="text-2xl font-bold">Welcome to Moonlight Panel</h2>
|
||||
<p class="text-muted-foreground">
|
||||
You successfully installed moonlight. Now you are ready to perform some initial steps to
|
||||
complete your installation
|
||||
</p>
|
||||
</div>
|
||||
break;
|
||||
|
||||
case 1:
|
||||
<div
|
||||
class="flex h-56 items-center justify-center rounded-lg bg-linear-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900">
|
||||
<UserIcon ClassName="size-34 text-blue-500"/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-center">
|
||||
<h2 class="text-2xl font-bold">Admin Account Creation</h2>
|
||||
<p class="text-muted-foreground">
|
||||
To continue please fill in the account details of the user you want to use as the initial
|
||||
administrator account.
|
||||
If you use an external OIDC provider, these details need to match with your desired OIDC
|
||||
account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-5">
|
||||
<div class="grid gap-2">
|
||||
<Label for="username">Username</Label>
|
||||
<TextInputField
|
||||
@bind-Value="SetupDto.AdminUsername"
|
||||
id="username"
|
||||
placeholder="someoneelse"/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<TextInputField
|
||||
@bind-Value="SetupDto.AdminEmail"
|
||||
id="email"
|
||||
Type="email"
|
||||
placeholder="a@cool.email"/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="password">Password</Label>
|
||||
<TextInputField
|
||||
@bind-Value="SetupDto.AdminPassword"
|
||||
id="password"
|
||||
Type="password"
|
||||
placeholder="......."/>
|
||||
</div>
|
||||
</div>
|
||||
break;
|
||||
|
||||
case 2:
|
||||
<div
|
||||
class="flex h-56 items-center justify-center rounded-lg bg-linear-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900">
|
||||
<RocketIcon ClassName="size-34 text-blue-500"/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-center">
|
||||
<h2 class="text-2xl font-bold">You are all set!</h2>
|
||||
<p class="text-muted-foreground">
|
||||
You are now ready to finish the initial setup.
|
||||
The configured options will be applied to the instance.
|
||||
You will be redirected to the login after changes have been applied successfully
|
||||
</p>
|
||||
</div>
|
||||
break;
|
||||
}
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex gap-2">
|
||||
@for (var step = 0; step < StepCount; step++)
|
||||
{
|
||||
if (step == CurrentStep)
|
||||
{
|
||||
<div class="h-2 w-2 rounded-full transition-colors bg-foreground">
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="h-2 w-2 rounded-full transition-colors bg-muted">
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div class="flex gap-1.5">
|
||||
@if (CurrentStep > 0)
|
||||
{
|
||||
<Button @onclick="() => Navigate(-1)" Variant="ButtonVariant.Outline">
|
||||
<ChevronLeftIcon/>
|
||||
Back
|
||||
</Button>
|
||||
}
|
||||
else if (CurrentStep != StepCount - 1)
|
||||
{
|
||||
<Button @onclick="() => Navigate(1)">
|
||||
Continue
|
||||
<ArrowRightIcon/>
|
||||
</Button>
|
||||
}
|
||||
else
|
||||
{
|
||||
<Button @onclick="ApplyAsync">
|
||||
Finish
|
||||
<RocketIcon/>
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<Spinner ClassName="size-10"/>
|
||||
</div>
|
||||
}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@code
|
||||
{
|
||||
private bool IsLoaded;
|
||||
|
||||
private int CurrentStep;
|
||||
private readonly int StepCount = 3;
|
||||
|
||||
private readonly ApplySetupDto SetupDto = new();
|
||||
|
||||
private void Navigate(int diff)
|
||||
{
|
||||
CurrentStep += diff;
|
||||
}
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (!firstRender)
|
||||
return;
|
||||
|
||||
var response = await HttpClient.GetAsync("api/admin/setup");
|
||||
|
||||
if (!response.IsSuccessStatusCode)
|
||||
{
|
||||
Navigation.NavigateTo("/", true);
|
||||
return;
|
||||
}
|
||||
|
||||
IsLoaded = true;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
private async Task ApplyAsync()
|
||||
{
|
||||
await HttpClient.PostAsJsonAsync("api/admin/setup", SetupDto);
|
||||
Navigation.NavigateTo("/", true);
|
||||
}
|
||||
}
|
||||
@@ -1,177 +0,0 @@
|
||||
@using LucideBlazor
|
||||
@using Moonlight.Shared.Admin.Setup
|
||||
@using ShadcnBlazor.Buttons
|
||||
@using ShadcnBlazor.Cards
|
||||
@using ShadcnBlazor.Inputs
|
||||
@using ShadcnBlazor.Labels
|
||||
@using ShadcnBlazor.Spinners
|
||||
@inject HttpClient HttpClient
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<div class="h-screen w-full flex items-center justify-center">
|
||||
<Card ClassName="w-full max-w-[calc(100%-2rem)] lg:max-w-xl grid gap-4 p-6">
|
||||
@if (IsLoaded)
|
||||
{
|
||||
<div class="space-y-6">
|
||||
@if (CurrentStep == 0)
|
||||
{
|
||||
<div
|
||||
class="flex h-56 items-center justify-center rounded-lg bg-linear-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900">
|
||||
<img alt="Moonlight Logo" class="size-34" src="/_content/Moonlight.Frontend/logo.svg"/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-center">
|
||||
<h2 class="text-2xl font-bold">Welcome to Moonlight Panel</h2>
|
||||
<p class="text-muted-foreground">
|
||||
You successfully installed moonlight. Now you are ready to perform some initial steps to
|
||||
complete your installation
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
else if (CurrentStep == 1)
|
||||
{
|
||||
<div
|
||||
class="flex h-56 items-center justify-center rounded-lg bg-linear-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900">
|
||||
<UserIcon ClassName="size-34 text-blue-500"/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-center">
|
||||
<h2 class="text-2xl font-bold">Admin Account Creation</h2>
|
||||
<p class="text-muted-foreground">
|
||||
To continue please fill in the account details of the user you want to use as the initial
|
||||
administrator account.
|
||||
If you use an external OIDC provider, these details need to match with your desired OIDC
|
||||
account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-5">
|
||||
<div class="grid gap-2">
|
||||
<Label for="username">Username</Label>
|
||||
<TextInputField
|
||||
@bind-Value="SetupDto.AdminUsername"
|
||||
id="username"
|
||||
placeholder="someoneelse"/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<TextInputField
|
||||
@bind-Value="SetupDto.AdminEmail"
|
||||
id="email"
|
||||
Type="email"
|
||||
placeholder="a@cool.email"/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="password">Password</Label>
|
||||
<TextInputField
|
||||
@bind-Value="SetupDto.AdminPassword"
|
||||
id="password"
|
||||
Type="password"
|
||||
placeholder="......."/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else if (CurrentStep == 2)
|
||||
{
|
||||
<div
|
||||
class="flex h-56 items-center justify-center rounded-lg bg-linear-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900">
|
||||
<RocketIcon ClassName="size-34 text-blue-500"/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-center">
|
||||
<h2 class="text-2xl font-bold">You are all set!</h2>
|
||||
<p class="text-muted-foreground">
|
||||
You are now ready to finish the initial setup.
|
||||
The configured options will be applied to the instance.
|
||||
You will be redirected to the login after changes have been applied successfully
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex gap-2">
|
||||
@for (var step = 0; step < StepCount; step++)
|
||||
{
|
||||
if (step == CurrentStep)
|
||||
{
|
||||
<div class="h-2 w-2 rounded-full transition-colors bg-foreground">
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="h-2 w-2 rounded-full transition-colors bg-muted">
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div class="flex gap-1.5">
|
||||
@if (CurrentStep > 0)
|
||||
{
|
||||
<Button @onclick="() => Navigate(-1)" Variant="ButtonVariant.Outline">
|
||||
<ChevronLeftIcon/>
|
||||
Back
|
||||
</Button>
|
||||
}
|
||||
@if (CurrentStep != StepCount - 1)
|
||||
{
|
||||
<Button @onclick="() => Navigate(1)">
|
||||
Continue
|
||||
<ArrowRightIcon/>
|
||||
</Button>
|
||||
}
|
||||
else
|
||||
{
|
||||
<Button @onclick="ApplyAsync">
|
||||
Finish
|
||||
<RocketIcon/>
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<Spinner ClassName="size-10"/>
|
||||
</div>
|
||||
}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@code
|
||||
{
|
||||
private bool IsLoaded;
|
||||
|
||||
private int CurrentStep;
|
||||
private readonly int StepCount = 3;
|
||||
|
||||
private readonly ApplySetupDto SetupDto = new();
|
||||
|
||||
private void Navigate(int diff)
|
||||
{
|
||||
CurrentStep += diff;
|
||||
}
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (!firstRender)
|
||||
return;
|
||||
|
||||
var response = await HttpClient.GetAsync("api/admin/setup");
|
||||
|
||||
if (!response.IsSuccessStatusCode)
|
||||
{
|
||||
Navigation.NavigateTo("/", true);
|
||||
return;
|
||||
}
|
||||
|
||||
IsLoaded = true;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
private async Task ApplyAsync()
|
||||
{
|
||||
await HttpClient.PostAsJsonAsync("api/admin/setup", SetupDto);
|
||||
Navigation.NavigateTo("/", true);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user