Admin interface for managing Telegram bridges

Currently only one bridge is supported at a time, however in the future we may wish to load balance between bridges or something.

src/MemoryCache.ts

@@ -48,4 +48,5 @@ export const CACHE_SCALAR_ACCOUNTS = "scalar-accounts";
 export const CACHE_WIDGET_TITLES = "widget-titles";
 export const CACHE_FEDERATION = "federation";
 export const CACHE_IRC_BRIDGE = "irc-bridge";
-export const CACHE_STICKERS = "stickers";
+export const CACHE_STICKERS = "stickers";
+export const CACHE_TELEGRAM_BRIDGE = "telegram-bridge";

src/api/admin/AdminTelegramService.ts

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

src/bridges/TelegramBridge.ts

@@ -0,0 +1,69 @@
+import { TelegramBridgeConfiguration } from "../integrations/Bridge";
+import TelegramBridgeRecord from "../db/models/TelegramBridgeRecord";
+import { LogService } from "matrix-js-snippets";
+import * as request from "request";
+import { PortalInformationResponse } from "./models/telegram";
+
+export class TelegramBridge {
+    constructor(private requestingUserId: string) {
+    }
+
+    public async isBridgingEnabled(): Promise<boolean> {
+        const bridges = await TelegramBridgeRecord.findAll({where: {isEnabled: true}});
+        return !!bridges;
+    }
+
+    public async getRoomConfiguration(inRoomId: string): Promise<TelegramBridgeConfiguration> {
+        const bridges = await TelegramBridgeRecord.findAll({where: {isEnabled: true}});
+
+        const linkedChats: number[] = [];
+        for (const bridge of bridges) {
+            try {
+                const chatInfo = await this.doProvisionRequest<PortalInformationResponse>(bridge, "GET", `/portal/${inRoomId}`);
+                linkedChats.push(chatInfo.chat_id);
+            } catch (e) {
+                if (!e.errBody || e.errBody["errcode"] !== "portal_not_found") {
+                    throw e.error || e;
+                }
+            }
+        }
+
+        return {linkedChatIds: linkedChats};
+    }
+
+    private async doProvisionRequest<T>(bridge: TelegramBridgeRecord, method: string, endpoint: string, qs?: any, body?: any): Promise<T> {
+        const provisionUrl = bridge.provisionUrl;
+        const apiUrl = provisionUrl.endsWith("/") ? provisionUrl.substring(0, provisionUrl.length - 1) : provisionUrl;
+        const url = apiUrl + (endpoint.startsWith("/") ? endpoint : "/" + endpoint);
+        LogService.info("TelegramBridge", "Doing provision Telegram Bridge request: " + url);
+
+        if (!qs) qs = {};
+        if (!qs["user_id"]) qs["user_id"] = this.requestingUserId;
+
+        return new Promise<T>((resolve, reject) => {
+            request({
+                method: method,
+                url: url,
+                qs: qs,
+                json: body,
+            }, (err, res, _body) => {
+                if (err) {
+                    LogService.error("TelegramBridge", "Error calling" + url);
+                    LogService.error("TelegramBridge", err);
+                    reject(err);
+                } else if (!res) {
+                    LogService.error("TelegramBridge", "There is no response for " + url);
+                    reject(new Error("No response provided - is the service online?"));
+                } else if (res.statusCode !== 200) {
+                    LogService.error("TelegramBridge", "Got status code " + res.statusCode + " when calling " + url);
+                    LogService.error("TelegramBridge", res.body);
+                    if (typeof(res.body) === "string") res.body = JSON.parse(res.body);
+                    reject({errBody: res.body, error: new Error("Request failed")});
+                } else {
+                    if (typeof(res.body) === "string") res.body = JSON.parse(res.body);
+                    resolve(res.body);
+                }
+            });
+        });
+    }
+}

src/bridges/models/telegram.ts

@@ -0,0 +1,9 @@
+export interface PortalInformationResponse {
+    mxid: string;
+    chat_id: number;
+    peer_type: string;
+    megagroup: boolean;
+    username: string;
+    title: string;
+    about: string;
+}

src/db/BridgeStore.ts

@@ -2,6 +2,7 @@ import { Bridge } from "../integrations/Bridge";
 import BridgeRecord from "./models/BridgeRecord";
 import { IrcBridge } from "../bridges/IrcBridge";
 import { LogService } from "matrix-js-snippets";
