update

.angular-cli.json

 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "name": "my-app"
+    "name": "WebTerminal"
   },
   "apps": [
     {
@@ -20,12 +20,14 @@
       "prefix": "app",
       "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "../node_modules/xterm/dist/xterm.css",
         "styles.css"
       ],
       "scripts": [
         "../node_modules/jquery/dist/jquery.min.js",
         "../node_modules/tether/dist/js/tether.min.js",
-        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
+        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
+        "../node_modules/xterm/dist/xterm.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

app.js

@@ -6,7 +6,7 @@ var server = {};
 var http = require('http');
 var express = require('express');
 var io = require('socket.io');
-// var pty = require('pty.js');
+var pty = require('pty.js');
 // var terminal = require('term.js');
 
 var socket;
@@ -16,23 +16,23 @@ var buff = [];
 server.run = function (options) {
 
   // create shell process
-  // term = pty.fork(
-  //     process.env.SHELL || 'sh',
-  //     [],
-  //     {
-  //         name: require('fs').existsSync('/usr/share/terminfo/x/xterm-256color')
-  //             ? 'xterm-256color'
-  //             : 'xterm',
-  //         cols: 80,
-  //         rows: 24,
-  //         cwd: process.env.HOME
-  //     }
-  // );
+  term = pty.fork(
+      process.env.SHELL || 'sh',
+      [],
+      {
+          name: require('fs').existsSync('/usr/share/terminfo/x/xterm-256color')
+              ? 'xterm-256color'
+              : 'xterm',
+          cols: 80,
+          rows: 24,
+          cwd: process.env.HOME
+      }
+  );
   //
   // // store term's output into buffer or emit through socket
-  // term.on('data', function (data) {
-  //     return !socket ? buff.push(data) : socket.emit('data', data);
-  // });
+  term.on('data', function (data) {
+      return !socket ? buff.push(data) : socket.emit('data', data);
+  });
 
   // console.log('Created shell with pty master/slave pair (master: %d, pid: %d)', term.fd, term.pid);
 
@@ -50,7 +50,7 @@ server.run = function (options) {
       res.json({logined: true, id: 1, username: "liuzheng", name: "liuzheng"})
     })
     .get(function (req, res) {
-      res.json({logined: false})
+      res.json({logined: true})
     });
 
 

package-lock.json

@@ -2784,6 +2784,11 @@
         "minimatch": "3.0.4"
       }
     },
+    "filetree-css": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/filetree-css/-/filetree-css-1.0.0.tgz",
+      "integrity": "sha1-7bfoiHH+ere+CeaZXNouodVzXUw="
+    },
     "fill-range": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
@@ -9982,6 +9987,11 @@
       "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
       "dev": true
     },
+    "xterm": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-2.9.2.tgz",
+      "integrity": "sha512-mdfPk9nY6WmKkMDIZUL6xVIpJoP6JLv3mQ2hA490e2DboUlTWt2f60cTnTT20ZYFU11mx9OgVCcqhDI7vOAQ5Q=="
+    },
     "y18n": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",

package.json

@@ -25,12 +25,14 @@
     "bootstrap": "^4.0.0-alpha.6",
     "clipboard": "^1.7.1",
     "core-js": "^2.4.1",
+    "filetree-css": "^1.0.0",
     "jquery": "^3.2.1",
     "ng2-cookies": "^1.0.12",
     "pty.js": "^0.3.1",
     "rxjs": "^5.4.2",
     "socket.io": "^2.0.3",
     "tether": "^1.4.0",
