Admin section for enabling, disabling, and configuring widgets

src-ts/api/dimension/DimensionIntegrationsService.ts

@@ -1,4 +1,4 @@
-import { GET, Path, PathParam, QueryParam } from "typescript-rest";
+import { GET, Path, PathParam, POST, QueryParam } from "typescript-rest";
 import * as Promise from "bluebird";
 import { ScalarService } from "../scalar/ScalarService";
 import { DimensionStore } from "../../db/DimensionStore";
@@ -12,6 +12,14 @@ interface IntegrationsResponse {
     widgets: Widget[],
 }
 
+interface SetEnabledRequest {
+    enabled: boolean;
+}
+
+interface SetOptionsRequest {
+    options: any;
+}
+
 @Path("/api/v1/dimension/integrations")
 export class DimensionIntegrationsService {
 
@@ -21,6 +29,26 @@ export class DimensionIntegrationsService {
         DimensionIntegrationsService.integrationCache.clear();
     }
 
+    @POST
+    @Path(":category/:type/enabled")
+    public setEnabled(@QueryParam("scalar_token") scalarToken: string, @PathParam("category") category: string, @PathParam("type") type: string, body: SetEnabledRequest): Promise<any> {
+        return DimensionAdminService.validateAndGetAdminTokenOwner(scalarToken).then(_userId => {
+            if (category === "widget") {
+                return DimensionStore.setWidgetEnabled(type, body.enabled);
+            } else throw new ApiError(400, "Unrecongized category");
+        }).then(() => DimensionIntegrationsService.clearIntegrationCache());
+    }
+
+    @POST
+    @Path(":category/:type/options")
+    public setOptions(@QueryParam("scalar_token") scalarToken: string, @PathParam("category") category: string, @PathParam("type") type: string, body: SetOptionsRequest): Promise<any> {
+        return DimensionAdminService.validateAndGetAdminTokenOwner(scalarToken).then(_userId => {
+            if (category === "widget") {
+                return DimensionStore.setWidgetOptions(type, body.options);
+            } else throw new ApiError(400, "Unrecongized category");
+        }).then(() => DimensionIntegrationsService.clearIntegrationCache());
+    }
+
     @GET
     @Path("enabled")
     public getEnabledIntegrations(@QueryParam("scalar_token") scalarToken: string): Promise<IntegrationsResponse> {

src-ts/db/DimensionStore.ts

@@ -94,6 +94,31 @@ class _DimensionStore {
         if (isEnabled === true || isEnabled === false) conditions = {where: {isEnabled: isEnabled}};
         return WidgetRecord.findAll(conditions).then(widgets => widgets.map(w => new Widget(w)));
     }
+
+    public setWidgetEnabled(type: string, isEnabled: boolean): Promise<any> {
+        return this.getWidget(type).then(widget => {
+            widget.isEnabled = isEnabled;
+            return widget.save();
+        });
+    }
+
+    public setWidgetOptions(type: string, options: any): Promise<any> {
+        const optionsJson = JSON.stringify(options);
+        return this.getWidget(type).then(widget => {
+            widget.optionsJson = optionsJson;
+            return widget.save();
+        });
+    }
+
+    private getWidget(type: string): Promise<WidgetRecord> {
+        return WidgetRecord.findAll({where: {type: type}}).then(widgets => {
+            if (!widgets || widgets.length !== 1) {
+                return Promise.reject("Widget not found or too many results");
+            }
+
+            return Promise.resolve(widgets[0]);
+        });
+    }
 }
 
 export const DimensionStore = new _DimensionStore();

web/app/admin/admin.component.html

@@ -1,5 +1,6 @@
 <ul class="adminNav">
     <li (click)="goto('')" [ngClass]="[isActive('', true) ? 'active' : '']">Dashboard</li>
+    <li (click)="goto('widgets')" [ngClass]="[isActive('widgets') ? 'active' : '']">Widgets</li>
 </ul>
 <span class="version">{{ version }}</span>
 

web/app/admin/widgets/config-dialog.scss

@@ -0,0 +1,8 @@
+.text-muted {
+  display: block;
+  font-size: 12px;
+}
+
+.label-block {
+  margin-bottom: 15px;
+}

web/app/admin/widgets/etherpad/etherpad.component.html

@@ -0,0 +1,22 @@
+<div class="dialog">
+    <div class="dialog-header">
+        <h4>Etherpad Widget Configuration</h4>
+    </div>
+    <div class="dialog-content">
+        <label class="label-block">
+            Default Pad URL Template
+            <span class="text-muted ">$padName and $roomId will be replaced during creation to help create a unique pad URL.</span>
+            <input type="text" class="form-control"
+                   placeholder="https://demo.riot.im/etherpad/p/$padName_$roomId"
+                   [(ngModel)]="widget.options.defaultUrl" [disabled]="isUpdating"/>
+        </label>
+    </div>
+    <div class="dialog-footer">
+        <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/widgets/etherpad/etherpad.component.ts

@@ -0,0 +1,35 @@
+import { Component } from "@angular/core";
+import { AdminApiService } from "../../../shared/services/admin-api.service";
+import { EtherpadWidget } from "../../../shared/models/integration";
+import { ToasterService } from "angular2-toaster";
+import { DialogRef, ModalComponent } from "ngx-modialog";
+import { WidgetConfigDialogContext } from "../widgets.component";
+
+@Component({
+    templateUrl: "./etherpad.component.html",
+    styleUrls: ["./etherpad.component.scss", "../config-dialog.scss"],
+})
+export class AdminWidgetEtherpadConfigComponent implements ModalComponent<WidgetConfigDialogContext> {
+
+    public isUpdating = false;
+    public widget: EtherpadWidget;
+    private originalWidget: EtherpadWidget;
+
+    constructor(public dialog: DialogRef<WidgetConfigDialogContext>, private adminApi: AdminApiService, private toaster: ToasterService) {
+        this.originalWidget = dialog.context.widget;
+        this.widget = JSON.parse(JSON.stringify(this.originalWidget));
+    }
+
+    public save() {
+        this.isUpdating = true;
+        this.adminApi.setWidgetOptions(this.widget.category, this.widget.type, this.widget.options).then(() => {
+            this.originalWidget.options = this.widget.options;
+            this.toaster.pop("success", "Widget updated");
+            this.dialog.close();
+        }).catch(err => {
+            this.isUpdating = false;
+            console.error(err);
+            this.toaster.pop("error", "Error updating widget");
+        });
+    }
+}

web/app/admin/widgets/jitsi/jitsi.component.html

@@ -0,0 +1,29 @@
+<div class="dialog">
+    <div class="dialog-header">
+        <h4>Jitsi Widget Configuration</h4>
+    </div>
+    <div class="dialog-content">
+        <label class="label-block">
+            Jitsi Domain
+            <span class="text-muted ">This is the domain that is used to host the conference.</span>
+            <input type="text" class="form-control"
+                   placeholder="jitsi.riot.im"
+                   [(ngModel)]="widget.options.jitsiDomain" [disabled]="isUpdating"/>
+        </label>
+        <label class="label-block">
+            Jitsi Script URL
+            <span class="text-muted ">This is used to create the Jitsi widget. It is normally at /libs/external_api.min.js from your domain.</span>
+            <input type="text" class="form-control"
+                   placeholder="https://jitsi.riot.im/libs/external_api.min.js"
+                   [(ngModel)]="widget.options.scriptUrl" [disabled]="isUpdating"/>
+        </label>
+    </div>
+    <div class="dialog-footer">
+        <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/widgets/jitsi/jitsi.component.ts

@@ -0,0 +1,35 @@
+import { Component } from "@angular/core";
+import { AdminApiService } from "../../../shared/services/admin-api.service";
+import { JitsiWidget } from "../../../shared/models/integration";
+import { ToasterService } from "angular2-toaster";
+import { DialogRef, ModalComponent } from "ngx-modialog";
+import { WidgetConfigDialogContext } from "../widgets.component";
+
+@Component({
+    templateUrl: "./jitsi.component.html",
+    styleUrls: ["./jitsi.component.scss", "../config-dialog.scss"],
+})
+export class AdminWidgetJitsiConfigComponent implements ModalComponent<WidgetConfigDialogContext> {
+
+    public isUpdating = false;
+    public widget: JitsiWidget;
+    private originalWidget: JitsiWidget;
+
+    constructor(public dialog: DialogRef<WidgetConfigDialogContext>, private adminApi: AdminApiService, private toaster: ToasterService) {
+        this.originalWidget = dialog.context.widget;
+        this.widget = JSON.parse(JSON.stringify(this.originalWidget));
+    }
+
+    public save() {
+        this.isUpdating = true;
+        this.adminApi.setWidgetOptions(this.widget.category, this.widget.type, this.widget.options).then(() => {
+            this.originalWidget.options = this.widget.options;
+            this.toaster.pop("success", "Widget updated");
+            this.dialog.close();
+        }).catch(err => {
+            this.isUpdating = false;
+            console.error(err);
+            this.toaster.pop("error", "Error updating widget");
+        });
+    }
+}

web/app/admin/widgets/widgets.component.html

@@ -0,0 +1,34 @@
+<div *ngIf="isLoading">
+    <my-spinner></my-spinner>
+</div>
+<div *ngIf="!isLoading">
+    <my-ibox title="Widgets">
+        <div class="my-ibox-content">
+            <p>Widgets are small webpages that can be embedded in a Matrix room. Here you can configure which widgets
+                Dimension will offer to users.</p>
+
+            <table class="table table-striped table-condensed table-bordered">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Description</th>
+                    <th class="text-center">Actions</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr *ngFor="let widget of widgets trackById">
+                    <td>{{ widget.displayName }}</td>
+                    <td>{{ widget.description }}</td>
+                    <td class="text-right">
+                        <span class="editButton" (click)="editWidget(widget)" *ngIf="widget.isEnabled && hasConfiguration(widget)">
+                            <i class="fa fa-pencil-alt"></i>
+                        </span>
+                        <ui-switch [checked]="widget.isEnabled" size="small" [disabled]="isUpdating"
+                                   (change)="disableWidget(widget)"></ui-switch>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </my-ibox>
+</div>

web/app/admin/widgets/widgets.component.scss

@@ -0,0 +1,13 @@
+ul {
+  padding-left: 25px;
+}
+
+.editButton {
+  cursor: pointer;
+  position: relative;
+  top: -5px;
+}
+
+tr td:last-child {
+  vertical-align: middle;
+}

web/app/admin/widgets/widgets.component.ts

@@ -0,0 +1,69 @@
+import { Component } from "@angular/core";
+import { AdminApiService } from "../../shared/services/admin-api.service";
+import { Widget } from "../../shared/models/integration";
+import { ToasterService } from "angular2-toaster";
+import { AdminWidgetEtherpadConfigComponent } from "./etherpad/etherpad.component";
+import { Modal, overlayConfigFactory } from "ngx-modialog";
+import { BSModalContext } from "ngx-modialog/plugins/bootstrap";
+import { AdminWidgetJitsiConfigComponent } from "./jitsi/jitsi.component";
+
+export class WidgetConfigDialogContext extends BSModalContext {
+    public widget: Widget;
+}
+
+@Component({
+    templateUrl: "./widgets.component.html",
+    styleUrls: ["./widgets.component.scss"],
+})
+export class AdminWidgetsComponent {
+
+    public isLoading = true;
+    public isUpdating = false;
+    public widgets: Widget[];
+
+    constructor(private adminApi: AdminApiService, private toaster: ToasterService, private modal: Modal) {
+        adminApi.getAllIntegrations().then(integrations => {
+            this.isLoading = false;
+            this.widgets = integrations.widgets;
+        });
+    }
+
+    public disableWidget(widget: Widget) {
+        widget.isEnabled = !widget.isEnabled;
+        this.isUpdating = true;
+        this.adminApi.toggleIntegration(widget.category, widget.type, widget.isEnabled).then(() => {
+            this.isUpdating = false;
+            this.toaster.pop("success", "Widget updated");
+        }).catch(err => {
+            console.error(err);
+            widget.isEnabled = !widget.isEnabled; // revert change
+            this.isUpdating = false;
+            this.toaster.pop("error", "Error updating widget");
+        })
+    }
+
+    public editWidget(widget: Widget) {
+        let component = null;
+
+        if (widget.type === "etherpad") component = AdminWidgetEtherpadConfigComponent;
+        if (widget.type === "jitsi") component = AdminWidgetJitsiConfigComponent;
+
+        if (!component) {
+            console.error("No known dialog component for " + widget.type);
+            this.toaster.pop("error", "Error opening configuration page");
+            return;
+        }
+
+        this.modal.open(component, overlayConfigFactory({
+            widget: widget,
+
+            isBlocking: true,
+            size: 'lg',
+        }, WidgetConfigDialogContext));
+    }
+
+    public hasConfiguration(widget: Widget) {
+        // Currently only Jitsi and Etherpad have additional configuration
+        return widget.type === "jitsi" || widget.type === "etherpad";
+    }
+}

web/app/app.module.ts

@@ -42,6 +42,9 @@ import { TwitchWidgetConfigComponent } from "./configs/widget/twitch/twitch.widg
 import { YoutubeWidgetConfigComponent } from "./configs/widget/youtube/youtube.widget.component";
 import { AdminComponent } from "./admin/admin.component";
 import { AdminHomeComponent } from "./admin/home/home.component";
+import { AdminWidgetsComponent } from "./admin/widgets/widgets.component";
+import { AdminWidgetEtherpadConfigComponent } from "./admin/widgets/etherpad/etherpad.component";
+import { AdminWidgetJitsiConfigComponent } from "./admin/widgets/jitsi/jitsi.component";
 
 @NgModule({
     imports: [
@@ -83,6 +86,9 @@ import { AdminHomeComponent } from "./admin/home/home.component";
         YoutubeWidgetConfigComponent,
         AdminComponent,
         AdminHomeComponent,
+        AdminWidgetsComponent,
+        AdminWidgetEtherpadConfigComponent,
+        AdminWidgetJitsiConfigComponent,
 
         // Vendor
     ],
@@ -97,7 +103,10 @@ import { AdminHomeComponent } from "./admin/home/home.component";
         // Vendor
     ],
     bootstrap: [AppComponent],
-    entryComponents: []
+    entryComponents: [
+        AdminWidgetEtherpadConfigComponent,
+        AdminWidgetJitsiConfigComponent,
+    ]
 })
 export class AppModule {
     constructor(public appRef: ApplicationRef, injector: Injector) {

web/app/app.routing.ts

@@ -15,6 +15,7 @@ import { TwitchWidgetConfigComponent } from "./configs/widget/twitch/twitch.widg
 import { YoutubeWidgetConfigComponent } from "./configs/widget/youtube/youtube.widget.component";
 import { AdminComponent } from "./admin/admin.component";
 import { AdminHomeComponent } from "./admin/home/home.component";
+import { AdminWidgetsComponent } from "./admin/widgets/widgets.component";
 
 const routes: Routes = [
     {path: "", component: HomeComponent},
@@ -37,6 +38,11 @@ const routes: Routes = [
                         path: "",
                         component: AdminHomeComponent,
                     },
+                    {
+                        path: "widgets",
+                        component: AdminWidgetsComponent,
+                        data: {breadcrumb: "Widgets", name: "Widgets"},
+                    },
                 ],
             },
             {

web/app/shared/services/AuthedApi.ts

@@ -11,4 +11,10 @@ export class AuthedApi {
         qs["scalar_token"] = SessionStorage.scalarToken;
         return this.http.get(url, {params: qs});
     }
+
+    protected authedPost(url: string, body?: any): Observable<Response> {
+        if (!body) body = {};
+        const qs = {scalar_token: SessionStorage.scalarToken};
+        return this.http.post(url, body, {params: qs});
+    }
 }

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

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "./AuthedApi";
 import { DimensionConfigResponse, DimensionVersionResponse } from "../models/admin_responses";
+import { DimensionIntegrationsResponse } from "../models/dimension_responses";
 
 @Injectable()
 export class AdminApiService extends AuthedApi {
@@ -20,4 +21,16 @@ export class AdminApiService extends AuthedApi {
     public getVersion(): Promise<DimensionVersionResponse> {
         return this.authedGet("/api/v1/dimension/admin/version").map(r => r.json()).toPromise();
     }
+
+    public getAllIntegrations(): Promise<DimensionIntegrationsResponse> {
+        return this.authedGet("/api/v1/dimension/integrations/all").map(r => r.json()).toPromise();
+    }
+
+    public toggleIntegration(category: string, type: string, enabled: boolean): Promise<any> {
+        return this.authedPost("/api/v1/dimension/integrations/" + category + "/" + type + "/enabled", {enabled: enabled}).map(r => r.json()).toPromise();
+    }
+
+    public setWidgetOptions(category: string, type: string, options: any): Promise<any> {
+        return this.authedPost("/api/v1/dimension/integrations/" + category + "/" + type + "/options", {options: options}).map(r => r.json()).toPromise();
+    }
 }

web/style/app.scss

@@ -2,6 +2,7 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:100|Roboto:300');
 @import '../../node_modules/angular2-toaster/toaster';
 @import "components/ibox";
+@import "components/dialog";
 @import "riot";
 
 body {

web/style/components/dialog.scss

@@ -0,0 +1,21 @@
+.dialog {
+  .dialog-header {
+    border-bottom: 1px solid #ddd;
+    padding: 20px;
+
+    h4 {
+      margin: 0;
+    }
+  }
+
+  .dialog-content {
+    padding: 20px;
+
+  }
+
+  .dialog-footer {
+    padding: 20px;
+    border-top: 1px solid #bbb;
+    background-color: #ddd;
+  }
+}