feat: update, using guacamole element

src/app/ControlPage/control/control.component.html

@@ -7,9 +7,9 @@
                     [index]="i"
                     *ngIf="m.type=='ssh'">
   </app-element-term>
-  <app-element-iframe [host]="m.host"
+  <app-element-guacamole [host]="m.host"
                       [userid]="m.user.id"
                       [index]="i"
                       *ngIf="m.type=='rdp'">
-  </app-element-iframe>
+  </app-element-guacamole>
 </div>

src/app/app.module.ts

@@ -65,6 +65,7 @@ import {SettingPageTerminalComponent} from './setting-page/terminal/terminal.com
 import {SettingPageS3Component} from './setting-page/s3/s3.component';
 import {TransPipe} from './trans.pipe';
 import {MAT_LABEL_GLOBAL_OPTIONS} from '@angular/material';
+import {ElementGuacamoleComponent} from './elements/guacamole/guacamole.component';
 
 @NgModule({
   imports: [
@@ -93,6 +94,7 @@ import {MAT_LABEL_GLOBAL_OPTIONS} from '@angular/material';
     ElementTableComponent,
     ElementLeftbarComponent,
     ElementOfooterComponent,
+    ElementGuacamoleComponent,
     LoginComponent,
     SearchComponent,
     SearchFilter,

src/app/elements/guacamole/guacamole.component.html

+<iframe [src]="trust(target)"></iframe>

src/app/elements/guacamole/guacamole.component.scss

+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: white;
+}

src/app/elements/guacamole/guacamole.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ElementGuacamoleComponent } from './guacamole.component';
+
+describe('ElementGuacamoleComponent', () => {
+  let component: ElementGuacamoleComponent;
+  let fixture: ComponentFixture<ElementGuacamoleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ElementGuacamoleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ElementGuacamoleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/elements/guacamole/guacamole.component.ts

+import {Component, Input, OnInit} from '@angular/core';
+import {CookieService} from 'ngx-cookie-service';
+import {HttpService, LogService} from '../../app.service';
+import {DataStore, User} from '../../globals';
+import {DomSanitizer} from '@angular/platform-browser';
+import {environment} from '../../../environments/environment';
+import {NavList} from '../../ControlPage/control/control.component';
+
+@Component({
+  selector: 'app-element-guacamole',
+  templateUrl: './guacamole.component.html',
+  styleUrls: ['./guacamole.component.scss']
+})
+export class ElementGuacamoleComponent implements OnInit {
+  @Input() host: any;
+  @Input() userid: any;
+  @Input() index: number;
+  target: string;
+
+  constructor(private sanitizer: DomSanitizer,
+              private _http: HttpService,
+              private _cookie: CookieService,
+              private _logger: LogService) {
+  }
+
+  ngOnInit() {
+    // /guacamole/api/tokens will redirect to http://guacamole/api/tokens
+    const base = window.btoa(this.host.id + '\0' + 'c' + '\0' + 'jumpserver');
+    if (environment.production) {
+      if (DataStore.guacamole_token) {
+        this.target = document.location.origin + '/guacamole/#/client/' + base + '?token=' + DataStore.guacamole_token;
+      } else {
+        this._http.get_guacamole_token(User.name, this.host.id, this.userid).subscribe(
+          data => {
+            // /guacamole/client will redirect to http://guacamole/#/client
+            this.target = document.location.origin +
+              '/guacamole/#/client/' + base + '?token=' + data['authToken'];
+            DataStore.guacamole_token = data['authToken'];
+          },
+          error2 => {
+            this._logger.error(error2);
+          }
+        );
+      }
+    } else {
+      this.target = this._cookie.get('guacamole');
+    }
+  }
+
+  trust(url) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+  Disconnect() {
+    NavList.List[this.index].connected = false;
+  }
+
+}

src/app/elements/iframe/iframe.component.ts

@@ -4,6 +4,8 @@ import {NavList} from '../../ControlPage/control/control.component';
 
 import {User, DataStore} from '../../globals';
 import {HttpService, LogService} from '../../app.service';
+import {environment} from '../../../environments/environment';
+import {CookieService} from 'ngx-cookie-service';
 
 @Component({
   selector: 'app-element-iframe',
@@ -18,12 +20,14 @@ export class ElementIframeComponent implements OnInit {
 
   constructor(private sanitizer: DomSanitizer,
               private _http: HttpService,
+              private _cookie: CookieService,
               private _logger: LogService) {
   }
 
   ngOnInit() {
     // /guacamole/api/tokens will redirect to http://guacamole/api/tokens
-    const base = window.btoa(this.host.hostname + '\0' + 'c' + '\0' + 'jumpserver');
+    const base = window.btoa(this.host.id + '\0' + 'c' + '\0' + 'jumpserver');
+    if (environment.production) {
       if (DataStore.guacamole_token) {
         this.target = document.location.origin + '/guacamole/#/client/' + base + '?token=' + DataStore.guacamole_token;
       } else {
@@ -39,6 +43,9 @@ export class ElementIframeComponent implements OnInit {
           }
         );
       }
+    } else {
+      this.target = this._cookie.get('guacamole');
+    }
   }
 
   trust(url) {