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

This commit is contained in:
Kristóf Tóth 2018-04-25 11:48:15 +02:00
parent a0f9ec6bd6
commit 52cfd4bf55
10 changed files with 37 additions and 87 deletions

View File

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

View File

@ -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,

View File

@ -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: {

View File

@ -4,11 +4,14 @@
<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">
<iframe class="iframe"
scrolling="yes" frameborder="0"
src="about:blank"></iframe>
</div>
<app-web *ngIf="!iframeUrl"></app-web>
<div *ngIf="iframeUrl" class="iframe-container">
<iframe class="iframe"
scrolling="yes"
frameborder="0"
[src]="iframeUrl | safe">
</iframe>
</div>
</div>
<div class="tfw-ide">
<app-ide></app-ide>

View File

@ -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)};

View File

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

View File

@ -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);
}
}

View File

@ -1,39 +1,2 @@
<!--
<div>
<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>
<h2>WebComponent is here!</h2>
<p>Edit me if you want to write your own component in Angular!</p>

View File

@ -1,36 +1,12 @@
import { HttpClient } from '@angular/common/http';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Login } from './web';
import { DeploymentNotificationService } from '../services/deployment-notification.service';
import { Subscription } from 'rxjs/Subscription';
// Edit me if you want to write your own component in Angular!
import { Component } from '@angular/core';
import { config } from '../config'
@Component({
selector: 'app-web',
templateUrl: './web.component.html',
styleUrls: ['./web.component.scss']
})
export class LoginComponent {
model = new Login('', '');
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);
}
export class WebComponent {
constructor() {}
}

View File

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