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

 <div id="player">
   <div class="controls">
-      <button id="play-pause" class="btn" (click)="toggle()">
-        <i class="fa" [ngClass]="{'fa-play':!isPlaying,'fa-pause': isPlaying}"></i>
-      </button>
-      <button type="button" class="btn" (click)="restart()">
-          <i class="fa fa-repeat" aria-hidden="true"></i>
-      </button>
-      <input id="position-slider" type="range" [(ngModel)]="percent" [attr.max]="max" (mouseup)="runFrom()">
-      <span id="position">{{ position }}</span>
-      <span>/</span>
-      <span id="duration">{{ duration }}</span>
+    <button id="play-pause" class="btn" (click)="toggle()">
+      <i class="fa" [ngClass]="{'fa-play':!isPlaying,'fa-pause': isPlaying}"></i>
+    </button>
+    <button type="button" class="btn" (click)="restart()">
+      <i class="fa fa-repeat" aria-hidden="true"></i>
+    </button>
+    <input id="position-slider" type="range" [(ngModel)]="percent" [attr.max]="max" (mouseup)="runFrom()">
+    <span id="position">{{ position }}</span>
+    <span>/</span>
+    <span id="duration">{{ duration }}</span>
   </div>
   <div id="display" (click)="toggle()">
-      <div class="notification-container">
-          <div class="seek-notification">
-              <p>
-                  Seek in progress...
-                  <button id="cancel-seek" class="btn" (click)="cancelSeek($event)">Cancel</button>
-              </p>
-          </div>
+    <div class="notification-container">
+      <div class="seek-notification">
+        <p>
+          Seek in progress...
+          <button id="cancel-seek" class="btn" (click)="cancelSeek($event)">Cancel</button>
+        </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;
+  position: relative;
+  width: calc(100vw - 10px);
+  height: calc(100vh - 40px);
+}
+
+#screen * {
 }
 
 #player .notification-container {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
 }
 
 #player .seek-notification {
+  color: white;
+  background: rgba(0, 0, 0, 0.75);
 
-    color: white;
-    background: rgba(0, 0, 0, 0.75);
-
-    display: none; /* Initially hidden */
-    width: 100%;
-    height: 100%;
+  display: none; /* Initially hidden */
+  width: 100%;
+  height: 100%;
 
 }
 
 #player.seeking .seek-notification {
-    display: table;
+  display: table;
 }
 
 #player .seek-notification p {
-    display: table-cell;
-    text-align: center;
-    vertical-align: middle;
-    font-family: sans-serif;
+  display: table-cell;
+  text-align: center;
+  vertical-align: middle;
+  font-family: sans-serif;
 }
 
 #player .controls {
 
-    width: 100%;
+  width: 100%;
+  height: 30px;
+
+  /* IE10 */
+  display: -ms-flexbox;
+  -ms-flex-align: center;
+  -ms-flex-direction: row;
 
-    /* IE10 */
-    display: -ms-flexbox;
-    -ms-flex-align: center;
-    -ms-flex-direction: row;
+  /* Ancient Mozilla */
+  display: -moz-box;
+  -moz-box-align: center;
+  -moz-box-orient: horizontal;
 
-    /* Ancient Mozilla */
-    display: -moz-box;
-    -moz-box-align: center;
-    -moz-box-orient: horizontal;
+  /* Ancient WebKit */
+  display: -webkit-box;
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
 
-    /* Ancient WebKit */
-    display: -webkit-box;
-    -webkit-box-align: center;
-    -webkit-box-orient: horizontal;
+  /* Old WebKit */
+  display: -webkit-flex;
+  -webkit-align-items: center;
+  -webkit-flex-direction: row;
 
-    /* Old WebKit */
-    display: -webkit-flex;
-    -webkit-align-items: center;
-    -webkit-flex-direction: row;
+  /* W3C */
+  display: flex;
+  align-items: center;
+  flex-direction: row;
 
-    /* W3C */
-    display: flex;
-    align-items: center;
-    flex-direction: row;
+  padding-right: 10px;
 
 }
 
 #player .controls > * {
-    margin: 0.25em;
+  margin: 0.25em;
 }
 
 #player .controls #position-slider {
-    -ms-flex: 1 1 auto;
-    -moz-box-flex: 1;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 1 auto;
-    flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  -moz-box-flex: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 #player .controls #play-pause {
-    margin-left: 0;
-    //min-width: 5em;
+  margin-left: 0;
+  //min-width: 5em;
 }
 
 #player .controls #position,
 #player .controls #duration {
-    font-family: monospace;
+  font-family: monospace;
 }
 
 #player .controls #duration {
-    margin-right: 0;
+  margin-right: 0;
 }

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,25 +14,22 @@ 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'];
-      });
-    this._http.getReplay(token)
-      .subscribe(
-        data => {
-          this.replay.type = data['type'];
-          this.replay.src = data['src'];
-          this.replay.id = data['id'];
-        },
-        err => {
-          alert('没找到录像文件');
-        }
-      );
+    let sid = '';
+    this.route.params.subscribe(params => {
+      sid = params['sid'];
+    });
+    this._http.getReplay(sid).subscribe(
+      data => {
+        this.replay.type = data['type'];
+        this.replay.src = data['src'];
+        this.replay.id = data['id'];
+      },
+      err => {
+        alert('没找到录像文件');
+      }
+    );
   }
 }

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;
+}