Moonlight/Moonlight.Frontend/Admin/Setup/Index.razor

@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);
    }
}