Features/theming (#725)

* Integration of configurable AzureAd External Provider

* Documentation Updated for AzureAD Provider

* Configuration value added

* Integrate gulp task for theme copy

* Integration of bootswatch themes

* Configuration for bootswatch themes + customcsstheme

* replication of same system of STS

* Documentation for theming

Co-authored-by: Jan Škoruba <jan@skoruba.com>

README.md

@@ -317,6 +317,30 @@ services.AddAuditLogging(options => { options.Source = auditLoggingConfiguration
             services.AddTransient<IAuditLogService, AuditLogService<TAuditLog>>();
 ```
 
+### Admin Configuration
+
+Admin and STS can be customized without editing code in `appsettings.json` under AdminConfiguration section
+
+#### Themes
+
+Ui can be customized using themes integrated from ("bootswatch")[https://bootswatch.com/]
+By default, configuration value is null to use default theme. if you want to use a theme, just fill the lowercase theme name as configuration value of `Theme` key.
+
+You can also use your custom theme by integrating it in your project or hosting css on your place to pass the url in `CustomThemeCss` key. (Note that custom theme override standard theme)
+
+- Important Note: Theme can use external ressources which caused errors due to CSP. If you get errors, please make sure that you configured correctly CSP section in your `appsettings.json` with thrusted domains for ressources.
+
+```json
+  "AdminConfiguration": {
+    "PageTitle": "Skoruba IdentityServer4",
+    "HomePageLogoUri": "~/images/skoruba-icon.png",
+    "FaviconUri": "~/favicon.ico",
+    "Theme": "united",
+    "CustomThemeCss": null,
+    ...
+  },
+```
+
 ### Audit Logging Configuration
 
 In `appsettings.json` is following configuration:

src/Skoruba.IdentityServer4.Admin/Configuration/AdminConfiguration.cs

@@ -17,5 +17,9 @@ public class AdminConfiguration
         public string ClientSecret { get; set; }
         public string OidcResponseType { get; set; }
         public bool HideUIForMSSqlErrorLogging { get; set; }
+        public string Theme { get; set; }
+
+        public string CustomThemeCss { get; set; }
+
     }
 }

src/Skoruba.IdentityServer4.Admin/Views/Shared/_Layout.cshtml

@@ -21,6 +21,15 @@
         <link href="~/dist/css/bundle.min.css" asp-append-version="true" rel="stylesheet" />
         <link href="~/dist/css/web.min.css" asp-append-version="true" rel="stylesheet" />
     </environment>
+    @if (!string.IsNullOrEmpty(RootConfiguration.AdminConfiguration.Theme))
+    {
+        <link href="@string.Concat("~/dist/css/themes/",RootConfiguration.AdminConfiguration.Theme,".min.css")" asp-append-version="true" rel="stylesheet" />
+    }
+
+    @if (!string.IsNullOrEmpty(RootConfiguration.AdminConfiguration.CustomThemeCss))
+    {
+        <link href="@RootConfiguration.AdminConfiguration.CustomThemeCss" asp-append-version="true" rel="stylesheet" />
+    }
 
     @await RenderSectionAsync("styles", required: false)
 </head>

src/Skoruba.IdentityServer4.Admin/gulpfile.js

@@ -8,6 +8,7 @@ var del = require('del');
 var distFolder = './wwwroot/dist/';
 var jsFolder = `${distFolder}js/`;
 var cssFolder = `${distFolder}css/`;
+var cssThemeFolder = `${distFolder}css/themes/`;
 
 function processClean() {
     return del(`${distFolder}**`, { force: true });
@@ -92,7 +93,13 @@ function processStyles() {
         .pipe(gulp.dest(cssFolder));
 }
 
-var buildStyles = gulp.series(processStyles, processSass, processSassMin);
+function processTheme() {
+    return gulp
+        .src('Styles/themes/**')
+        .pipe(gulp.dest(cssThemeFolder));
+}
+
+var buildStyles = gulp.series(processStyles, processTheme, processSass, processSassMin);
 var build = gulp.parallel(buildStyles, processScripts);
 
 gulp.task('clean', processClean);

src/Skoruba.IdentityServer4.STS.Identity/Configuration/AdminConfiguration.cs

@@ -7,5 +7,9 @@ public class AdminConfiguration
         public string FaviconUri { get; set; }
         public string IdentityAdminBaseUrl { get; set; }
         public string AdministrationRole { get; set; }
+
+        public string Theme { get; set; }
+
+        public string CustomThemeCss { get; set; }
     }
 }

src/Skoruba.IdentityServer4.STS.Identity/Views/Shared/_Layout.cshtml

@@ -36,6 +36,16 @@
         <link href="~/dist/css/web.min.css" asp-append-version="true" rel="stylesheet" />
     </environment>
 
+    @if (!string.IsNullOrEmpty(RootConfiguration.AdminConfiguration.Theme))
+    {
+        <link href="@string.Concat("~/dist/css/themes/",RootConfiguration.AdminConfiguration.Theme,".min.css")" asp-append-version="true" rel="stylesheet" />
+    }
+
+    @if (!string.IsNullOrEmpty(RootConfiguration.AdminConfiguration.CustomThemeCss))
+    {
+        <link href="@RootConfiguration.AdminConfiguration.CustomThemeCss" asp-append-version="true" rel="stylesheet" />
+    }
+
     @await RenderSectionAsync("styles", required: false)
 </head>
 <body>

src/Skoruba.IdentityServer4.STS.Identity/appsettings.json

@@ -28,13 +28,14 @@
 
     "UseValidationCertificateThumbprint": false,
     "ValidationCertificateThumbprint": "",
-
+    
     "UseSigningCertificateForAzureKeyVault": false,
     "UseValidationCertificateForAzureKeyVault": false
   },
   "RegisterConfiguration": {
     "Enabled": true
   },
+
   "ExternalProvidersConfiguration": {
     "UseGitHubProvider": false,
     "GitHubClientId": "",
@@ -64,6 +65,8 @@
     "PageTitle": "Skoruba IdentityServer4",
     "HomePageLogoUri": "~/images/skoruba-icon.png",
     "FaviconUri": "~/favicon.ico",
+    "Theme": null,
+    "CustomThemeCss": null,
     "IdentityAdminBaseUrl": "https://localhost:44303",
     "AdministrationRole": "SkorubaIdentityAdminAdministrator"
   },
@@ -91,12 +94,7 @@
       "RequireConfirmedAccount": false
     }
   },
-  "User": {
-    "RequireUniqueEmail": true
-  },
-  "SignIn": {
-    "RequireConfirmedAccount": false
-  },
+
   "DataProtectionConfiguration": {
     "ProtectKeysWithAzureKeyVault": false
   },

src/Skoruba.IdentityServer4.STS.Identity/gulpfile.js

@@ -8,6 +8,7 @@ var del = require('del');
 var distFolder = './wwwroot/dist/';
 var jsFolder = `${distFolder}js/`;
 var cssFolder = `${distFolder}css/`;
+var cssThemeFolder = `${distFolder}css/themes/`;
 
 function processClean() {
 	return del(`${distFolder}**`, { force: true });
@@ -70,7 +71,13 @@ function processStyles() {
 		.pipe(gulp.dest(cssFolder));
 }
 
-var buildStyles = gulp.series(processStyles, processSass, processSassMin);
+function processTheme() {
+    return gulp
+        .src('Styles/themes/**')
+		.pipe(gulp.dest(cssThemeFolder));
+}
+
+var buildStyles = gulp.series(processStyles, processTheme, processSass, processSassMin);
 var build = gulp.parallel(buildStyles, processScripts);
 
 gulp.task('clean', processClean);