Merge remote-tracking branch 'MTRNord/etherpad_widget'

config/integrations/etherpad_widget.yaml

@@ -0,0 +1,7 @@
+# All this configuration does is make "Etherpad Widget" available in the UI
+type: "widget"
+integrationType: "etherpad"
+enabled: true
+name: "Etherpad"
+about: "Etherpad is a collaborative text editor. With this widget you can embed Etherpad directly in to your Matrix chat rooms so that you can securely collaborate on documents."
+avatar: "img/avatars/etherpad.png"

web/app/app.module.ts

@@ -29,6 +29,7 @@ import { ToggleFullscreenDirective } from "./shared/toggle-fullscreen.directive"
 import { FullscreenButtonComponent } from "./fullscreen-button/fullscreen-button.component";
 import { YoutubeWidgetConfigComponent } from "./configs/widget/youtube/youtube-config.component";
 import { TwitchWidgetConfigComponent } from "./configs/widget/twitch/twitch-config.component";
+import { EtherpadWidgetConfigComponent } from "./configs/widget/etherpad/etherpad-config.component";
 import { VideoWidgetWrapperComponent } from "./widget_wrappers/video/video.component";
 
 @NgModule({
@@ -60,6 +61,7 @@ import { VideoWidgetWrapperComponent } from "./widget_wrappers/video/video.compo
         FullscreenButtonComponent,
         YoutubeWidgetConfigComponent,
         TwitchWidgetConfigComponent,
+        EtherpadWidgetConfigComponent,
         VideoWidgetWrapperComponent,
 
         // Vendor
@@ -80,7 +82,8 @@ import { VideoWidgetWrapperComponent } from "./widget_wrappers/video/video.compo
         IrcConfigComponent,
         CustomWidgetConfigComponent,
         YoutubeWidgetConfigComponent,
-        TwitchWidgetConfigComponent
+        TwitchWidgetConfigComponent,
+        EtherpadWidgetConfigComponent,
     ]
 })
 export class AppModule {

web/app/configs/widget/etherpad/etherpad-config.component.html

@@ -0,0 +1,118 @@
+<div class="config-wrapper">
+    <img src="/img/close.svg" (click)="dialog.close()" class="close-icon">
+    <div class="config-header">
+        <img src="/img/avatars/etherpad.png">
+        <h4>Configure Etherpad widgets</h4>
+    </div>
+    <div class="config-content" *ngIf="isLoading">
+        <div class="row">
+            <div class="col-md-12">
+                <p><i class="fa fa-circle-notch fa-spin"></i> Loading widgets...</p>
+            </div>
+        </div>
+    </div>
+    <div class="config-content" *ngIf="!isLoading">
+        <form (submit)="validateAndAddWidget()" novalidate name="addForm">
+            <div class="row">
+                <div class="col" style="margin-bottom: 12px;">
+                    <div class="form-group row">
+                        <label for="padNameInput" class="col col-form-label">Etherpad Name</label>
+                        <div class="col">
+                            <input type="text" class="form-control" id="padNameInput"
+                                   placeholder="Pad Name"
+                                   [(ngModel)]="newWidgetUrl" name="newWidgetUrl"
+                                   [disabled]="isUpdating">
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <div class="form-check col">
+                            <label class="form-check-label">
+                                <input type="checkbox" class="form-check-input" [(ngModel)]="useCustomServer" name="useCustomServer">
+                                Use Custom Etherpad Server
+                            </label>
+                        </div>
+                    </div>
+                    <div class="form-group row" *ngIf="useCustomServer">
+                        <label for="padServerInput" class="col col-form-label">Etherpad Custom Server</label>
+                        <div class="col">
+                            <input type="text" class="form-control" id="padServerInput"
+                                   placeholder="https://demo.riot.im/etherpad/p/"
+                                   [(ngModel)]="newEtherpadServerUrl" name="newEtherpadServerUrl"
+                                   [disabled]="isUpdating">
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label for="padURL" class="col col-form-label">Etherpad URL</label>
+                        <div class="col">
+                            <input type="text" class="form-control" id="padURL" [value]="getPadURL()" readonly>
+                        </div>
+                    </div>
+                    <button type="submit" class="btn btn-success" [disabled]="isUpdating">
+                        <i class="fa fa-plus-circle"></i> Add Widget
+                    </button>
+                </div>
+                <div class="w-100"></div>
+                <div class="col removable widget-item" *ngFor="let widget of widgets trackById">
+                    {{ widget.name || widget.url }} <span class="text-muted" *ngIf="widget.ownerId">(added by {{ widget.ownerId }})</span>
+                    <button type="button" class="btn btn-outline-info btn-sm" (click)="editWidget(widget)"
+                            style="margin-top: -5px;" [disabled]="isUpdating">
+                        <i class="fa fa-pencil"></i> Edit Widget
+                    </button>
+                    <button type="button" class="btn btn-sm btn-outline-danger" (click)="removeWidget(widget)"
+                            style="margin-top: -5px;" [disabled]="isUpdating">
+                        <i class="fa fa-times"></i> Remove Widget
+                    </button>
+                    <div class="col" *ngIf="isWidgetToggled(widget)" style="margin-top: 12px;">
+                        <div class="form-group row">
+                            <div class="form-check col">
+                                <label class="form-check-label">
+                                    <input type="checkbox" class="form-check-input" [(ngModel)]="editUseCustomServer" name="widget-useCustomServer-{{widget.id}}">
+                                    Use Custom Etherpad Server
+                                </label>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="form-group col">
+                                <label for="widget-name-{{widget.id}}">Widget Name</label>
+                                <input type="text" class="form-control" id="widget-name-{{widget.id}}"
+                                       placeholder="Etherpad Widget"
+                                       [(ngModel)]="widget.newName" name="widget-name-{{widget.id}}"
+                                       [disabled]="isUpdating">
+                            </div>
+                            <div class="form-group col">
+                                <label for="widget-padName-{{widget.id}}">Etherpad Name</label>
+                                <input type="text" class="form-control" id="widget-padName-{{widget.id}}"
+                                       placeholder="Etherpad Name"
+                                       [(ngModel)]="widget.data.newPadName" name="widget-padName-{{widget.id}}"
+                                       [disabled]="isUpdating">
+                            </div>
+                            <div class="form-group col" *ngIf="editUseCustomServer">
+                                <label for="widget-padServer-{{widget.id}}">Etherpad Server URL</label>
+                                <input type="text" class="form-control"
+                                       placeholder="Etherpad Server URL"
+                                       [(ngModel)]="widget.data.newPadServer" name="widget-padServer-{{widget.id}}"
+                                       [disabled]="isUpdating">
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label for="padURL" class="col col-form-label">Etherpad URL</label>
+                            <div class="col">
+                                <input type="text" class="form-control" id="padURL" [value]="getPadURL(widget)" readonly>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="btn-group">
+                                <button type="button" class="btn btn-primary btn-sm" (click)="validateAndSaveWidget(widget)">
+                                    Save
+                                </button>
+                                <button type="button" class="btn btn-outline btn-sm" (click)="toggleWidget(widget)">
+                                    Cancel
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

web/app/configs/widget/etherpad/etherpad-config.component.scss

@@ -0,0 +1,4 @@
+// component styles are encapsulated and only applied to their components
+.widget-item {
+  margin-top: 3px;
+}

web/app/configs/widget/etherpad/etherpad-config.component.ts

@@ -0,0 +1,124 @@
+import { Component } from "@angular/core";
+import { ModalComponent, DialogRef } from "ngx-modialog";
+import { WidgetComponent } from "../widget.component";
+import { ScalarService } from "../../../shared/scalar.service";
+import { ConfigModalContext } from "../../../integration/integration.component";
+import { ToasterService } from "angular2-toaster";
+import { Widget, WIDGET_DIM_ETHERPAD, WIDGET_SCALAR_ETHERPAD } from "../../../shared/models/widget";
+
+@Component({
+    selector: "my-etherpadwidget-config",
+    templateUrl: "etherpad-config.component.html",
+    styleUrls: ["etherpad-config.component.scss", "./../../config.component.scss"],
+})
+export class EtherpadWidgetConfigComponent extends WidgetComponent implements ModalComponent<ConfigModalContext> {
+
+    public newEtherpadServerUrl: string = "";
+    public useCustomServer = false;
+    public editUseCustomServer = false;
+
+    constructor(public dialog: DialogRef<ConfigModalContext>,
+                toaster: ToasterService,
+                scalarService: ScalarService,
+                window: Window) {
+        super(
+            toaster,
+            scalarService,
+            dialog.context.roomId,
+            window,
+            WIDGET_DIM_ETHERPAD,
+            WIDGET_SCALAR_ETHERPAD,
+            dialog.context.integrationId,
+            "Etherpad Widget",
+            "generic", // wrapper
+            "etherpad" // scalar wrapper
+        );
+    }
+
+    getPadURL(widget?: Widget): string {
+        let url: string;
+        if (widget) {
+            if (this.editUseCustomServer) {
+                url = widget.data.newPadServer + this.roomId + "_" + widget.data.newPadName;
+            } else {
+                url = "https://demo.riot.im/etherpad/p/" + this.roomId + "_" + widget.data.newPadName;
+            }
+        } else {
+            if (this.useCustomServer) {
+                url = this.newEtherpadServerUrl + this.roomId + "_" + this.newWidgetUrl;
+            } else {
+                url = "https://demo.riot.im/etherpad/p/" + this.roomId + "_" + this.newWidgetUrl;
+            }
+        }
+        return url;
+    }
+
+    private checkPadURL(url: string, widget?: Widget): boolean {
+        if (widget) {
+            if (this.editUseCustomServer) {
+                return Boolean(url === widget.data.newPadServer);
+            } else {
+                return Boolean(url === "https://demo.riot.im/etherpad/p/");
+            }
+        } else {
+            if (this.useCustomServer) {
+                return Boolean(url === this.newEtherpadServerUrl);
+            } else {
+                return Boolean(url === "https://demo.riot.im/etherpad/p/");
+            }
+        }
+    }
+
+    public validateAndAddWidget() {
+        const url = this.getPadURL() + "?userName=$matrix_user_id";
+
+        if (this.checkPadURL(url)) {
+            this.toaster.pop("warning", "Please enter a Pad Name");
+            return;
+        }
+
+        const originalUrl = this.roomId + "_" + this.newWidgetUrl;
+        this.newWidgetUrl = url;
+
+        if (this.useCustomServer) {
+            this.addWidget({padName: originalUrl, padSuffix: originalUrl, padServer: this.newEtherpadServerUrl});
+        } else {
+            this.addWidget({padName: originalUrl, padSuffix: originalUrl, padServer: "https://demo.riot.im/etherpad/p/"});
+        }
+    }
+
+    public validateAndSaveWidget(widget: Widget) {
+        const url = this.getPadURL(widget) + "?userName=$matrix_user_id";
+
+        if (this.checkPadURL(url, widget)) {
+            this.toaster.pop("warning", "Please enter a Pad Name");
+            return;
+        }
+
+        if (!widget.data) widget.data = {};
+
+        widget.newUrl = url;
+        widget.data.padName = widget.data.newPadName;
+        widget.data.padSuffix = this.roomId + "_" + widget.data.newPadName;
+        if (this.editUseCustomServer) {
+            widget.data.padServer = widget.data.newPadServer;
+        } else {
+            widget.data.padServer = "https://demo.riot.im/etherpad/p/"
+        }
+
+        delete widget.data.newPadServer;
+        delete widget.data.newPadName;
+
+        this.saveWidget(widget);
+    }
+
+    editWidget(widget: Widget) {
+        widget.data.newPadName = widget.data.padName;
+        widget.data.newPadServer = widget.data.padServer;
+        if (widget.data.newPadServer !== "https://demo.riot.im/etherpad/p/") {
+            this.editUseCustomServer = true
+        }
+        super.editWidget(widget);
+    }
+
+}

web/app/configs/widget/widget.component.ts

@@ -88,7 +88,16 @@ export class WidgetComponent {
     }
 
     private wrapUrl(url: string): string {
-        return this.wrapperUrl + encodeURIComponent(url);
+        let encodedURL = this.wrapperUrl + encodeURIComponent(url);
+        
+        //don't URL encode $vars of the widget Spec
+        //TODO do the same with vars from the data object
+        encodedURL = encodedURL.replace(encodeURIComponent("$matrix_user_id"), "$matrix_user_id");
+        encodedURL = encodedURL.replace(encodeURIComponent("$matrix_room_id"), "$matrix_room_id");
+        encodedURL = encodedURL.replace(encodeURIComponent("$matrix_display_name"), "$matrix_display_name");
+        encodedURL = encodedURL.replace(encodeURIComponent("$matrix_avatar_url"), "$matrix_avatar_url");
+
+        return encodedURL;
     }
 
     private setWidgetUrl(widget: Widget) {

web/app/riot/riot.component.ts

@@ -6,7 +6,7 @@ import { ToasterService } from "angular2-toaster";
 import { Integration } from "../shared/models/integration";
 import { IntegrationService } from "../shared/integration.service";
 import * as _ from "lodash";
-import { WIDGET_DIM_CUSTOM, WIDGET_DIM_YOUTUBE, WIDGET_DIM_TWITCH } from "../shared/models/widget";
+import { WIDGET_DIM_CUSTOM, WIDGET_DIM_YOUTUBE, WIDGET_DIM_TWITCH, WIDGET_DIM_ETHERPAD } from "../shared/models/widget";
 import { IntegrationComponent } from "../integration/integration.component";
 
 @Component({
@@ -79,6 +79,9 @@ export class RiotComponent {
         } else if (this.requestedScreen === "type_" + WIDGET_DIM_TWITCH) {
             type = "widget";
             integrationType = "twitch";
+        } else if (this.requestedScreen === "type_" + WIDGET_DIM_ETHERPAD) {
+            type = "widget";
+            integrationType = "etherpad";
         } else {
             console.log("Unknown screen requested: " + this.requestedScreen);
         }

web/app/shared/integration.service.ts

@@ -7,6 +7,7 @@ import { TravisCiConfigComponent } from "../configs/travisci/travisci-config.com
 import { CustomWidgetConfigComponent } from "../configs/widget/custom_widget/custom_widget-config.component";
 import { YoutubeWidgetConfigComponent } from "../configs/widget/youtube/youtube-config.component";
 import { TwitchWidgetConfigComponent } from "../configs/widget/twitch/twitch-config.component";
+import { EtherpadWidgetConfigComponent } from "../configs/widget/etherpad/etherpad-config.component";
 
 @Injectable()
 export class IntegrationService {
@@ -24,6 +25,7 @@ export class IntegrationService {
             "customwidget": true,
             "youtube": true,
             "twitch": true,
+            "etherpad": true,
         },
     };
 
@@ -39,6 +41,7 @@ export class IntegrationService {
             "customwidget": CustomWidgetConfigComponent,
             "youtube": YoutubeWidgetConfigComponent,
             "twitch": TwitchWidgetConfigComponent,
+            "etherpad": EtherpadWidgetConfigComponent,
         },
     };
 

web/app/shared/models/widget.ts

@@ -14,6 +14,7 @@ export const WIDGET_SCALAR_TWITCH = "";
 export const WIDGET_DIM_CUSTOM = "dimension-customwidget";
 export const WIDGET_DIM_YOUTUBE = "dimension-youtube";
 export const WIDGET_DIM_TWITCH = "dimension-twitch";
+export const WIDGET_DIM_ETHERPAD = "dimension-etherpad";
 
 export interface Widget {
     id: string;