Upgrade web packages too

package.json

@@ -54,66 +54,68 @@
     "url": "^0.11.0"
   },
   "devDependencies": {
-    "@angular/animations": "^5.2.11",
+    "@angular/animations": "^7.2.13",
-    "@angular/common": "^5.2.11",
+    "@angular/common": "^7.2.13",
-    "@angular/compiler": "^5.2.11",
+    "@angular/compiler": "^7.2.13",
-    "@angular/core": "^5.2.11",
+    "@angular/core": "^7.2.13",
-    "@angular/forms": "^5.2.11",
+    "@angular/forms": "^7.2.13",
-    "@angular/http": "^5.2.11",
+    "@angular/http": "^7.2.13",
-    "@angular/platform-browser": "^5.2.11",
+    "@angular/platform-browser": "^7.2.13",
-    "@angular/platform-browser-dynamic": "^5.2.11",
+    "@angular/platform-browser-dynamic": "^7.2.13",
-    "@angular/router": "^5.2.11",
+    "@angular/router": "^7.2.13",
-    "@angularclass/hmr": "^2.1.0",
+    "@angularclass/hmr": "^2.1.3",
-    "@angularclass/hmr-loader": "^3.0.2",
+    "@angularclass/hmr-loader": "^3.0.4",
-    "@babel/core": "^7.2.2",
+    "@babel/core": "^7.4.3",
-    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-env": "^7.4.3",
     "@fortawesome/fontawesome": "^1.1.8",
     "@fortawesome/fontawesome-free-brands": "^5.0.13",
     "@fortawesome/fontawesome-free-regular": "^5.0.13",
     "@fortawesome/fontawesome-free-solid": "^5.0.13",
-    "@ng-bootstrap/ng-bootstrap": "^1.1.2",
+    "@ng-bootstrap/ng-bootstrap": "^4.1.1",
-    "@types/jquery": "^3.3.20",
+    "@types/jquery": "^3.3.29",
     "angular2-template-loader": "^0.6.2",
-    "angular2-toaster": "^4.0.2",
+    "angular2-toaster": "^7.0.0",
     "angular2-ui-switch": "^1.2.0",
     "awesome-typescript-loader": "^5.2.1",
-    "codelyzer": "^4.5.0",
+    "bootstrap": "^4.3.1",
-    "copy-webpack-plugin": "^4.6.0",
+    "codelyzer": "^5.0.0",
-    "core-js": "^2.5.7",
+    "copy-webpack-plugin": "^5.0.2",
-    "css-loader": "^2.0.0",
+    "core-js": "^3.0.1",
-    "cssnano": "^3.10.0",
+    "css-loader": "^2.1.1",
+    "cssnano": "^4.1.10",
     "dom-to-image": "^2.6.0",
     "embed-video": "^2.0.4",
-    "file-loader": "^1.1.11",
+    "file-loader": "^3.0.1",
     "goby": "^1.1.2",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "jquery": "^3.3.1",
+    "jquery": "^3.4.0",
     "json-loader": "^0.5.7",
-    "mini-css-extract-plugin": "^0.5.0",
+    "mini-css-extract-plugin": "^0.6.0",
     "ng2-breadcrumbs": "^0.1.281",
-    "ngx-modialog": "5.0.0",
+    "ngx-modialog": "^5.0.1",
-    "node-sass": "^4.9.4",
+    "node-sass": "^4.11.0",
     "postcss-cssnext": "^3.1.0",
-    "postcss-import": "^11.1.0",
+    "postcss-import": "^12.0.1",
-    "postcss-loader": "^2.1.6",
+    "postcss-loader": "^3.0.0",
-    "postcss-scss": "^1.0.6",
+    "postcss-scss": "^2.0.0",
-    "raw-loader": "^0.5.1",
+    "raw-loader": "^1.0.0",
-    "reflect-metadata": "^0.1.12",
+    "reflect-metadata": "^0.1.13",
-    "rimraf": "^2.6.2",
+    "rimraf": "^2.6.3",
-    "rxjs": "^5.5.12",
+    "rxjs": "^6.4.0",
+    "rxjs-compat": "^6.4.0",
     "sass-loader": "^7.1.0",
-    "screenfull": "^3.3.3",
+    "screenfull": "^4.2.0",
     "shelljs": "^0.8.3",
     "spinkit": "^1.2.5",
     "style-loader": "^0.23.1",
     "ts-helpers": "^1.1.2",
-    "tslint": "^5.11.0",
+    "tslint": "^5.15.0",
     "tslint-loader": "^3.5.4",
     "url-loader": "^1.1.2",
-    "webpack": "^4.27.1",
+    "webpack": "^4.30.0",
-    "webpack-cli": "^3.1.2",
+    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.1.14",
+    "webpack-dev-server": "^3.3.1",
-    "zone.js": "^0.8.26"
+    "zone.js": "^0.9.0"
   }
 }