+    "xterm": "^2.9.2",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {

src/app/footer.component.ts → src/app/BasicPage/footer.component.ts

@@ -5,7 +5,7 @@
 import {Component} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
 
-import {AppService, DataStore, User} from './app.service';
+import {AppService, DataStore, User} from '../app.service';
 
 
 @Component({

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

@@ -4,7 +4,7 @@
 
 import {Component, OnInit} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
-import {AppService, DataStore, User} from './app.service';
+import {AppService, DataStore, User} from '../app.service';
 import {NgForm} from '@angular/forms';
 
 declare let jQuery: any;
@@ -37,7 +37,52 @@ export class LoginComponent implements OnInit {
   }
 
   ngOnInit() {
+    jQuery('#form').fadeIn('slow');
+    // this._router.navigate(['login']);
+    // jQuery('nav').hide();
+    const vm = this;
+    window.onresize = function () {
+      if (!User.logined) {
+        vm.background();
+      }
+    };
+
+    this.timer();
+
+  }
 
+  timer() {
+    if (DataStore.windowsize[0] !== document.documentElement.clientWidth ||
+      DataStore.windowsize[1] !== document.documentElement.clientHeight &&
+      !User.logined) {
+      jQuery(window).trigger('resize');
+      DataStore.windowsize = [document.documentElement.clientWidth, document.documentElement.clientHeight];
+    }
+    setTimeout(() => {
+      this.timer();
+    }, 33);
+  }
+
+  background() {
+    const q = jQuery('#q')[0];
+    const width = q.width = document.documentElement.clientWidth;
+    const height = q.height = document.documentElement.clientHeight;
+    const letters = [];
+    for (let i = 0; i < 256; i++) {
+      letters.push(Math.round(Math.random() * i * 33));
+    }
+    const draw = function () {
+      q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)';
+      q.getContext('2d').fillRect(0, 0, width, height);
+      q.getContext('2d').fillStyle = '#0F0';
+      letters.map(function (y_pos, index) {
+        const text = String.fromCharCode(65 + Math.random() * 26);
+        const x_pos = index * 10;
+        q.getContext('2d').fillText(text, x_pos, y_pos);
+        letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
+      });
+    };
+    setInterval(draw, 33);
   }
 
 }

src/app/BasicPage/login.css

+/* login form */
+form {
+  position: relative;
+  width: 300px;
+  margin: auto;
+  background: rgba(130, 130, 130, .3);
+  padding: 20px 22px;
+  border: 1px solid;
+  border-color: rgba(255, 255, 255, .4) rgba(60, 60, 60, .4) rgba(60, 60, 60, .4) rgba(255, 255, 255, .4);
+  z-index: 9;
+}
+
+form input, form button {
+  width: 250px;
+  border: 1px solid;
+  border-color: rgba(60, 60, 60, .35) rgba(60, 60, 60, .35) rgba(255, 255, 255, .5) rgba(80, 80, 80, .45);
+  background: rgba(0, 0, 0, .2) no-repeat;
+  padding: 8px 24px 8px 10px;
+  font: bold .875em/1.25em "Monaco", Roboto, sans-serif;
+  letter-spacing: .075em;
+  color: #fff;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
+  margin-bottom: 19px;
+}
+
+form input:focus {
+  background-color: rgba(0, 0, 0, .4);
+}
+
+.from-group {
+  position: relative;
+}
+
+.form-control-feedback {
+  position: absolute;
+  color: #ffffff;
+  top: 2px;
+  right: 2px;
+  z-index: 2;
+  display: block;
+  width: 34px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+  pointer-events: none;
+  font-weight: 400;
+  font-size: 18px;
+}
+
+::-webkit-input-placeholder {
+  color: #ccc;
+  text-transform: uppercase;
+}
+
+::-moz-placeholder {
+  color: #ccc;
+  text-transform: uppercase;
+}
+
+:-ms-input-placeholder {
+  color: #ccc;
+  text-transform: uppercase;
+}
+
+form button[type=submit] {
+  width: 250px;
+  margin-bottom: 0;
+  color: greenyellow;
+  letter-spacing: .05em;
+  text-shadow: 0 1px 0 #133d3e;
+  text-transform: uppercase;
+  background: #225556;
+  border-top-color: #9fb5b5;
+  border-left-color: #608586;
+  border-bottom-color: #1b4849;
+  border-right-color: #1e4d4e;
+  cursor: pointer;
+}
+
+canvas {
+  position: fixed;
+  top: 0;
+  z-index: 5;
+}
+
+.form {
+  z-index: 9;
+}
+
+.black {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 5;
+  background-color: #000000;
+}
+
+/* login form end */

src/app/BasicPage/login.html

+<div class="black"></div>
+<canvas id="q"></canvas>
+<div class="form">
+  <form #f="ngForm" (ngSubmit)="onSubmit(f)">
+    <div class="from-group">
+      <input type="email" id="username" placeholder="Email address" [(ngModel)]="User.username"
+             name="email" required autofocus pattern="^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$">
+      <span class="fa fa-user-secret form-control-feedback"></span>
+    </div>
+    <div class="from-group">
+      <input type="password" name="password" id="password" placeholder="password" [(ngModel)]="User.password" required
+             (ngEnter)="onSubmit(f)">
+      <span class="fa fa-key form-control-feedback"></span>
+    </div>
+    <button type="submit">{{loginBotton}}</button>
+  </form>
+</div>

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

@@ -13,7 +13,7 @@ import {Logger} from 'angular2-logger/core';
 // declare var layer: any;
 
 
-import {AppService, DataStore, User} from './app.service';
+import {AppService, DataStore, User} from '../app.service';
 
 
 //noinspection TypeScriptValidateTypes

src/app/leftbar.component.ts → src/app/IndexPage/leftbar.component.ts

@@ -5,7 +5,7 @@
 import {Component} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
 
-import {AppService, DataStore} from './app.service';
+import {AppService, DataStore} from '../app.service';
 
 
 //noinspection TypeScriptValidateTypes

src/app/welcome.component.ts → src/app/IndexPage/welcome.component.ts

@@ -2,7 +2,7 @@
  * Created by liuzheng on 2017/8/31.
  */
 import {Component, OnInit} from '@angular/core';
-import {AppService, DataStore, User} from './app.service';
+import {AppService, DataStore, User} from '../app.service';
 
 @Component({
   templateUrl: './welcome.html',

src/app/TerminalPage/leftbar.css

+.filetree > li {
+  width: 200px;
+}
+
+.filetree li > input[type="checkbox"] + label {
+  width: 100px;
+}
+
+div {
+  height: 100%;
+}

src/app/TerminalPage/leftbar.html

+<div id="sidebar">
+  <ul class="filetree">
+    <li *ngFor="let hostGroup of HostGroups">
+      <input type="checkbox" id="level1-1">
+      <label for="level1-1">{{hostGroup.name}}</label>
+      <ul>
+        <li *ngFor="let host of hostGroup.children" (click)="TerminalConnect()">{{host.name}}</li>
+      </ul>
+    </li>
+  </ul>
+</div>
+

src/app/TerminalPage/leftbar.ts

+import {Component} from '@angular/core';
+import {Logger} from 'angular2-logger/core';
+
+import {AppService, DataStore} from '../app.service';
+
+
+//noinspection TypeScriptValidateTypes
+@Component({
+  selector: 'term-leftbar',
+  templateUrl: './leftbar.html',
+  styleUrls: ['../../../node_modules/filetree-css/filetree.css', './leftbar.css'],
+
+})
+
+
+export class TermLeftBar {
+  // DataStore = DataStore;
+  HostGroups = [
+    {
+      name: "msa-us",
+      id: "ccc",
+      children: [
+        {
+          name: "ops-redis",
+          id: "xxxx"
+        }
+      ],
+    }];
+
+  constructor(private _appService: AppService,
+              private _logger: Logger) {
+    this._logger.log('nav.ts:NavComponent');
+    // this._appService.getnav()
+  }
+
+  TerminalConnect() {
+    this._appService.TerminalConnect("sss");
+  }
+
+}

src/app/TerminalPage/main.css

+div, term-leftbar, term-body {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+}

src/app/TerminalPage/main.html

+<div class="container-fluid row">
+  <term-leftbar class="col-md-2" ></term-leftbar>
+  <term-body class="col-md-10" ></term-body>
+</div>

src/app/TerminalPage/main.ts

+/**
+ * Created by liuzheng on 2017/8/31.
+ */
+import {Component, OnInit} from '@angular/core';
+import {AppService, DataStore, User} from '../app.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './main.html',
+  styleUrls: ['./main.css'],
+  providers: [AppService],
+})
+
+export class TermPage {
+  DataStore = DataStore;
+  User = User;
+
+  // DataStore = DataStore;
+}

src/app/TerminalPage/terminal.css

+
+#tabs {
+  height: 30px;
+  width: 100%
+}
+
+#tabs ul li.disconnected {
+  background-color: darkgray;
+}
+
+#tabs ul li.hidden {
+  display: none;
+}
+
+#tabs ul {
+  list-style-type: none;
+  height: 30px;
+  background-color: #3a3333;
+  overflow-y: hidden;
+  overflow-x: auto;
+  width: 100%;
+  display: inline-flex;
+  position: absolute;
+}
+
+#tabs ul li {
+  display: inline-table;
+  width: 150px;
+  height: 30px;
+  position: relative;
+  box-sizing: content-box;
+}
+
+#tabs ul li.active div {
+  height: 100%;
+  width: 100%;
+  border-bottom: 3px solid #7f3f98 !important;
+}
+
+#tabs ul li span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: gray;
+  font-family: 'Roboto', sans-serif;
+  font-size: 13px;
+  text-decoration: none;
+  padding: 8px 20px 6px 15px;
+  cursor: default;
+  width: 115px;
+  height: 21px;
+  position: absolute;
+}
+
+#tabs ul li a.close {
+  font-family: 'Roboto', sans-serif;
+  font-size: 13px;
+  position: absolute;
+  color: gray;
+  top: 0;
+  right: 5px;
+  cursor: pointer;
+  line-height: 26px;
+  display: inline-block;
+}
+
+#tabs ul li.active a {
+  color: white;
+}
+
+#tabs ul li.active span {
+  padding: 5px 20px 4px 15px;
+  color: white;
+  height: 18px;
+}
+
+#tabs ul li input {
+  font-family: 'Roboto', sans-serif;
+  font-size: 13px;
+  width: 115px;
+  border: none;
+  background-color: inherit;
+  color: white;
+  padding: 5px 20px 4px 15px;
+  height: 18px;
+  border-bottom: 3px solid #7f3f98 !important;
+}
+
+#term {
+  width: 100%;
+  height: 100%;
+}
+
+.terminal {
+  border: #000 solid 5px;
+  color: #f0f0f0;
+  background: #fffa90;
+  box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
+  white-space: nowrap;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+}
+
+#term .terminal div span {
+  min-width: 12px;
+}
+
+.reverse-video {
+  color: #000;
+  background: #f0f0f0;
+}
+
+.termChangBar {
+  line-height: 1;
+  margin: 0 auto;
+  border: 1px solid #ffffff;
+  color: #fff;
+  background-color: #ffffff;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.hidden {
+  display: none;
+}

