Added a page where the admin can write/style/basically do whatever they want with e.g. FAQ for the users #2715 This needs to be enabled in the Customization Settings and then it's all configured on the page.

src/Ombi.Settings/Settings/Models/CustomPageSettings.cs

@@ -4,5 +4,6 @@
     {
         public string Title { get; set; }
         public string Html { get; set; }
+        public string FontAwesomeIcon { get; set; }
     }
 }

src/Ombi/ClientApp/app/app.component.html

@@ -34,6 +34,14 @@
                             <i class="fa fa-th-list"></i> {{ 'NavigationBar.Requests' | translate }}</a>
                     </li>
                 </ul>
+                <div *ngIf="customizationSettings && customizationSettings.useCustomPage && customPageSettings">
+                        <ul class="nav navbar-nav">
+                            <li id="RecentlyAdded" [routerLinkActive]="['active']">
+                                <a [routerLink]="['/Custom']">
+                                    <i class="fa {{customPageSettings.fontAwesomeIcon}}"></i> {{customPageSettings.title}}</a>
+                            </li>
+                        </ul>
+                    </div>
                 <div *ngIf="customizationSettings">
                     <ul *ngIf="customizationSettings.recentlyAddedPage" class="nav navbar-nav">
                         <li id="RecentlyAdded" [routerLinkActive]="['active']">

src/Ombi/ClientApp/app/app.component.ts

@@ -7,7 +7,7 @@ import { ILocalUser } from "./auth/IUserLogin";
 import { IdentityService, NotificationService } from "./services";
 import { JobService, SettingsService } from "./services";
 
