Merge pull request #425 from Moonlight-Panel/v2_AddCookieConsentBanner

V2 add cookie consent banner

Moonlight/Core/Configuration/CoreConfiguration.cs

@@ -116,6 +116,7 @@ public class CoreConfiguration
         public FileManagerData FileManager { get; set; } = new();
 
         [JsonProperty("Footer")] public FooterData Footer { get; set; } = new();
+        [JsonProperty("CookieConsentBanner")] public CookieData CookieConsentBanner{ get; set; } = new();
     }
     
     public class FooterData
@@ -147,4 +148,27 @@ public class CoreConfiguration
         [Description("This specifies the general timeout for file manager operations. This can but has not to be used by file accesses")]
         public int OperationTimeout { get; set; } = 5;
     }
+    
+    public class CookieData
+    {
+        [JsonProperty("Enabled")]
+        [Description("This specifies if the cookie consent banner is shown to users.")]
+        public bool Enabled { get; set; } = false;
+
+        [JsonProperty("BannerTitle")]
+        [Description("The title for the cookie consent banner.")]
+        public string BannerTitle { get; set; } = "\ud83c\udf6a Cookies";
+        
+        [JsonProperty("BannerText")]
+        [Description("The description for the cookie consent banner.")]
+        public string BannerText { get; set; } = "Moonlight is using cookies \ud83c\udf6a, to personalize your experience.";
+        
+        [JsonProperty("ConsentText")]
+        [Description("The text for the consent option.")]
+        public string ConsentText { get; set; } = "Consent";
+        
+        [JsonProperty("DeclineText")]
+        [Description("The text for the decline option.")]
+        public string DeclineText { get; set; } = "Decline";
+    }
 }

Moonlight/Core/Models/Forms/ChangeCookiesForm.cs

@@ -0,0 +1,9 @@
+using System.ComponentModel;
+
+namespace Moonlight.Core.Models.Forms;
+
+public class ChangeCookiesForm
+{
+    [Description("This specifies if you would like to personalize your experience with optional cookies.")]
+    public bool UseOptionalCookies { get; set; } = false;
+}

Moonlight/Core/UI/Components/Partials/CookieConsentBanner.razor

@@ -0,0 +1,71 @@
+@using ApexCharts
+@using MoonCore.Services
+@using Moonlight.Core.Configuration
+@using Moonlight.Core.Services
+
+@inject ConfigService<CoreConfiguration> ConfigService
+@inject IdentityService IdentityService
+
+@if (ShowBanner)
+{
+    <div class="mb-12 mx-8 d-flex justify-content-end fixed-bottom no-pointer-events" style="pointer-events: none;">
+        <div style="pointer-events: all; max-width: var(--bs-breakpoint-sm)" class="w-100">
+            <div class="card shadow-lg">
+                <div class="card-body">
+                    <h3 class="mb-4">@ConfigService.Get().Customisation.CookieConsentBanner.BannerTitle</h3>
+                    <p class="text-muted fs-6">
+                        @ConfigService.Get().Customisation.CookieConsentBanner.BannerText
+                    </p>
+                    <span class="d-flex gap-5">
+                        <a @onclick:preventDefault @onclick="Consent" class="btn btn-primary btn-sm cursor-pointer">
+                            <i class="bx bx-check"></i> @ConfigService.Get().Customisation.CookieConsentBanner.ConsentText
+                        </a>
+                        <a @onclick:preventDefault @onclick="Decline" class="btn btn-secondary btn-sm cursor-pointer">
+                            <i class="bx bx-x"></i> @ConfigService.Get().Customisation.CookieConsentBanner.DeclineText
+                        </a>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+
+    private bool ShowBanner;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            var userWasAsked = await IdentityService.HasFlag("CookieAsked");
+            
+            if (ConfigService.Get().Customisation.CookieConsentBanner.Enabled && !userWasAsked)
+                ShowBanner = true;
+
+            await InvokeAsync(StateHasChanged);
+        }
+    }
+
+    private async Task Consent()
+    {
+        if (!IdentityService.IsLoggedIn)
+            return;
+        
+        await IdentityService.SetFlag("CookieAsked", true);
+        await IdentityService.SetFlag("CookieConsent", true);
+
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task Decline()
+    {
+        if (!IdentityService.IsLoggedIn)
+            return;
+
+        await IdentityService.SetFlag("CookieAsked", true);
+        
+        await InvokeAsync(StateHasChanged);
+    }
+
+}

Moonlight/Core/UI/Layouts/MainLayout.razor

@@ -56,6 +56,7 @@
                                                 {
                                                     <PermissionChecker>
                                                         @Body
+                                                        <CookieConsentBanner/>
                                                     </PermissionChecker>
                                                 }
                                                 else

Moonlight/Core/UI/Views/Account/Security.razor

@@ -28,7 +28,7 @@
     <div class="row g-5">
         <div class="col-md-6 col-12">
             <div class="card">
-                <SmartForm Model="PasswordForm" OnValidSubmit="OnValidSubmit">
+                <SmartForm Model="PasswordForm" OnValidSubmit="OnValidSubmitPassword">
                     <div class="card-body">
                         <div class="row">
                             <AutoForm Model="PasswordForm" Columns="12" />
@@ -47,19 +47,37 @@
                 </div>
             </div>
         </div>
+        <div class="col-md-6 col-12">
+            <div class="card h-100">
+                <SmartForm Model="CookiesForm" OnValidSubmit="OnValidSubmitCookie">
+                <div class="card-body">
+                    <h3>Cookies</h3>
+                    <div>
+                        
+                            <AutoForm Model="CookiesForm"/>
+                    </div>
+                </div>
+                <div class="card-footer d-flex justify-content-end">
+                    <button class="btn btn-primary" type="submit">Save changes</button>
+                </div>
+                </SmartForm>
+            </div>
+        </div>
     </div>
 </LazyLoader>
 
 @code
 {
     private readonly ChangePasswordForm PasswordForm = new();
+    
+    private ChangeCookiesForm CookiesForm = new();
 
-    private Task Load(LazyLoader lazyLoader)
+    private async Task Load(LazyLoader lazyLoader)
     {
-        return Task.CompletedTask;
+        CookiesForm.UseOptionalCookies = await IdentityService.HasFlag("CookieConsent");
     }
 
-    private async Task OnValidSubmit()
+    private async Task OnValidSubmitPassword()
     {
         if (PasswordForm.Password != PasswordForm.RepeatedPassword)
             throw new DisplayException("The passwords do not match");
@@ -69,4 +87,11 @@
         await ToastService.Success("Successfully changed password");
         await IdentityService.Authenticate(true);
     }
+
+    private async Task OnValidSubmitCookie()
+    {
+        await IdentityService.SetFlag("CookieConsent", CookiesForm.UseOptionalCookies);
+
+        await InvokeAsync(StateHasChanged);
+    }
 }