From 7ccf0c3612a9b821219cea2e37b0b99e3e32aa4e Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 22 Nov 2019 21:09:18 +0100
Subject: [PATCH] UI: Add custom theme file option

This adds a "Custom Theme CSS file" to the "Server settings: Theme" page. It works similar to the custom bootstrap and creative start fields, but is only added to the head in case it is set.

The main idea here is that users would choose one of our predefined themes and have the option to override specific values. The other apporach would be to let the custom theme replace the predefined one, but this could lead to issues in case we extend the set of variables, which would be unset then.
This way users can copy a predefined theme and override all variables or just the ones they want to customize.

The help icon besides the label links to a page in the docs I'm currently working on.
---
 BTCPayServer/HostedServices/CssThemeManager.cs | 16 ++++++++++++++++
 BTCPayServer/Services/ThemesSettings.cs        |  6 ++++++
 BTCPayServer/Views/Server/Theme.cshtml         | 13 +++++++++++--
 BTCPayServer/Views/Shared/Header.cshtml        |  6 +++++-
 4 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/BTCPayServer/HostedServices/CssThemeManager.cs b/BTCPayServer/HostedServices/CssThemeManager.cs
index bbed57d04..ddba26c96 100644
--- a/BTCPayServer/HostedServices/CssThemeManager.cs
+++ b/BTCPayServer/HostedServices/CssThemeManager.cs
@@ -26,6 +26,11 @@ namespace BTCPayServer.HostedServices
             else
                 _themeUri = data.ThemeCssUri;
 
+            if (String.IsNullOrWhiteSpace(data.CustomThemeCssUri))
+                _customThemeUri = null;
+            else
+                _customThemeUri = data.CustomThemeCssUri;
+
             if (String.IsNullOrWhiteSpace(data.BootstrapCssUri))
                 _bootstrapUri = "/main/bootstrap/bootstrap.css";
             else
@@ -35,6 +40,7 @@ namespace BTCPayServer.HostedServices
                 _creativeStartUri = "/main/bootstrap4-creativestart/creative.css";
             else
                 _creativeStartUri = data.CreativeStartCssUri;
+
             FirstRun = data.FirstRun;
         }
 
@@ -44,6 +50,12 @@ namespace BTCPayServer.HostedServices
             get { return _themeUri; }
         }
 
+        private string _customThemeUri;
+        public string CustomThemeUri
+        {
+            get { return _customThemeUri; }
+        }
+
         private string _bootstrapUri;
         public string BootstrapUri
         {
@@ -108,6 +120,10 @@ namespace BTCPayServer.HostedServices
                 {
                     policies.Clear();
                 }
+                if (manager.CustomThemeUri != null && Uri.TryCreate(manager.CustomThemeUri, UriKind.Absolute, out uri))
+                {
+                    policies.Clear();
+                }
             }
         }
     }
diff --git a/BTCPayServer/Services/ThemesSettings.cs b/BTCPayServer/Services/ThemesSettings.cs
index 8018c3976..640278097 100644
--- a/BTCPayServer/Services/ThemesSettings.cs
+++ b/BTCPayServer/Services/ThemesSettings.cs
@@ -14,12 +14,18 @@ namespace BTCPayServer.Services
         [Display(Name = "Select Theme")]
         public string ThemeCssUri { get; set; }
 
+        [JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]
+        [MaxLength(500)]
+        [Display(Name = "Custom Theme CSS file")]
+        public string CustomThemeCssUri { get; set; }
+
         [JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]
         [MaxLength(500)]
         [Display(Name = "Custom bootstrap CSS file")]
         public string BootstrapCssUri { get; set; }
 
         [JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]
+        [Display(Name = "Custom Creative Start CSS file")]
         public string CreativeStartCssUri { get; set; }
         public bool FirstRun { get; set; }
         public override string ToString()
diff --git a/BTCPayServer/Views/Server/Theme.cshtml b/BTCPayServer/Views/Server/Theme.cshtml
index 1735a3f96..826064288 100644
--- a/BTCPayServer/Views/Server/Theme.cshtml
+++ b/BTCPayServer/Views/Server/Theme.cshtml
@@ -13,14 +13,23 @@
 <div class="row">
     <div class="col-lg-6">
         <form method="post">
-            <div class="form-group mb-5">
+            <h4>Custom theme</h4>
+            <p>Select one of our predefined themes. Optionally you can also provide a CSS file that customizes the chosen theme.</p>
+            <div class="form-group">
                 <label asp-for="ThemeCssUri"></label>
-                <select id=themes asp-for="ThemeCssUri" class="form-control">
+                <select asp-for="ThemeCssUri" class="form-control">
                     <option value="/main/themes/classic.css">Classic</option>
                     <option value="/main/themes/casa.css">Casa</option>
                 </select>
                 <span asp-validation-for="ThemeCssUri" class="text-danger"></span>
             </div>
+            <div class="form-group mb-5">
+                <label asp-for="CustomThemeCssUri"></label>
+                <a href="https://docs.btcpayserver.org/development/theme#custom-themes" target="_blank"><span class="fa fa-question-circle-o" title="More information..."></span></a>
+                <input asp-for="CustomThemeCssUri" class="form-control" />
+                <span asp-validation-for="CustomThemeCssUri" class="text-danger"></span>
+            </div>
+            <h4>Bootstrap theme</h4>
             <div class="form-group">
                 <label asp-for="BootstrapCssUri"></label>
                 <a href="https://docs.btcpayserver.org/development/theme#bootstrap-themes" target="_blank"><span class="fa fa-question-circle-o" title="More information..."></span></a>
diff --git a/BTCPayServer/Views/Shared/Header.cshtml b/BTCPayServer/Views/Shared/Header.cshtml
index a978e6e7e..07706adf0 100644
--- a/BTCPayServer/Views/Shared/Header.cshtml
+++ b/BTCPayServer/Views/Shared/Header.cshtml
@@ -7,13 +7,17 @@
 <meta name="author" content="">
 @if (themeManager.DiscourageSearchEngines)
 {
-    <META NAME="robots" CONTENT="noindex">
+<meta name="robots" content="noindex">
 }
 <title>@ViewData["Title"]</title>
 @* CSS *@
 <link href="@this.Context.Request.GetRelativePathOrAbsolute(themeManager.BootstrapUri)" rel="stylesheet" />
 <link href="@this.Context.Request.GetRelativePathOrAbsolute(themeManager.CreativeStartUri)" rel="stylesheet" />
 <link href="@this.Context.Request.GetRelativePathOrAbsolute(themeManager.ThemeUri)" rel="stylesheet" />
+@if (!String.IsNullOrWhiteSpace(themeManager.CustomThemeUri))
+{
+<link href="@this.Context.Request.GetRelativePathOrAbsolute(themeManager.CustomThemeUri)" rel="stylesheet" />
+}
 <bundle name="wwwroot/bundles/main-bundle.min.css" />
 @* JS *@
 <bundle name="wwwroot/bundles/main-bundle.min.js" />