Merged in dev (pull request #8)

Dev
Approved-by: zheng liu <liuzheng712@gmail.com>

.angular-cli.json

@@ -20,12 +20,10 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
-        "../node_modules/font-awesome/css/font-awesome.css",
-        "../node_modules/xterm/dist/xterm.css",
         "../node_modules/layui-layer/dist/theme/default/layer.css",
         "../node_modules/animate.css/animate.min.css",
         "assets/inspinia/style.scss",
+        "sass/style.scss",
         "styles.css"
       ],
       "scripts": [
@@ -75,7 +73,7 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "scss",
     "component": {}
   }
 }

docs/developer_guide.md

+# Developer's Guide
+

package-lock.json

 {
   "name": "luna",
-  "version": "0.1.0",
+  "version": "0.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1075,13 +1075,9 @@
       }
     },
     "bootstrap": {
-      "version": "4.0.0-alpha.6",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz",
-      "integrity": "sha1-T1TdM6wN6sOyhAe8LffsYIhpycg=",
-      "requires": {
-        "jquery": "3.2.1",
-        "tether": "1.4.0"
-      }
+      "version": "4.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.3.tgz",
+      "integrity": "sha512-/Qe1Q2d1muLEZRX2iCteMQHZBBAm6ZIjJ9FcBYK/xLr05+HvDtBOVBN+Cz7mCNZuy0zr+y5artZHM05W7mIz6g=="
     },
     "brace-expansion": {
       "version": "1.1.8",
@@ -1662,6 +1658,11 @@
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
       "dev": true
     },
+    "compass-mixins": {
+      "version": "0.12.10",
+      "resolved": "https://registry.npmjs.org/compass-mixins/-/compass-mixins-0.12.10.tgz",
+      "integrity": "sha1-zZ8V+CnE6WDMQ7sibwSbKL65nUE="
+    },
     "component-bind": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
@@ -6813,6 +6814,19 @@
         "lower-case": "1.1.4"
       }
     },
+    "node": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/node/-/node-9.3.0.tgz",
+      "integrity": "sha512-mzd/bye/4HE8QbguOcpk7x38h9+ULo3WesRps8g+C89j/KLJgQs0FBQ2TPHR6SDf1+rWNJ/klaE22FDRpw2ddQ==",
+      "requires": {
+        "node-bin-setup": "1.0.6"
+      }
+    },
+    "node-bin-setup": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.0.6.tgz",
+      "integrity": "sha512-uPIxXNis1CRbv1DwqAxkgBk5NFV3s7cMN/Gf556jSw6jBvV7ca4F9lRL/8cALcZecRibeqU+5dFYqFFmzv5a0Q=="
+    },
     "node-dir": {
       "version": "0.1.17",
       "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
@@ -11040,6 +11054,11 @@
       "resolved": "https://registry.npmjs.org/policyfile/-/policyfile-0.0.4.tgz",
       "integrity": "sha1-1rgurZiueeviKOLa9ZAzEeyYLk0="
     },
+    "popper.js": {
+      "version": "1.12.9",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.9.tgz",
+      "integrity": "sha1-DfvC3/lsRRuzMu3Pz6r1ZtMx1bM="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
@@ -12619,6 +12638,11 @@
         }
       }
     },
+    "sass-math": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/sass-math/-/sass-math-1.0.0.tgz",
+      "integrity": "sha1-swsquBY52q5m9cNnvC2Fq0EecWk="
+    },
     "saucelabs": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.3.0.tgz",

package.json

@@ -24,8 +24,9 @@
     "angular2-logger": "^0.6.0",
     "animate.css": "^3.5.2",
     "body-parser": "^1.18.2",
-    "bootstrap": "^4.0.0-alpha.6",
+    "bootstrap": "^4.0.0-beta.3",
     "clipboard": "^1.7.1",
+    "compass-mixins": "^0.12.10",
     "core-js": "^2.4.1",
     "directory-encoder": "^0.9.2",
     "filetree-css": "^1.0.0",
@@ -41,10 +42,13 @@
     "ng2-charts": "^1.5.0",
     "ng2-cookies": "^1.0.12",
     "ngx-bootstrap": "^1.6.6",
+    "node": "^9.3.0",
     "npm": "^5.6.0",
     "peity": "^3.2.1",
+    "popper.js": "^1.12.9",
     "roboto-fontface": "^0.8.0",
     "rxjs": "^5.4.2",