web/app/app.module.ts

@@ -10,7 +10,7 @@ import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { RiotComponent } from "./riot/riot.component";
 import { UiSwitchModule } from "angular2-ui-switch";
 import { ScalarClientApiService } from "./shared/services/scalar/scalar-client-api.service";
-import { ToasterModule } from "angular2-toaster";
+import { ToasterModule, ToasterService } from "angular2-toaster";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { ScalarCloseComponent } from "./riot/scalar-close/scalar-close.component";
 import { BootstrapModalModule } from "ngx-modialog/plugins/bootstrap";
@@ -119,7 +119,7 @@ import { ManagerTestWidgetWrapperComponent } from "./widget-wrappers/manager-tes
         HttpModule,
         FormsModule,
         routing,
-        NgbModule.forRoot(),
+        NgbModule,
         UiSwitchModule,
         ToasterModule,
         BrowserAnimationsModule,
@@ -232,6 +232,7 @@ import { ManagerTestWidgetWrapperComponent } from "./widget-wrappers/manager-tes
         AdminCustomSimpleBotsApiService,
         SlackApiService,
         AdminSlackApiService,
+        ToasterService,
         {provide: Window, useValue: window},
 
         // Vendor

web/app/elements/fullscreen-button/fullscreen-button.component.ts

@@ -17,14 +17,18 @@ export class FullscreenButtonComponent implements OnDestroy, OnInit {
     }
 
     public ngOnInit(): void {
+        // @ts-ignore
         this.listener = screenfull.on("change", () => {
+            // @ts-ignore
             this.isFullscreen = screenfull.isFullscreen;
         });
+        // @ts-ignore
         this.isFullscreen = screenfull.isFullscreen;
     }
 
     public ngOnDestroy(): void {
         if (this.listener) {
+            // @ts-ignore
             screenfull.off(this.listener);
         }
     }

web/app/shared/directives/toggle-fullscreen.directive.ts

