Use iframe webcomponent to allow more flexibility in terms of languages

src/app/app.module.ts

@@ -9,7 +9,7 @@ import {AceEditorModule} from 'ng2-ace-editor';
 import {AppComponent} from './app.component';
 import {DashboardComponent} from './dashboard/dashboard.component';
 import {HeaderComponent} from './header/header.component';
-import {LoginComponent} from './login/login.component';
+import {LoginComponent} from './web/web.component';
 import {MarkdownService} from './services/markdown.service';
 import {TerminadoService} from './services/terminado.service';
 import {WebideComponent} from './webide/webide.component';

src/app/dashboard/dashboard.component.html

@@ -2,7 +2,11 @@
   <div class="tfw-header"><app-header></app-header></div>
   <div class="tfw-messages"><app-messages></app-messages></div>
   <div class="tfw-web tao-grid-top-left" [ngClass]="{ 'deploy-blur': deploying }">
-    <app-login></app-login>
+    <div class="row-container">
+      <iframe class="iframe-row"
+              scrolling="yes" frameborder="0"
+              src="http://localhost:9999"></iframe>
+    </div>
   </div>
   <div class="tfw-webide"><app-webide></app-webide></div>
   <div class="tfw-terminal"><app-terminal></app-terminal></div>

src/app/dashboard/dashboard.component.scss

@@ -86,7 +86,24 @@ $layout: (
   }
 
   .tfw-web {
-    padding: $space;
+
+    .row-container {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      flex-direction: column;
+      min-height: 65vmin;
+      min-width: 65vmin;
+      overflow: hidden;
+    }
+
+    .iframe-row {
+      flex-grow: 1;
+      border: none;
+      margin: 0;
+      padding: 0;
+    }
+
   }
 
   .tfw-webide {

src/app/web/web.component.html

@@ -1,3 +1,4 @@
+<!--
 <div>
   <h1>Login page</h1>
   <form #loginForm="ngForm" (submit)="onSubmit()" [hidden]="submitted">
@@ -32,3 +33,7 @@
     </p>
   </div>
 </div>
+-->
+<div class="row-container">
+
+</div>

src/app/web/web.component.ts

@@ -1,14 +1,14 @@
 import { HttpClient } from '@angular/common/http';
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import { Observable } from 'rxjs/Observable';
-import { Login } from './login';
+import { Login } from './web';
 import {DeploymentNotificationService} from '../services/deployment-notification.service';
 import {Subscription} from 'rxjs/Subscription';
 
 @Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  selector: 'app-web',
+  templateUrl: './web.component.html',
+  styleUrls: ['./web.component.scss']
 })
 export class LoginComponent {
   model = new Login('', '');
@@ -31,6 +31,6 @@ export class LoginComponent {
   }
 
   postLogin(login: Login): Observable<any> {
-    return this.http.post<Login>('/login', login);
+    return this.http.post<Login>('/web', login);
   }
 }