+import { TelegramBridge } from "../bridges/TelegramBridge";
 
 export class BridgeStore {
 
@@ -44,6 +45,8 @@ export class BridgeStore {
 
         if (integrationType === "irc") {
             throw new Error("IRC Bridges should be modified with the dedicated API");
+        } else if (integrationType === "telegram") {
+            throw new Error("Telegram bridges should be modified with the dedicated API");
         } else throw new Error("Unsupported bridge");
     }
 
@@ -51,6 +54,9 @@ export class BridgeStore {
         if (record.type === "irc") {
             const irc = new IrcBridge(requestingUserId);
             return irc.hasNetworks();
+        } else if (record.type === "telegram") {
+            const telegram = new TelegramBridge(requestingUserId);
+            return telegram.isBridgingEnabled();
         } else return true;
     }
 
@@ -59,6 +65,10 @@ export class BridgeStore {
             if (!inRoomId) return {}; // The bridge's admin config is handled by other APIs
             const irc = new IrcBridge(requestingUserId);
             return irc.getRoomConfiguration(inRoomId);
+        } else if (record.type === "telegram") {
+            if (!inRoomId) return {}; // The bridge's admin config is handled by other APIs
+            const telegram = new TelegramBridge(requestingUserId);
+            return telegram.getRoomConfiguration(inRoomId);
         } else return {};
     }
 

src/db/DimensionStore.ts

@@ -21,6 +21,7 @@ import IrcBridgeNetwork from "./models/IrcBridgeNetwork";
 import StickerPack from "./models/StickerPack";
 import Sticker from "./models/Sticker";
 import UserStickerPack from "./models/UserStickerPack";
+import TelegramBridgeRecord from "./models/TelegramBridgeRecord";
 
 class _DimensionStore {
     private sequelize: Sequelize;
@@ -53,6 +54,7 @@ class _DimensionStore {
             StickerPack,
             Sticker,
             UserStickerPack,
+            TelegramBridgeRecord,
         ]);
     }
 

src/db/migrations/20180908155745-AddTelegramBridge.ts

@@ -0,0 +1,24 @@
+import { QueryInterface } from "sequelize";
+import { DataType } from "sequelize-typescript";
+
+export default {
+    up: (queryInterface: QueryInterface) => {
+        return Promise.resolve()
+            .then(() => queryInterface.createTable("dimension_telegram_bridges", {
+                "id": {type: DataType.INTEGER, primaryKey: true, autoIncrement: true, allowNull: false},
+                "upstreamId": {
+                    type: DataType.INTEGER, allowNull: true,
+                    references: {model: "dimension_upstreams", key: "id"},
+                    onUpdate: "cascade", onDelete: "cascade",
+                },
+                "provisionUrl": {type: DataType.STRING, allowNull: true},
+                "sharedSecret": {type: DataType.STRING, allowNull: true},
+                "allowPuppets": {type: DataType.BOOLEAN, allowNull: true},
+                "isEnabled": {type: DataType.BOOLEAN, allowNull: false},
+            }));
+    },
+    down: (queryInterface: QueryInterface) => {
+        return Promise.resolve()
+            .then(() => queryInterface.dropTable("dimension_telegram_bridges"));
+    }
+}

src/db/migrations/20180916014545-AddTelegramBridgeRecord.ts

@@ -0,0 +1,23 @@
+import { QueryInterface } from "sequelize";
+
+export default {
+    up: (queryInterface: QueryInterface) => {
+        return Promise.resolve()
+            .then(() => queryInterface.bulkInsert("dimension_bridges", [
+                {
+                    type: "telegram",
+                    name: "Telegram Bridge",
+                    avatarUrl: "/img/avatars/telegram.png",
+                    isEnabled: true,
+                    isPublic: true,
+                    description: "Bridges Telegram chats and channels to rooms on Matrix",
+                },
+            ]));
+    },
+    down: (queryInterface: QueryInterface) => {
+        return Promise.resolve()
+            .then(() => queryInterface.bulkDelete("dimension_bridges", {
+                type: "telegram",
+            }));
+    }
+}

src/db/models/TelegramBridgeRecord.ts

@@ -0,0 +1,34 @@
+import { AllowNull, AutoIncrement, Column, ForeignKey, Model, PrimaryKey, Table } from "sequelize-typescript";
+import Upstream from "./Upstream";
+
+@Table({
+    tableName: "dimension_telegram_bridges",
+    underscoredAll: false,
+    timestamps: false,
+})
+export default class TelegramBridgeRecord extends Model<TelegramBridgeRecord> {
+    @PrimaryKey
+    @AutoIncrement
+    @Column
+    id: number;
+
+    @AllowNull
+    @Column
+    @ForeignKey(() => Upstream)
+    upstreamId?: number;
+
+    @AllowNull
+    @Column
+    provisionUrl?: string;
+
+    @AllowNull
+    @Column
+    sharedSecret?: string;
+
+    @AllowNull
+    @Column
+    allowPuppets?: boolean;
+
+    @Column
+    isEnabled: boolean;
+}

src/integrations/Bridge.ts