src/app/TerminalPage/terminal.html

+<div id="tabs">
+  <ul>
+    <li *ngFor="let m of DataStore.term;let i = index"
+        [ngClass]="{'active':i==DataStore.termActive,'disconnected':!m.connected, 'hidden': m.closed != false}"
+        id="termnav-{{i}}" (click)="setActive(i)">
+      <div>
+        <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"/>
+        <a class="close" (click)="close(i)">&times;</a>
+      </div>
+    </li>
+  </ul>
+</div>
+<div id="term">
+  <!--<div-->
+  <!--[ngClass]="{'disconnected':!DataStore.term[0].connected, 'hidden': i!=DataStore.termActive || DataStore.term[0].closed}"-->
+  <!--id="term-0"></div>-->
+  <div *ngFor="let m of DataStore.term;let i=index"
+       [ngClass]="{'disconnected':!m.connected,'hidden': m.hide}" id="term-{{i}}">
+  </div>
+  <div class="terminal"></div>
+</div>
+<span id="liuzheng" class="terminal" style="display: none;">liuzheng</span>

src/app/TerminalPage/terminal.ts

+import {Component, OnInit} from '@angular/core';
+import {Logger} from 'angular2-logger/core';
+
+declare let jQuery: any;
+
+import {AppService, DataStore} from '../app.service';
+
+
+//noinspection TypeScriptValidateTypes
+@Component({
+  selector: 'term-body',
+  templateUrl: './terminal.html',
+  styleUrls: ['./terminal.css']
+  // directives: [NgClass]
+})
+
+
+export class Terminal implements OnInit {
+  DataStore = DataStore;
+  // portocol:string;
+  endpoint: string;
+
+  constructor(private _appService: AppService,
+              private _logger: Logger) {
+    this._logger.log('TermComponent.ts:TermComponent');
+  }
+
+  ngOnInit() {
+    //DataStore.term[0]["term"].open(document.getElementById("term-0"))
+    this.timer();
+  }
+
+  ngAfterViewInit() {
+    // this._appService.TerminalConnect({});
+    //this._logger.debug("term width ", jQuery("#term").width());
+    //this._logger.debug("term height", jQuery("#term").height());
+  }
+
+  timer() {
+    if (DataStore.termlist.length > 0) {
+      for (let i in DataStore.termlist) {
+        this._appService.TerminalConnect(DataStore.termlist[i]);
+      }
+      DataStore.termlist = []
+    }
+    jQuery(window).trigger('resize');
+    setTimeout(() => {
+      this.timer()
+    }, 0)
+  }
+
+  close(i) {
+    this._logger.debug(i);
+    AppService.TerminalDisconnect(i);
+    DataStore.term[i].hide = true;
+    DataStore.term[i].closed = true;
+    DataStore.term[i].term.destroy();
+    DataStore.term.splice(i, 1);
+    Terminal.checkActive(i);
+  }
+
+  static checkActive(index) {
+    let len = DataStore.term.length;
+    if (len == 2) {
+      // 唯一一个
+      DataStore.termActive = 0;
+    } else {
+      if (len - 1 == index) {
+        // 删了最后一个
+        DataStore.termActive = index - 1;
+      } else {
+        DataStore.termActive = index;
+      }
+      for (let m in DataStore.term) {
+        DataStore.term[m].hide = true;
+      }
+      DataStore.term[DataStore.termActive].hide = false;
+    }
+  }
+
+  setActive(index) {
+    for (let m in DataStore.term) {
+      DataStore.term[m].hide = true;
+    }
+    DataStore.term[index].hide = false;
+    DataStore.termActive = index;
+  }
+
+  dblclick() {
+    console.log(DataStore.term)
+  }
+}

