Merge pull request #107 from jumpserver/dev_beta

Dev beta

package-lock.json

@@ -6531,9 +6531,9 @@
       "dev": true
     },
     "guacamole-common-js": {
-      "version": "0.9.14-b",
-      "resolved": "https://registry.npmjs.org/guacamole-common-js/-/guacamole-common-js-0.9.14-b.tgz",
-      "integrity": "sha1-zwzjETnPNIYTqQt/lfz8z+0ZZZc="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/guacamole-common-js/-/guacamole-common-js-1.1.0.tgz",
+      "integrity": "sha512-X0BOOGL5DWirKk0Q+2tpr1r3yvoRlF4A76T6CfKMNWSWz3goD2/aSCQcY3I07XSop0SCjOZRNCmPPETmV/6ayg=="
     },
     "handle-thing": {
       "version": "2.0.0",

package.json

@@ -58,7 +58,7 @@
     "codemirror": "^5.42.0",
     "core-js": "^2.5.4",
     "font-awesome": "4.7.0",
-    "guacamole-common-js": "0.9.14-b",
+    "guacamole-common-js": "1.1.0",
     "jquery": "^3.4.1",
     "metismenu": "^2.7.9",
     "neffos.js": "^0.1.19",

proxy.conf.json

@@ -28,6 +28,10 @@
     },
     "secure": false
   },
