Refactor WebComponent and iframing to be mutually exclusive, strip old app

proxy.conf.json

@@ -11,7 +11,7 @@
     "ws": true
   },
 
-  "/login": {
+  "/webservice": {
     "target": "http://localhost:8888",
     "secure": false
   }

src/app/app.module.ts

@@ -10,7 +10,7 @@ import { AppComponent } from './app.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HeaderComponent } from './header/header.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
-import { LoginComponent } from './web/web.component';
+import { WebComponent } from './web/web.component';
 import { MarkdownService } from './services/markdown.service';
 import { TerminadoService } from './services/terminado.service';
 import { IdeComponent } from './ide/ide.component';
@@ -22,6 +22,7 @@ import { ProcessManagerService } from './services/processmanager.service';
 import { AppRoutingModule } from './app-routing.module';
 import { TestmessengerComponent } from './testmessenger/testmessenger.component';
 import { DeploymentNotificationService } from './services/deployment-notification.service';
+import { SafePipe } from './pipes/safe.pipe';
 
 
 @NgModule({
@@ -29,12 +30,13 @@ import { DeploymentNotificationService } from './services/deployment-notificatio
     AppComponent,
     HeaderComponent,
     SidebarComponent,
-    LoginComponent,
+    WebComponent,
     IdeComponent,
     MessagesComponent,
     TerminalComponent,
     DashboardComponent,
-    TestmessengerComponent
+    TestmessengerComponent,
+    SafePipe
   ],
   imports: [
     BrowserModule,

src/app/config.ts

@@ -22,6 +22,7 @@ export const config = {
       'ide-only',
       'web-only'
     ],
+    iframeUrl: '/webservice',
     hide_messages: false
   },
   ide: {
@@ -29,7 +30,7 @@ export const config = {
     autoSaveInterval: 444,
     defaultCode: 'Loading your file...',
     defaultLanguage: 'text',
-    deployProcessName: 'login',
+    deployProcessName: 'webservice',
     showDeployButton: true
   },
   terminal: {

src/app/dashboard/dashboard.component.html

@@ -4,10 +4,13 @@
     <div [ngClass]="{ 'hide-attribute': hide_messages }" class="tfw-messages"><app-messages></app-messages></div>
     <div class="tfw-web tao-grid-top-left"
          [ngClass]="{ 'deploy-blur': deploying }">
-      <div class="iframe-container">
+         <app-web *ngIf="!iframeUrl"></app-web>
+         <div *ngIf="iframeUrl" class="iframe-container">
           <iframe class="iframe"
-                scrolling="yes" frameborder="0"
+                  scrolling="yes"
-                src="about:blank"></iframe>
+                  frameborder="0"
+                  [src]="iframeUrl | safe">
+          </iframe>
         </div>
     </div>
     <div class="tfw-ide">

src/app/dashboard/dashboard.component.ts

@@ -16,6 +16,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   deploymentNotificationSubscription: Subscription;
   layout: string = config.dashboard.currentLayout;
   hide_messages: boolean = config.dashboard.hide_messages;
+  iframeUrl: string = config.dashboard.iframeUrl;
   command_handlers = {'layout':          this.layoutHandler.bind(this),
                       'reload_frontend': this.reloadFrontendHandlder.bind(this)};
 

src/app/messages/messages.component.html

@@ -12,4 +12,3 @@
     <div [innerHtml]="message.message"></div>
   </div>
 </div>
-

src/app/pipes/safe.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safe'
+})
+export class SafePipe implements PipeTransform {
+  constructor (private sanitizer: DomSanitizer) {}
+
+  transform(value: string, args?: any): any {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+  }
+}

src/app/web/web.component.html

@@ -1,39 +1,2 @@
-<!--
+<h2>WebComponent is here!</h2>
-<div>
+<p>Edit me if you want to write your own component in Angular!</p>
-  <h1>Login page</h1>
-  <form #loginForm="ngForm" (submit)="onSubmit()" [hidden]="submitted">
-    <div class="form-group">
-      <label for="email_input">Email:</label>
-      <input
-        id="email_input"
-        class="form-control"
-        type="email"
-        name="email"
-        placeholder="Enter email"
-        [(ngModel)]="model.email"
-      >
-    </div>
-    <div class="form-group">
-      <label for="password_input">Password:</label>
-      <input
-        id="password_input"
-        class="form-control"
-        type="password"
-        name="password"
-        placeholder="Password"
-        [(ngModel)]="model.password"
-      >
-    </div>
-    <button type="submit" class="btn tao-btn-primary">Submit</button>
-  </form>
-  <div [hidden]="!submitted">
-    <p>
-      Logged in as {{logged_in_email}}.
-      You <em><span *ngIf="!is_admin">don't </span>have</em> admin privileges.
-    </p>
-  </div>
-</div>
--->
-<div class="iframe-container">
-
-</div>

src/app/web/web.component.ts

@@ -1,36 +1,12 @@
-import { HttpClient } from '@angular/common/http';
+// Edit me if you want to write your own component in Angular!
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { config } from '../config'
-import { Login } from './web';
-import { DeploymentNotificationService } from '../services/deployment-notification.service';
-import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'app-web',
   templateUrl: './web.component.html',
   styleUrls: ['./web.component.scss']
 })
-export class LoginComponent {
+export class WebComponent {
-  model = new Login('', '');
+  constructor() {}
-  submitted = false;
-  is_admin: boolean;
-  logged_in_email: string;
-
-  constructor(
-    private http: HttpClient
-  ) {}
-
-  onSubmit() {
-    this.postLogin(this.model).subscribe(
-      res => {
-        this.logged_in_email = res['email'];
-        this.is_admin = res['is_admin'];
-      }
-    );
-    this.submitted = true;
-  }
-
-  postLogin(login: Login): Observable<any> {
-    return this.http.post<Login>('/web', login);
-  }
 }

src/app/web/web.ts

@@ -1,8 +0,0 @@
-export class Login {
-
-  constructor(
-    public email: string,
-    public password: string
-  ) {}
-
-}