src/app/app-routing.module.ts

@@ -3,14 +3,18 @@
  */
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import {WelcomeComponent} from './welcome.component';
-import {PageNotFoundComponent} from './not-found.component';
 import {environment} from '../environments/environment';
-import {LoginComponent} from './login.component';
+
+import {WelcomeComponent} from './IndexPage/welcome.component';
+import {PageNotFoundComponent} from './BasicPage/not-found.component';
+import {LoginComponent} from './BasicPage/login.component';
+import {TermPage} from './TerminalPage/main';
+
 const appRoutes: Routes = [
   // { path: 'crisis-center', component: CrisisListComponent },
   {path: 'welcome', component: WelcomeComponent}, // <-- delete this line
   {path: 'login', component: LoginComponent},
+  {path: 'term', component: TermPage},
   {path: '', redirectTo: '/welcome', pathMatch: 'full'},
   {path: '**', component: PageNotFoundComponent}
 ];

src/app/app.component.css

-.selected {
-    background-color: #CFD8DC !important;
-    color: white;
-  }
-  .heroes {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-    width: 15em;
-  }
-  .heroes li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-  }
-  .heroes li.selected:hover {
-    background-color: #BBD8DC !important;
-    color: white;
-  }
-  .heroes li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    left: .1em;
-  }
-  .heroes .text {
-    position: relative;
-    top: -3px;
-  }
-  .heroes .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color: #607D8B;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-  }

