Merge pull request #222 from Moonlight-Panel/FixServerList

Fixed server list and server navigation

Moonlight/App/Configuration/ConfigV1.cs

@@ -17,6 +17,8 @@ public class ConfigV1
         [Description("The url moonlight is accesible with from the internet")]
         public string AppUrl { get; set; } = "http://your-moonlight-url-without-slash";
 
+        [JsonProperty("Auth")] public AuthData Auth { get; set; } = new();
+
         [JsonProperty("Database")] public DatabaseData Database { get; set; } = new();
 
         [JsonProperty("DiscordBotApi")] public DiscordBotApiData DiscordBotApi { get; set; } = new();
@@ -39,8 +41,7 @@ public class ConfigV1
 
         [JsonProperty("Subscriptions")] public SubscriptionsData Subscriptions { get; set; } = new();
 
-        [JsonProperty("DiscordNotifications")]
-        public DiscordNotificationsData DiscordNotifications { get; set; } = new();
+        [JsonProperty("DiscordNotifications")] public DiscordNotificationsData DiscordNotifications { get; set; } = new();
 
         [JsonProperty("Statistics")] public StatisticsData Statistics { get; set; } = new();
 
@@ -51,6 +52,17 @@ public class ConfigV1
         [JsonProperty("Sentry")] public SentryData Sentry { get; set; } = new();
     }
     
