Add admin section for Gitter bridge configuration

src/api/admin/AdminGitterService.ts

@@ -0,0 +1,114 @@
+import { GET, Path, PathParam, POST, QueryParam } from "typescript-rest";
+import { AdminService } from "./AdminService";
+import { Cache, CACHE_GITTER_BRIDGE, CACHE_INTEGRATIONS } from "../../MemoryCache";
+import { LogService } from "matrix-js-snippets";
+import { ApiError } from "../ApiError";
+import GitterBridgeRecord from "../../db/models/GitterBridgeRecord";
+import Upstream from "../../db/models/Upstream";
+
+interface CreateWithUpstream {
+    upstreamId: number;
+}
+
+interface CreateSelfhosted {
+    provisionUrl: string;
+}
+
+interface BridgeResponse {
+    id: number;
+    upstreamId?: number;
+    provisionUrl?: string;
+    isEnabled: boolean;
+}
+
+/**
+ * Administrative API for configuring Gitter bridge instances.
+ */
+@Path("/api/v1/dimension/admin/gitter")
+export class AdminGitterService {
+
+    @GET
+    @Path("all")
+    public async getBridges(@QueryParam("scalar_token") scalarToken: string): Promise<BridgeResponse[]> {
+        await AdminService.validateAndGetAdminTokenOwner(scalarToken);
+
+        const bridges = await GitterBridgeRecord.findAll();
+        return Promise.all(bridges.map(async b => {
+            return {
+                id: b.id,
+                upstreamId: b.upstreamId,
+                provisionUrl: b.provisionUrl,
+                isEnabled: b.isEnabled,
+            };
+        }));
+    }
+
+    @GET
+    @Path(":bridgeId")
+    public async getBridge(@QueryParam("scalar_token") scalarToken: string, @PathParam("bridgeId") bridgeId: number): Promise<BridgeResponse> {
+        await AdminService.validateAndGetAdminTokenOwner(scalarToken);
+
+        const telegramBridge = await GitterBridgeRecord.findByPrimary(bridgeId);
+        if (!telegramBridge) throw new ApiError(404, "Gitter Bridge not found");
+
+        return {
+            id: telegramBridge.id,
+            upstreamId: telegramBridge.upstreamId,
+            provisionUrl: telegramBridge.provisionUrl,
+            isEnabled: telegramBridge.isEnabled,
+        };
+    }
+
+    @POST
+    @Path(":bridgeId")
+    public async updateBridge(@QueryParam("scalar_token") scalarToken: string, @PathParam("bridgeId") bridgeId: number, request: CreateSelfhosted): Promise<BridgeResponse> {
+        const userId = await AdminService.validateAndGetAdminTokenOwner(scalarToken);
+
+        const bridge = await GitterBridgeRecord.findByPrimary(bridgeId);
+        if (!bridge) throw new ApiError(404, "Bridge not found");
+
+        bridge.provisionUrl = request.provisionUrl;
+        await bridge.save();
+
+        LogService.info("AdminGitterService", userId + " updated Gitter Bridge " + bridge.id);
+
+        Cache.for(CACHE_GITTER_BRIDGE).clear();
+        Cache.for(CACHE_INTEGRATIONS).clear();
+        return this.getBridge(scalarToken, bridge.id);
+    }
+
+    @POST
+    @Path("new/upstream")
+    public async newConfigForUpstream(@QueryParam("scalar_token") scalarToken: string, request: CreateWithUpstream): Promise<BridgeResponse> {
+        const userId = await AdminService.validateAndGetAdminTokenOwner(scalarToken);
+
+        const upstream = await Upstream.findByPrimary(request.upstreamId);
+        if (!upstream) throw new ApiError(400, "Upstream not found");
+
+        const bridge = await GitterBridgeRecord.create({
+            upstreamId: request.upstreamId,
+            isEnabled: true,
+        });
+        LogService.info("AdminGitterService", userId + " created a new Gitter Bridge from upstream " + request.upstreamId);
+
+        Cache.for(CACHE_GITTER_BRIDGE).clear();
+        Cache.for(CACHE_INTEGRATIONS).clear();
+        return this.getBridge(scalarToken, bridge.id);
+    }
+
+    @POST
+    @Path("new/selfhosted")
+    public async newSelfhosted(@QueryParam("scalar_token") scalarToken: string, request: CreateSelfhosted): Promise<BridgeResponse> {
+        const userId = await AdminService.validateAndGetAdminTokenOwner(scalarToken);
+
+        const bridge = await GitterBridgeRecord.create({
+            provisionUrl: request.provisionUrl,
+            isEnabled: true,
+        });
+        LogService.info("AdminGitterService", userId + " created a new Gitter Bridge with provisioning URL " + request.provisionUrl);
+
+        Cache.for(CACHE_GITTER_BRIDGE).clear();
+        Cache.for(CACHE_INTEGRATIONS).clear();
+        return this.getBridge(scalarToken, bridge.id);
+    }
+}