src/app/app.component.html

 <app-nav></app-nav>
-<app-leftbar></app-leftbar>
-<!--<term id="ngdiv" [ngClass]="{'hideleftbar':DataStore.leftbarhide}"></term>-->
 <router-outlet></router-outlet>
-<app-footer></app-footer>

src/app/app.module.ts

@@ -10,14 +10,19 @@ import {HttpModule} from '@angular/http';
 
 import {AppRoutingModule} from './app-routing.module';
 
-
 import {AppComponent} from './app.component';
-import {WelcomeComponent} from './welcome.component';
-import {NavComponent} from './nav.component';
-import {FooterComponent} from './footer.component';
-import {LeftbarComponent} from './leftbar.component';
-import {PageNotFoundComponent} from './not-found.component';
-import {LoginComponent} from './login.component';
+
+import {WelcomeComponent} from './IndexPage/welcome.component';
+import {LeftbarComponent} from './IndexPage/leftbar.component';
+
+import {NavComponent} from './BasicPage/nav.component';
+import {FooterComponent} from './BasicPage/footer.component';
+import {PageNotFoundComponent} from './BasicPage/not-found.component';
+import {LoginComponent} from './BasicPage/login.component';
+
+import {TermPage} from './TerminalPage/main';
+import {TermLeftBar} from './TerminalPage/leftbar';
+import {Terminal} from './TerminalPage/terminal';
 
 
 @NgModule({
@@ -34,7 +39,11 @@ import {LoginComponent} from './login.component';
     LeftbarComponent,
     FooterComponent,
     PageNotFoundComponent,
-    LoginComponent
+    LoginComponent,
+
+    TermPage,
+    TermLeftBar,
+    Terminal
     // HeroListComponent,
     // CrisisListComponent,
   ],

src/app/login.css

-body {
-  padding-top: 40px;
-  padding-bottom: 40px;
-  background-color: #eee;
-}
-
-.form-signin {
-  max-width: 330px;
-  padding: 15px;
-  margin: 0 auto;
-}
-.form-signin .form-signin-heading,
-.form-signin .checkbox {
-  margin-bottom: 10px;
-}
-.form-signin .checkbox {
-  font-weight: normal;
-}
-.form-signin .form-control {
-  position: relative;
-  height: auto;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 10px;
-  font-size: 16px;
-}
-.form-signin .form-control:focus {
-  z-index: 2;
-}
-.form-signin input[type="email"] {
-  margin-bottom: -1px;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.form-signin input[type="password"] {
-  margin-bottom: 10px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}

src/app/login.html

-<form class="form-signin" #f="ngForm" (ngSubmit)="onSubmit(f)">
-  <h2 class="form-signin-heading">Please sign in</h2>
-  <label for="inputEmail" class="sr-only">Email address</label>
-  <input type="email" id="inputEmail" class="form-control" placeholder="Email address"
-         name="email" [(ngModel)]="User.username" required autofocus pattern="^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$">
-  <label for="inputPassword" class="sr-only">Password</label>
-  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required
-         name="password" [(ngModel)]="User.password" (ngEnter)="onSubmit(f)">
-  <div class="checkbox">
-    <label>
-      <input type="checkbox" value="remember-me"> Remember me
-    </label>
-  </div>
-  <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
-</form>

src/index.html

@@ -9,8 +9,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-<div class="container">
-  <app-root></app-root>
-</div>
+<app-root></app-root>
 </body>
 </html>

src/styles.css

@@ -3,68 +3,37 @@
  * Style tweaks
  * --------------------------------------------------
  */
+@font-face {
+  font-family: iosevka;
+  src: url('assets/fonts/iosevka-term-ss07-1.13.3/woff2/iosevka-term-ss07-light.woff2') format("woff2");
+  font-weight: normal;
+}
+
 html,
 body {
   overflow-x: hidden; /* Prevent scroll on narrow devices */
+  height: 100%;
+  width: 100%;
 }
+
 body {
   padding-top: 70px;
 }
+
 footer {
   padding: 30px 0;
 }
 
-/*
- * Off Canvas
- * --------------------------------------------------
- */
-@media screen and (max-width: 767px) {
-  .row-offcanvas {
-    position: relative;
-    -webkit-transition: all .25s ease-out;
-         -o-transition: all .25s ease-out;
-            transition: all .25s ease-out;
-  }
-
-  .row-offcanvas-right {
-    right: 0;
-  }
-
-  .row-offcanvas-left {
-    left: 0;
-  }
-
-  .row-offcanvas-right
-  .sidebar-offcanvas {
-    right: -100%; /* 12 columns */
-  }
-
-  .row-offcanvas-right.active
-  .sidebar-offcanvas {
-    right: -50%; /* 6 columns */
-  }
-
-  .row-offcanvas-left
-  .sidebar-offcanvas {
-    left: -100%; /* 12 columns */
-  }
-
-  .row-offcanvas-left.active
-  .sidebar-offcanvas {
-    left: -50%; /* 6 columns */
-  }
-
-  .row-offcanvas-right.active {
-    right: 50%; /* 6 columns */
-  }
+app-root {
+  height: 100%;
+}
 
-  .row-offcanvas-left.active {
-    left: 50%; /* 6 columns */
-  }
+.terminal {
+  font-size: 11px !important;
+  padding-bottom: 16px !important;
+  font-family: 'Monaco', iosevka !important;
+}
 
-  .sidebar-offcanvas {
-    position: absolute;
-    top: 0;
-    width: 50%; /* 6 columns */
-  }
+.xterm-rows {
+  margin: 10px 0 0 10px;
 }