feat: publish

.angular-cli.json

@@ -20,7 +20,6 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "../node_modules/layui-layer/dist/theme/default/layer.css",
         "../node_modules/animate.css/animate.min.css",
         "../node_modules/xterm/dist/xterm.css",
         "sass/style.scss",

mock.py

@@ -84,6 +84,9 @@ class SSHws(Namespace):
     self.leave_room(room=self.clients[request.sid]["room"])
     join_room(room)
 
+  def on_token(self, token):
+    print(token)
+
   def on_disconnect(self):
     print("disconnect")
     for connection in self.clients[request.sid]["chan"]:
@@ -131,6 +134,33 @@ def asset_groups_assets():
           "ip": "192.168.2.6",
           "port": 22,
           "platform": "Linux",
+          "system_users_granted": [
+            {
+              "id": 1,
+              "name": "web",
+              "username": "web",
+              "protocol": "ssh",
+              "auth_method": "P",
+              "auto_push": True,
+              "priority": 10
+            },
+            {
+              "id": 2,
+              "name": "liuzheng",
+              "username": "liuzheng",
+              "protocol": "ssh",
+              "auth_method": "P",
+              "auto_push": True,
+              "priority": 10
+
+            }],
+        },
+        {
+          "id": 44,
+          "hostname": "192.168.1.6",
+          "ip": "192.168.2.6",
+          "port": 22,
+          "platform": "Linux",
           "system_users_granted": [
             {
               "id": 1,

package-lock.json

@@ -107,9 +107,9 @@
       }
     },
     "@angular/cdk": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.1.0.tgz",
-      "integrity": "sha512-xDCVx65SvxoGDMpQhaQvfP7bZhQDuX65Uk+JntPlLTiwFr7v82a+71RnzOCzNKyaNXGoIgUGcrLZpozlyqNgFg==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.1.1.tgz",
+      "integrity": "sha512-V8kQmwf1PhtxiiE0cS1x9SW7/VFrJ7LcL9RqxUOMmJMl8kVR43dQBEeuVOOYJlGo9LAR5ctfemlJHwd9+PoHew==",
       "requires": {
         "tslib": "1.8.1"
       }
@@ -258,6 +258,14 @@
       "integrity": "sha512-Yj/y5XrBBXbtwnZ6HJOBl/0XS/JBvVlHb1UWw5MIrsc81k7/eFiRAIKzmGpAba+Sw0G0dO22ABZ4yJjAMsML6A==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.1.1.tgz",
+      "integrity": "sha512-RC3xkbX35daNq4w+XBmm+Vgi16TJvLbSkw5xkdxCqLSysFx9ymwDOjUbLeHt2nJtvYWvnSjuVukdSAeaBknTFg==",
+      "requires": {
+        "tslib": "1.8.1"
+      }
+    },
     "@angular/platform-browser": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.0.tgz",

package.json

@@ -12,13 +12,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "5.2.0",
-    "@angular/cdk": "^5.1.0",
+    "@angular/animations": "^5.2.0",
+    "@angular/cdk": "^5.1.1",
     "@angular/common": "5.2.0",
     "@angular/compiler": "5.2.0",
     "@angular/core": "5.2.0",
     "@angular/forms": "5.2.0",
     "@angular/http": "5.2.0",
+    "@angular/material": "^5.1.1",
     "@angular/platform-browser": "5.2.0",
     "@angular/platform-browser-dynamic": "5.2.0",
     "@angular/router": "5.2.0",
@@ -38,7 +39,6 @@
     "jquery-slimscroll": "^1.3.8",
     "jquery-sparkline": "^2.4.0",
     "jvectormap": "1.2.2",
-    "layui-layer": "git+https://github.com/jumpserver/layer.git",
     "materialize-css": "^0.100.2",
     "metismenu": "^2.5.0",
     "mstsc.js": "^0.2.4",
@@ -61,9 +61,9 @@
     "socket.io-client": "^2.0.4",
     "ssh-keygen": "^0.4.1",
     "tether": "^1.4.0",
+    "tslib": "1.8.1",
     "uuid-js": "^0.7.5",
     "xterm": "^2.9.2",
