update

app.js

@@ -15,68 +15,79 @@ 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
-    //     }
-    // );
-    //
-    // // store term's output into buffer or emit through socket
-    // 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);
-
-    var app = express();
-    var server = http.createServer(app);
-
-    app.use("/", express.static(__dirname + '/dist/')); // 创建服务端
-    app.use("/socket.io/", express.static(__dirname + '/api/')); // 创建服务端
-    // let term.js handle req/res
-    // app.use(terminal.middleware());
-
-    // let server listen on the port
-    options = options || {};
-    server.listen(options.port || 8080);
-
-    // let socket.io handle sockets
-    io = io.listen(server, {log: false});
-
-    io.sockets.on('connection', function (s) {
-        // when connect, store the socket
-        socket = s;
-
-        // handme incoming data (client -> server)
-        socket.on('data', function (data) {
-            term.write(data);
-        });
-
-        socket.on('resize', function (data) {
-            term.resize(data[0], data[1]);
-            console.log(data)
-        });
-        // handle connection lost
-        socket.on('disconnect', function () {
-            socket = null;
-        });
-
-        // send buffer data to client
-        while (buff.length) {
-            socket.emit('data', buff.shift());
-        }
+  // 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
+  //     }
+  // );
+  //
+  // // store term's output into buffer or emit through socket
+  // 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);
+
+  var app = express();
+  var server = http.createServer(app);
+  var apis = express.Router();
+
+  app.use("/", express.static(__dirname + '/dist/')); // 创建服务端
+  // app.use("/socket.io/", express.static(__dirname + '/api/')); // 创建服务端
+  // let term.js handle req/res
+  // app.use(terminal.middleware());
+
+  apis.route('/checklogin')
+    .post(function (req, res) {
+      res.json({logined: true, id: 1, username: "liuzheng", name: "liuzheng"})
+    })
+    .get(function (req, res) {
+      res.json({logined: false})
     });
+
+
+  app.use("/api", apis);
+  // let server listen on the port
+  options = options || {};
+  server.listen(options.port || 3000);
+
+  // let socket.io handle sockets
+  io = io.listen(server, {log: false});
+
+  io.sockets.on('connection', function (s) {
+    // when connect, store the socket
+    socket = s;
+
+    // handme incoming data (client -> server)
+    socket.on('data', function (data) {
+      term.write(data);
+    });
+
+    socket.on('resize', function (data) {
+      term.resize(data[0], data[1]);
+      console.log(data)
+    });
+    // handle connection lost
+    socket.on('disconnect', function () {
+      socket = null;
+    });
+
+    // send buffer data to client
+    while (buff.length) {
+      socket.emit('data', buff.shift());
+    }
+  });
 };
 
 
-server.run({port: 8888});
+server.run({port: 3000});
 
-console.log('Please open your browser with http://127.0.0.1:8888');
+console.log('Please open your browser with http://127.0.0.1:3000');

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

proxy.conf.json

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

src/app/app.service.ts

@@ -27,7 +27,27 @@ import * as io from 'socket.io-client';
 import {Router} from '@angular/router';
 
 
-export class User {
+// export class User {
+//   id: number;
+//   name: string;
+//   username: string;
+//   password: string;
+//   phone: string;
+//   avatar: string;
+//   role: string;
+//   email: string;
+//   is_active: boolean;
+//   date_joined: string;
+//   last_login: string;
+//   groups: Array<string>;
+// }
+export class Group {
+  id: number;
+  name: string;
+  membercount: number;
+  comment: string;
+}
+export let User: {
   id: number;
   name: string;
   username: string;
@@ -40,20 +60,25 @@ export class User {
   date_joined: string;
   last_login: string;
   groups: Array<string>;
-  logined:boolean;
-}
-export class Group {
-  id: number;
-  name: string;
-  membercount: number;
-  comment: string;
-}
-
+  logined: boolean;
+} = {
+  id: 0,
+  name: 'nobody',
+  username: '',
+  password: '',
+  phone: '',
+  avatar: '',
+  role: '',
+  email: '',
+  is_active: false,
+  date_joined: '',
+  last_login: '',
+  groups: [],
+  logined: false,
+};
 export let DataStore: {
   socket: any;
-  user: User;
   Nav: Array<{}>;
-  logined: boolean;
   lastNavigationAttempt: string;
   route: Array<{}>;
   activenav: {};
@@ -70,9 +95,7 @@ export let DataStore: {
   windowsize: Array<number>;
 } = {
   socket: io.connect(),
-  user: new User,
   Nav: [{}],
-  logined: false,
   lastNavigationAttempt: '',
   route: [{}],
   activenav: {},
@@ -144,7 +167,7 @@ export class AppService {
     if (DataStore.Path) {
       if (DataStore.Path['name'] === 'FOF' || DataStore.Path['name'] === 'Forgot') {
       } else {
-        if (DataStore.logined) {
+        if (User.logined) {
           this._router.navigate([DataStore.Path['name']]);
           // jQuery('angular2').show();
         } else {
@@ -152,16 +175,18 @@ export class AppService {
             .map(res => res.json())
             .subscribe(
               data => {
-                DataStore.logined = data.logined;
-                DataStore.user = data.user;
+                User.name = data.name;
+                User.username = data.username;
+                User.logined = data.logined;
+                this._logger.debug(User);
               },
               err => {
                 this._logger.error(err);
-                DataStore.logined = false;
+                User.logined = false;
                 this._router.navigate(['login']);
               },
               () => {
-                if (DataStore.logined) {
+                if (User.logined) {
                   if (jQuery.isEmptyObject(DataStore.Path)) {
                     this._router.navigate(['']);
                   } else {
@@ -181,39 +206,44 @@ export class AppService {
     }
   }
 
-  login(user: User) {
+  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())
+    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 => {
-            DataStore.logined = data.logined;
-            DataStore.user = data.user;
+            User.logined = data.logined;
+            User.name = data.name;
+            User.username = data.username;
+            User.logined = data.logined;
           },
           err => {
             this._logger.error(err);
-            DataStore.logined = false;
+            User.logined = false;
             this._router.navigate(['login']);
             DataStore.error['login'] = '后端错误,请重试';
+            return '后端错误,请重试';
           },
           () => {
-            if (DataStore.logined) {
+            if (User.logined) {
               if (jQuery.isEmptyObject(DataStore.Path)) {
                 this._router.navigate(['welcome']);
               } else {
                 this._router.navigate([DataStore.Path['name'], DataStore.Path['res']]);
               }
             } else {
-              DataStore.error['login'] = '请检查用户名和密码';
               this._router.navigate(['login']);
+              DataStore.error['login'] = '请检查用户名和密码';
+              return '请检查用户名和密码';
             }
             // jQuery('angular2').show();
 
           });
     } else {
       DataStore.error['login'] = '请检查用户名和密码';
+      return '请检查用户名和密码';
     }
   }
 

src/app/footer.component.ts

@@ -16,7 +16,8 @@ import {AppService, DataStore, User} from './app.service';
 
 
 export class FooterComponent {
-  // DataStore = DataStore;
+  DataStore = DataStore;
+  User = User;
 
   constructor(private _appService: AppService,
               private _logger: Logger) {

src/app/footer.html

-<div class="container">
+<div class="container" *ngIf="User.logined">
   <footer>
     <p>© Company 2017</p>
   </footer>

src/app/login.component.ts

@@ -13,25 +13,24 @@ declare let jQuery: any;
   selector: 'app-root',
   templateUrl: './login.html',
   styleUrls: ['./login.css'],
-  providers: [AppService, User]
+  providers: [AppService]
 })
 // ToDo: ngEnter and redirect to default page
 
 export class LoginComponent implements OnInit {
   DataStore = DataStore;
+  User = User;
+  loginBotton = 'login to your account';
 
   constructor(private _appService: AppService,
-              private _logger: Logger,
-              public user: User) {
+              private _logger: Logger) {
     this._logger.log('login.ts:LoginComponent');
   }
 
 
   onSubmit(f: NgForm) {
     if (f.valid) {
-      this.user.username = f.value.email;
-      this.user.password = f.value.password;
-      this._appService.login(this.user);
+      this._appService.login();
     } else {
       this._logger.error("the form not valid")
     }

src/app/login.html

@@ -2,10 +2,10 @@
   <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 #email="ngModel" required autofocus pattern="^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$">
+         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 #password="ngModel" (ngEnter)="onSubmit(f)">
+         name="password" [(ngModel)]="User.password" (ngEnter)="onSubmit(f)">
   <div class="checkbox">
     <label>
       <input type="checkbox" value="remember-me"> Remember me

src/app/welcome.component.ts

 /**
  * Created by liuzheng on 2017/8/31.
  */
-import {Component} from '@angular/core';
-import {AppService} from './app.service';
+import {Component, OnInit} from '@angular/core';
+import {AppService, DataStore, User} from './app.service';
 
 @Component({
   templateUrl: './welcome.html',
-  providers: [AppService],
+  providers: [AppService]
   // directives: [LeftbarComponent, TermComponent]
 })
 
 export class WelcomeComponent {
   // DataStore = DataStore;
+  User = User;
+
+  // DataStore = DataStore;
 }

src/app/welcome.html

-<div class="container">
+<div class="container" *ngIf="User.logined">
 
   <div class="row row-offcanvas row-offcanvas-right">
 
@@ -7,7 +7,7 @@
         <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
       </p>
       <div class="jumbotron">
-        <h1>Hello, world!</h1>
+        <h1>Hello, world! {{User.username}}</h1>
         <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some
           responsive-range viewport sizes to see it in action.</p>
       </div>