web/app/admin/bridges/gitter/gitter.component.html

@@ -0,0 +1,45 @@
+<div *ngIf="isLoading">
+    <my-spinner></my-spinner>
+</div>
+<div *ngIf="!isLoading">
+    <my-ibox title="Gitter Bridge Configurations">
+        <div class="my-ibox-content">
+            <p>
+                <a href="https://github.com/matrix-org/matrix-appservice-gitter" target="_blank">matrix-appservice-gitter</a>
+                is a Gitter bridge that supports bridging Gitter rooms to Matrix. Users on Matrix are represented as a single
+                bot user in Gitter, however Gitter users are represented as real-looking Matrix users in the room.
+            </p>
+
+            <table class="table table-striped table-condensed table-bordered">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th class="text-center" style="width: 120px;">Actions</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr *ngIf="!configurations || configurations.length === 0">
+                    <td colspan="2"><i>No bridge configurations.</i></td>
+                </tr>
+                <tr *ngFor="let bridge of configurations trackById">
+                    <td>
+                        {{ bridge.upstreamId ? "matrix.org's bridge" : "Self-hosted bridge" }}
+                        <span class="text-muted" style="display: inline-block;" *ngIf="!bridge.upstreamId">({{ bridge.provisionUrl }})</span>
+                    </td>
+                    <td class="text-center">
+                        <span class="editButton" (click)="editBridge(bridge)" *ngIf="!bridge.upstreamId">
+                            <i class="fa fa-pencil-alt"></i>
+                        </span>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+            <button type="button" class="btn btn-success btn-sm" (click)="addModularHostedBridge()" [disabled]="(configurations && configurations.length > 0) || isUpdating">
+                <i class="fa fa-plus"></i> Add matrix.org's bridge
+            </button>
+            <button type="button" class="btn btn-success btn-sm" (click)="addSelfHostedBridge()" [disabled]="(configurations && configurations.length > 0) || isUpdating">
+                <i class="fa fa-plus"></i> Add self-hosted bridge
+            </button>
+        </div>
+    </my-ibox>
+</div>

web/app/admin/bridges/gitter/gitter.component.scss

@@ -0,0 +1,3 @@
+.editButton {
+  cursor: pointer;
+}

web/app/admin/bridges/gitter/gitter.component.ts