+  "/media/": {
+    "target": "http://127.0.0.1:8080",
+    "secure": false
+  },
   "/guacamole/": {
     "target": "http://127.0.0.1:8083",
     "secure": false,

src/app/app.service.ts

@@ -91,10 +91,6 @@ export class HttpService {
     return this.http.get<Array<SystemUser>>(url);
   }
 
-  refreshMyGrantedNodes() {
-    return this.http.get<Array<TreeNode>>('/api/perms/v1/user/nodes-assets/tree/?cache_policy=2');
-  }
-
   getGuacamoleToken(user_id: string, authToken: string) {
     const body = new HttpParams()
       .set('username', user_id)

src/app/elements/asset-tree/asset-tree.component.ts

@@ -93,7 +93,7 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
     if (this._navSvc.treeLoadAsync) {
       setting['async'] = {
         enable: true,
-        url: '/api/perms/v1/users/nodes/children-with-assets/tree/',
+        url: '/api/perms/v1/users/nodes/children-with-assets/tree/?cache_policy=1',
         autoParam: ['id=key', 'name=n', 'level=lv'],
         type: 'get'
       };

src/app/elements/connect/connect.component.ts

 import {Component, OnInit, Output, Inject, OnDestroy, EventEmitter} from '@angular/core';
 import {connectEvt} from '@app/globals';
-import {AppService, HttpService, LogService} from '@app/app.service';
+import {AppService, HttpService, LogService, NavService} from '@app/app.service';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 import {FormControl, Validators} from '@angular/forms';
 import {ActivatedRoute} from '@angular/router';
@@ -19,6 +19,7 @@ export class ElementConnectComponent implements OnInit, OnDestroy {
   constructor(private _appSvc: AppService,
               public _dialog: MatDialog,
               public _logger: LogService,
+              private _navSrv: NavService,
               private activatedRoute: ActivatedRoute,
               private _http: HttpService,
   ) {
@@ -144,7 +145,7 @@ export class ElementConnectComponent implements OnInit, OnDestroy {
   }
 
   manualSetUserAuthLoginIfNeed(node: any, user: SystemUser, callback) {
-    if (user.login_mode !== 'manual' || user.protocol !== 'rdp') {
+    if (user.login_mode !== 'manual' || user.protocol !== 'rdp' || this._navSrv.skipAllManualPassword) {
       return callback(node, user);
     }
     user = Object.assign({}, user);
@@ -235,7 +236,6 @@ export class AssetTreeDialogComponent implements OnInit {
   templateUrl: 'manual-password-dialog.html',
 })
 export class ManualPasswordDialogComponent implements OnInit {
-  PasswordControl = new FormControl('', [Validators.required]);
   constructor(@Inject(MAT_DIALOG_DATA) public data: any,
               public dialogRef: MatDialogRef<ManualPasswordDialogComponent>) {
   }

src/app/elements/connect/manual-password-dialog.html

@@ -5,8 +5,8 @@
 </mat-form-field>
 
 <mat-form-field style="width: 100%">
-  <input matInput [type]="'password'" [(ngModel)]="data.password"
-         [formControl]="PasswordControl" placeholder="{{'Password'|trans}}"
+  <input matInput [type]="'password'" [(ngModel)]="data.password" required
+         placeholder="{{'Password'|trans}}"
          (keyup.enter)="onEnter()" [attr.cdkFocusInitial]="data.username? true : null">
 </mat-form-field>
 

src/app/elements/content-tab/content-tab.component.html

@@ -2,7 +2,7 @@
   [ngClass]="{'active': view.active,'disconnected': !view.connected, 'hidden': view.closed != false}"
   [id]="view.id" (click)="setActive()" (dblclick)="view.editable=true;setActive()"
 >
-  <span *ngIf="view.nick">{{view.nick | truncatechars:25 }}</span>
-  <input *ngIf="view.editable" [(ngModel)]="view.nick" (blur)="view.editable=false" (keyup.enter)="view.editable=false" autofocus="true"/>
+  <span *ngIf="view.nick && !view.editable">{{view.nick | truncatechars:25 }}</span>
+  <input *ngIf="view.editable" [(ngModel)]="view.nick" (blur)="view.editable=false" (keyup.enter)="view.editable=false" autofocus="autofocus"/>
   <a class="close" (click)="close()">&times;</a>
 </li>

src/app/elements/nav/nav.component.ts

@@ -415,7 +415,7 @@ export class RDPSolutionDialogComponent implements OnInit {
 @Component({
   selector: 'elements-font-size-dialog',
   templateUrl: 'fontDialog.html',
-  styles: ['.mat-form-field { width: 100%; }']
+  styles: ['.mat-form-field { width: 100%; }'],
 })
 export class FontDialogComponent implements OnInit {
   fontSize: string;

src/app/pages/main/main.component.css

@@ -29,7 +29,7 @@
   outline: none;
   -webkit-user-select: none;
   user-select: none;
-  z-index: 9999;
+  z-index: 99;
   height: 5px;
   width: 0;
   display: block;

src/app/pages/replay/guacamole/guacamole.component.html

@@ -20,5 +20,6 @@
         </p>
       </div>
     </div>
+    <div id="screen"></div>
   </div>
 </div>

src/app/pages/replay/guacamole/guacamole.component.scss

 #player {
-    width: 800px;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
 }
 
 #display {
   position: relative;
+  width: calc(100vw - 10px);
+  height: calc(100vh - 40px);
+}
+
+#screen * {
 }
 
 #player .notification-container {
@@ -16,7 +23,6 @@
 }
 
 #player .seek-notification {
-
   color: white;
   background: rgba(0, 0, 0, 0.75);
 
@@ -40,6 +46,7 @@
 #player .controls {
 
   width: 100%;
+  height: 30px;
 
   /* IE10 */
   display: -ms-flexbox;
@@ -66,6 +73,8 @@
   align-items: center;
   flex-direction: row;
 
+  padding-right: 10px;
+
 }
 
 #player .controls > * {

src/app/pages/replay/guacamole/guacamole.component.ts

@@ -55,6 +55,8 @@ export class ReplayGuacamoleComponent implements OnInit {
   recording: any;
   playerRef: any;
   displayRef: any;
+  screenRef: any;
+  recordingDisplay: any;
   max = 100;
   percent = 0;
   duration = '00:00';
@@ -70,46 +72,51 @@ export class ReplayGuacamoleComponent implements OnInit {
     }
     this.playerRef = document.getElementById('player');
     this.displayRef = document.getElementById('display');
+    this.screenRef = document.getElementById('screen');
     const tunnel = new Guacamole.StaticHTTPTunnel(this.replay.src);
     this.recording = new Guacamole.SessionRecording(tunnel);
-    const recordingDisplay = this.recording.getDisplay();
-
-    this.displayRef.appendChild(recordingDisplay.getElement());
+    this.recordingDisplay = this.recording.getDisplay();
+    const recordingElement = this.recordingDisplay.getElement();
+    recordingElement.style.margin = '0 auto';
+    this.screenRef.appendChild(recordingElement);
     this.initRecording();
-    const that = this;
 
-    recordingDisplay.onresize = function displayResized(width, height) {
-      // Do not scale if displayRef has no width
-      if (!width) {
-        return;
-      }
-      // Scale displayRef to fit width of container
-      recordingDisplay.scale(that.displayRef.offsetWidth / width);
-    };
+
     // this.toggle();
   }
 
   initRecording() {
-    const that = this;
     this.recording.connect('');
-    this.recording.onplay = function() {
-      that.isPlaying = true;
+    this.recording.onplay = () => {
+      this.isPlaying = true;
     };
 
-    this.recording.onseek = function (millis) {
-      that.position = formatTime(millis);
-      that.percent = millis;
+    this.recording.onseek = (millis) => {
+      this.position = formatTime(millis);
+      this.percent = millis;
     };
 
-    this.recording.onprogress = function (millis) {
-      that.duration = formatTime(millis);
-      that.max = millis;
-      that.toggle();
+    this.recording.onprogress = (millis) => {
+      this.duration = formatTime(millis);
+      this.max = millis;
+      this.toggle();
     };
 
     // If paused, the play/pause button should read "Play"
-    this.recording.onpause = function() {
-      that.isPlaying = false;
+    this.recording.onpause = () => {
+      this.isPlaying = false;
+    };
+
+    this.recordingDisplay.onresize = (width, height) => {
+      // Do not scale if displayRef has no width
+      if (!height) {
+        return;
+      }
+      // Scale displayRef to fit width of container
+      const widthScale = this.displayRef.offsetWidth / width;
+      const heightScale = this.displayRef.offsetHeight / height;
+      const minScale = widthScale < heightScale ? widthScale : heightScale;
+      this.recordingDisplay.scale(minScale);
     };
   }
 

src/app/pages/replay/replay.component.ts

 import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute, Params} from '@angular/router';
+import {ActivatedRoute} from '@angular/router';
 import {HttpService, LogService} from '@app/app.service';
-import {DataStore} from '@app/globals';
 import {Replay} from './replay.model';
 
 @Component({
@@ -15,17 +14,14 @@ export class PagesReplayComponent implements OnInit {
   constructor(private route: ActivatedRoute,
               private _http: HttpService,
               private _logger: LogService) {
-    DataStore.NavShow = false;
   }
 
   ngOnInit() {
-    let token = '';
-    this.route.params
-      .subscribe(params => {
-        token = params['token'];
+    let sid = '';
+    this.route.params.subscribe(params => {
+      sid = params['sid'];
     });
-    this._http.getReplay(token)
-      .subscribe(
+    this._http.getReplay(sid).subscribe(
       data => {
         this.replay.type = data['type'];
         this.replay.src = data['src'];

src/app/router/router.module.ts

@@ -10,7 +10,7 @@ import {ElementSftpComponent} from '../elements/sftp/sftp.component';
 
 
 const appRoutes: Routes = [
-  {path: 'replay/:token', component: PagesReplayComponent},
+  {path: 'replay/:sid', component: PagesReplayComponent},
   {path: 'monitor/:token', component: PagesMonitorComponent},
   {path: 'connect', component: PagesConnectComponent},
   {path: 'sftp', component: ElementSftpComponent},

src/sass/style.scss

@@ -6,6 +6,7 @@ $fa-font-path: '~font-awesome/fonts';
 // Todo: 去掉依赖
 @import '~bootstrap/scss/bootstrap';
 
+//@import "~@angular/material/prebuilt-themes/indigo-pink.css";
 //$FontPathOpenSans: '~npm-font-open-sans/fonts';
 //@import '~npm-font-open-sans/open-sans';
 //$roboto-font-path: '~roboto-fontface/fonts';
@@ -99,3 +100,7 @@ button.icon-split-handle.ngx-split-button {
   //border: 1px solid #3a3333;
   opacity: 0.0;
 }
+
+button.mat-raised-button {
+  margin-left: 5px;
+}