@@ -20,4 +20,8 @@ export class Bridge extends Integration {
 export interface IrcBridgeConfiguration {
     availableNetworks: AvailableNetworks;
     links: LinkedChannels;
+}
+
+export interface TelegramBridgeConfiguration {
+    linkedChatIds: number[];
 }

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

@@ -20,7 +20,7 @@
                 </thead>
                 <tbody>
                 <tr *ngIf="!configurations || configurations.length === 0">
-                    <td colspan="2"><i>No bridge configurations.</i></td>
+                    <td colspan="3"><i>No bridge configurations.</i></td>
                 </tr>
                 <tr *ngFor="let bridge of configurations trackById">
                     <td>

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

@@ -0,0 +1,39 @@
+<div class="dialog">
+    <div class="dialog-header">
+        <h4>{{ isAdding ? "Add a new" : "Edit" }} self-hosted Telegram bridge</h4>
+    </div>
+    <div class="dialog-content">
+        <p>Self-hosted Telegram bridges must have <code>provisioning</code> enabled in the configuration.</p>
+
+        <label class="label-block">
+            Provisioning URL
+            <span class="text-muted ">The provisioning URL for the bridge. This is the public address for the bridge followed by the provisioning prefix given in the configuration.</span>
+            <input type="text" class="form-control"
+                   placeholder="http://localhost:9999/_matrix/provision/v1"
+                   [(ngModel)]="provisionUrl" [disabled]="isSaving"/>
+        </label>
+
+        <label class="label-block">
+            Shared Secret
+            <span class="text-muted ">The shared secret defined in the configuration for provisioning.</span>
+            <input type="text" class="form-control"
+                   placeholder="some_secret_value"
+                   [(ngModel)]="sharedSecret" [disabled]="isSaving"/>
+        </label>
+
+        <label class="label-block">
+            Promote Puppeting
+            <span class="text-muted ">If enabled, Dimension will recommend that users log in to their Telegram accounts.</span>
+            <ui-switch [checked]="allowPuppets" size="small" [disabled]="isSaving"
+                       (change)="allowPuppets = !allowPuppets"></ui-switch>
+        </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/telegram/manage-selfhosted/manage-selfhosted.component.ts

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

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

@@ -0,0 +1,48 @@
+<div *ngIf="isLoading">
+    <my-spinner></my-spinner>
+</div>
+<div *ngIf="!isLoading">
+    <my-ibox title="Telegram Bridge Configurations">
+        <div class="my-ibox-content">
+            <p>
+                <a href="https://github.com/tulir/mautrix-telegram" target="_blank">mautrix-telegram</a>
+                is a Telegram bridge that supports bridging channels/supergroups to Matrix. This can be
+                done through a "relay bot" (all Matrix users are represented through a single bot in Telegram)
+                or by making use of a user's real Telegram account (known as "puppeting"). Currently
+                only one Telegram bridge can be configured at a time.
+            </p>
+
+            <table class="table table-striped table-condensed table-bordered">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Enabled Features</th>
+                    <th class="text-center" style="width: 120px;">Actions</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr *ngIf="!configurations || configurations.length === 0">
+                    <td colspan="3"><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>
+                        {{ getEnabledFeaturesString(bridge) }}
+                    </td>
+                    <td class="text-center">
+                        <span class="editButton" (click)="editBridge(bridge)">
+                            <i class="fa fa-pencil-alt"></i>
+                        </span>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+            <button type="button" class="btn btn-success btn-sm" (click)="addSelfHostedBridge()" [disabled]="configurations && configurations.length > 0">
+                <i class="fa fa-plus"></i> Add self-hosted bridge
+            </button>
+        </div>
+    </my-ibox>
+</div>

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

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

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

@@ -0,0 +1,76 @@
+import { Component, OnInit } from "@angular/core";
+import { ToasterService } from "angular2-toaster";
+import { Modal, overlayConfigFactory } from "ngx-modialog";
+import {
+    AdminTelegramBridgeManageSelfhostedComponent,
+    ManageSelfhostedTelegramBridgeDialogContext
+} from "./manage-selfhosted/manage-selfhosted.component";
+import { FE_TelegramBridge } from "../../../shared/models/telegram";
+import { AdminTelegramApiService } from "../../../shared/services/admin/admin-telegram-api.service";
+
+@Component({
+    templateUrl: "./telegram.component.html",
+    styleUrls: ["./telegram.component.scss"],
+})
+export class AdminTelegramBridgeComponent implements OnInit {
+
+    public isLoading = true;
+    public isUpdating = false;
+    public configurations: FE_TelegramBridge[] = [];
+
+    constructor(private telegramApi: AdminTelegramApiService,
+                private toaster: ToasterService,
+                private modal: Modal) {
+    }
+
+    public ngOnInit() {
+        this.reload().then(() => this.isLoading = false);
+    }
+
+    private async reload(): Promise<any> {
+        try {
+            this.configurations = await this.telegramApi.getBridges();
+        } catch (err) {
+            console.error(err);
+            this.toaster.pop("error", "Error loading bridges");
+        }
+    }
+
+    public addSelfHostedBridge() {
+        this.modal.open(AdminTelegramBridgeManageSelfhostedComponent, overlayConfigFactory({
+            isBlocking: true,
+            size: 'lg',
+
+            provisionUrl: '',
+            sharedSecret: '',
+            allowPuppets: false,
+        }, ManageSelfhostedTelegramBridgeDialogContext)).result.then(() => {
+            this.reload().catch(err => {
+                console.error(err);
+                this.toaster.pop("error", "Failed to get an update Telegram bridge list");
+            });
+        });
+    }
+
+    public getEnabledFeaturesString(bridge: FE_TelegramBridge): string {
+        if (bridge.allowPuppets) return "Puppeting";
+        return "";
+    }
+
+    public editBridge(bridge: FE_TelegramBridge) {
+        this.modal.open(AdminTelegramBridgeManageSelfhostedComponent, overlayConfigFactory({
+            isBlocking: true,
+            size: 'lg',
+
+            provisionUrl: bridge.provisionUrl,
+            sharedSecret: bridge.sharedSecret,
+            allowPuppets: bridge.allowPuppets,
+            bridgeId: bridge.id,
+        }, ManageSelfhostedTelegramBridgeDialogContext)).result.then(() => {
+            this.reload().catch(err => {
+                console.error(err);
+                this.toaster.pop("error", "Failed to get an update Telegram bridge list");
+            });
+        });
+    }
+}

web/app/app.module.ts

@@ -78,6 +78,9 @@ import { MediaService } from "./shared/services/media.service";
 import { StickerApiService } from "./shared/services/integrations/sticker-api.service";
 import { StickerpickerComponent } from "./configs/stickerpicker/stickerpicker.component";
 import { StickerPickerWidgetWrapperComponent } from "./widget-wrappers/sticker-picker/sticker-picker.component";
+import { AdminTelegramApiService } from "./shared/services/admin/admin-telegram-api.service";
+import { AdminTelegramBridgeComponent } from "./admin/bridges/telegram/telegram.component";
+import { AdminTelegramBridgeManageSelfhostedComponent } from "./admin/bridges/telegram/manage-selfhosted/manage-selfhosted.component";
 
 @NgModule({
     imports: [
@@ -145,6 +148,8 @@ import { StickerPickerWidgetWrapperComponent } from "./widget-wrappers/sticker-p
         AdminStickerPackPreviewComponent,
         StickerpickerComponent,
         StickerPickerWidgetWrapperComponent,
+        AdminTelegramBridgeComponent,
+        AdminTelegramBridgeManageSelfhostedComponent,
 
         // Vendor
     ],
@@ -164,6 +169,7 @@ import { StickerPickerWidgetWrapperComponent } from "./widget-wrappers/sticker-p
         AdminStickersApiService,
         MediaService,
         StickerApiService,
+        AdminTelegramApiService,
         {provide: Window, useValue: window},
 
         // Vendor
@@ -181,6 +187,7 @@ import { StickerPickerWidgetWrapperComponent } from "./widget-wrappers/sticker-p
         AdminIrcBridgeNetworksComponent,
         AdminIrcBridgeAddSelfhostedComponent,
         AdminStickerPackPreviewComponent,
+        AdminTelegramBridgeManageSelfhostedComponent,
     ]
 })
 export class AppModule {

web/app/app.routing.ts

@@ -27,6 +27,7 @@ import { IrcBridgeConfigComponent } from "./configs/bridge/irc/irc.bridge.compon
 import { AdminStickerPacksComponent } from "./admin/sticker-packs/sticker-packs.component";
 import { StickerpickerComponent } from "./configs/stickerpicker/stickerpicker.component";
 import { StickerPickerWidgetWrapperComponent } from "./widget-wrappers/sticker-picker/sticker-picker.component";
+import { AdminTelegramBridgeComponent } from "./admin/bridges/telegram/telegram.component";
 
 const routes: Routes = [
     {path: "", component: HomeComponent},
@@ -87,6 +88,11 @@ const routes: Routes = [
                                 component: AdminIrcBridgeComponent,
                                 data: {breadcrumb: "IRC Bridge", name: "IRC Bridge"},
                             },
+                            {
+                                path: "telegram",
+                                component: AdminTelegramBridgeComponent,
+                                data: {breadcrumb: "Telegram Bridge", name: "Telegram Bridge"},
+                            },
                         ],
                     },
                     {

web/app/shared/models/telegram.ts

@@ -0,0 +1,8 @@
+export interface FE_TelegramBridge {
+    id: number;
+    upstreamId?: number;
+    provisionUrl?: string;
+    allowPuppets?: boolean;
+    sharedSecret?: string;
+    isEnabled: boolean;
+}

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

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