Add the configuration screen for Google

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

@@ -0,0 +1,32 @@
+<div class="dialog">
+    <div class="dialog-header">
+        <h4>Google Configuration</h4>
+    </div>
+    <div class="dialog-content" *ngIf="isLoading">
+        <my-spinner></my-spinner>
+    </div>
+    <div class="dialog-content" *ngIf="!isLoading">
+        <label class="label-block">
+            Api Key
+            <span class="text-muted ">The API key for your Google Application.</span>
+            <input type="text" class="form-control"
+                   placeholder="your_api_key_here"
+                   [(ngModel)]="config.api_key" [disabled]="isUpdating"/>
+        </label>
+        <label class="label-block">
+            Search Engine ID
+            <span class="text-muted ">The search engine ID</span>
+            <input type="text" class="form-control"
+                   placeholder="your_cx_id_here"
+                   [(ngModel)]="config.cx" [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/google/google.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 GoogleConfig {
+    api_key: string;
+    cx: string; // search engine id
+}
+
+@Component({
+    templateUrl: "./google.component.html",
+    styleUrls: ["./google.component.scss", "../config-dialog.scss"],
+})
+export class AdminNebGoogleConfigComponent implements ModalComponent<NebBotConfigurationDialogContext>, OnInit {
+
+    public isLoading = true;
+    public isUpdating = false;
+    public config: GoogleConfig;
+    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

@@ -10,6 +10,7 @@ import { AdminNebGiphyConfigComponent } from "../config/giphy/giphy.component";
 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";
 
 
 @Component({
@@ -87,7 +88,9 @@ 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 (!component) throw new Error("No config component for " + bot.type);
         this.modal.open(component, overlayConfigFactory({
             neb: this.nebConfig,
             integration: bot,

web/app/app.module.ts

@@ -56,6 +56,7 @@ import { AdminAddSelfhostedNebComponent } from "./admin/neb/add-selfhosted/add-s
 import { AdminNebAppserviceConfigComponent } from "./admin/neb/appservice-config/appservice-config.component";
 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";
 
 @NgModule({
     imports: [
@@ -106,6 +107,7 @@ import { AdminNebGuggyConfigComponent } from "./admin/neb/config/guggy/guggy.com
         AdminNebAppserviceConfigComponent,
         AdminNebGiphyConfigComponent,
         AdminNebGuggyConfigComponent,
+        AdminNebGoogleConfigComponent,
 
         // Vendor
     ],
@@ -131,6 +133,7 @@ import { AdminNebGuggyConfigComponent } from "./admin/neb/config/guggy/guggy.com
         AdminNebAppserviceConfigComponent,
         AdminNebGiphyConfigComponent,
         AdminNebGuggyConfigComponent,
+        AdminNebGoogleConfigComponent,
     ]
 })
 export class AppModule {