-    "tslib": "1.8.1",
     "zone.js": "0.8.20"
   },
   "devDependencies": {

src/app/ControlPage/cleftbar/cleftbar.component.ts

@@ -7,7 +7,7 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 
-import {Component, OnInit} from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import {AppService, HttpService, LogService} from '../../app.service';
 import {SearchComponent} from '../search/search.component';
 import {DataStore} from '../../globals';
@@ -15,7 +15,10 @@ import {version} from '../../../environments/environment';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 import {ElementServerMenuComponent} from '../../elements/server-menu/server-menu.component';
 import {NavList, View} from '../control/control.component';
-import {LayerService} from '../../elements/layer/layer.service';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
+import {logger} from 'codelyzer/util/logger';
+import {selector} from 'rxjs/operator/publish';
+import {FormControl, Validators} from '@angular/forms';
 
 
 export interface HostGroup {
@@ -51,30 +54,30 @@ export class CleftbarComponent implements OnInit {
   static Hide() {
     DataStore.leftbarshow = false;
     DataStore.Nav.map(function (value, i) {
-      for (var ii in value['children']) {
-        if (DataStore.Nav[i]['children'][ii]['id'] === 'HindLeftManager') {
-          DataStore.Nav[i]['children'][ii] = {
+      value['children'].forEach((v, key) => {
+        if (DataStore.Nav[i]['children'][key]['id'] === 'HindLeftManager') {
+          DataStore.Nav[i]['children'][key] = {
             'id': 'ShowLeftManager',
             'click': 'ShowLeft',
             'name': 'Show left manager'
           };
         }
-      }
+      });
     });
   }
 
   static Show() {
     DataStore.leftbarshow = true;
     DataStore.Nav.map(function (value, i) {
-      for (var ii in value['children']) {
-        if (DataStore.Nav[i]['children'][ii]['id'] === 'ShowLeftManager') {
-          DataStore.Nav[i]['children'][ii] = {
+      value['children'].forEach((v, key) => {
+        if (DataStore.Nav[i]['children'][key]['id'] === 'ShowLeftManager') {
+          DataStore.Nav[i]['children'][key] = {
             'id': 'HindLeftManager',
             'click': 'HideLeft',
             'name': 'Hind left manager'
           };
         }
-      }
+      });
     });
   }
 
@@ -83,7 +86,7 @@ export class CleftbarComponent implements OnInit {
               private _search: SearchComponent,
               private _logger: LogService,
               private _menu: ElementServerMenuComponent,
-              private _layer: LayerService) {
+              public _dialog: MatDialog) {
     this._logger.log('nav.ts:NavComponent');
     // this._appService.getnav()
   }
@@ -101,12 +104,12 @@ export class CleftbarComponent implements OnInit {
     if (id) {
       for (let g of this.HostGroups) {
         if (g['assets_granted']) {
-          for (let u of g['assets_granted']) {
-            if (u.id.toString() === id.toString()) {
-              this.Connect(u);
+          g['assets_granted'].forEach((v, k) => {
+            if (v.id.toSource() === id.toString()) {
+              this.Connect(v);
               return;
             }
-          }
+          });
         }
       }
 
@@ -116,39 +119,26 @@ export class CleftbarComponent implements OnInit {
   Connect(host) {
     // console.log(host);
     let user: any;
-    let options = '';
-    const that = this;
     if (host.system_users_granted.length > 1) {
       user = this.checkPriority(host.system_users_granted);
       if (user) {
         this.login(host, user);
       } else {
-        for (const u of host.system_users_granted) {
-          options += '<option value="' + u.id + '">' + u.username + '</option>';
-        }
-        this._layer.open({
-          title: 'Please Choose a User',
-          scrollbar: false,
-          moveOut: true,
-          moveType: 1,
-          btn: ['确定', '取消'],
-          content: '<select id="selectuser">' + options + '</select>',
-          yes: function (index, layero) {
-            const userid = jQuery('#selectuser').val();
+        const dialogRef = this._dialog.open(CleftbarComponentDialog, {
+          height: '200px',
+          width: '300px',
+          data: {users: host.system_users_granted}
+        });
+
+        dialogRef.afterClosed().subscribe(result => {
+          if (result) {
             for (let i of host.system_users_granted) {
-              if (i.id.toString() === userid.toString()) {
+              if (i.id.toString() === result.toString()) {
                 user = i;
                 break;
               }
             }
-            that.login(host, user);
-            that._layer.close(index);
-          },
-          btn2: function (index, layero) {
-          },
-          cancel: function () {
-            // 右上角关闭回调
-            // return false 开启该代码可禁止点击该按钮关闭
+            this.login(host, user);
           }
         });
       }
@@ -202,3 +192,34 @@ export class CleftbarComponent implements OnInit {
     // this._menu.contextmenu(this.clientY, this.clientX);
   }
 }
+
+
+@Component({
+  selector: 'app-cleftbar-dialog',
+  templateUrl: 'dialog.html',
+})
+export class CleftbarComponentDialog implements OnInit {
+  UserSelectControl = new FormControl('', [Validators.required]);
+  selected: any;
+
+  constructor(public dialogRef: MatDialogRef<CleftbarComponentDialog>,
+              @Inject(MAT_DIALOG_DATA) public data: any,
+              private _logger: LogService) {
+  }
+
+  ngOnInit() {
+    this.selected = this.data.users[0].id;
+    this.UserSelectControl.setValue(this.selected);
+    // this._logger.debug(this.UserSelectControl);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  compareFn: ((f1: any, f2: any) => boolean) | null = this.compareByValue;
+
+  compareByValue(f1: any, f2: any) {
+    return f1 && f2 && f1.value === f2.value;
+  }
+}

src/app/ControlPage/cleftbar/dialog.html

+<h1 mat-dialog-title>Found {{data.users.length}} Users</h1>
+
+<mat-form-field>
+  <mat-select [(value)]="selected"
+              [compareWith]="compareFn"
+              [formControl]="UserSelectControl"
+              placeholder="Choose a User" 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-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>
+</div>

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

@@ -53,13 +53,9 @@ export class ControlComponent implements OnInit {
   NavList = NavList;
 
   static active(id) {
-    for (let i in NavList.List) {
-      if (id.toString() === i) {
-        NavList.List[id].hide = false;
-      } else {
-        NavList.List[i].hide = true;
-      }
-    }
+    NavList.List.forEach((v, k) => {
+      v.hide = id.toString() !== k;
+    });
 
     NavList.Active = id;
   }

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

@@ -8,9 +8,9 @@
   <ul [ngStyle]="{'width':150*NavList.List.length+'px'}">
     <li *ngFor="let m of NavList.List;let i = index"
         [ngClass]="{'active':i==NavList.Active,'disconnected':!m.connected, 'hidden': m.closed != false}"
-        id="termnav-{{i}}" (click)="setActive(i)">
-      <span *ngIf="!m.edit" (dblclick)="m.edit=true;setActive(i)">{{m.nick}}</span>
-      <input *ngIf="m.edit" [(ngModel)]="m.nick" autofocus (blur)="m.edit=false" (keyup.enter)="m.edit=false"/>
+        id="termnav-{{i}}" (click)="setActive(i)" (dblclick)="m.edit=true;setActive(i)">
+      <span *ngIf="!m.edit">{{m.nick}}</span>
+      <input *ngIf="m.edit" [(ngModel)]="m.nick" (blur)="m.edit=false" (keyup.enter)="m.edit=false" autofocus="true"/>
       <a class="close" (click)="close(m,i)">&times;</a>
     </li>
   </ul>

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

@@ -35,14 +35,18 @@ export class ControlnavComponent implements OnInit {
   }
 
   static setActive(index) {
-    for (let m in NavList.List) {
-      NavList.List[m].hide = true;
-    }
+    NavList.List.forEach((value, key) => {
+      NavList.List[key].hide = true;
+    });
     NavList.List[index].hide = false;
     NavList.Active = index;
+    if (!NavList.List[index].edit) {
       if (NavList.List[index].type === 'ssh') {
         NavList.List[index].Term.focus();
       } else if (NavList.List[index].type === 'rdp') {
+      }
+    } else {
+
     }
   }
 

src/app/MaterialModule.component.ts

+import {NgModule} from '@angular/core';
+import {
+  MatAutocompleteModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatChipsModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatExpansionModule,
+  MatGridListModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatNativeDateModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule,
+  MatRadioModule,
+  MatRippleModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatSortModule,
+  MatTableModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule,
+  MatStepperModule,
+} from '@angular/material';
+import {CdkTableModule} from '@angular/cdk/table';
+
+@NgModule({
+  exports: [
+    CdkTableModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+  ]
+})
+export class MaterialModule {
+}

src/app/app-routing.module.ts

@@ -18,6 +18,7 @@ import {RdpPageComponent} from './rdp-page/rdp-page.component';
 import {TermPageComponent} from './term-page/term-page.component';
 import {ElementServerMenuComponent} from './elements/server-menu/server-menu.component';
 import {BlankPageComponent} from './blank-page/blank-page.component';
+import {TestPageComponent} from './test-page/test-page.component';
 
 const appRoutes: Routes = [
   // {path: 'users/login', component: LoginComponent},
@@ -25,7 +26,7 @@ const appRoutes: Routes = [
   {path: 'term/:token', component: TermPageComponent},
   {path: 'replay/:token', component: ReplayPageComponent},
   {path: 'monitor/:token', component: MonitorPageComponent},
-  {path: 'test', component: TermPageComponent},
+  {path: 'test', component: TestPageComponent},
   {path: 'undefined', component: BlankPageComponent},
   {path: '', component: ControlPageComponent},
   {path: '**', component: NotFoundComponent}

src/app/app.component.css

+
 app-element-nav {
   font-family: 'Roboto', sans-serif;
   font-size: 13px;

src/app/app.module.ts

-/**
- * Created by liuzheng on 2017/8/30.
- */
-
 /**
  * app 模块
  *
@@ -11,16 +7,18 @@
  */
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms'; // <-- NgModel lives here
+import {FormsModule, ReactiveFormsModule} from '@angular/forms'; // <-- NgModel lives here
 import {LoggerModule, NGXLogger, NgxLoggerLevel} from 'ngx-logger';
 import {HttpClientModule} from '@angular/common/http';
 
 import {AppRoutingModule} from './app-routing.module';
 
 import {AppComponent} from './app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
 // service
 import {AppService, HttpService, LogService, UUIDService} from './app.service';
-import {LayerService} from './elements/layer/layer.service';
+import {DialogService} from './elements/dialog/dialog.service';
 
 // Elements
 import {ElementFooterComponent} from './elements/footer/footer.component';
@@ -35,7 +33,7 @@ import {ElementIframeComponent} from './elements/iframe/iframe.component';
 import {LoginComponent} from './BasicPage/login/login.component';
 import {IleftbarComponent} from './IndexPage/ileftbar/ileftbar.component';
 import {SearchComponent, SearchFilter} from './ControlPage/search/search.component';
-import {CleftbarComponent} from './ControlPage/cleftbar/cleftbar.component';
+import {CleftbarComponent, CleftbarComponentDialog} from './ControlPage/cleftbar/cleftbar.component';
 import {ControlComponent} from './ControlPage/control/control.component';
 import {ControlnavComponent} from './ControlPage/control/controlnav/controlnav.component';
 import {ControlPageComponent} from './ControlPage/controlpage.component';
@@ -51,18 +49,20 @@ import {MonitorPageComponent} from './monitor-page/monitor-page.component';
 import {LinuxComponent} from './monitor-page/linux/linux.component';
 import {WindowsComponent} from './monitor-page/windows/windows.component';
 import {NgProgressModule} from 'ngx-progressbar';
-import {TestPageComponent} from './test-page/test-page.component';
-import { BlankPageComponent } from './blank-page/blank-page.component';
-
-// import {NgxLayerModule} from 'ngx-layer';
+import {TestPageComponent, TestPageComponentDialog} from './test-page/test-page.component';
+import {BlankPageComponent} from './blank-page/blank-page.component';
+import {MaterialModule} from './MaterialModule.component';
 
 @NgModule({
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     FormsModule,
     AppRoutingModule,
     NgProgressModule,
     HttpClientModule,
+    ReactiveFormsModule,
+    MaterialModule,
     LoggerModule.forRoot({serverLoggingUrl: '/api/logs', level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}),
     // NgxLayerModule
   ],
@@ -80,7 +80,7 @@ import { BlankPageComponent } from './blank-page/blank-page.component';
     SearchComponent,
     SearchFilter,
     IleftbarComponent,
-    CleftbarComponent,
+    CleftbarComponent, CleftbarComponentDialog,
     ControlComponent,
     ControlnavComponent,
     ControlPageComponent,
@@ -95,9 +95,13 @@ import { BlankPageComponent } from './blank-page/blank-page.component';
     MonitorPageComponent,
     LinuxComponent,
     WindowsComponent,
-    TestPageComponent,
+    TestPageComponent, TestPageComponentDialog,
     BlankPageComponent,
   ],
+  entryComponents: [
+    CleftbarComponentDialog,
+    TestPageComponentDialog
+  ],
   bootstrap: [AppComponent],
   providers: [
     // {provide: LoggerConfig, useValue: {level: LoggerLevel.WARN}},
@@ -106,7 +110,7 @@ import { BlankPageComponent } from './blank-page/blank-page.component';
     HttpService,
     LogService,
     UUIDService,
-    LayerService,
+    DialogService,
     NGXLogger
   ]
 })

src/app/elements/layer/layer.service.ts → src/app/elements/dialog/dialog.service.ts

 import {Injectable} from '@angular/core';
-import * as layer from 'layui-layer/src/layer.js';
+// import * as layer from 'layui-layer/src/layer.js';
 
 @Injectable()
-export class LayerService {
+export class DialogService {
 
   constructor() {
   }
 
   open(options: any) {
-    layer.open(options);
+    // layer.open(options);
   }
 
   dialog() {
@@ -29,6 +29,6 @@ export class LayerService {
   }
 
   close(index: any) {
-    layer.close(index);
+    // layer.close(index);
   }
 }

src/app/elements/footer/footer.component.ts

 /**
  * footer
  *
- *
  * @date     2017-11-07
  * @author   liuzheng <liuzheng712@gmail.com>
  */

src/app/elements/server-menu/server-menu.component.ts

 import {Component, OnInit} from '@angular/core';
-import {LayerService} from '../layer/layer.service';
+import {DialogService} from '../dialog/dialog.service';
 
 
 export class Menu {
@@ -18,7 +18,7 @@ export class ElementServerMenuComponent implements OnInit {
   top: number;
   left: number;
 
-  constructor(private ly: LayerService) {
+  constructor(private _dialog: DialogService) {
   }
 
   ngOnInit() {
@@ -29,7 +29,7 @@ export class ElementServerMenuComponent implements OnInit {
     m.type = 'lll';
     line.type = 'line';
     this.MenuList = [m, m, line, m, m];
-    this.ly.alert();
+    this._dialog.alert();
   }
 
   public contextmenu(top: number, left: number) {

src/app/elements/term/term.component.ts

@@ -15,7 +15,9 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   @Input() host: any;
   @Input() userid: any;
   @Input() index: number;
-  // @Input() room: string;
+  @Input() token: string;
+  @Input() monitor: string;
+
   @ViewChild('term') el: ElementRef;
   secret: string;
   term: any;
@@ -35,7 +37,7 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    if (this.host) {
+    if (this.host || this.token) {
       if (Cookie.get('cols')) {
         term.col = parseInt(Cookie.get('cols'), 10);
       }
@@ -67,16 +69,21 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
     };
     jQuery(window).resize();
 
-    if (this.host) {
     NavList.List[this.index].Term = this.term;
-
-      // this.term.write('\x1b[31mWelcome to Jumpserver!\x1b[m\r\n');
-
+    if (this.host) {
       TermWS.emit('host', {'uuid': this.host.id, 'userid': this.userid, 'secret': this.secret});
-
+    }
+    if (this.token) {
+      TermWS.emit('token', {'token': this.token, 'secret': this.secret});
+    }
+    if (this.monitor) {
+      TermWS.emit('monitor', {'token': this.monitor, 'secret': this.secret});
+    } else {
       this.term.on('data', function (data) {
         TermWS.emit('data', {'data': data, 'room': NavList.List[that.index].room});
       });
+    }
+
 
     TermWS.on('data', function (data) {
       if (data['room'] === NavList.List[that.index].room) {
@@ -90,7 +97,7 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
     TermWS.on('logout', function (data) {
       if (data['room'] === NavList.List[that.index].room) {
         NavList.List[this.index].connected = false;
-          this.term.write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
+        // this.term.write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
       }
     });
     TermWS.on('room', function (data) {
@@ -99,11 +106,10 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
       }
     });
   }
-  }
 
   TerminalDisconnect() {
     NavList.List[this.index].connected = false;
-    this.term.write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
+    // this.term.write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
     TermWS.emit('logout', NavList.List[this.index].room);
   }
 }

src/app/globals.ts

@@ -39,15 +39,13 @@ export let Video: {
 };
 
 export let Monitor: {
-  sessionid: string,
+  token: string,
   room: string,
   type: string,
-  socket: any,
 } = {
-  sessionid: '',
+  token: '',
   room: '',
   type: 'term',
-  socket: io.connect(),
 };
 
 export class Group {

src/app/monitor-page/linux/linux.component.html

-<app-element-term></app-element-term>
+<app-element-term
+  [index]="0"
+  [monitor]="token"
+></app-element-term>

src/app/monitor-page/linux/linux.component.ts

 import {Component, OnInit} from '@angular/core';
-import {Monitor, term} from '../../globals';
-import * as io from 'socket.io-client';
-
-import * as jQuery from 'jquery/dist/jquery.min.js';
+import {Monitor} from '../../globals';
 
 @Component({
   selector: 'app-monitor-linux',
@@ -10,27 +7,13 @@ import * as jQuery from 'jquery/dist/jquery.min.js';
   styleUrls: ['./linux.component.css']
 })
 export class LinuxComponent implements OnInit {
+  token: string;
 
   constructor() {
   }
 
   ngOnInit() {
-    Monitor.socket = io.connect('/ssh');
-    Monitor.socket.on('connect', function () {
-      Monitor.socket.emit('room', Monitor.sessionid);
-      Monitor.socket.on('room', function (room) {
-        Monitor.room = room;
-        console.log(room);
-        Monitor.socket.emit('join', room);
-        console.log(Monitor);
-      });
-      Monitor.socket.on('data', function (data) {
-        term.term.write(data);
-      });
-      Monitor.socket.on('error', function (data) {
-        alert(data);
-      });
-    });
+    this.token = Monitor.token;
   }
 
 

src/app/monitor-page/monitor-page.component.ts

@@ -15,7 +15,7 @@ export class MonitorPageComponent implements OnInit {
 
   ngOnInit() {
     this.activatedRoute.params.subscribe((params: Params) => {
-      Monitor.sessionid = params['token'];
+      Monitor.token = params['token'];
       Monitor.type = 'term';
       console.log(Monitor);
     });

src/app/term-page/term-page.component.html

-<p>
-  term-page works!
-</p>
+<app-element-term
+  [token]="token"
+[index]="0">
+</app-element-term>

src/app/term-page/term-page.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {DataStore} from '../globals';
+import {ActivatedRoute, Params} from '@angular/router';
+import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
   selector: 'app-term-page',
@@ -6,10 +9,16 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./term-page.component.scss']
 })
 export class TermPageComponent implements OnInit {
+  token: string;
 
-  constructor() { }
+  constructor(private activatedRoute: ActivatedRoute) {
+    DataStore.NavShow = false;
+  }
 
   ngOnInit() {
+    this.activatedRoute.params.subscribe((params: Params) => {
+      this.token = params['token'];
+    });
+    jQuery('body').css('background-color', 'black');
   }
-
 }

src/app/test-page/dialog.html

+<h2 mat-dialog-title>Delete all</h2>
+<mat-dialog-content>Are you sure?</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>No</button>
+  <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
+  <button mat-button [mat-dialog-close]="true">Yes</button>
+</mat-dialog-actions>

src/app/test-page/test-page.component.html

-<p>
-  test-page works!
-</p>
-<!--<ngx-layer></ngx-layer>-->
+<mat-checkbox>Check me!</mat-checkbox>
+<button mat-raised-button (click)="openDialog()">Pick one</button>

src/app/test-page/test-page.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
+import {DataStore} from '../globals';
+import {DialogService} from '../elements/dialog/dialog.service';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
+
+// import {Mats, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
 
 @Component({
   selector: 'app-test-page',
@@ -6,10 +11,41 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./test-page.component.scss']
 })
 export class TestPageComponent implements OnInit {
+  name: string;
 
-  constructor() { }
+  constructor(private _dialog: MatDialog) {
+    DataStore.NavShow = false;
+  }
 
   ngOnInit() {
+    this.name = 'ssss';
+  }
+
+  openDialog(): void {
+    const dialogRef = this._dialog.open(TestPageComponentDialog, {
+      width: '251px',
+      data: {name: this.name}
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed', result);
+      // this.animal = result;
+    });
+  }
+}
+
+
+@Component({
+  selector: 'app-test-page-dialog',
+  templateUrl: 'dialog.html',
+})
+export class TestPageComponentDialog {
+  constructor(public dialogRef: MatDialogRef<TestPageComponentDialog>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
   }
 
 }

src/sass/style.scss

@@ -66,3 +66,7 @@ $asset-path: '../static/imgs/inspinia';
     margin: 0;
   }
 }
+
+
+
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

src/styles.css

@@ -10,6 +10,7 @@
   font-size: large;
 }
 
+
 html,
 body {
   overflow-x: hidden; /* Prevent scroll on narrow devices */