mirror of
				https://github.com/avatao-content/frontend-tutorial-framework
				synced 2025-11-04 06:12:54 +00:00 
			
		
		
		
	Refactor WebComponent and iframing to be mutually exclusive, strip old app
This commit is contained in:
		@@ -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,
 | 
			
		||||
 
 | 
			
		||||
@@ -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: {
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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)};
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -12,4 +12,3 @@
 | 
			
		||||
    <div [innerHtml]="message.message"></div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										13
									
								
								src/app/pipes/safe.pipe.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										13
									
								
								src/app/pipes/safe.pipe.ts
									
									
									
									
									
										Normal 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);
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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() {}
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +0,0 @@
 | 
			
		||||
export class Login {
 | 
			
		||||
 | 
			
		||||
  constructor(
 | 
			
		||||
    public email: string,
 | 
			
		||||
    public password: string
 | 
			
		||||
  ) {}
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user