@@ -9,7 +9,9 @@ export class ToggleFullscreenDirective {
     @HostListener("click")
     onClick() {
         // HACK: This should be behind a service in the event the library changes
+        // @ts-ignore
         if (screenfull.enabled) {
+            // @ts-ignore
             screenfull.toggle();
         }
     }

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

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_DimensionConfig, FE_DimensionVersion } from "../../models/admin-responses";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminApiService extends AuthedApi {
@@ -10,18 +11,22 @@ export class AdminApiService extends AuthedApi {
     }
 
     public isAdmin(): Promise<any> {
-        return this.authedGet("/api/v1/dimension/admin/check").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/check")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getConfig(): Promise<FE_DimensionConfig> {
-        return this.authedGet("/api/v1/dimension/admin/config").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/config")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getVersion(): Promise<FE_DimensionVersion> {
-        return this.authedGet("/api/v1/dimension/admin/version").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/version")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public logoutAll(): Promise<any> {
-        return this.authedPost("/api/v1/dimension/admin/sessions/logout/all").map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/sessions/logout/all")
+            .pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_Appservice } from "../../models/admin-responses";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminAppserviceApiService extends AuthedApi {
@@ -10,18 +11,22 @@ export class AdminAppserviceApiService extends AuthedApi {
     }
 
     public getAppservices(): Promise<FE_Appservice[]> {
-        return this.authedGet("/api/v1/dimension/admin/appservices/all").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/appservices/all")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getAppservice(appserviceId: string): Promise<FE_Appservice> {
-        return this.authedGet("/api/v1/dimension/admin/appservices/" + appserviceId).map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/appservices/" + appserviceId)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public createAppservice(userPrefix: string): Promise<FE_Appservice> {
-        return this.authedPost("/api/v1/dimension/admin/appservices/new", {userPrefix: userPrefix}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/appservices/new", {userPrefix: userPrefix})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public test(appserviceId: string): Promise<any> {
-        return this.authedPost("/api/v1/dimension/admin/appservices/" + appserviceId + "/test").map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/appservices/" + appserviceId + "/test")
+            .pipe(map(r => r.json())).toPromise();
     }
 }

web/app/shared/services/admin/admin-custom-simple-bots-api.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_CustomSimpleBot, FE_CustomSimpleBotTemplate, FE_UserProfile } from "../../models/admin-responses";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminCustomSimpleBotsApiService extends AuthedApi {
@@ -10,22 +11,27 @@ export class AdminCustomSimpleBotsApiService extends AuthedApi {
     }
 
     public getBots(): Promise<FE_CustomSimpleBot[]> {
-        return this.authedGet("/api/v1/dimension/admin/bots/simple/custom/all").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/bots/simple/custom/all")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getBot(id: number): Promise<FE_CustomSimpleBot> {
-        return this.authedGet("/api/v1/dimension/admin/bots/simple/custom/" + id).map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/bots/simple/custom/" + id)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public updateBot(id: number, config: FE_CustomSimpleBotTemplate): Promise<FE_CustomSimpleBot> {
-        return this.authedPost("/api/v1/dimension/admin/bots/simple/custom/" + id, config).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/bots/simple/custom/" + id, config)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public createBot(config: FE_CustomSimpleBotTemplate): Promise<FE_CustomSimpleBot> {
-        return this.authedPost("/api/v1/dimension/admin/bots/simple/custom/new", config).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/bots/simple/custom/new", config)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getProfile(userId: string): Promise<FE_UserProfile> {
-        return this.authedGet("/api/v1/dimension/admin/bots/simple/custom/profile/" + userId).map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/bots/simple/custom/profile/" + userId)
+            .pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -3,6 +3,7 @@ import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_Upstream } from "../../models/admin-responses";
 import { FE_GitterBridge } from "../../models/gitter";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminGitterApiService extends AuthedApi {
@@ -11,26 +12,29 @@ export class AdminGitterApiService extends AuthedApi {
     }
 
     public getBridges(): Promise<FE_GitterBridge[]> {
-        return this.authedGet("/api/v1/dimension/admin/gitter/all").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/gitter/all")
+            .pipe(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();
+        return this.authedGet("/api/v1/dimension/admin/gitter/" + bridgeId)
+            .pipe(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();
+        return this.authedPost("/api/v1/dimension/admin/gitter/new/upstream", {upstreamId: upstream.id})
+            .pipe(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();
+        }).pipe(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();
+        }).pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_Bridge, FE_Widget } from "../../models/integration";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminIntegrationsApiService extends AuthedApi {
@@ -10,18 +11,22 @@ export class AdminIntegrationsApiService extends AuthedApi {
     }
 
     public getAllWidgets(): Promise<FE_Widget[]> {
-        return this.authedGet("/api/v1/dimension/admin/integrations/widget/all").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/integrations/widget/all")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getAllBridges(): Promise<FE_Bridge<any>[]> {
-        return this.authedGet("/api/v1/dimension/admin/integrations/bridge/all").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/integrations/bridge/all")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public toggleIntegration(category: string, type: string, enabled: boolean): Promise<any> {
-        return this.authedPost("/api/v1/dimension/admin/integrations/" + category + "/" + type + "/enabled", {enabled: enabled}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/integrations/" + category + "/" + type + "/enabled", {enabled: enabled})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public setIntegrationOptions(category: string, type: string, options: any): Promise<any> {
-        return this.authedPost("/api/v1/dimension/admin/integrations/" + category + "/" + type + "/options", {options: options}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/integrations/" + category + "/" + type + "/options", {options: options})
+            .pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -3,6 +3,7 @@ import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_Upstream } from "../../models/admin-responses";
 import { FE_IrcBridge } from "../../models/irc";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminIrcApiService extends AuthedApi {
@@ -11,24 +12,28 @@ export class AdminIrcApiService extends AuthedApi {
     }
 
     public getBridges(): Promise<FE_IrcBridge[]> {
-        return this.authedGet("/api/v1/dimension/admin/irc/all").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/irc/all")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getBridge(bridgeId: number): Promise<FE_IrcBridge> {
-        return this.authedGet("/api/v1/dimension/admin/irc/" + bridgeId).map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/irc/" + bridgeId)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public newFromUpstream(upstream: FE_Upstream): Promise<FE_IrcBridge> {
-        return this.authedPost("/api/v1/dimension/admin/irc/new/upstream", {upstreamId: upstream.id}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/irc/new/upstream", {upstreamId: upstream.id})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public newSelfhosted(provisionUrl: string): Promise<FE_IrcBridge> {
-        return this.authedPost("/api/v1/dimension/admin/irc/new/selfhosted", {provisionUrl: provisionUrl}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/irc/new/selfhosted", {provisionUrl: provisionUrl})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public setNetworkEnabled(bridgeId: number, networkId: string, isEnabled: boolean): Promise<any> {
         return this.authedPost("/api/v1/dimension/admin/irc/" + bridgeId + "/network/" + networkId + "/enabled", {
             isEnabled: isEnabled,
-        }).map(r => r.json()).toPromise();
+        }).pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_Appservice, FE_NebConfiguration, FE_Upstream } from "../../models/admin-responses";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminNebApiService extends AuthedApi {
@@ -10,33 +11,39 @@ export class AdminNebApiService extends AuthedApi {
     }
 
     public getConfigurations(): Promise<FE_NebConfiguration[]> {
-        return this.authedGet("/api/v1/dimension/admin/neb/all").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/neb/all")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getConfiguration(nebId: number): Promise<FE_NebConfiguration> {
-        return this.authedGet("/api/v1/dimension/admin/neb/" + nebId + "/config").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/neb/" + nebId + "/config")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public newUpstreamConfiguration(upstream: FE_Upstream): Promise<FE_NebConfiguration> {
-        return this.authedPost("/api/v1/dimension/admin/neb/new/upstream", {upstreamId: upstream.id}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/neb/new/upstream", {upstreamId: upstream.id})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public newAppserviceConfiguration(adminUrl: string, appservice: FE_Appservice): Promise<FE_NebConfiguration> {
         return this.authedPost("/api/v1/dimension/admin/neb/new/appservice", {
             adminUrl: adminUrl,
             appserviceId: appservice.id
-        }).map(r => r.json()).toPromise();
+        }).pipe(map(r => r.json())).toPromise();
     }
 
     public toggleIntegration(nebId: number, integrationType: string, setEnabled: boolean): Promise<any> {
-        return this.authedPost("/api/v1/dimension/admin/neb/" + nebId + "/integration/" + integrationType + "/enabled", {enabled: setEnabled}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/neb/" + nebId + "/integration/" + integrationType + "/enabled", {enabled: setEnabled})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public setIntegrationConfiguration(nebId: number, integrationType: string, configuration: any): Promise<any> {
-        return this.authedPost("/api/v1/dimension/admin/neb/" + nebId + "/integration/" + integrationType + "/config", configuration).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/neb/" + nebId + "/integration/" + integrationType + "/config", configuration)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getIntegrationConfiguration(nebId: number, integrationType: string): Promise<any> {
-        return this.authedGet("/api/v1/dimension/admin/neb/" + nebId + "/integration/" + integrationType + "/config").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/neb/" + nebId + "/integration/" + integrationType + "/config")
+            .pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -3,6 +3,7 @@ import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_Upstream } from "../../models/admin-responses";
 import { FE_SlackBridge } from "../../models/slack";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminSlackApiService extends AuthedApi {
@@ -11,26 +12,29 @@ export class AdminSlackApiService extends AuthedApi {
     }
 
     public getBridges(): Promise<FE_SlackBridge[]> {
-        return this.authedGet("/api/v1/dimension/admin/slack/all").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/slack/all")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getBridge(bridgeId: number): Promise<FE_SlackBridge> {
-        return this.authedGet("/api/v1/dimension/admin/slack/" + bridgeId).map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/slack/" + bridgeId)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public newFromUpstream(upstream: FE_Upstream): Promise<FE_SlackBridge> {
-        return this.authedPost("/api/v1/dimension/admin/slack/new/upstream", {upstreamId: upstream.id}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/slack/new/upstream", {upstreamId: upstream.id})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public newSelfhosted(provisionUrl: string): Promise<FE_SlackBridge> {
         return this.authedPost("/api/v1/dimension/admin/slack/new/selfhosted", {
             provisionUrl: provisionUrl,
-        }).map(r => r.json()).toPromise();
+        }).pipe(map(r => r.json())).toPromise();
     }
 
     public updateSelfhosted(bridgeId: number, provisionUrl: string): Promise<FE_SlackBridge> {
         return this.authedPost("/api/v1/dimension/admin/slack/" + bridgeId, {
             provisionUrl: provisionUrl,
-        }).map(r => r.json()).toPromise();
+        }).pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_StickerPack } from "../../models/integration";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminStickersApiService extends AuthedApi {
@@ -10,16 +11,17 @@ export class AdminStickersApiService extends AuthedApi {
     }
 
     public getAllPacks(): Promise<FE_StickerPack[]> {
-        return this.authedGet("/api/v1/dimension/admin/stickers/packs").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/stickers/packs")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public togglePack(packId: number, isEnabled: boolean): Promise<any> {
         return this.authedPost("/api/v1/dimension/admin/stickers/packs/" + packId + "/enabled", {isEnabled: isEnabled})
-            .map(r => r.json()).toPromise();
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public importFromTelegram(packUrl: string): Promise<FE_StickerPack> {
         return this.authedPost("/api/v1/dimension/admin/stickers/packs/import/telegram", {packUrl: packUrl})
-            .map(r => r.json()).toPromise();
+            .pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -3,6 +3,7 @@ import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_Upstream } from "../../models/admin-responses";
 import { FE_TelegramBridge, FE_TelegramBridgeOptions } from "../../models/telegram";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminTelegramApiService extends AuthedApi {
@@ -11,15 +12,18 @@ export class AdminTelegramApiService extends AuthedApi {
     }
 
     public getBridges(): Promise<FE_TelegramBridge[]> {
-        return this.authedGet("/api/v1/dimension/admin/telegram/all").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/telegram/all")
+            .pipe(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();
+        return this.authedGet("/api/v1/dimension/admin/telegram/" + bridgeId)
+            .pipe(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();
+        return this.authedPost("/api/v1/dimension/admin/telegram/new/upstream", {upstreamId: upstream.id})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public newSelfhosted(provisionUrl: string, sharedSecret: string, options: FE_TelegramBridgeOptions): Promise<FE_TelegramBridge> {
@@ -27,7 +31,7 @@ export class AdminTelegramApiService extends AuthedApi {
             provisionUrl: provisionUrl,
             sharedSecret: sharedSecret,
             options: options,
-        }).map(r => r.json()).toPromise();
+        }).pipe(map(r => r.json())).toPromise();
     }
 
     public updateSelfhosted(bridgeId: number, provisionUrl: string, sharedSecret: string, options: FE_TelegramBridgeOptions): Promise<FE_TelegramBridge> {
@@ -35,6 +39,6 @@ export class AdminTelegramApiService extends AuthedApi {
             provisionUrl: provisionUrl,
             sharedSecret: sharedSecret,
             options: options,
-        }).map(r => r.json()).toPromise();
+        }).pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_Upstream } from "../../models/admin-responses";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminUpstreamApiService extends AuthedApi {
@@ -10,7 +11,8 @@ export class AdminUpstreamApiService extends AuthedApi {
     }
 
     public getUpstreams(): Promise<FE_Upstream[]> {
-        return this.authedGet("/api/v1/dimension/admin/upstreams/all").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/upstreams/all")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public newUpstream(name: string, type: string, scalarUrl: string, apiUrl: string): Promise<FE_Upstream> {
@@ -19,6 +21,6 @@ export class AdminUpstreamApiService extends AuthedApi {
             type: type,
             scalarUrl: scalarUrl,
             apiUrl: apiUrl,
-        }).map(r => r.json()).toPromise();
+        }).pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -3,6 +3,7 @@ import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_Upstream } from "../../models/admin-responses";
 import { FE_WebhooksBridge } from "../../models/webhooks";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class AdminWebhooksApiService extends AuthedApi {
@@ -11,28 +12,31 @@ export class AdminWebhooksApiService extends AuthedApi {
     }
 
     public getBridges(): Promise<FE_WebhooksBridge[]> {
-        return this.authedGet("/api/v1/dimension/admin/webhooks/all").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/webhooks/all")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getBridge(bridgeId: number): Promise<FE_WebhooksBridge> {
-        return this.authedGet("/api/v1/dimension/admin/webhooks/" + bridgeId).map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/admin/webhooks/" + bridgeId)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public newFromUpstream(upstream: FE_Upstream): Promise<FE_WebhooksBridge> {
-        return this.authedPost("/api/v1/dimension/admin/webhooks/new/upstream", {upstreamId: upstream.id}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/admin/webhooks/new/upstream", {upstreamId: upstream.id})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public newSelfhosted(provisionUrl: string, sharedSecret: string): Promise<FE_WebhooksBridge> {
         return this.authedPost("/api/v1/dimension/admin/webhooks/new/selfhosted", {
             provisionUrl: provisionUrl,
             sharedSecret: sharedSecret,
-        }).map(r => r.json()).toPromise();
+        }).pipe(map(r => r.json())).toPromise();
     }
 
     public updateSelfhosted(bridgeId: number, provisionUrl: string, sharedSecret: string): Promise<FE_WebhooksBridge> {
         return this.authedPost("/api/v1/dimension/admin/webhooks/" + bridgeId, {
             provisionUrl: provisionUrl,
             sharedSecret: sharedSecret,
-        }).map(r => r.json()).toPromise();
+        }).pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_GitterLink } from "../../models/gitter";
+import { map } from 'rxjs/operators';
 
 @Injectable()
 export class GitterApiService extends AuthedApi {
@@ -11,16 +12,16 @@ export class GitterApiService extends AuthedApi {
 
     public bridgeRoom(roomId: string, gitterRoomName: string): Promise<FE_GitterLink> {
         return this.authedPost("/api/v1/dimension/gitter/room/" + roomId + "/link", {gitterRoomName})
-            .map(r => r.json()).toPromise();
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public unbridgeRoom(roomId: string): Promise<any> {
         return this.authedDelete("/api/v1/dimension/gitter/room/" + roomId + "/link")
-            .map(r => r.json()).toPromise();
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getLink(roomId: string): Promise<FE_GitterLink> {
         return this.authedGet("/api/v1/dimension/gitter/room/" + roomId + "/link")
-            .map(r => r.json()).toPromise();
+            .pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -3,6 +3,7 @@ import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_IntegrationsResponse } from "../../models/dimension-responses";
 import { FE_Integration } from "../../models/integration";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class IntegrationsApiService extends AuthedApi {
@@ -11,22 +12,27 @@ export class IntegrationsApiService extends AuthedApi {
     }
 
     public getIntegrations(roomId: string): Promise<FE_IntegrationsResponse> {
-        return this.authedGet("/api/v1/dimension/integrations/room/" + roomId).map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/integrations/room/" + roomId)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getIntegration(category: string, type: string): Promise<FE_Integration> {
-        return this.http.get("/api/v1/dimension/integrations/" + category + "/" + type).map(r => r.json()).toPromise();
+        return this.http.get("/api/v1/dimension/integrations/" + category + "/" + type)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getIntegrationInRoom(category: string, type: string, roomId: string): Promise<FE_Integration> {
-        return this.authedGet("/api/v1/dimension/integrations/room/" + roomId + "/integrations/" + category + "/" + type).map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/integrations/room/" + roomId + "/integrations/" + category + "/" + type)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public setIntegrationConfiguration(category: string, type: string, roomId: string, newConfig: any): Promise<any> {
-        return this.authedPost("/api/v1/dimension/integrations/room/" + roomId + "/integrations/" + category + "/" + type + "/config", newConfig).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/integrations/room/" + roomId + "/integrations/" + category + "/" + type + "/config", newConfig)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public removeIntegration(category: string, type: string, roomId: string): Promise<any> {
-        return this.authedDelete("/api/v1/dimension/integrations/room/" + roomId + "/integrations/" + category + "/" + type).map(r => r.json()).toPromise();
+        return this.authedDelete("/api/v1/dimension/integrations/room/" + roomId + "/integrations/" + category + "/" + type)
+            .pipe(map(r => r.json())).toPromise();
     }
 }

web/app/shared/services/integrations/irc-api.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class IrcApiService extends AuthedApi {
@@ -9,14 +10,17 @@ export class IrcApiService extends AuthedApi {
     }
 
     public getOperators(networkId: string, channelNoHash: string): Promise<string[]> {
-        return this.authedGet("/api/v1/dimension/irc/" + networkId + "/channel/" + channelNoHash + "/ops").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/irc/" + networkId + "/channel/" + channelNoHash + "/ops")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public requestLink(roomId: string, networkId: string, channelNoHash: string, op: string): Promise<any> {
-        return this.authedPost("/api/v1/dimension/irc/" + networkId + "/channel/" + channelNoHash + "/link/" + roomId, {op: op}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/irc/" + networkId + "/channel/" + channelNoHash + "/link/" + roomId, {op: op})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public removeLink(roomId: string, networkId: string, channelNoHash: string): Promise<any> {
-        return this.authedPost("/api/v1/dimension/irc/" + networkId + "/channel/" + channelNoHash + "/unlink/" + roomId).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/irc/" + networkId + "/channel/" + channelNoHash + "/unlink/" + roomId)
+            .pipe(map(r => r.json())).toPromise();
     }
 }

web/app/shared/services/integrations/slack-api.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_SlackChannel, FE_SlackLink, FE_SlackTeam } from "../../models/slack";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class SlackApiService extends AuthedApi {
@@ -11,28 +12,32 @@ export class SlackApiService extends AuthedApi {
 
     public bridgeRoom(roomId: string, teamId: string, channelId: string): Promise<FE_SlackLink> {
         return this.authedPost("/api/v1/dimension/slack/room/" + roomId + "/link", {teamId, channelId})
-            .map(r => r.json()).toPromise();
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public unbridgeRoom(roomId: string): Promise<any> {
         return this.authedDelete("/api/v1/dimension/slack/room/" + roomId + "/link")
-            .map(r => r.json()).toPromise();
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getLink(roomId: string): Promise<FE_SlackLink> {
         return this.authedGet("/api/v1/dimension/slack/room/" + roomId + "/link")
-            .map(r => r.json()).toPromise();
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getTeams(): Promise<FE_SlackTeam[]> {
-        return this.authedGet("/api/v1/dimension/slack/teams").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/slack/teams")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getChannels(teamId: string): Promise<FE_SlackChannel[]> {
-        return this.authedGet("/api/v1/dimension/slack/teams/" + teamId + "/channels").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/slack/teams/" + teamId + "/channels")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getAuthUrl(): Promise<string> {
-        return this.authedGet("/api/v1/dimension/slack/auth").map(r => r.json()).toPromise().then(r => r["authUrl"]);
+        return this.authedGet("/api/v1/dimension/slack/auth")
+            .pipe(map(r => r.json())).toPromise()
+            .then(r => r["authUrl"]);
     }
 }

web/app/shared/services/integrations/sticker-api.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_StickerConfig, FE_UserStickerPack } from "../../models/integration";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class StickerApiService extends AuthedApi {
@@ -10,18 +11,22 @@ export class StickerApiService extends AuthedApi {
     }
 
     public getConfig(): Promise<FE_StickerConfig> {
-        return this.authedGet("/api/v1/dimension/stickers/config").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/stickers/config")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public getPacks(): Promise<FE_UserStickerPack[]> {
-        return this.authedGet("/api/v1/dimension/stickers/packs").map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/stickers/packs")
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public togglePackSelection(packId: number, isSelected: boolean): Promise<any> {
-        return this.authedPost("/api/v1/dimension/stickers/packs/" + packId + "/selected", {isSelected: isSelected}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/stickers/packs/" + packId + "/selected", {isSelected: isSelected})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public importStickerpack(packUrl: string): Promise<FE_UserStickerPack> {
-        return this.authedPost("/api/v1/dimension/stickers/packs/import", {packUrl}).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/stickers/packs/import", {packUrl})
+            .pipe(map(r => r.json())).toPromise();
     }
 }

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

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_PortalInfo } from "../../models/telegram";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class TelegramApiService extends AuthedApi {
@@ -10,15 +11,17 @@ export class TelegramApiService extends AuthedApi {
     }
 
     public getPortalInfo(chatId: number, roomId: string): Promise<FE_PortalInfo> {
-        return this.authedGet("/api/v1/dimension/telegram/chat/" + chatId, {roomId: roomId}).map(r => r.json()).toPromise();
+        return this.authedGet("/api/v1/dimension/telegram/chat/" + chatId, {roomId: roomId})
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public bridgeRoom(roomId: string, chatId: number, unbridgeOtherPortals = false): Promise<FE_PortalInfo> {
         return this.authedPost("/api/v1/dimension/telegram/chat/" + chatId + "/room/" + roomId, {unbridgeOtherPortals})
-            .map(r => r.json()).toPromise();
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public unbridgeRoom(roomId: string): Promise<FE_PortalInfo> {
-        return this.authedDelete("/api/v1/dimension/telegram/room/" + roomId).map(r => r.json()).toPromise();
+        return this.authedDelete("/api/v1/dimension/telegram/room/" + roomId)
+            .pipe(map(r => r.json())).toPromise();
     }
 }

web/app/shared/services/integrations/webhooks-api.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_Webhook, FE_WebhookOptions } from "../../models/webhooks";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class WebhooksApiService extends AuthedApi {
@@ -10,14 +11,17 @@ export class WebhooksApiService extends AuthedApi {
     }
 
     public createWebhook(roomId: string, options: FE_WebhookOptions): Promise<FE_Webhook> {
-        return this.authedPost("/api/v1/dimension/webhooks/room/" + roomId + "/webhooks/new", options).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/webhooks/room/" + roomId + "/webhooks/new", options)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public updateWebhook(roomId: string, hookId: string, options: FE_WebhookOptions): Promise<FE_Webhook> {
-        return this.authedPost("/api/v1/dimension/webhooks/room/" + roomId + "/webhooks/" + hookId, options).map(r => r.json()).toPromise();
+        return this.authedPost("/api/v1/dimension/webhooks/room/" + roomId + "/webhooks/" + hookId, options)
+            .pipe(map(r => r.json())).toPromise();
     }
 
     public deleteWebhook(roomId: string, hookId: string): Promise<any> {
-        return this.authedDelete("/api/v1/dimension/webhooks/room/" + roomId + "/webhooks/" + hookId).map(r => r.json()).toPromise();
+        return this.authedDelete("/api/v1/dimension/webhooks/room/" + roomId + "/webhooks/" + hookId)
+            .pipe(map(r => r.json())).toPromise();
     }
 }

web/app/shared/services/integrations/widget-api.service.ts

@@ -3,6 +3,7 @@ import { Http } from "@angular/http";
 import { AuthedApi } from "../authed-api";
 import { FE_Widget } from "../../models/integration";
 import { IntegrationsApiService } from "./integrations-api.service";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class WidgetApiService extends AuthedApi {
@@ -16,6 +17,6 @@ export class WidgetApiService extends AuthedApi {
 
     public isEmbeddable(url: string): Promise<any> { // 200 = success, anything else = error
         return this.http.get("/api/v1/dimension/widgets/embeddable", {params: {url: url}})
-            .map(r => r.json()).toPromise();
+            .pipe(map(r => r.json())).toPromise();
     }
 }

web/app/shared/services/scalar/scalar-server-api.service.ts

@@ -7,6 +7,7 @@ import {
 } from "../../models/scalar-server-responses";
 import { AuthedApi } from "../authed-api";
 import { SCALAR_API_VERSION } from "../../../../../src/utils/common-constants";
+import { map } from "rxjs/operators";
 
 @Injectable()
 export class ScalarServerApiService extends AuthedApi {
@@ -15,16 +16,18 @@ export class ScalarServerApiService extends AuthedApi {
     }
 
     public ping(): Promise<any> {
-        return this.http.get("/api/v1/scalar/ping").map(res => res.json()).toPromise();
+        return this.http.get("/api/v1/scalar/ping")
+            .pipe(map(res => res.json())).toPromise();
     }
 
     public getAccount(): Promise<FE_ScalarAccountResponse> {
-        return this.authedGet("/api/v1/scalar/account", {v: SCALAR_API_VERSION}).map(res => res.json()).toPromise();
+        return this.authedGet("/api/v1/scalar/account", {v: SCALAR_API_VERSION})
+            .pipe(map(res => res.json())).toPromise();
     }
 
     public register(openId: FE_ScalarOpenIdRequestBody): Promise<FE_ScalarRegisterResponse> {
         return this.http.post("/api/v1/scalar/register", openId, {
             params: {v: SCALAR_API_VERSION},
-        }).map(res => res.json()).toPromise();
+        }).pipe(map(res => res.json())).toPromise();
     }
 }

web/polyfills.ts

@@ -1,4 +1,3 @@
-import "core-js/client/shim";
 import "reflect-metadata";
 import "ts-helpers";
 require("zone.js/dist/zone");

web/public/index.html

@@ -82,8 +82,6 @@
         }
     </style>
 
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
-
     <base href="/">
 </head>
 <body class="app-body">

web/style/app.scss

@@ -1,6 +1,7 @@
 // styles in src/style directory are applied to the whole page
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:100|Roboto:300');
 @import '../../node_modules/angular2-toaster/toaster';
+@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 @import "themes/themes";
 @import "components/ibox";
 @import "components/dialog";