+    public class AuthData
+    {
+        [JsonProperty("DenyLogin")]
+        [Description("Prevent every new login")]
+        public bool DenyLogin { get; set; } = false;
+        
+        [JsonProperty("DenyRegister")]
+        [Description("Prevent every new user to register")]
+        public bool DenyRegister { get; set; } = false;
+    }
+
     public class CleanupData
     {
         [JsonProperty("Cpu")]

Moonlight/App/Helpers/EggConverter.cs

@@ -0,0 +1,71 @@
+using System.Text;
+using Moonlight.App.Database.Entities;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
+
+namespace Moonlight.App.Helpers;
+
+public static class EggConverter
+{
+    public static Image Convert(string json)
+    {
+        var result = new Image();
+
+        var data = new ConfigurationBuilder().AddJsonStream(
+            new MemoryStream(Encoding.ASCII.GetBytes(json))
+        ).Build();
+
+        result.Allocations = 1;
+        result.Description = data.GetValue<string>("description") ?? "";
+        result.Uuid = Guid.NewGuid();
+        result.Startup = data.GetValue<string>("startup") ?? "";
+        result.Name = data.GetValue<string>("name") ?? "Ptero Egg";
+
+        foreach (var variable in data.GetSection("variables").GetChildren())
+        {
+            result.Variables.Add(new()
+            {
+                Key = variable.GetValue<string>("env_variable") ?? "",
+                DefaultValue = variable.GetValue<string>("default_value") ?? ""
+            });
+        }
+        
+        var configData = data.GetSection("config");
+
+        result.ConfigFiles = configData.GetValue<string>("files") ?? "{}";
+
+        var dImagesData = JObject.Parse(json);
+        var dImages = (JObject)dImagesData["docker_images"]!;
+        
+        foreach (var dockerImage in dImages)
+        {
+            var di = new DockerImage()
+            {
+                Default = dockerImage.Key == dImages.Properties().Last().Name,
+                Name = dockerImage.Value!.ToString()
+            };
+
+            result.DockerImages.Add(di);
+        }
+
+        var installSection = data.GetSection("scripts").GetSection("installation");
+
+        result.InstallEntrypoint = installSection.GetValue<string>("entrypoint") ?? "bash";
+        result.InstallScript = installSection.GetValue<string>("script") ?? "";
+        result.InstallDockerImage = installSection.GetValue<string>("container") ?? "";
+
+        var rawJson = configData.GetValue<string>("startup");
+        
+        var startupData = new ConfigurationBuilder().AddJsonStream(
+            new MemoryStream(Encoding.ASCII.GetBytes(rawJson!))
+        ).Build();
+
+        result.StartupDetection = startupData.GetValue<string>("done", "") ?? "";
+        result.StopCommand = configData.GetValue<string>("stop") ?? "";
+
+        result.TagsJson = "[]";
+        result.BackgroundImageUrl = "";
+
+        return result;
+    }
+}

Moonlight/App/Services/DomainService.cs

@@ -20,6 +20,7 @@ namespace Moonlight.App.Services;
 public class DomainService
 {
     private readonly DomainRepository DomainRepository;
+    private readonly ConfigService ConfigService;
     private readonly SharedDomainRepository SharedDomainRepository;
     private readonly CloudFlareClient Client;
     private readonly string AccountId;
@@ -29,6 +30,7 @@ public class DomainService
         DomainRepository domainRepository,
         SharedDomainRepository sharedDomainRepository)
     {
+        ConfigService = configService;
         DomainRepository = domainRepository;
         SharedDomainRepository = sharedDomainRepository;
 
@@ -48,6 +50,9 @@ public class DomainService
 
     public Task<Domain> Create(string domain, SharedDomain sharedDomain, User user)
     {
+        if (!ConfigService.Get().Moonlight.Domains.Enable)
+            throw new DisplayException("This operation is disabled");
+        
         if (DomainRepository.Get().Where(x => x.SharedDomain.Id == sharedDomain.Id).Any(x => x.Name == domain))
             throw new DisplayException("A domain with this name does already exist for this shared domain");
 
@@ -63,6 +68,9 @@ public class DomainService
 
     public Task Delete(Domain domain)
     {
+        if (!ConfigService.Get().Moonlight.Domains.Enable)
+            throw new DisplayException("This operation is disabled");
+        
         DomainRepository.Delete(domain);
 
         return Task.CompletedTask;
@@ -71,6 +79,9 @@ public class DomainService
     public async Task<Zone[]>
         GetAvailableDomains() // This method returns all available domains which are not added as a shared domain
     {
+        if (!ConfigService.Get().Moonlight.Domains.Enable)
+            return Array.Empty<Zone>();
+        
         var domains = GetData(
             await Client.Zones.GetAsync(new()
             {
@@ -93,6 +104,9 @@ public class DomainService
 
     public async Task<DnsRecord[]> GetDnsRecords(Domain d)
     {
+        if (!ConfigService.Get().Moonlight.Domains.Enable)
+            return Array.Empty<DnsRecord>();
+        
         var domain = EnsureData(d);
 
         var records = new List<CloudFlare.Client.Api.Zones.DnsRecord.DnsRecord>();
@@ -146,7 +160,7 @@ public class DomainService
                     Type = record.Type
                 });
             }
-            else if (record.Name.EndsWith(rname))
+            else if (record.Name == rname)
             {
                 result.Add(new()
                 {
@@ -166,6 +180,9 @@ public class DomainService
 
     public async Task AddDnsRecord(Domain d, DnsRecord dnsRecord)
     {
+        if (!ConfigService.Get().Moonlight.Domains.Enable)
+            throw new DisplayException("This operation is disabled");
+        
         var domain = EnsureData(d);
 
         var rname = $"{domain.Name}.{domain.SharedDomain.Name}";
@@ -225,6 +242,9 @@ public class DomainService
 
     public async Task UpdateDnsRecord(Domain d, DnsRecord dnsRecord)
     {
+        if (!ConfigService.Get().Moonlight.Domains.Enable)
+            throw new DisplayException("This operation is disabled");
+        
         var domain = EnsureData(d);
 
         var rname = $"{domain.Name}.{domain.SharedDomain.Name}";
@@ -255,6 +275,9 @@ public class DomainService
 
     public async Task DeleteDnsRecord(Domain d, DnsRecord dnsRecord)
     {
+        if (!ConfigService.Get().Moonlight.Domains.Enable)
+            throw new DisplayException("This operation is disabled");
+        
         var domain = EnsureData(d);
 
         GetData(

Moonlight/App/Services/Sessions/SessionClientService.cs

@@ -11,6 +11,8 @@ public class SessionClientService
     public readonly Guid Uuid = Guid.NewGuid();
     public readonly DateTime CreateTimestamp = DateTime.UtcNow;
     public User? User { get; private set; }
+    public string Ip { get; private set; } = "N/A";
+    public string Device { get; private set; } = "N/A";
 
     public readonly IdentityService IdentityService;
     public readonly AlertService AlertService;
@@ -39,6 +41,8 @@ public class SessionClientService
     public async Task Start()
     {
         User = await IdentityService.Get();
+        Ip = IdentityService.GetIp();
+        Device = IdentityService.GetDevice();
 
         if (User != null) // Track users last visit
         {

Moonlight/App/Services/UserService.cs

@@ -18,6 +18,7 @@ public class UserService
     private readonly IdentityService IdentityService;
     private readonly IpLocateService IpLocateService;
     private readonly DateTimeService DateTimeService;
+    private readonly ConfigService ConfigService;
 
     private readonly string JwtSecret;
 
@@ -32,6 +33,7 @@ public class UserService
     {
         UserRepository = userRepository;
         TotpService = totpService;
+        ConfigService = configService;
         MailService = mailService;
         IdentityService = identityService;
         IpLocateService = ipLocateService;
@@ -44,6 +46,9 @@ public class UserService
 
     public async Task<string> Register(string email, string password, string firstname, string lastname)
     {
+        if (ConfigService.Get().Moonlight.Auth.DenyRegister)
+            throw new DisplayException("This operation was disabled");
+        
         // Check if the email is already taken
         var emailTaken = UserRepository.Get().FirstOrDefault(x => x.Email == email) != null;
 
@@ -108,6 +113,9 @@ public class UserService
 
     public async Task<string> Login(string email, string password, string totpCode = "")
     {
+        if (ConfigService.Get().Moonlight.Auth.DenyLogin)
+            throw new DisplayException("This operation was disabled");
+        
         // First password check and check if totp is enabled
         var needTotp = await CheckTotp(email, password);
         

Moonlight/Shared/Views/Admin/Servers/Images/Index.razor

@@ -32,7 +32,7 @@
                             <TL>New image</TL>
                         </a>
                         <InputFile OnChange="OnFileChanged" type="file" id="fileUpload" hidden="" multiple=""/>
-                        <label for="fileUpload" class="btn btn-sm btn-light-primary">
+                        <label for="fileUpload" class="btn btn-sm btn-light-primary me-3">
                             <span class="svg-icon svg-icon-2">
                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="currentColor"></path>
@@ -42,6 +42,17 @@
                             </span>
                             <TL>Import</TL>
                         </label>
+                        <InputFile OnChange="OnEggFileChanged" type="file" id="eggFileUpload" hidden="" multiple=""/>
+                        <label for="eggFileUpload" class="btn btn-sm btn-light-primary">
+                            <span class="svg-icon svg-icon-2">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="currentColor"></path>
+                                    <path d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.20001C9.70001 3 10.2 3.20001 10.4 3.60001ZM16 11.6L12.7 8.29999C12.3 7.89999 11.7 7.89999 11.3 8.29999L8 11.6H11V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H16Z" fill="currentColor"></path>
+                                    <path opacity="0.3" d="M11 11.6V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H11Z" fill="currentColor"></path>
+                                </svg>
+                            </span>
+                            <TL>Import pterodactyl egg</TL>
+                        </label>
                     </div>
                 </div>
                 <div class="card-body pt-0">
@@ -173,4 +184,44 @@
 
         await InvokeAsync(StateHasChanged);
     }
+    
+    private async Task OnEggFileChanged(InputFileChangeEventArgs arg)
+    {
+        var b = await AlertService.YesNo(
+            SmartTranslateService.Translate("Attention"),
+            SmartTranslateService.Translate("Imported pterodactyl eggs can result in broken images. We do not support pterodactyl eggs"),
+            SmartTranslateService.Translate("I take the risk"),
+            SmartTranslateService.Translate("Cancel")
+            );
+        
+        if(!b)
+            return;
+        
+        foreach (var browserFile in arg.GetMultipleFiles())
+        {
+            try
+            {
+                var stream = browserFile.OpenReadStream(1024 * 1024 * 100);
+                var data = new byte[browserFile.Size];
+                _ = await stream.ReadAsync(data, 0, data.Length);
+
+                var json = Encoding.UTF8.GetString(data);
+
+                var image = EggConverter.Convert(json);
+
+                ImageRepository.Add(image);
+
+                await AlertService.Success(SmartTranslateService.Translate("Successfully imported image"));
+                await LazyLoader.Reload();
+            }
+            catch (Exception e)
+            {
+                await AlertService.Error(SmartTranslateService.Translate("An unknown error occured while uploading and importing the image"));
+                Logger.Error("Error importing image");
+                Logger.Error(e);
+            }
+        }
+
+        await InvokeAsync(StateHasChanged);
+    }
 }

Moonlight/Shared/Views/Admin/Users/Sessions.razor

@@ -60,13 +60,13 @@
                         </Column>
                         <Column TableItem="SessionClientService" Title="@(SmartTranslateService.Translate("IP"))" Field="@(x => x.Uuid)" Sortable="false" Filterable="false" Width="10%">
                             <Template>
-                                @(context.IdentityService.GetIp())
+                                @(context.Ip)
                             </Template>
                         </Column>
                         <Column TableItem="SessionClientService" Title="@(SmartTranslateService.Translate("URL"))" Field="@(x => x.NavigationManager.Uri)" Sortable="true" Filterable="true" Width="10%"/>
                         <Column TableItem="SessionClientService" Title="@(SmartTranslateService.Translate("Device"))" Field="@(x => x.Uuid)" Sortable="false" Filterable="false" Width="10%">
                             <Template>
-                                @(context.IdentityService.GetDevice())
+                                @(context.Device)
                             </Template>
                         </Column>
                         <Column TableItem="SessionClientService" Title="@(SmartTranslateService.Translate("Time"))" Field="@(x => x.CreateTimestamp)" Sortable="true" Filterable="true" Width="10%">

Moonlight/Shared/Views/Server/Index.razor

@@ -26,7 +26,7 @@
 <LazyLoader Load="LoadData">
     @if (CurrentServer == null)
     {
-        <NotFoundAlert />
+        <NotFoundAlert/>
     }
     else
     {
@@ -34,33 +34,16 @@
         {
             if (Console.ConsoleState == ConsoleState.Connected)
             {
-                if (Console.ServerState == ServerState.Installing)
+                if (Console.ServerState == ServerState.Installing || CurrentServer.Installing)
                 {
                     <div class="card">
                         <div class="card-body">
-                            <div class="mb-10">
-                                <div class="fs-2hx fw-bold text-gray-800 text-center mb-13">
-                                    <span class="me-2">
-                                        <TL>Server installation is currently running</TL>
-                                    </span>
-                                </div>
+                            <div class="fs-2hx fw-bold text-gray-800 text-center mb-5">
+                                <TL>Server installation is currently running</TL>
                             </div>
-                            <Terminal @ref="InstallConsole"></Terminal>
-                        </div>
-                    </div>
-                }
-                else if (CurrentServer.Installing)
-                {
-                    <div class="card">
-                        <div class="card-body">
-                            <div class="mb-10">
-                                <div class="fs-2hx fw-bold text-gray-800 text-center mb-13">
-                                    <span class="me-2">
-                                        <TL>Server installation is currently running</TL>
-                                    </span>
-                                </div>
+                            <div class="rounded bg-black p-3">
+                                <Terminal @ref="InstallConsole"></Terminal>
                             </div>
-                            <Terminal @ref="InstallConsole"></Terminal>
                         </div>
                     </div>
                 }
@@ -104,7 +87,7 @@
                                     </Route>
                                     <Route Path="/backups">
                                         <ServerNavigation Index="2">
-                                             <ServerBackups/>
+                                            <ServerBackups/>
                                         </ServerNavigation>
                                     </Route>
                                     <Route Path="/network">

Moonlight/Shared/Views/Server/ServerNavigation.razor

@@ -25,11 +25,17 @@
                 </div>
                 <div class="col-4 d-flex flex-column flex-end mb-1">
                     <div class="btn-group btn-group-sm">
-                        <button class="w-100 nav-link btn btn-sm btn-success fw-bold px-4 me-1 @(Console.ServerState == ServerState.Offline ? "" : "disabled")" aria-selected="true" role="tab" @onclick="Start"><TL>Start</TL></button>
-                        <button class="w-100 nav-link btn btn-sm btn-primary fw-bold px-4 me-1 @(Console.ServerState == ServerState.Running ? "" : "disabled")" aria-selected="true" role="tab" @onclick="Restart"><TL>Restart</TL></button>
+                        <button class="w-100 nav-link btn btn-sm btn-success fw-bold px-4 me-1 @(Console.ServerState == ServerState.Offline ? "" : "disabled")" aria-selected="true" role="tab" @onclick="Start">
+                            <TL>Start</TL>
+                        </button>
+                        <button class="w-100 nav-link btn btn-sm btn-primary fw-bold px-4 me-1 @(Console.ServerState == ServerState.Running ? "" : "disabled")" aria-selected="true" role="tab" @onclick="Restart">
+                            <TL>Restart</TL>
+                        </button>
                         @if (Console.ServerState == ServerState.Stopping)
                         {
-                            <button class="w-100 nav-link btn btn-sm btn-danger fw-bold px-4 me-1" aria-selected="true" role="tab" @onclick="Kill"><TL>Kill</TL></button>
+                            <button class="w-100 nav-link btn btn-sm btn-danger fw-bold px-4 me-1" aria-selected="true" role="tab" @onclick="Kill">
+                                <TL>Kill</TL>
+                            </button>
                         }
                         else
                         {
@@ -47,7 +53,7 @@
                 <div class="row align-items-center">
                     <div class="col fs-5">
                         <span class="fw-bold"><TL>Shared IP</TL>:</span>
-                        <span class="ms-1 text-muted @(User.StreamerMode ? "blur" : "")">@($"{CurrentServer.Node.Fqdn}:{CurrentServer.MainAllocation.Port}")</span>
+                        <span class="ms-1 text-muted @(User.StreamerMode ? "blur" : "")">@($"{CurrentServer.Node.Fqdn}:{CurrentServer.MainAllocation?.Port ?? 0}")</span>
                     </div>
                     <div class="col fs-5">
                         <span class="fw-bold"><TL>Server ID</TL>:</span>
@@ -68,21 +74,29 @@
                             @switch (Console.ServerState)
                             {
                                 case ServerState.Offline:
-                                    <span class="text-danger"><TL>Offline</TL></span>
+                                    <span class="text-danger">
+                                        <TL>Offline</TL>
+                                    </span>
                                     break;
 
                                 case ServerState.Starting:
-                                    <span class="text-warning"><TL>Starting</TL></span>
+                                    <span class="text-warning">
+                                        <TL>Starting</TL>
+                                    </span>
                                     <span class="text-gray-700 pt-1 fw-semibold">(@(Formatter.FormatUptime(Console.Resource.Uptime)))</span>
                                     break;
 
                                 case ServerState.Stopping:
-                                    <span class="text-warning"><TL>Stopping</TL></span>
+                                    <span class="text-warning">
+                                        <TL>Stopping</TL>
+                                    </span>
                                     <span class="text-gray-700 pt-1 fw-semibold">(@(Formatter.FormatUptime(Console.Resource.Uptime)))</span>
                                     break;
 
                                 case ServerState.Running:
-                                    <span class="text-success"><TL>Online</TL></span>
+                                    <span class="text-success">
+                                        <TL>Online</TL>
+                                    </span>
                                     <span class="text-gray-700 pt-1 fw-semibold">(@(Formatter.FormatUptime(Console.Resource.Uptime)))</span>
                                     break;
                             }
@@ -110,7 +124,9 @@
                         <a href="/server/@(CurrentServer.Uuid)/" class="nav-link w-100 btn btn-flex @(Index == 0 ? "active" : "") btn-active-light-primary">
                             <i class="bx bx-terminal bx-sm me-2"></i>
                             <span class="d-flex flex-column align-items-start">
-                                <span class="fs-5"><TL>Console</TL></span>
+                                <span class="fs-5">
+                                    <TL>Console</TL>
+                                </span>
                             </span>
                         </a>
                     </li>
@@ -118,7 +134,9 @@
                         <a href="/server/@(CurrentServer.Uuid)/files" class="nav-link w-100 btn btn-flex @(Index == 1 ? "active" : "") btn-active-light-primary">
                             <i class="bx bx-folder bx-sm me-2"></i>
                             <span class="d-flex flex-column align-items-start">
-                                <span class="fs-5"><TL>Files</TL></span>
+                                <span class="fs-5">
+                                    <TL>Files</TL>
+                                </span>
                             </span>
                         </a>
                     </li>
@@ -126,7 +144,9 @@
                         <a href="/server/@(CurrentServer.Uuid)/backups" class="nav-link w-100 btn btn-flex @(Index == 2 ? "active" : "") btn-active-light-primary">
                             <i class="bx bx-box bx-sm me-2"></i>
                             <span class="d-flex flex-column align-items-start">
-                                <span class="fs-5"><TL>Backups</TL></span>
+                                <span class="fs-5">
+                                    <TL>Backups</TL>
+                                </span>
                             </span>
                         </a>
                     </li>
@@ -134,7 +154,9 @@
                         <a href="/server/@(CurrentServer.Uuid)/network" class="nav-link w-100 btn btn-flex @(Index == 3 ? "active" : "") btn-active-light-primary">
                             <i class="bx bx-wifi bx-sm me-2"></i>
                             <span class="d-flex flex-column align-items-start">
-                                <span class="fs-5"><TL>Network</TL></span>
+                                <span class="fs-5">
+                                    <TL>Network</TL>
+                                </span>
                             </span>
                         </a>
                     </li>
@@ -142,7 +164,9 @@
                         <a href="/server/@(CurrentServer.Uuid)/addons" class="nav-link w-100 btn btn-flex @(Index == 4 ? "active" : "") btn-active-light-primary">
                             <i class="bx bx-plug bx-sm me-2"></i>
                             <span class="d-flex flex-column align-items-start">
-                                <span class="fs-5"><TL>Addons</TL></span>
+                                <span class="fs-5">
+                                    <TL>Addons</TL>
+                                </span>
                             </span>
                         </a>
                     </li>
@@ -150,7 +174,9 @@
                         <a href="/server/@(CurrentServer.Uuid)/settings" class="nav-link w-100 btn btn-flex @(Index == 5 ? "active" : "") btn-active-light-primary">
                             <i class="bx bx-cog bx-sm me-2"></i>
                             <span class="d-flex flex-column align-items-start">
-                                <span class="fs-5"><TL>Settings</TL></span>
+                                <span class="fs-5">
+                                    <TL>Settings</TL>
+                                </span>
                             </span>
                         </a>
                     </li>

Moonlight/Shared/Views/Servers/Create.razor

@@ -48,7 +48,9 @@
                     <div class="card-body pt-0">
                         <div class="d-flex flex-column gap-10">
                             <div class="fv-row">
-                                <label class="form-label"><TL>Node</TL></label>
+                                <label class="form-label">
+                                    <TL>Node</TL>
+                                </label>
                                 <div class="fw-bold fs-3">@(DeployNode.Name)</div>
                             </div>
                             @if (Model.Image != null)
@@ -56,12 +58,16 @@
                                 var limit = Images[Model.Image];
 
                                 <div class="fv-row">
-                                    <label class="form-label"><TL>Image</TL></label>
+                                    <label class="form-label">
+                                        <TL>Image</TL>
+                                    </label>
                                     <div class="fw-bold fs-3">@(Model.Image.Name)</div>
                                 </div>
 
                                 <div class="fv-row">
-                                    <label class="form-label"><TL>CPU</TL></label>
+                                    <label class="form-label">
+                                        <TL>CPU</TL>
+                                    </label>
                                     <div class="fw-bold fs-3">
                                         @{
                                             var cpu = limit.ReadValue("cpu");
@@ -76,12 +82,16 @@
                                 </div>
 
                                 <div class="fv-row">
-                                    <label class="form-label"><TL>Memory</TL></label>
+                                    <label class="form-label">
+                                        <TL>Memory</TL>
+                                    </label>
                                     <div class="fw-bold fs-3">@(limit.ReadValue("memory")) MB</div>
                                 </div>
 
                                 <div class="fv-row">
-                                    <label class="form-label"><TL>Disk</TL></label>
+                                    <label class="form-label">
+                                        <TL>Disk</TL>
+                                    </label>
                                     <div class="fw-bold fs-3">@(limit.ReadValue("disk")) MB</div>
                                 </div>
                             }
@@ -108,15 +118,6 @@
                             </div>
                             @if (Images.Any())
                             {
-                                <label class="form-label">
-                                    <TL>Image</TL>
-                                </label>
-                                <SmartSelect TField="Image"
-                                             @bind-Value="Model.Image"
-                                             Items="Images.Keys.ToArray()"
-                                             DisplayField="@(x => x.Name)">
-                                </SmartSelect>
-
                                 <button type="submit" class="mt-5 float-end btn btn-primary">
                                     <TL>Create</TL>
                                 </button>
@@ -125,13 +126,45 @@
                             {
                                 <div class="alert alert-warning d-flex align-items-center p-5 mb-10">
                                     <span>
-                                        <TL>You reached the maximum amount of servers for every image of your subscription</TL>: @(Subscription == null ? SmartTranslateService.Translate("Default") : Subscription.Name)
+                                        <TL>We could not find any image in your subscription you have access to</TL>: @(Subscription == null ? SmartTranslateService.Translate("Default") : Subscription.Name)
                                     </span>
                                 </div>
                             }
                         </SmartForm>
                     </div>
                 </div>
+
+                <div class="row">
+                    @foreach (var keyValuePair in Images)
+                    {
+                        bool selected = Model.Image != null && Model.Image.Id == keyValuePair.Key.Id;
+
+                        <div class="col-12 col-md-4">
+                            @if (ServerCounts[keyValuePair.Key] > keyValuePair.Value.Amount)
+                            {
+                                <div class="m-2 card blur">
+                                    <div class="card-body">
+                                        <h5 class="card-title text-center">@(keyValuePair.Key.Name)</h5>
+                                        <p class="card-text">
+                                            @(keyValuePair.Key.Description)
+                                        </p>
+                                    </div>
+                                </div>
+                            }
+                            else
+                            {
+                                <a href="#" class="m-2 card @(selected ? "border border-2 border-primary" : "") invisible-a" @onclick:preventDefault @onclick="() => SelectImage(keyValuePair.Key)">
+                                    <div class="card-body">
+                                        <h5 class="card-title text-center">@(keyValuePair.Key.Name)</h5>
+                                        <p class="card-text">
+                                            @(keyValuePair.Key.Description)
+                                        </p>
+                                    </div>
+                                </a>
+                            }
+                        </div>
+                    }
+                </div>
             </div>
         </div>
     }
@@ -146,6 +179,7 @@
     private Subscription? Subscription;
 
     private Dictionary<Image, SubscriptionLimit> Images = new();
+    private Dictionary<Image, int> ServerCounts = new();
 
     private ServerOrderDataModel Model = new();
 
@@ -177,8 +211,8 @@
                     .Where(x => x.Owner.Id == User.Id)
                     .Count(x => x.Image.Id == image.Id);
 
-                if(serversCount < limit.Amount)
-                    Images.Add(image, limit);
+                Images.Add(image, limit);
+                ServerCounts.Add(image, serversCount);
             }
         }
     }
@@ -198,7 +232,7 @@
 
             if (serversCount < limit.Amount)
             {
-                if(int.TryParse(limit.ReadValue("cpu"), out int cpu) &&
+                if (int.TryParse(limit.ReadValue("cpu"), out int cpu) &&
                     int.TryParse(limit.ReadValue("memory"), out int memory) &&
                     int.TryParse(limit.ReadValue("disk"), out int disk))
                 {
@@ -221,4 +255,11 @@
             }
         }
     }
+
+    private async Task SelectImage(Image image)
+    {
+        Model.Image = image;
+
+        await InvokeAsync(StateHasChanged);
+    }
 }

Moonlight/Shared/Views/Servers/Index.razor

@@ -221,6 +221,8 @@
         {
             ServerGroups = (JsonConvert.DeserializeObject<ServerGroup[]>(
                 User.ServerListLayoutJson) ?? Array.Empty<ServerGroup>()).ToList();
+
+            await CheckServerGroups();
         }
 
         foreach (var server in AllServers)
@@ -256,8 +258,8 @@
     private async Task RemoveGroup(ServerGroup group)
     {
         ServerGroups.Remove(group);
-        await EnsureAllServersInGroups();
         
+        await CheckServerGroups();
         await InvokeAsync(StateHasChanged);
 
         await JsRuntime.InvokeVoidAsync("moonlight.serverList.init");
@@ -266,11 +268,10 @@
     private async Task SetEditMode(bool toggle)
     {
         EditMode = toggle;
-        await InvokeAsync(StateHasChanged);
 
         if (EditMode)
         {
-            await EnsureAllServersInGroups();
+            await CheckServerGroups();
             await InvokeAsync(StateHasChanged);
 
             await JsRuntime.InvokeVoidAsync("moonlight.serverList.init");
@@ -278,6 +279,9 @@
         else
         {
             var json = JsonConvert.SerializeObject(await GetGroupsFromClient());
+
+            await CheckServerGroups();
+            
             User.ServerListLayoutJson = json;
             UserRepository.Update(User);
 
@@ -289,7 +293,7 @@
     {
         var serverGroups = await JsRuntime.InvokeAsync<ServerGroup[]>("moonlight.serverList.getData");
 
-    // Check user data to prevent users from doing stupid stuff
+        // Check user data to prevent users from doing stupid stuff
         foreach (var serverGroup in serverGroups)
         {
             if (serverGroup.Name.Length > 30)
@@ -297,53 +301,78 @@
                 Logger.Verbose("Server list group lenght too long");
                 return Array.Empty<ServerGroup>();
             }
-
-            if (serverGroup.Servers.Any(x => AllServers.All(y => y.Id.ToString() != x)))
-            {
-                Logger.Verbose("User tried to add a server in his server list which he has no access to");
-                return Array.Empty<ServerGroup>();
-            }
         }
 
         return serverGroups;
     }
 
-    private Task EnsureAllServersInGroups()
+    private Task CheckServerGroups()
     {
-        var presentInGroup = new List<Server>();
+        var result = new List<ServerGroup>();
 
+        // Reconstruct the data with checking for invalid server ids
         foreach (var group in ServerGroups)
+        {
+            var checkedGroup = new ServerGroup()
+            {
+                Name = group.Name
+            };
+
+            foreach (var server in group.Servers)
+            {
+                var s = AllServers.FirstOrDefault(x => x.Id.ToString() == server);
+
+                if (s != null) // This is a check for invalid server ids
+                {
+                    checkedGroup.Servers.Add(s.Id.ToString());
+                }
+            }
+            
+            result.Add(checkedGroup);
+        }
+        
+        var presentInGroup = new List<Server>();
+        
+        // Copy all servers to preset in group if they are in the users servers
+        foreach (var group in result) 
         {
             foreach (var id in group.Servers)
-                presentInGroup.Add(AllServers.First(x => x.Id.ToString() == id));
+            {
+                var s = AllServers.First(x => x.Id.ToString() == id);
+                presentInGroup.Add(s);
+            }
         }
 
         var serversMissing = new List<Server>();
 
+        // Make a list of missing servers
         foreach (var server in AllServers)
         {
             if (presentInGroup.All(x => x.Id != server.Id))
                 serversMissing.Add(server);
         }
 
+        // Add all missing servers into the default group
         if (serversMissing.Any())
         {
-            var defaultGroup = ServerGroups.FirstOrDefault(x => x.Name == "");
+            var defaultGroup = result.FirstOrDefault(x => x.Name == "");
 
-            if (defaultGroup == null)
+            if (defaultGroup == null) // If group does not exist, create it
             {
                 defaultGroup = new ServerGroup()
                 {
                     Name = ""
                 };
 
-                ServerGroups.Add(defaultGroup);
+                result.Add(defaultGroup);
             }
 
             foreach (var server in serversMissing)
                 defaultGroup.Servers.Add(server.Id.ToString());
         }
 
+        ServerGroups = result;
+        
         return Task.CompletedTask;
     }
 
@@ -351,8 +380,11 @@
     {
         lock (StatusCache)
         {
-            StatusCache.Add(server, status);
-            InvokeAsync(StateHasChanged);
+            if (!StatusCache.ContainsKey(server))
+            {
+                StatusCache.Add(server, status);
+                InvokeAsync(StateHasChanged);
+            }
         }
     }
 }

Moonlight/wwwroot/assets/css/blazor.css

@@ -41,6 +41,7 @@
 .components-reconnect-rejected > .rejected {
     display: block;
 }
+
 .components-reconnect-hide > div {
     display: none;
 }
@@ -56,3 +57,16 @@
 .components-reconnect-rejected {
     display: block;
 }
+
+::-webkit-scrollbar {
+    width: 12px;
+    background: var(--kt-card-bg);
+}
+
+::-webkit-scrollbar-thumb {
+    background: #6964E4;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #6964E4;
+}

README.md

@@ -22,7 +22,7 @@
 
 ![Screen Shot](https://media.discordapp.net/attachments/1059911407170228234/1119793539732217876/image.png?width=1340&height=671)
 
-Moonlight is a new free and open source alternative to pterodactyl allowing users to create their own hosting platform and host all sorts of gameservers in docker containers. With a simple migration from pterodactyl to moonlight (migrator will be open source soon) you can easily switch to moonlight and use its features like a server manager, cleanup system and automatic version switcher, just to name a few.
+Moonlight is a new free and open source alternative to pterodactyl allowing users to create their own hosting platform and host all sorts of gameservers in docker containers. With a simple migration from pterodactyl to moonlight ([see guide](https://docs.moonlightpanel.xyz/migrating-from-pterodactyl)) you can easily switch to moonlight and use its features like a server manager, cleanup system and automatic version switcher, just to name a few.
 
 Moonlight's core features are