feat: update

.angular-cli.json

@@ -21,6 +21,7 @@
       "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
         "../node_modules/xterm/dist/xterm.css",
+        "../node_modules/layui-layer/dist/theme/default/layer.css",
         "styles.css"
       ],
       "scripts": [
@@ -28,6 +29,7 @@
         "../node_modules/tether/dist/js/tether.min.js",
         "../node_modules/bootstrap/dist/js/bootstrap.min.js",
         "../node_modules/xterm/dist/xterm.js",
+        "../node_modules/layui-layer/dist/layer.js",
         "../node_modules/socket.io-client/dist/socket.io.js",
         "./assets/js/mstsc.js",
         "./assets/js/keyboard.js",

app.js

@@ -58,6 +58,118 @@ server.run = function (options) {
     .get(function (req, res) {
       res.json({logined: true})
     });
+  apis.route('/nav')
+    .get(function (req, res) {
+      res.json([{
+        "id": "File",
+        "name": "Server",
+        "children": [
+          {
+            "id": "NewConnection",
+            "href": "Aaaa",
+            "name": "New connection",
+            "disable": true
+          },
+          {
+            "id": "Connect",
+            "href": "Aaaa",
+            "name": "Connect",
+            "disable": true
+          },
+          {
+            "id": "Disconnect",
+            "click": "Disconnect",
+            "name": "Disconnect"
+          },
+          {
+            "id": "DisconnectAll",
+            "click": "DisconnectAll",
+            "name": "Disconnect all"
+          },
+          {
+            "id": "Duplicate",
+            "href": "Aaaa",
+            "name": "Duplicate",
+            "disable": true
+          },
+          {
+            "id": "Upload",
+            "href": "Aaaa",
+            "name": "Upload",
+            "disable": true
+          },
+          {
+            "id": "Download",
+            "href": "Aaaa",
+            "name": "Download",
+            "disable": true
+          },
+          {
+            "id": " Search",
+            "href": "Aaaa",
+            "name": "Search",
+            "disable": true
+          },
+          {
+            "id": "Reload",
+            "click": "ReloadLeftbar",
+            "name": "Reload"
+          }
+        ]
+      }, {
+        "id": "View",
+        "name": "View",
+        "children": [
+          {
+            "id": "HindLeftManager",
+            "click": "HideLeft",
+            "name": "Hind left manager"
+          },
+          {
+            "id": "SplitVertical",
+            "href": "Aaaa",
+            "name": "Split vertical",
+            "disable": true
+          },
+          {
+            "id": "CommandBar",
+            "href": "Aaaa",
+            "name": "Command bar",
+            "disable": true
+          },
+          {
+            "id": "ShareSession",
+            "href": "Aaaa",
+            "name": "Share session (read/write)",
+            "disable": true
+          },
+          {
+            "id": "Language",
+            "href": "Aaaa",
+            "name": "Language",
+            "disable": true
+          }]
+      }, {
+        "id": "Help",
+        "name": "Help",
+        "children": [
+          {
+            "id": "EnterLicense",
+            "click": "EnterLicense",
+            "name": "Enter License"
+          },
+          {
+            "id": "Website",
+            "click": "Website",
+            "name": "Website"
+          },
+          {
+            "id": "BBS",
+            "click": "BBS",
+            "name": "BBS"
+          }]
+      }])
+    });
 
   app.use("/api", apis);
   // let server listen on the port

package-lock.json

@@ -5494,6 +5494,9 @@
         "is-buffer": "1.1.5"
       }
     },
+    "layui-layer": {
+      "version": "git+https://github.com/jumpserver/layer.git#c568876741b64556df9916ed678a6106e1e82899"
+    },
     "lazy-cache": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz",

package.json

@@ -28,6 +28,7 @@
     "core-js": "^2.4.1",
     "filetree-css": "^1.0.0",
     "jquery": "^3.2.1",
+    "layui-layer": "git+https://github.com/jumpserver/layer.git",
     "ng2-cookies": "^1.0.12",
     "pty.js": "^0.3.1",
     "rxjs": "^5.4.2",