-import { ICustomizationSettings } from "./interfaces";
+import { ICustomizationSettings, ICustomPage } from "./interfaces";
 
 @Component({
     selector: "ombi",
@@ -17,6 +17,7 @@ import { ICustomizationSettings } from "./interfaces";
 export class AppComponent implements OnInit {
 
     public customizationSettings: ICustomizationSettings;
+    public customPageSettings: ICustomPage;
     public issuesEnabled = false;
     public user: ILocalUser;
     public showNav: boolean;
@@ -53,7 +54,18 @@ export class AppComponent implements OnInit {
     public ngOnInit() {
         this.user = this.authService.claims();
 
-        this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
+        this.settingsService.getCustomization().subscribe(x => {
+            this.customizationSettings = x;
+            if(this.customizationSettings.useCustomPage) {
+                this.settingsService.getCustomPage().subscribe(c => {
+                    this.customPageSettings = c;
+                    if(!this.customPageSettings.title) {
+                        this.customPageSettings.title = "Custom Page";
+                        this.customPageSettings.fontAwesomeIcon = "fa-check";
+                    }
+                });
+            }
+        });
         this.settingsService.issueEnabled().subscribe(x => this.issuesEnabled = x);
         this.settingsService.voteEnabled().subscribe(x => this.voteEnabled =x);
 

src/Ombi/ClientApp/app/custompage/custompage.component.html

@@ -11,6 +11,15 @@
                         <input type="text" class="form-control form-control-custom " id="Ip" name="Ip" formControlName="title"  [ngClass]="{'form-error': form.get('title').hasError('required')}">
                 </div>
 
+                <div class="form-group">
+                        <label for="Ip" class="control-label">Font Awesome Icon
+                            
+                            <i *ngIf="form.get('fontAwesomeIcon').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Font Awesome Icon is required"></i>
+                        </label>
+    
+                            <input type="text" class="form-control form-control-custom " id="fontAwesomeIcon" name="fontAwesomeIcon" formControlName="fontAwesomeIcon"  [ngClass]="{'form-error': form.get('fontAwesomeIcon').hasError('required')}">
+                    </div>
+
         <app-ngx-editor [placeholder]="'Enter text here...'" [minHeight]="100" formControlName="html"></app-ngx-editor>
         <button type="submit" class="btn btn-primary-outline">Save</button>
         <hr />

src/Ombi/ClientApp/app/custompage/custompage.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, SecurityContext } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { DomSanitizer } from "@angular/platform-browser";
 import { AuthService } from "../auth/auth.service";
 import { NotificationService, SettingsService } from "../services";
 
@@ -14,16 +15,18 @@ export class CustomPageComponent implements OnInit {
     public isAdmin: boolean;
 
     constructor(private auth: AuthService, private settings: SettingsService, private fb: FormBuilder,
-                private notificationService: NotificationService) {
+                private notificationService: NotificationService, 
+                private sanitizer: DomSanitizer) {
     }
 
     public ngOnInit() {
         this.settings.getCustomPage().subscribe(x => {
-
+            x.html = this.sanitizer.sanitize(SecurityContext.HTML, this.sanitizer.bypassSecurityTrustHtml(x.html));
             this.form = this.fb.group({
                 enabled: [x.enabled],
                 title: [x.title, [Validators.required]],
                 html: [x.html, [Validators.required]],
+                fontAwesomeIcon: [x.fontAwesomeIcon, [Validators.required]],
             });
         });
         this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser");

src/Ombi/ClientApp/app/interfaces/ISettings.ts

@@ -161,8 +161,9 @@ export interface IAuthenticationSettings extends ISettings {
 
 export interface ICustomPage extends ISettings {
   enabled: boolean;
+  fontAwesomeIcon: string;
   title: string;
-  html: string;
+  html: any;
 }
 
 export interface IUserManagementSettings extends ISettings {

src/Ombi/ClientApp/app/settings/customization/customization.component.html

@@ -21,8 +21,8 @@
         <div class="form-group">
             <label for="applicationurl" class="control-label">Application URL</label>
             <div>
-                <input type="text" [(ngModel)]="settings.applicationUrl" class="form-control form-control-custom " id="applicationurl" name="applicationurl"
+                <input type="text" [(ngModel)]="settings.applicationUrl" class="form-control form-control-custom " id="applicationurl"
-                    placeholder="http://ombi.io/" value="{{settings.applicationUrl}}">
+                    name="applicationurl" placeholder="http://ombi.io/" value="{{settings.applicationUrl}}">
             </div>
         </div>
 
@@ -36,8 +36,8 @@
         <div class="form-group">
             <label for="logo" class="control-label">Custom Logo</label>
             <div>
-                <input type="text" [(ngModel)]="settings.logo" class="form-control form-control-custom " id="logo" name="logo" value="{{settings.logo}}"
+                <input type="text" [(ngModel)]="settings.logo" class="form-control form-control-custom " id="logo" name="logo"
-                    tooltipPosition="top" pTooltip="Use a URL e.g. www.google.com/logo.png">
+                    value="{{settings.logo}}" tooltipPosition="top" pTooltip="Use a URL e.g. www.google.com/logo.png">
             </div>
         </div>
         <div *ngIf="settings.logo" class="form-group">
@@ -50,14 +50,16 @@
         <div class="form-group">
             <div class="checkbox">
                 <input type="checkbox" id="enableCustomDonations" name="enableCustomDonations" [(ngModel)]="settings.enableCustomDonations">
-                <label for="enableCustomDonations" tooltipPosition="top" pTooltip="Enable to show a custom donation link in the navigation bar">Enable custom donation link</label>
+                <label for="enableCustomDonations" tooltipPosition="top" pTooltip="Enable to show a custom donation link in the navigation bar">Enable
+                    custom donation link</label>
             </div>
         </div>
 
         <div class="form-group" *ngIf="settings.enableCustomDonations">
             <label for="customDonation" class="control-label">Custom Donation URL</label>
             <div>
-                <input [disabled]="!settings.enableCustomDonations" type="text" [(ngModel)]="settings.customDonationUrl" class="form-control form-control-custom " name="customDonation" value="{{settings.customDonationUrl}}"
+                <input [disabled]="!settings.enableCustomDonations" type="text" [(ngModel)]="settings.customDonationUrl"
+                    class="form-control form-control-custom " name="customDonation" value="{{settings.customDonationUrl}}"
                     tooltipPosition="top" pTooltip="A link to a Paypal address, or your custom donation url.">
             </div>
         </div>
@@ -65,15 +67,17 @@
         <div class="form-group" *ngIf="settings.enableCustomDonations">
             <label for="customDonationMessage" class="control-label">Donation Button Message</label>
             <div>
-                <input [disabled]="!settings.enableCustomDonations" type="text" [(ngModel)]="settings.customDonationMessage" class="form-control form-control-custom " name="customDonationMessage" value="{{settings.customDonationMessage}}"
+                <input [disabled]="!settings.enableCustomDonations" type="text" [(ngModel)]="settings.customDonationMessage"
+                    class="form-control form-control-custom " name="customDonationMessage" value="{{settings.customDonationMessage}}"
                     tooltipPosition="top" pTooltip="Set a custom message to be displayed in the navigation bar.">
             </div>
         </div>
-        <div class="form-group" *ngIf="settings.useCustomPage">
+        <div class="form-group">
-                <label for="customPage" class="control-label">Use Custom Page</label>
+            <div class="checkbox">
-                <div>
+                <input type="checkbox" id="useCustomPage" name="useCustomPage" [(ngModel)]="settings.useCustomPage">
-                    <input [disabled]="!settings.useCustomPage" type="text" [(ngModel)]="settings.useCustomPage" class="form-control form-control-custom " name="customPage" value="{{settings.useCustomPage}}"
+                <label for="useCustomPage" tooltipPosition="top" pTooltip="Enabled a custom page where you can fully edit">Use
-                        tooltipPosition="top" pTooltip="Enabled a custom page for you to fully edit and customize.">
+                    Custom Page</label>
+
             </div>
         </div>
 
@@ -92,9 +96,8 @@
                 <label for="customCss" class="control-label">Custom CSS</label>
             </div>
             <div class="form-group language-css" pCode>
-                <textarea rows="25" type="text" 
+                <textarea rows="25" type="text" pTooltip="Enter your custom styles here" tooltipPosition="top" class="form-control-custom form-control "
-                pTooltip="Enter your custom styles here" tooltipPosition="top"
+                    id="themeContent" name="themeContent" [(ngModel)]="settings.customCss"> {{settings.customCss}} </textarea>
-                class="form-control-custom form-control " id="themeContent" name="themeContent" [(ngModel)]="settings.customCss"> {{settings.customCss}} </textarea>
             </div>
         </div>
     </div>

src/Ombi/Ombi.csproj

@@ -14,12 +14,12 @@
     <ServerGarbageCollection>false</ServerGarbageCollection>
   </PropertyGroup>
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
-    <DocumentationFile>bin\Debug\netcoreapp2.0\Swagger.xml</DocumentationFile>
+    <DocumentationFile>bin\Debug\netcoreapp2.2\Swagger.xml</DocumentationFile>
     <NoWarn>1701;1702;1705;1591;</NoWarn>
   </PropertyGroup>
 
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
-    <DocumentationFile>bin\Release\netcoreapp2.0\Swagger.xml</DocumentationFile>
+    <DocumentationFile>bin\Release\netcoreapp2.2\Swagger.xml</DocumentationFile>
     <NoWarn>1701;1702;1705;1591;</NoWarn>
     <DefineConstants>TRACE;RELEASE;NETCOREAPP2_0</DefineConstants>
   </PropertyGroup>
@@ -71,7 +71,7 @@
     <PackageReference Include="Hangfire.RecurringJobExtensions" Version="1.1.6" />
     <PackageReference Include="Hangfire.SQLite" Version="1.4.2" />
 
-    <PackageReference Include="Microsoft.AspNetCore.App" Version="2.2.1" />
+    <PackageReference Include="Microsoft.AspNetCore.App" />
 
     <PackageReference Include="Microsoft.AspNetCore.Mvc.Api.Analyzers" Version="2.2.0" />
     <PackageReference Include="Microsoft.Extensions.Configuration.CommandLine" Version="2.2.0" />