+    "sass-math": "^1.0.0",
     "socket.io": "^2.0.3",
     "socket.io-client": "^2.0.4",
     "ssh-keygen": "^0.4.1",

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

@@ -11,8 +11,8 @@ import {AppService, HttpService} from '../../app.service';
 import {NgForm} from '@angular/forms';
 import {Router} from '@angular/router';
 import {DataStore, User} from '../../globals';
+import * as jQuery from 'jquery/dist/jquery.min.js';
 
-declare let jQuery: any;
 
 @Component({
   selector: 'app-login',

src/app/ControlPage/cleftbar/cleftbar.component.css

@@ -62,3 +62,7 @@ label {
   background: #2f2a2a;
   color: #ffffff;
 }
+
+.footer {
+  background: #2f2a2a;
+}

src/app/ControlPage/cleftbar/cleftbar.component.html

@@ -17,4 +17,6 @@
     </li>
   </ul>
 </div>
-
+<div class="footer">
+  Version <strong>{{version}}</strong> GPL.
+</div>

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

@@ -15,9 +15,10 @@ import {SshComponent} from '../control/ssh/ssh.component';
 import {RdpComponent} from '../control/rdp/rdp.component';
 import {SearchComponent} from '../search/search.component';
 import {DataStore} from '../../globals';
+import {version} from '../../../environments/environment';
+import * as jQuery from 'jquery/dist/jquery.min.js';
+import * as layer from 'layui-layer/src/layer.js';
 
-declare let layer: any;
-declare let jQuery: any;
 
 export class HostGroup {
   name: string;
@@ -40,7 +41,7 @@ export class Host {
 export class CleftbarComponent implements OnInit {
   DataStore = DataStore;
   HostGroups: Array<HostGroup>;
-  q: string;
+  version = version;
 
   static Reload() {
   }

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

 <app-controlnav></app-controlnav>
 <app-ssh></app-ssh>
-<app-rdp></app-rdp>
+<!--<app-rdp></app-rdp>-->

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

@@ -8,11 +8,10 @@
  */
 
 import {Component, OnInit} from '@angular/core';
-import {NavList} from '../control.component'
-import {SshComponent} from '../ssh/ssh.component'
-import {RdpComponent} from '../rdp/rdp.component'
-
-declare let jQuery: any;
+import {NavList} from '../control.component';
+import {SshComponent} from '../ssh/ssh.component';
+import {RdpComponent} from '../rdp/rdp.component';
+import * as jQuery from 'jquery/dist/jquery.min.js';
 
 
 @Component({
@@ -24,18 +23,12 @@ export class ControlnavComponent implements OnInit {
   setActive = ControlnavComponent.setActive;
   NavList = NavList;
 
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-
   static checkActive(index) {
-    let len = NavList.List.length;
-    if (len == 1) {
+    const len = NavList.List.length;
+    if (len === 1) {
       // 唯一一个
       NavList.Active = 0;
-    } else if (len - 1 == index) {
+    } else if (len - 1 === index) {
       // 删了最后一个
       NavList.Active = len - 2;
     } else {
@@ -50,23 +43,30 @@ export class ControlnavComponent implements OnInit {
     }
     NavList.List[index].hide = false;
     NavList.Active = index;
-    if (NavList.List[index].type === "ssh") {
-      jQuery("app-ssh").show();
-      jQuery("app-rdp").hide()
+    if (NavList.List[index].type === 'ssh') {
+      jQuery('app-ssh').show();
+      jQuery('app-rdp').hide();
     } else if (NavList.List[index].type === 'rdp') {
-      jQuery("app-ssh").hide();
-      jQuery("app-rdp").show();
+      jQuery('app-ssh').hide();
+      jQuery('app-rdp').show();
     }
   }
 
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+
   close(host, index) {
     if (host.type === 'rdp') {
-      RdpComponent.Disconnect(host)
+      RdpComponent.Disconnect(host);
     } else if (host.type === 'ssh') {
-      SshComponent.TerminalDisconnect(host)
+      SshComponent.TerminalDisconnect(host);
     }
     NavList.List.splice(index, 1);
-    ControlnavComponent.checkActive(index)
+    ControlnavComponent.checkActive(index);
   }
 
 }

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

@@ -18,6 +18,18 @@ declare let Mstsc: any;
 export class RdpComponent implements OnInit {
   NavList = NavList;
 
+
+  static Disconnect(host) {
+    host.connected = false;
+
+    // document.getElementById("templatesrc").remove();
+
+  }
+
+  static DisconnectAll() {
+
+  }
+
   constructor() {
   }
 
@@ -25,9 +37,9 @@ export class RdpComponent implements OnInit {
   }
 
   Connect(host, username) {
-    let id = NavList.List.length - 1;
+    const id = NavList.List.length - 1;
 
-    let canvas = Mstsc.$("canvas-" + id);
+    const canvas = Mstsc.$('canvas-' + id);
     canvas.style.display = 'inline';
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
@@ -36,12 +48,12 @@ export class RdpComponent implements OnInit {
     NavList.List[id].connected = true;
     NavList.List[id].edit = false;
     NavList.List[id].closed = false;
-    NavList.List[id].type = "rdp";
+    NavList.List[id].type = 'rdp';
     NavList.List[id].Rdp = new Rdp;
     NavList.List[id].Rdp.token = host.token;
     NavList.List[id].Rdp.machine = host.uuid;
-    NavList.List[id].Rdp.client = Mstsc.client.create(Mstsc.$("canvas-" + id));
-    NavList.List[id].Rdp.client.connect(host.token, "rdp/socket.io");
+    NavList.List[id].Rdp.client = Mstsc.client.create(Mstsc.$('canvas-' + id));
+    NavList.List[id].Rdp.client.connect(host.token, 'rdp/socket.io');
 
 
     NavList.List.push(new View());
@@ -54,15 +66,4 @@ export class RdpComponent implements OnInit {
 
   }
 
-  static Disconnect(host) {
-    host.connected = false;
-
-    // document.getElementById("templatesrc").remove();
-
-  }
-
-  static DisconnectAll() {
-
-  }
-
 }

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

@@ -7,13 +7,12 @@
 
 import {Component, OnInit} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
-import * as io from 'socket.io-client';
 import {Cookie} from 'ng2-cookies/ng2-cookies';
-
-declare let jQuery: any;
-declare let Terminal: any;
 import {AppService} from '../../../app.service';
 import {NavList, View, Term} from '../control.component';
+import {Terminal} from '../../../globals';
+import * as io from 'socket.io-client';
+import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
   selector: 'app-ssh',
@@ -71,7 +70,7 @@ export class SshComponent implements OnInit {
     NavList.List[id].Term = new Term;
     NavList.List[id].Term.machine = host.id;
     NavList.List[id].Term.socket = socket;
-    NavList.List[id].Term.term = new Terminal({
+    NavList.List[id].Term.term = Terminal({
       cols: cols,
       rows: rows,
       useStyle: true,

src/app/app.component.css

@@ -20,3 +20,10 @@ nav {
   height: 30px;
   width: 100%;
 }
+
+app-element-interactive {
+  position: absolute;
+  display: inline-block;
+  bottom: 120px;
+  left: 100px;
+}

src/app/app.component.html

 <app-element-nav *ngIf="DataStore.NavShow"></app-element-nav>
 <nav *ngIf="DataStore.NavShow"></nav>
 <router-outlet></router-outlet>
+<!--<app-element-interactive></app-element-interactive>-->

src/app/app.module.ts

@@ -18,13 +18,14 @@ import {HttpModule} from '@angular/http';
 import {AppRoutingModule} from './app-routing.module';
 
 import {AppComponent} from './app.component';
+// Elements
 import {ElementFooterComponent} from './elements/footer/footer.component';
 import {ElementTermComponent} from './elements/term/term.component';
-
-
+import {ElementInteractiveComponent} from './elements/interactive/interactive.component';
 import {ElementNavComponent} from './elements/nav/nav.component';
 import {LoginComponent} from './BasicPage/login/login.component';
 import {ElementPopupComponent} from './elements/popup/popup.component';
+// pages
 import {IleftbarComponent} from './IndexPage/ileftbar/ileftbar.component';
 import {SearchComponent, SearchFilter} from './ControlPage/search/search.component';
 import {CleftbarComponent} from './ControlPage/cleftbar/cleftbar.component';
@@ -59,6 +60,7 @@ import {WindowsComponent} from './monitor-page/windows/windows.component';
     ElementFooterComponent,
     ElementPopupComponent,
     ElementTermComponent,
+    ElementInteractiveComponent,
     LoginComponent,
     RdpComponent,
     SshComponent,

src/app/app.service.ts

@@ -14,9 +14,6 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import {DataStore, User, Browser} from './globals';
 
-declare let jQuery: any;
-
-
 @Injectable()
 export class HttpService {
   headers = new Headers();

src/app/elements/footer/footer.component.html

 <div class="footer fixed">
-    <div class="pull-right">
-        Version <strong>0.4</strong> GPL.
-    </div>
-    <div>
-        <strong>Copyright</strong> Jumpserver.org Team &copy; 2014-2018
-    </div>
+  <div class="pull-right">
+    Version <strong>{{version}}</strong> GPL.
+  </div>
+  <div>
+    <strong>Copyright</strong> Jumpserver.org Team &copy; 2014-2018
+  </div>
 </div>

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

@@ -9,6 +9,7 @@ import {Component, OnInit} from '@angular/core';
 import {AppService} from '../../app.service';
 import {Logger} from 'angular2-logger/core';
 import {DataStore, User} from '../../globals';
+import {version} from '../../../environments/environment';
 
 @Component({
   selector: 'app-element-footer',
@@ -18,6 +19,7 @@ import {DataStore, User} from '../../globals';
 export class ElementFooterComponent implements OnInit {
   DataStore = DataStore;
   User = User;
+  version = version;
 
   constructor(private _appService: AppService,
               private _logger: Logger) {

src/app/elements/interactive/interactive.component.html

+
+<div class="menu">
+  <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
+  <label class="menu-open-button" for="menu-open">
+    <span class="hamburger hamburger-1"></span>
+    <span class="hamburger hamburger-2"></span>
+    <span class="hamburger hamburger-3"></span>
+  </label>
+
+  <a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
+  <a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
+  <a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
+  <a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
+
+</div>

src/app/elements/interactive/interactive.component.scss

+@import "~sass-math/math";
+//vars
+$fg: #ff4081;
+$bg: #3f51b5;
+$pi: pi();
+
+//config
+$menu-items: 5;
+$open-distance: 115px;
+$opening-angle: $pi - .2;
+
+%goo {
+  filter: url('#shadowed-goo');
+  // debug
+  //background:rgba(255,0,0,0.2);
+}
+
+%ball {
+  background: $fg;
+  border-radius: 100%;
+  width: 80px;
+  height: 80px;
+  margin-left: -40px;
+  position: absolute;
+  top: 20px;
+  color: white;
+  text-align: center;
+  line-height: 80px;
+  transform: translate3d(0, 0, 0);
+  transition: transform ease-out 200ms;
+}
+
+.menu-open {
+  display: none;
+}
+
+.menu-item {
+  @extend %ball;
+}
+
+.hamburger {
+  $width: 25px;
+  $height: 3px;
+  width: $width;
+  height: $height;
+  background: white;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -$width/2;
+  margin-top: -$height/2;
+  transition: transform 200ms;
+}
+
+$hamburger-spacing: 8px;
+.hamburger-1 {
+  transform: translate3d(0, -$hamburger-spacing, 0);
+}
+
+.hamburger-2 {
+  transform: translate3d(0, 0, 0);
+}
+
+.hamburger-3 {
+  transform: translate3d(0, $hamburger-spacing, 0);
+}
+
+.menu-open:checked + .menu-open-button {
+  .hamburger-1 {
+    transform: translate3d(0, 0, 0) rotate(45deg);
+  }
+  .hamburger-2 {
+    transform: translate3d(0, 0, 0) scale(0.1, 1);
+  }
+  .hamburger-3 {
+    transform: translate3d(0, 0, 0) rotate(-45deg);
+  }
+}
+
+.menu {
+  @extend %goo;
+  $width: 380px;
+  $height: 250px;
+  position: absolute;
+  left: 50%;
+  margin-left: -$width/2;
+  padding-top: 20px;
+  padding-left: $width/2;
+  width: $width;
+  height: $height;
+  box-sizing: border-box;
+  font-size: 20px;
+  text-align: left;
+}
+
+.menu-item {
+  &:hover {
+    background: white;
+    color: $fg;
+  }
+  @for $i from 1 through $menu-items {
+    &:nth-child(#{$i+2}) {
+      transition-duration: 10ms+(60ms*($i));
+    }
+  }
+}
+
+.menu-open-button {
+  @extend %ball;
+  z-index: 2;
+  transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+  transition-duration: 400ms;
+  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
+  cursor: pointer;
+}
+
+.menu-open-button:hover {
+  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
+}
+
+.menu-open:checked + .menu-open-button {
+  transition-timing-function: linear;
+  transition-duration: 200ms;
+  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
+}
+
+.menu-open:checked ~ .menu-item {
+  transition-timing-function: cubic-bezier(0.935, 0.000, 0.340, 1.330);
+  @for $i from 1 through $menu-items {
+    $angle: (($pi - $opening-angle)/2)+(($opening-angle/($menu-items - 1))*($i - 1)+($pi*0.43));
+
+    &:nth-child(#{$i+2}) {
+      transition-duration: 80ms+(80ms*$i);
+      transform: translate3d(sin($angle)*$open-distance, cos($angle)*$open-distance, 0);
+    }
+  }
+}

src/app/elements/interactive/interactive.component.spec.ts

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

src/app/elements/interactive/interactive.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-element-interactive',
+  templateUrl: './interactive.component.html',
+  styleUrls: ['./interactive.component.scss']
+})
+export class ElementInteractiveComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -14,9 +14,9 @@ import {SshComponent} from '../../ControlPage/control/ssh/ssh.component';
 import {RdpComponent} from '../../ControlPage/control/rdp/rdp.component';
 import {NavList} from '../../ControlPage/control/control.component';
 import {DataStore} from '../../globals';
-
+import * as jQuery from 'jquery/dist/jquery.min.js';
+// import * as layer from 'layui-layer/src/layer.js';
 declare let layer: any;
-declare let jQuery: any;
 
 @Component({
   selector: 'app-element-nav',

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

 import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {ElementRef, Renderer2} from '@angular/core';
 import {term} from '../../globals';
-
-declare let jQuery: any;
-declare let Terminal: any;
+import {Terminal} from '../../globals';
+import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
   selector: 'app-element-term',
@@ -24,7 +23,7 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   ngAfterViewInit() {
     term.col = Math.floor(jQuery(this.el.nativeElement).width() / jQuery('#liuzheng').width() * 8) - 3;
     term.row = Math.floor(jQuery(this.el.nativeElement).height() / jQuery('#liuzheng').height()) - 5;
-    term.term = new Terminal({
+    term.term = Terminal({
       cols: term.col,
       rows: term.row,
       useStyle: true,

src/app/globals.ts

 'use strict';
+import * as terminal from 'term.js/src/term.js';
 import * as io from 'socket.io-client';
 
-declare let Terminal: any;
+export function Terminal(xargs: any) {
+  return terminal(xargs);
+}
 
 export let term: {
   term: any;
   col: number;
   row: number;
 } = {
-  term: Terminal(),
+  term: Terminal({}),
   col: 80,
   row: 24,
 };
 export const sep = '/';
-export const version = '22.22.2';
 export let Video: {
   id: string,
   src: string,

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

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {Monitor, term} from '../../globals';
 import * as io from 'socket.io-client';
 
-declare let jQuery: any;
+import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
   selector: 'app-monitor-linux',

src/app/rdppage/rdppage.component.ts

@@ -27,13 +27,13 @@ export class RdppageComponent implements OnInit {
       token = params['token'];
     });
 
-    let canvas = Mstsc.$("canvas");
+    const canvas = Mstsc.$('canvas');
     canvas.style.display = 'inline';
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
 
-    let client = Mstsc.client.create(Mstsc.$("canvas"));
-    client.connect(token, "socket.io");
+    const client = Mstsc.client.create(Mstsc.$('canvas'));
+    client.connect(token, 'socket.io');
   }
 
 }

src/app/replay-page/json/json.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {Video} from '../../globals';
 import {term} from '../../globals';
 
-declare let jQuery: any;
+import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
   selector: 'app-json',
@@ -24,6 +24,7 @@ export class JsonComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.restart();
   }
 
 

src/app/termpage/termpage.component.ts

@@ -2,9 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Params} from '@angular/router';
 import {DataStore} from '../globals';
 import * as io from 'socket.io-client';
-
-declare let jQuery: any;
-declare let Terminal: any;
+import * as Terminal from 'term.js/src/term.js';
 
 @Component({
   selector: 'app-termpage',

src/environments/environment.prod.ts

 export const environment = {
   production: true
 };
+export const version = 'Luna-CE-0.5';

src/environments/environment.ts

@@ -6,3 +6,4 @@
 export const environment = {
   production: false
 };
+export const version = 'Luna-dev';

src/sass/style.scss

+// font-awesome
+$fa-font-path: "~font-awesome/fonts";
+@import '~font-awesome/scss/font-awesome';
+
+// bootstrap
+@import "~bootstrap/scss/bootstrap";

src/styles.css

@@ -15,6 +15,7 @@ body {
   height: 100%;
   width: 100%;
   background-color: rgb(243, 243, 244);
+  overflow-y: hidden;
 }
 
 app-root {