Merge pull request #24 from jumpserver/dev

Dev

i18n/cn.json

@@ -40,5 +40,11 @@
   "user": "用户",
   "user group": "用户组",
   "login logs": "登陆日志",
-  "language": "语言选择"
+  "language": "语言选择",
+  "found": "发现",
+  "users ": "用户",
+  "choose a user": "选择一个用户",
+  "please choose a user": "请选择一个用户",
+  "cancel": "取消",
+  "confirm": "确认"
 }

nginx.conf

@@ -5,8 +5,4 @@ server {
     try_files $uri / /index.html;
     alias /opt/luna/;
   }
-
-  location /i18n/ {
-    root /opt/luna/i18n;
-  }
 }

src/app/ControlPage/cleftbar/dialog.html

-<h1 mat-dialog-title>Found {{data.users.length}} Users</h1>
+<h1 mat-dialog-title>{{"Found"|trans}} {{data.users.length}} {{"Users "|trans}}</h1>
 
 <mat-form-field>
   <mat-select [(value)]="selected"
               [compareWith]="compareFn"
               [formControl]="UserSelectControl"
-              placeholder="Choose a User" required>
+              placeholder="{{'Choose a User'|trans}}" required>
     <mat-option *ngFor="let u of data.users" value="{{u.id}}">{{u.username}}</mat-option>
   </mat-select>
-  <mat-error *ngIf="UserSelectControl.hasError('required')">Please choose a User</mat-error>
+  <mat-error *ngIf="UserSelectControl.hasError('required')">{{"Please choose a User"|trans}}</mat-error>
 
 </mat-form-field>
 <div style="float: right">
-  <button mat-raised-button (click)="onNoClick()">Cancel</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="selected" cdkFocusInitial>Confirm</button>
+  <button mat-raised-button (click)="onNoClick()">{{"Cancel"|trans}}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="selected" cdkFocusInitial>{{"Confirm"|trans}}</button>
 </div>

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/ControlPage/control/control.component.ts

@@ -16,11 +16,7 @@ import {TermWS} from '../../globals';
 //   term: any;
 // }
 
-export class Rdp {
-  machine: string;
-  token: string;
-  client: any;
-}
+
 
 export class View {
   nick: string;
@@ -32,7 +28,7 @@ export class View {
   host: any;
   user: any;
   room: string;
-  Rdp: Rdp;
+  Rdp: any;
   Term: any;
 }
 

src/app/ControlPage/control/controlnav/controlnav.component.ts

@@ -7,7 +7,7 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 
-import {Component, OnInit} from '@angular/core';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {ControlComponent, NavList} from '../control.component';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 
@@ -44,6 +44,7 @@ export class ControlnavComponent implements OnInit {
       if (NavList.List[index].type === 'ssh') {
         NavList.List[index].Term.focus();
       } else if (NavList.List[index].type === 'rdp') {
+        NavList.List[index].Rdp.focus();
       }
     } else {
 

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 #rdp [src]="trust(target)" (mouseenter)="active()"></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, ElementRef, Input, OnInit, ViewChild} 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;
+  @ViewChild('rdp') el: ElementRef;
+
+  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');
+    }
+    NavList.List[this.index].Rdp = this.el.nativeElement;
+  }
+
+  trust(url) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+  Disconnect() {
+    NavList.List[this.index].connected = false;
+  }
+
+  active() {
+    this._logger.debug('focus');
+    this.el.nativeElement.focus();
+  }
+
+}

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

@@ -2,8 +2,10 @@ import {Component, Input, OnInit} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
 import {NavList} from '../../ControlPage/control/control.component';
 
-import {User} from '../../globals';
+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,23 +20,33 @@ 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.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 => {
-        const base = window.btoa(this.host.hostname + '\0' + 'c' + '\0' + 'jumpserver');
             // /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);

src/app/globals.ts

@@ -104,6 +104,7 @@ export let DataStore: {
   leftbarshow: boolean;
   windowsize: Array<number>;
   autologin: boolean;
+  guacamole_token: string;
 } = {
   socket: io.connect(),
   Nav: [{}],
@@ -115,6 +116,7 @@ export let DataStore: {
   leftbarshow: true,
   windowsize: [],
   autologin: false,
+  guacamole_token: ''
 };
 export let CSRF = '';