Add settings view for webhook configuration

README.md

@@ -74,6 +74,7 @@ Supported notifications:
 * Pushover
 * Mattermost
 * Telegram
+* Webhook
 
 ### The difference between Version 3 and 2
 

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

@@ -101,6 +101,11 @@ export interface IGotifyNotificationSettings extends INotificationSettings {
     priority: number;
 }
 
+export interface IWebhookNotificationSettings extends INotificationSettings {
+    webhookUrl: string;
+    applicationToken: string;
+}
+
 export interface IMattermostNotifcationSettings extends INotificationSettings {
     webhookUrl: string;
     username: string;

src/Ombi/ClientApp/app/services/applications/tester.service.ts

@@ -12,6 +12,7 @@ import {
     IEmailNotificationSettings,
     IEmbyServer,
     IGotifyNotificationSettings,
+    IWebhookNotificationSettings,
     ILidarrSettings,
     IMattermostNotifcationSettings,
     IMobileNotificationTestSettings,
@@ -48,6 +49,10 @@ export class TesterService extends ServiceHelpers {
         return this.http.post<boolean>(`${this.url}gotify`, JSON.stringify(settings), { headers: this.headers });
     }
 
+    public webhookTest(settings: IWebhookNotificationSettings): Observable<boolean> {
+        return this.http.post<boolean>(`${this.url}webhook`, JSON.stringify(settings), { headers: this.headers });
+    }
+
     public mattermostTest(settings: IMattermostNotifcationSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}mattermost`, JSON.stringify(settings),  {headers: this.headers});
     }

src/Ombi/ClientApp/app/services/settings.service.ts

@@ -15,6 +15,7 @@ import {
     IEmailNotificationSettings,
     IEmbySettings,
     IGotifyNotificationSettings,
+    IWebhookNotificationSettings,
     IIssueSettings,
     IJobSettings,
     IJobSettingsViewModel,
@@ -192,6 +193,14 @@ export class SettingsService extends ServiceHelpers {
             .post<boolean>(`${this.url}/notifications/gotify`, JSON.stringify(settings), { headers: this.headers });
     }
 
+    public getWebhookNotificationSettings(): Observable<IWebhookNotificationSettings> {
+        return this.http.get<IWebhookNotificationSettings>(`${this.url}/notifications/webhook`, { headers: this.headers });
+    }
+    public saveWebhookNotificationSettings(settings: IWebhookNotificationSettings): Observable<boolean> {
+        return this.http
+            .post<boolean>(`${this.url}/notifications/webhook`, JSON.stringify(settings), { headers: this.headers });
+    }
+
     public getSlackNotificationSettings(): Observable<ISlackNotificationSettings> {
         return this.http.get<ISlackNotificationSettings>(`${this.url}/notifications/slack`, {headers: this.headers});
     }

src/Ombi/ClientApp/app/settings/notifications/webhook.component.html

@@ -0,0 +1,47 @@
+
+<settings-menu></settings-menu>
+<div *ngIf="form">
+    <fieldset>
+        <legend>Webhook Notifications</legend>
+        <div class="col-md-6">
+            <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
+
+                <div class="form-group">
+                    <div class="checkbox">
+                        <input type="checkbox" id="enable" formControlName="enabled">
+                        <label for="enable">Enabled</label>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="baseUrl" class="control-label">Base URL</label>
+
+                    <input type="text" class="form-control form-control-custom " id="webhookUrl" name="webhookUrl" [ngClass]="{'form-error': form.get('webhookUrl').hasError('required')}" formControlName="webhookUrl" pTooltip="Enter the URL of your webhook server.">
+                    <small *ngIf="form.get('webhookUrl').hasError('required')" class="error-text">The Webhook URL is required</small>
+                </div>
+
+                <div class="form-group">
+                    <label for="applicationToken" class="control-label">Application Token</label>
+
+                    <input type="text" class="form-control form-control-custom " id="applicationToken" name="applicationToken" [ngClass]="{'form-error': form.get('applicationToken').hasError('required')}" formControlName="applicationToken" pTooltip="Enter your Application token from Webhook.">
+                    <small *ngIf="form.get('applicationToken').hasError('required')" class="error-text">The Application Token is required</small>
+                </div>
+
+                <div class="form-group">
+                    <div>
+                        <button [disabled]="form.invalid" type="button" (click)="test(form)" class="btn btn-primary-outline">
+                            Test
+                            <div id="spinner"></div>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <div>
+                        <button [disabled]="form.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </fieldset>
+</div>

src/Ombi/ClientApp/app/settings/notifications/webhook.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+
+import { IWebhookNotificationSettings, INotificationTemplates, NotificationType } from "../../interfaces";
+import { TesterService } from "../../services";
+import { NotificationService } from "../../services";
+import { SettingsService } from "../../services";
+
+@Component({
+    templateUrl: "./webhook.component.html",
+})
+export class WebhookComponent implements OnInit {
+    public NotificationType = NotificationType;
+    public templates: INotificationTemplates[];
+    public form: FormGroup;
+
+    constructor(private settingsService: SettingsService,
+                private notificationService: NotificationService,
+                private fb: FormBuilder,
+                private testerService: TesterService) { }
+
+    public ngOnInit() {
+        this.settingsService.getWebhookNotificationSettings().subscribe(x => {
+            this.form = this.fb.group({
+                enabled: [x.enabled],
+                webhookUrl: [x.webhookUrl, [Validators.required]],
+                applicationToken: [x.applicationToken],
+            });
+        });
+    }
+
+    public onSubmit(form: FormGroup) {
+        if (form.invalid) {
+            this.notificationService.error("Please check your entered values");
+            return;
+        }
+
+        const settings = <IWebhookNotificationSettings> form.value;
+
+        this.settingsService.saveWebhookNotificationSettings(settings).subscribe(x => {
+            if (x) {
+                this.notificationService.success("Successfully saved the Webhook settings");
+            } else {
+                this.notificationService.success("There was an error when saving the Webhook settings");
+            }
+        });
+
+    }
+
+    public test(form: FormGroup) {
+        if (form.invalid) {
+            this.notificationService.error("Please check your entered values");
+            return;
+        }
+
+        this.testerService.webhookTest(form.value).subscribe(x => {
+            if (x) {
+                this.notificationService.success("Successfully sent a Webhook message");
+            } else {
+                this.notificationService.error("There was an error when sending the Webhook message. Please check your settings");
+            }
+        });
+    }
+}

src/Ombi/ClientApp/app/settings/settings.module.ts

@@ -29,6 +29,7 @@ import { MassEmailComponent } from "./massemail/massemail.component";
 import { DiscordComponent } from "./notifications/discord.component";
 import { EmailNotificationComponent } from "./notifications/emailnotification.component";
 import { GotifyComponent } from "./notifications/gotify.component";
+import { WebhookComponent } from "./notifications/webhook.component";
 import { MattermostComponent } from "./notifications/mattermost.component";
 import { MobileComponent } from "./notifications/mobile.component";
 import { NewsletterComponent } from "./notifications/newsletter.component";
@@ -67,6 +68,7 @@ const routes: Routes = [
     { path: "Pushover", component: PushoverComponent, canActivate: [AuthGuard] },
     { path: "Pushbullet", component: PushbulletComponent, canActivate: [AuthGuard] },
     { path: "Gotify", component: GotifyComponent, canActivate: [AuthGuard] },
+    { path: "Webhook", component: WebhookComponent, canActivate: [AuthGuard] },
     { path: "Mattermost", component: MattermostComponent, canActivate: [AuthGuard] },
     { path: "UserManagement", component: UserManagementComponent, canActivate: [AuthGuard] },
     { path: "Update", component: UpdateComponent, canActivate: [AuthGuard] },
@@ -124,6 +126,7 @@ const routes: Routes = [
         MattermostComponent,
         PushbulletComponent,
         GotifyComponent,
+        WebhookComponent,
         UserManagementComponent,
         UpdateComponent,
         AboutComponent,

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

@@ -76,6 +76,7 @@
             <li [routerLinkActive]="['active']"><a [routerLink]="['/Settings/Mattermost']">Mattermost</a></li>
             <li [routerLinkActive]="['active']"><a [routerLink]="['/Settings/Telegram']">Telegram</a></li>
             <li [routerLinkActive]="['active']"><a [routerLink]="['/Settings/Gotify']">Gotify</a></li>
+            <li [routerLinkActive]="['active']"><a [routerLink]="['/Settings/Webhook']">Webhook</a></li>
         </ul>
     </li>