From 248af498a8abf6c5437ea858bb9732ef88f2dfd8 Mon Sep 17 00:00:00 2001
From: ChiaraBm <chiara.bm04@gmail.com>
Date: Wed, 21 Jan 2026 17:01:32 +0100
Subject: [PATCH] Added setup wizard component for initial installation flow
 and integrated it into app routing.

---
 Moonlight.Frontend/UI/App.razor               |  58 ++++---
 .../UI/Shared/Components/Setup.razor          | 147 ++++++++++++++++++
 2 files changed, 182 insertions(+), 23 deletions(-)
 create mode 100644 Moonlight.Frontend/UI/Shared/Components/Setup.razor

diff --git a/Moonlight.Frontend/UI/App.razor b/Moonlight.Frontend/UI/App.razor
index f9c663dd..edadd0bd 100644
--- a/Moonlight.Frontend/UI/App.razor
+++ b/Moonlight.Frontend/UI/App.razor
@@ -2,10 +2,13 @@
 @using LucideBlazor
 @using Microsoft.AspNetCore.Components.Authorization
 @using Moonlight.Frontend.UI.Shared
+@using Moonlight.Frontend.UI.Shared.Components
 @using ShadcnBlazor.Emptys
 @using Moonlight.Frontend.UI.Shared.Components.Auth
 @using Moonlight.Frontend.UI.Shared.Partials
 
+@inject NavigationManager Navigation
+
 <ErrorBoundary>
     <ChildContent>
         <AuthorizeView>
@@ -30,33 +33,42 @@
                 }
                 else
                 {
-                    <Authentication/>
+                    var uri = new Uri(Navigation.Uri);
+
+                    if (uri.LocalPath.StartsWith("/setup"))
+                    {
+                        <Setup />
+                    }
+                    else
+                    {
+                        <Authentication/>
+                    }
                 }
             </NotAuthorized>
         </AuthorizeView>
     </ChildContent>
     <ErrorContent>
-         @if (context is HttpRequestException { StatusCode: HttpStatusCode.Unauthorized })
-         {
-             <Authentication/>
-         }
-         else
-         {
-             <div class="m-10">
-                 <Empty>
-                     <EmptyHeader>
-                         <EmptyMedia Variant="EmptyMediaVariant.Icon">
-                             <OctagonAlertIcon ClassName="text-red-500/80"/>
-                         </EmptyMedia>
-                         <EmptyTitle>
-                             Critical Application Error
-                         </EmptyTitle>
-                         <EmptyDescription>
-                             @context.ToString()
-                         </EmptyDescription>
-                     </EmptyHeader>
-                 </Empty>
-             </div>
-         }
+        @if (context is HttpRequestException { StatusCode: HttpStatusCode.Unauthorized })
+        {
+            <Authentication/>
+        }
+        else
+        {
+            <div class="m-10">
+                <Empty>
+                    <EmptyHeader>
+                        <EmptyMedia Variant="EmptyMediaVariant.Icon">
+                            <OctagonAlertIcon ClassName="text-red-500/80"/>
+                        </EmptyMedia>
+                        <EmptyTitle>
+                            Critical Application Error
+                        </EmptyTitle>
+                        <EmptyDescription>
+                            @context.ToString()
+                        </EmptyDescription>
+                    </EmptyHeader>
+                </Empty>
+            </div>
+        }
     </ErrorContent>
 </ErrorBoundary>
\ No newline at end of file
diff --git a/Moonlight.Frontend/UI/Shared/Components/Setup.razor b/Moonlight.Frontend/UI/Shared/Components/Setup.razor
new file mode 100644
index 00000000..947b6a00
--- /dev/null
+++ b/Moonlight.Frontend/UI/Shared/Components/Setup.razor
@@ -0,0 +1,147 @@
+@using LucideBlazor
+@using ShadcnBlazor.Cards
+@using ShadcnBlazor.Spinners
+@using ShadcnBlazor.Buttons
+@using ShadcnBlazor.Inputs
+@using ShadcnBlazor.Labels
+
+<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>
+                            <InputField
+                                @bind-Value="Username"
+                                id="username"
+                                placeholder="someoneelse"/>
+                        </div>
+                        <div class="grid gap-2">
+                            <Label for="email">Email</Label>
+                            <InputField
+                                @bind-Value="Email"
+                                id="email"
+                                Type="email"
+                                placeholder="a@cool.email"/>
+                        </div>
+                        <div class="grid gap-2">
+                            <Label for="password">Password</Label>
+                            <InputField
+                                @bind-Value="Password"
+                                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>
+                                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 = false;
+
+    private int CurrentStep = 0;
+    private int StepCount = 3;
+
+    private string Email;
+    private string Username;
+    private string Password;
+
+    private void Navigate(int diff) => CurrentStep += diff;
+}
\ No newline at end of file