@@ -0,0 +1,103 @@
+import { Component, OnInit } from "@angular/core";
+import { ToasterService } from "angular2-toaster";
+import { Modal, overlayConfigFactory } from "ngx-modialog";
+import { FE_TelegramBridge } from "../../../shared/models/telegram";
+import {
+    AdminGitterBridgeManageSelfhostedComponent,
+    ManageSelfhostedGitterBridgeDialogContext
+} from "./manage-selfhosted/manage-selfhosted.component";
+import { AdminGitterApiService } from "../../../shared/services/admin/admin-gitter-api.service";
+import { FE_GitterBridge } from "../../../shared/models/gitter";
+import { FE_Upstream } from "../../../shared/models/admin-responses";
+import { AdminUpstreamApiService } from "../../../shared/services/admin/admin-upstream-api.service";
+
+@Component({
+    templateUrl: "./gitter.component.html",
+    styleUrls: ["./gitter.component.scss"],
+})
+export class AdminGitterBridgeComponent implements OnInit {
+
+    public isLoading = true;
+    public isUpdating = false;
+    public configurations: FE_GitterBridge[] = [];
+
+    private upstreams: FE_Upstream[];
+
+    constructor(private gitterApi: AdminGitterApiService,
+                private upstreamApi: AdminUpstreamApiService,
+                private toaster: ToasterService,
+                private modal: Modal) {
+    }
+
+    public ngOnInit() {
+        this.reload().then(() => this.isLoading = false);
+    }
+
+    private async reload(): Promise<any> {
+        try {
+            this.upstreams = await this.upstreamApi.getUpstreams();
+            this.configurations = await this.gitterApi.getBridges();
+        } catch (err) {
+            console.error(err);
+            this.toaster.pop("error", "Error loading bridges");
+        }
+    }
+
+    public addModularHostedBridge() {
+        this.isUpdating = true;
+
+        const createBridge = (upstream: FE_Upstream) => {
+            return this.gitterApi.newFromUpstream(upstream).then(bridge => {
+                this.configurations.push(bridge);
+                this.toaster.pop("success", "matrix.org's Gitter bridge added");
+                this.isUpdating = false;
+            }).catch(err => {
+                console.error(err);
+                this.isUpdating = false;
+                this.toaster.pop("error", "Error adding matrix.org's Gitter Bridge");
+            });
+        };
+
+        const vectorUpstreams = this.upstreams.filter(u => u.type === "vector");
+        if (vectorUpstreams.length === 0) {
+            console.log("Creating default scalar upstream");
+            const scalarUrl = "https://scalar.vector.im/api";
+            this.upstreamApi.newUpstream("modular", "vector", scalarUrl, scalarUrl).then(upstream => {
+                this.upstreams.push(upstream);
+                createBridge(upstream);
+            }).catch(err => {
+                console.error(err);
+                this.toaster.pop("error", "Error creating matrix.org's Gitter Bridge");
+            });
+        } else createBridge(vectorUpstreams[0]);
+    }
+
+    public addSelfHostedBridge() {
+        this.modal.open(AdminGitterBridgeManageSelfhostedComponent, overlayConfigFactory({
+            isBlocking: true,
+            size: 'lg',
+
+            provisionUrl: '',
+        }, ManageSelfhostedGitterBridgeDialogContext)).result.then(() => {
+            this.reload().catch(err => {
+                console.error(err);
+                this.toaster.pop("error", "Failed to get an update Gitter bridge list");
+            });
+        });
+    }
+
+    public editBridge(bridge: FE_TelegramBridge) {
+        this.modal.open(AdminGitterBridgeManageSelfhostedComponent, overlayConfigFactory({
+            isBlocking: true,
+            size: 'lg',
+
+            provisionUrl: bridge.provisionUrl,
+            bridgeId: bridge.id,
+        }, ManageSelfhostedGitterBridgeDialogContext)).result.then(() => {
+            this.reload().catch(err => {
+                console.error(err);
+                this.toaster.pop("error", "Failed to get an update Gitter bridge list");
+            });
+        });
+    }
+}

web/app/admin/bridges/gitter/manage-selfhosted/manage-selfhosted.component.html