proxy.conf.json

 {
   "/api": {
-    "target": "http://localhost:3000",
+    "target": "http://localhost:7871",
     "secure": false
   },
   "/socket.io/": {
-    "target": "http://localhost:3000",
+    "target": "http://127.0.0.1:7871",
     "secure": false
   },
   "/rdp/socket.io/": {

src/app/BasicPage/login/login.component.ts

@@ -7,8 +7,9 @@
  */
 import {Component, OnInit} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
-import {AppService, DataStore, User} from '../../app.service';
+import {AppService, DataStore, HttpService, User} from '../../app.service';
 import {NgForm} from '@angular/forms';
+import {Router} from '@angular/router';
 
 declare let jQuery: any;
 
@@ -24,6 +25,8 @@ export class LoginComponent implements OnInit {
   loginBotton = 'login to your account';
 
   constructor(private _appService: AppService,
+              private _http: HttpService,
+              private _router: Router,
               private _logger: Logger) {
     this._logger.log('login.ts:LoginComponent');
   }
@@ -31,12 +34,53 @@ export class LoginComponent implements OnInit {
 
   onSubmit(f: NgForm) {
     if (f.valid) {
-      this._appService.login();
+      this.login();
     } else {
       this._logger.error("the form not valid")
     }
   }
 
+  login() {
+    this._logger.log('service.ts:AppService,login');
+    DataStore.error['login'] = '';
+    this._logger.log(User);
+    if (User.username.length > 0 && User.password.length > 6 && User.password.length < 100) {
+      this._http.post('/api/checklogin', JSON.stringify(User)).map(res => res.json())
+        .subscribe(
+          data => {
+            User.logined = data.logined;
+            User.name = data.name;
+            User.username = data.username;
+            User.logined = data.logined;
+          },
+          err => {
+            this._logger.error(err);
+            User.logined = false;
+            this._router.navigate(['login']);
+            DataStore.error['login'] = '后端错误,请重试';
+            return '后端错误,请重试';
+          },
+          () => {
+            if (User.logined) {
+              if (jQuery.isEmptyObject(DataStore.Path)) {
+                this._router.navigate(['welcome']);
+              } else {
+                this._router.navigate([DataStore.Path['name'], DataStore.Path['res']]);
+              }
+            } else {
+              this._router.navigate(['login']);
+              DataStore.error['login'] = '请检查用户名和密码';
+              return '请检查用户名和密码';
+            }
+            // jQuery('angular2').show();
+
+          });
+    } else {
+      DataStore.error['login'] = '请检查用户名和密码';
+      return '请检查用户名和密码';
+    }
+  }
+
   ngOnInit() {
     jQuery('#form').fadeIn('slow');
     // this._router.navigate(['login']);

src/app/BasicPage/nav/nav.component.css

+.nav {
+  display: block;
+  margin-top: 2px;
+  height: 30px
+}
+
+.nav ul {
+  list-style-type: none;
+  line-height: 24px;
+}
+
+.nav li {
+  display: inline-block;
+}
+
+.nav a {
+  color: #f0f0f1;
+  text-decoration: none;
+  padding: 6px 15px 6px 15px;
+}
+
+.nav a:hover {
+  color: #fff;
+  cursor: pointer
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown:hover {
+  background-color: #2d2828;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: black;
+  color: #c6bcbc;
+  padding: 4px 0;
+  z-index: 999;
+  float: none;
+  list-style: none;
+  line-height: normal;
+  direction: ltr;
+  width: auto;
+  top: auto;
+  left: 0px;
+  margin-left: 0px;
+  margin-top: 0px;
+  min-width: 150px;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.nav .dropdown-content li {
+  float: left;
+  display: flex;
+}
+
+.nav .dropdown-content li a {
+  padding: 6px 14px 6px 25px;
+  white-space: nowrap;
+  font-family: 'Roboto', sans-serif;
+  font-size: 13px;
+  font-weight: 300;
+  position: relative;
+  text-decoration: none;
+  min-width: 150px;
+  line-height: normal;
+}
+
+.nav .dropdown-content li a span {
+  float: right;
+}
+
+.dropdown-content li:hover {
+  background-color: #3a3333;
+  color: black;
+}
+
+.dropdown-content li.disabled:hover {
+  background-color: black;
+}
+
+.dropdown-content li.disabled a {
+  color: #c5babc;
+}
+
+.dropdown-content li.disabled a:hover {
+  cursor: default;
+  color: #c5babc;
+}

src/app/BasicPage/nav/nav.component.html

-<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse" *ngIf="User.logined">
-  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
-          data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
-          aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <a class="navbar-brand" routerLink="">Navbar</a>
-
-  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-    <ul class="navbar-nav mr-auto">
-      <li class="nav-item active">
-        <a class="nav-link" routerLink="">Home <span class="sr-only">(current)</span></a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" routerLink="control">Control</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link disabled" href="#">Disabled</a>
-      </li>
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown"
-           aria-haspopup="true" aria-expanded="false">Dropdown</a>
-        <div class="dropdown-menu" aria-labelledby="dropdown01">
-          <a class="dropdown-item" href="#">Action</a>
-          <a class="dropdown-item" href="#">Another action</a>
-          <a class="dropdown-item" href="#">Something else here</a>
-        </div>
-      </li>
+<div class="nav" *ngIf="User.logined">
+    <ul>
+        <li><a [routerLink]="['Index']"><img src="assets/imgs/logo.png" height="26px"/></a>
+        </li>
+        <li *ngFor="let v of DataStore.Nav; let k = index " [ngClass]="{'dropdown': v.children}">
+            <a>{{v.name}}</a>
+            <ul [ngClass]="{'dropdown-content': v.children}">
+                <li *ngFor="let vv of v.children; let kk = index" [ngClass]="{'disabled': vv.disable}">
+                    <a *ngIf="vv.href" [routerLink]="[vv.href]">{{vv.name}}</a>
+                    <a id="{{vv.id}}" *ngIf="vv.click" (click)="click(vv.click)">{{vv.name}}</a>
+                </li>
+            </ul>
+        </li>
     </ul>
-    <form class="form-inline my-2 my-lg-0">
-      <input class="form-control mr-sm-2" type="text" placeholder="Search">
-      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-    </form>
-  </div>
-</nav>
+</div>

src/app/BasicPage/nav/nav.component.ts

@@ -8,24 +8,122 @@
 import {Component, OnInit} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
 
-import {AppService, DataStore, User} from '../../app.service';
+import {AppService, DataStore, User, HttpService} from '../../app.service';
+import {CleftbarComponent} from '../../ControlPage/cleftbar/cleftbar.component';
+import {SshComponent} from '../../ControlPage/control/ssh/ssh.component';
+import {RdpComponent} from '../../ControlPage/control/rdp/rdp.component';
+import {NavList} from '../../ControlPage/control/control.component';
+
+declare let layer: any;
+declare let jQuery: any;
 
 @Component({
   selector: 'app-nav',
   templateUrl: './nav.component.html',
-  styleUrls: ['./nav.component.css']
+  styleUrls: ['./nav.component.css'],
 })
 export class NavComponent implements OnInit {
   DataStore = DataStore;
   User = User;
 
   constructor(private _appService: AppService,
+              private _http: HttpService,
               private _logger: Logger) {
     this._logger.log('nav.ts:NavComponent');
-    // this._appService.getnav()
+    this.getnav()
   }
 
   ngOnInit() {
   }
 
+  click(event) {
+    this._logger.debug('nav.ts:NavComponent,click', event);
+    switch (event) {
+      case "ReloadLeftbar": {
+        CleftbarComponent.Reload();
+        break
+      }
+
+      case "HideLeft": {
+        CleftbarComponent.Hide();
+        break
+      }
+      case "ShowLeft": {
+        CleftbarComponent.Show();
+        break
+      }
+      case "Copy": {
+        // this._appService.copy();
+        break
+      }
+      case"Disconnect": {
+        switch (NavList.List[NavList.Active].type) {
+          case "ssh": {
+            SshComponent.TerminalDisconnect(NavList.List[NavList.Active]);
+            break
+          }
+          case "rdp": {
+            RdpComponent.Disconnect(NavList.List[NavList.Active]);
+            break
+          }
+          default: {
+            //statements;
+            break;
+          }
+        }
+        break
+      }
+      case"DisconnectAll": {
+        SshComponent.TerminalDisconnectAll();
+        RdpComponent.DisconnectAll();
+        break
+      }
+      case "Website": {
+        window.open('http://www.jumpserver.org');
+        break
+      }
+      case "BBS": {
+        window.open('http://bbs.jumpserver.org');
+        break
+      }
+      case "EnterLicense": {
+        this.EnterLicense();
+        break
+      }
+      default: {
+        break
+      }
+    }
+
+  }
+
+  EnterLicense() {
+    layer.prompt({
+      formType: 2,
+      maxlength: 500,
+      title: 'Please Input Code',
+      scrollbar: false,
+      area: ['400px', '300px'],
+      moveOut: true,
+      moveType: 1
+    }, function (value, index) {
+      DataStore.socket.emit('key', value);
+      // layer.msg(value); //得到value
+      layer.close(index);
+
+    });
+  }
+
+  getnav() {
+    this._logger.log('getnav');
+    return this._http.get('/api/nav')
+      .map(res => res.json())
+      .subscribe(response => {
+        DataStore.Nav = response;
+      });
+  }
+
+  static Hide() {
+    jQuery("app-nav").hide()
+  }
 }

src/app/BasicPage/not-found.component.ts

-/**
- * 404页面
- *
- * @date     2017-11-07
- * @author   liuzheng <liuzheng712@gmail.com>
- */
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-
-  template: '<h2>Page not found</h2>'
-})
-export class PageNotFoundComponent {
-}

src/app/BasicPage/not-found/not-found.component.html

+<h2>这个真没有</h2>

src/app/BasicPage/not-found/not-found.component.spec.ts

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

src/app/BasicPage/not-found/not-found.component.ts

+import {Component, OnInit} from '@angular/core';
+import {NavComponent} from '../nav/nav.component'
+
+@Component({
+  selector: 'app-not-found',
+  templateUrl: './not-found.component.html',
+  styleUrls: ['./not-found.component.css']
+})
+export class NotFoundComponent implements OnInit {
+
+  constructor() {
+
+  }
+
+  ngOnInit() {
+    NavComponent.Hide()
+  }
+
+}

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

@@ -10,12 +10,26 @@
 import {Component, OnInit} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
 
-import {AppService, DataStore} from '../../app.service';
+import {AppService, DataStore, HttpService} from '../../app.service';
 import {SshComponent} from '../control/ssh/ssh.component';
 import {RdpComponent} from "../control/rdp/rdp.component";
 
 declare let jQuery: any;
 
+export class HostGroup {
+  name: string;
+  id: string;
+  children: Array<Host>;
+}
+
+export class Host {
+  name: string;
+  uuid: string;
+  type: string;
+  token: string;
+  machine: string;
+}
+
 @Component({
   selector: 'app-cleftbar',
   templateUrl: './cleftbar.component.html',
@@ -24,35 +38,32 @@ declare let jQuery: any;
 })
 export class CleftbarComponent implements OnInit {
   DataStore = DataStore;
-  HostGroups = [
-    {
-      name: "ops",
-      id: "ccc",
-      children: [
-        {
-          name: "ops-linux",
-          uuid: "xxxx",
-          type: "ssh",
-          token: "sshxxx"
-        }, {
-          name: "ops-win",
-          uuid: "win-aasdf",
-          type: "rdp",
-          token: "rdpxxx",
-          machine: "sss"
-        }
-      ],
-    }];
+  HostGroups: Array<HostGroup>;
+
+  static Reload() {
+  }
+
+  static Hide() {
+  }
+
+  static Show() {
+  }
 
   constructor(private _appService: AppService,
               private _term: SshComponent,
               private _rdp: RdpComponent,
+              private _http: HttpService,
               private _logger: Logger) {
     this._logger.log('nav.ts:NavComponent');
     // this._appService.getnav()
   }
 
   ngOnInit() {
+    this._http.get('/api/hostlist')
+      .map(res => res.json())
+      .subscribe(response => {
+        this.HostGroups = response;
+      });
   }
 
 

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

@@ -30,7 +30,6 @@ export class View {
   closed: boolean;
   Rdp: Rdp;
   Term: Term;
-
 }
 
 export let NavList: {

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

@@ -60,5 +60,8 @@ export class RdpComponent implements OnInit {
     // document.getElementById("templatesrc").remove();
 
   }
+  static DisconnectAll(){
+
+  }
 
 }

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

@@ -79,7 +79,8 @@ export class SshComponent implements OnInit {
     NavList.List[id].Term.term.write('\x1b[31mWelcome to Jumpserver!\x1b[m\r\n');
 
     socket.on('connect', function () {
-      socket.emit('machine', host.id);
+      socket.emit('login', "root");
+      socket.emit('machine', host.uuid);
 
       NavList.List[id].Term.term.on('data', function (data) {
         socket.emit('data', data);

src/app/ControlPage/controlpage.component.css

@@ -5,7 +5,6 @@ div, term-leftbar, term-body {
 }
 
 div {
-  top: 55px;
   background-color: black;
   margin: 0;
 }

src/app/app-routing.module.ts

@@ -10,7 +10,7 @@ import {RouterModule, Routes} from '@angular/router';
 import {environment} from '../environments/environment';
 
 import {IndexPageComponent} from './IndexPage/index-page.component';
-import {PageNotFoundComponent} from './BasicPage/not-found.component';
+import {NotFoundComponent} from './BasicPage/not-found/not-found.component';
 import {LoginComponent} from './BasicPage/login/login.component';
 import {ControlPageComponent} from './ControlPage/controlpage.component';
 
@@ -20,7 +20,7 @@ const appRoutes: Routes = [
   {path: 'login', component: LoginComponent},
   {path: 'control', component: ControlPageComponent},
   {path: '', redirectTo: '/welcome', pathMatch: 'full'},
-  {path: '**', component: PageNotFoundComponent}
+  {path: '**', component: NotFoundComponent}
 ];
 
 @NgModule({

src/app/app.component.css

+app-nav {
+  font-family: 'Roboto', sans-serif;
+  font-size: 13px;
+  font-weight: 300;
+  position: absolute;
+  display: inline-block;
+  top: 0;
+  left: 0;
+  height: 30px;
+  width: 100%;
+  color: #323a4e;
+  background-color: #463e3e;
+  background-repeat: no-repeat;
+  background-position: 100% 50%;
+  z-index: 5;
+  transition: background 0.2s ease-out;
+}
+
+nav {
+  height: 30px;
+  width: 100%;
+}

src/app/app.component.html

 <app-nav></app-nav>
+<nav></nav>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -11,6 +11,7 @@ import {AppService, HttpService} from './app.service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   providers: [AppService, HttpService],
   // directives: [LeftbarComponent, TermComponent]
 })

src/app/app.module.ts

@@ -22,7 +22,6 @@ import {AppComponent} from './app.component';
 import {NavComponent} from './BasicPage/nav/nav.component';
 import {LoginComponent} from './BasicPage/login/login.component';
 import {FooterComponent} from './BasicPage/footer/footer.component';
-import {PageNotFoundComponent} from './BasicPage/not-found.component';
 
 import {IleftbarComponent} from './IndexPage/ileftbar/ileftbar.component';
 import {SearchComponent} from './ControlPage/search/search.component';
@@ -33,6 +32,7 @@ import {RdpComponent} from './ControlPage/control/rdp/rdp.component';
 import {SshComponent} from './ControlPage/control/ssh/ssh.component';
 import {ControlPageComponent} from './ControlPage/controlpage.component';
 import {IndexPageComponent} from './IndexPage/index-page.component';
+import { NotFoundComponent } from './BasicPage/not-found/not-found.component';
 
 
 @NgModule({
@@ -44,7 +44,6 @@ import {IndexPageComponent} from './IndexPage/index-page.component';
   ],
   declarations: [
     AppComponent,
-    PageNotFoundComponent,
     NavComponent,
     LoginComponent,
     FooterComponent,
@@ -57,7 +56,8 @@ import {IndexPageComponent} from './IndexPage/index-page.component';
     ControlComponent,
     ControlnavComponent,
     ControlPageComponent,
-    IndexPageComponent
+    IndexPageComponent,
+    NotFoundComponent
     // HeroListComponent,
     // CrisisListComponent,
   ],

src/app/app.service.ts

@@ -117,7 +117,6 @@ export class HttpService {
       options = {};
     }
     options.headers = this.headers;
-    this._http.get("/api/hello");
     return this._http.get(url, options)
   }
 
@@ -263,46 +262,7 @@ export class AppService {
     }
   }
 
-  login() {
-    this._logger.log('service.ts:AppService,login');
-    DataStore.error['login'] = '';
-    this._logger.log(User);
-    if (User.username.length > 0 && User.password.length > 6 && User.password.length < 100) {
-      this._http.post('/api/checklogin', JSON.stringify(User)).map(res => res.json())
-        .subscribe(
-          data => {
-            User.logined = data.logined;
-            User.name = data.name;
-            User.username = data.username;
-            User.logined = data.logined;
-          },
-          err => {
-            this._logger.error(err);
-            User.logined = false;
-            this._router.navigate(['login']);
-            DataStore.error['login'] = '后端错误,请重试';
-            return '后端错误,请重试';
-          },
-          () => {
-            if (User.logined) {
-              if (jQuery.isEmptyObject(DataStore.Path)) {
-                this._router.navigate(['welcome']);
-              } else {
-                this._router.navigate([DataStore.Path['name'], DataStore.Path['res']]);
-              }
-            } else {
-              this._router.navigate(['login']);
-              DataStore.error['login'] = '请检查用户名和密码';
-              return '请检查用户名和密码';
-            }
-            // jQuery('angular2').show();
 
-          });
-    } else {
-      DataStore.error['login'] = '请检查用户名和密码';
-      return '请检查用户名和密码';
-    }
-  }
 
   browser() {
     this._http.post('/api/browser', JSON.stringify(Browser)).map(res => res.json()).subscribe()