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

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

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()

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>

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" />