@@ -0,0 +1,24 @@
+<div class="dialog">
+    <div class="dialog-header">
+        <h4>{{ isAdding ? "Add a new" : "Edit" }} self-hosted Gitter bridge</h4>
+    </div>
+    <div class="dialog-content">
+        <p>Self-hosted Gitter bridges already have provisioning enabled. Be careful not to expose the API to the public internet.</p>
+
+        <label class="label-block">
+            Provisioning URL
+            <span class="text-muted ">The provisioning URL for the bridge. This is usually the same as the URL your homeserver uses to communicate with the bridge.</span>
+            <input type="text" class="form-control"
+                   placeholder="http://localhost:9000"
+                   [(ngModel)]="provisionUrl" [disabled]="isSaving"/>
+        </label>
+    </div>
+    <div class="dialog-footer">
+        <button type="button" (click)="add()" title="close" 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/bridges/gitter/manage-selfhosted/manage-selfhosted.component.ts

@@ -0,0 +1,56 @@
+import { Component } from "@angular/core";
+import { ToasterService } from "angular2-toaster";
+import { DialogRef, ModalComponent } from "ngx-modialog";
+import { BSModalContext } from "ngx-modialog/plugins/bootstrap";
+import { AdminGitterApiService } from "../../../../shared/services/admin/admin-gitter-api.service";
+
+export class ManageSelfhostedGitterBridgeDialogContext extends BSModalContext {
+    public provisionUrl: string;
+    public sharedSecret: string;
+    public allowTgPuppets = false;
+    public allowMxPuppets = false;
+    public bridgeId: number;
+}
+
+@Component({
+    templateUrl: "./manage-selfhosted.component.html",
+    styleUrls: ["./manage-selfhosted.component.scss"],
+})
+export class AdminGitterBridgeManageSelfhostedComponent implements ModalComponent<ManageSelfhostedGitterBridgeDialogContext> {
+
+    public isSaving = false;
+    public provisionUrl: string;
+    public bridgeId: number;
+    public isAdding = false;
+
+    constructor(public dialog: DialogRef<ManageSelfhostedGitterBridgeDialogContext>,
+                private gitterApi: AdminGitterApiService,
+                private toaster: ToasterService) {
+        this.provisionUrl = dialog.context.provisionUrl;
+        this.bridgeId = dialog.context.bridgeId;
+        this.isAdding = !this.bridgeId;
+    }
+
+    public add() {
+        this.isSaving = true;
+        if (this.isAdding) {
+            this.gitterApi.newSelfhosted(this.provisionUrl).then(() => {
+                this.toaster.pop("success", "Gitter bridge added");
+                this.dialog.close();
+            }).catch(err => {
+                console.error(err);
+                this.isSaving = false;
+                this.toaster.pop("error", "Failed to create Gitter bridge");
+            });
+        } else {
+            this.gitterApi.updateSelfhosted(this.bridgeId, this.provisionUrl).then(() => {
+                this.toaster.pop("success", "Gitter bridge updated");
+                this.dialog.close();
+            }).catch(err => {
+                console.error(err);
+                this.isSaving = false;
+                this.toaster.pop("error", "Failed to update Gitter bridge");
+            });
+        }
+    }
+}

web/app/app.module.ts

@@ -90,6 +90,9 @@ import { AdminWebhooksBridgeComponent } from "./admin/bridges/webhooks/webhooks.
 import { AdminWebhooksApiService } from "./shared/services/admin/admin-webhooks-api.service";
 import { WebhooksApiService } from "./shared/services/integrations/webhooks-api.service";
 import { WebhooksBridgeConfigComponent } from "./configs/bridge/webhooks/webhooks.bridge.component";
