Add the configuration screen for Imgur

web/app/admin/neb/config/imgur/imgur.component.html

@@ -0,0 +1,32 @@
+<div class="dialog">
+    <div class="dialog-header">
+        <h4>Imgur Configuration</h4>
+    </div>
+    <div class="dialog-content" *ngIf="isLoading">
+        <my-spinner></my-spinner>
+    </div>
+    <div class="dialog-content" *ngIf="!isLoading">
+        <label class="label-block">
+            Client ID
+            <span class="text-muted ">The client ID of your <a href="https://apidocs.imgur.com/" target="_blank">Imgur Application</a>.</span>
+            <input type="text" class="form-control"
+                   placeholder="your_client_id"
+                   [(ngModel)]="config.client_id" [disabled]="isUpdating"/>
+        </label>
+        <label class="label-block">
+            Client Secret
+            <span class="text-muted ">The client secret of your <a href="https://apidocs.imgur.com/" target="_blank">Imgur Application</a>.</span>
+            <input type="text" class="form-control"
+                   placeholder="your_client_secret"
+                   [(ngModel)]="config.client_secret" [disabled]="isUpdating"/>
+        </label>
+    </div>
+    <div class="dialog-footer" *ngIf="!isLoading">
+        <button type="button" (click)="save()" title="save" class="btn btn-primary btn-sm">
+            <i class="far fa-save"></i> Save
+        </button>
+        <button type="button" (click)="dialog.close()" title="close" class="btn btn-secondary btn-sm">
+            <i class="far fa-times-circle"></i> Cancel
+        </button>
+    </div>
+</div>

web/app/admin/neb/config/imgur/imgur.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from "@angular/core";
+import { ToasterService } from "angular2-toaster";
+import { DialogRef, ModalComponent } from "ngx-modialog";
+import { NebBotConfigurationDialogContext } from "../config-context";
+import { AdminNebApiService } from "../../../../shared/services/admin/admin-neb-api.service";
+import { FE_NebConfiguration } from "../../../../shared/models/admin-responses";
+import { FE_Integration } from "../../../../shared/models/integration";
+
+interface ImgurConfig {
+    client_id: string;
+    client_secret: string;
+}
+
+@Component({
+    templateUrl: "./imgur.component.html",
+    styleUrls: ["./imgur.component.scss", "../config-dialog.scss"],
+})
+export class AdminNebImgurConfigComponent implements ModalComponent<NebBotConfigurationDialogContext>, OnInit {
+
+    public isLoading = true;
+    public isUpdating = false;
+    public config: ImgurConfig;
+    public integration: FE_Integration;
+    public neb: FE_NebConfiguration;
+
+    constructor(public dialog: DialogRef<NebBotConfigurationDialogContext>,
+                private adminNebApi: AdminNebApiService,
+                private toaster: ToasterService) {
+        this.neb = dialog.context.neb;
+        this.integration = dialog.context.integration;
+    }
+
+    public ngOnInit() {
+        this.adminNebApi.getIntegrationConfiguration(this.neb.id, this.integration.type).then(config => {
+            this.config = config;
+            this.isLoading = false;
+        }).catch(err => {
+            console.error(err);
+            this.toaster.pop("error", "Error loading configuration");
+        });
+    }
+
+    public save() {
+        this.isUpdating = true;
+        this.adminNebApi.setIntegrationConfiguration(this.neb.id, this.integration.type, this.config).then(() => {
+            this.toaster.pop("success", "Configuration updated");
+            this.dialog.close();
+        }).catch(err => {
+            this.isUpdating = false;
+            console.error(err);
+            this.toaster.pop("error", "Error updating integration");
+        });
+    }
+}

web/app/admin/neb/edit/edit.component.ts

@@ -11,6 +11,7 @@ import { NebBotConfigurationDialogContext } from "../config/config-context";
 import { ContainerContent } from "ngx-modialog/src/models/tokens";
 import { AdminNebGuggyConfigComponent } from "../config/guggy/guggy.component";
 import { AdminNebGoogleConfigComponent } from "../config/google/google.component";
+import { AdminNebImgurConfigComponent } from "../config/imgur/imgur.component";
 
 
 @Component({
@@ -89,6 +90,7 @@ export class AdminEditNebComponent implements OnInit, OnDestroy {
         if (bot.type === "giphy") component = AdminNebGiphyConfigComponent;
         if (bot.type === "guggy") component = AdminNebGuggyConfigComponent;
         if (bot.type === "google") component = AdminNebGoogleConfigComponent;
+        if (bot.type === "imgur") component = AdminNebImgurConfigComponent;
 
         if (!component) throw new Error("No config component for " + bot.type);
         this.modal.open(component, overlayConfigFactory({

web/app/app.module.ts

@@ -57,6 +57,7 @@ import { AdminNebAppserviceConfigComponent } from "./admin/neb/appservice-config
 import { AdminNebGiphyConfigComponent } from "./admin/neb/config/giphy/giphy.component";
 import { AdminNebGuggyConfigComponent } from "./admin/neb/config/guggy/guggy.component";
 import { AdminNebGoogleConfigComponent } from "./admin/neb/config/google/google.component";
+import { AdminNebImgurConfigComponent } from "./admin/neb/config/imgur/imgur.component";
 
 @NgModule({
     imports: [
@@ -108,6 +109,7 @@ import { AdminNebGoogleConfigComponent } from "./admin/neb/config/google/google.
         AdminNebGiphyConfigComponent,
         AdminNebGuggyConfigComponent,
         AdminNebGoogleConfigComponent,
+        AdminNebImgurConfigComponent,
 
         // Vendor
     ],
@@ -134,6 +136,7 @@ import { AdminNebGoogleConfigComponent } from "./admin/neb/config/google/google.
         AdminNebGiphyConfigComponent,
         AdminNebGuggyConfigComponent,
         AdminNebGoogleConfigComponent,
+        AdminNebImgurConfigComponent,
     ]
 })
 export class AppModule {