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 "ws": true
}, },
"/login": { "/webservice": {
"target": "http://localhost:8888", "target": "http://localhost:8888",
"secure": false "secure": false
} }

View File

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

View File

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

View File

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

View File

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

View File

@ -12,4 +12,3 @@
<div [innerHtml]="message.message"></div> <div [innerHtml]="message.message"></div>
</div> </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 @@
<!-- <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>

View File

@ -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({ @Component({
selector: 'app-web', selector: 'app-web',
templateUrl: './web.component.html', templateUrl: './web.component.html',
styleUrls: ['./web.component.scss'] 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);
}
} }

View File

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