+import { AdminGitterBridgeComponent } from "./admin/bridges/gitter/gitter.component";
+import { AdminGitterBridgeManageSelfhostedComponent } from "./admin/bridges/gitter/manage-selfhosted/manage-selfhosted.component";
+import { AdminGitterApiService } from "./shared/services/admin/admin-gitter-api.service";
 
 @NgModule({
     imports: [
@@ -165,6 +168,8 @@ import { WebhooksBridgeConfigComponent } from "./configs/bridge/webhooks/webhook
         AdminWebhooksBridgeManageSelfhostedComponent,
         AdminWebhooksBridgeComponent,
         WebhooksBridgeConfigComponent,
+        AdminGitterBridgeComponent,
+        AdminGitterBridgeManageSelfhostedComponent,
 
         // Vendor
     ],
@@ -188,6 +193,7 @@ import { WebhooksBridgeConfigComponent } from "./configs/bridge/webhooks/webhook
         TelegramApiService,
         AdminWebhooksApiService,
         WebhooksApiService,
+        AdminGitterApiService,
         {provide: Window, useValue: window},
 
         // Vendor
@@ -209,6 +215,7 @@ import { WebhooksBridgeConfigComponent } from "./configs/bridge/webhooks/webhook
         TelegramAskUnbridgeComponent,
         TelegramCannotUnbridgeComponent,
         AdminWebhooksBridgeManageSelfhostedComponent,
+        AdminGitterBridgeManageSelfhostedComponent,
     ]
 })
 export class AppModule {

web/app/app.routing.ts

@@ -31,6 +31,7 @@ import { AdminTelegramBridgeComponent } from "./admin/bridges/telegram/telegram.
 import { TelegramBridgeConfigComponent } from "./configs/bridge/telegram/telegram.bridge.component";
 import { AdminWebhooksBridgeComponent } from "./admin/bridges/webhooks/webhooks.component";
 import { WebhooksBridgeConfigComponent } from "./configs/bridge/webhooks/webhooks.bridge.component";
+import { AdminGitterBridgeComponent } from "./admin/bridges/gitter/gitter.component";
 
 const routes: Routes = [
     {path: "", component: HomeComponent},
@@ -101,6 +102,11 @@ const routes: Routes = [
                                 component: AdminWebhooksBridgeComponent,
                                 data: {breadcrumb: "Webhook Bridge", name: "Webhook Bridge"},
                             },
+                            {
+                                path: "gitter",
+                                component: AdminGitterBridgeComponent,
+                                data: {breadcrumb: "Gitter Bridge", name: "Gitter Bridge"},
+                            },
                         ],
                     },
                     {

web/app/shared/models/gitter.ts

@@ -0,0 +1,6 @@
+export interface FE_GitterBridge {
+    id: number;
+    upstreamId?: number;
+    provisionUrl?: string;
+    isEnabled: boolean;
+}

web/app/shared/services/admin/admin-gitter-api.service.ts

@@ -0,0 +1,36 @@
+import { Injectable } from "@angular/core";
+import { Http } from "@angular/http";
+import { AuthedApi } from "../authed-api";
+import { FE_Upstream } from "../../models/admin-responses";
+import { FE_GitterBridge } from "../../models/gitter";
+
+@Injectable()
+export class AdminGitterApiService extends AuthedApi {
+    constructor(http: Http) {
+        super(http);
+    }
+
+    public getBridges(): Promise<FE_GitterBridge[]> {
+        return this.authedGet("/api/v1/dimension/admin/gitter/all").map(r => r.json()).toPromise();
+    }
+
+    public getBridge(bridgeId: number): Promise<FE_GitterBridge> {
+        return this.authedGet("/api/v1/dimension/admin/gitter/" + bridgeId).map(r => r.json()).toPromise();
+    }
+
+    public newFromUpstream(upstream: FE_Upstream): Promise<FE_GitterBridge> {
+        return this.authedPost("/api/v1/dimension/admin/gitter/new/upstream", {upstreamId: upstream.id}).map(r => r.json()).toPromise();
+    }
+
+    public newSelfhosted(provisionUrl: string): Promise<FE_GitterBridge> {
+        return this.authedPost("/api/v1/dimension/admin/gitter/new/selfhosted", {
+            provisionUrl: provisionUrl,
+        }).map(r => r.json()).toPromise();
+    }
+
+    public updateSelfhosted(bridgeId: number, provisionUrl: string): Promise<FE_GitterBridge> {
+        return this.authedPost("/api/v1/dimension/admin/gitter/" + bridgeId, {
+            provisionUrl: provisionUrl,
+        }).map(r => r.json()).toPromise();
+    }
+}