feat: udpate

i18n/cn.json

+{
+  "reset": "重置",
+  "submit": "提交",
+  "email subject prefix": "邮件",
+  "server": "服务器",
+  "view": "视图",
+  "help": "帮助",
+  "hide left manager": "隐藏左边栏",
+  "show left manager": "显示左边栏",
+  "disconnect all": "断开所有链接",
+  "disconnect": "断开链接",
+  "website": "我们的网站",
+  "search": "搜索"
+}

mock.py

 #!/usr/bin/env python3
 
-from flask import Flask, send_from_directory, render_template, request, jsonify, redirect, url_for
+from flask import Flask, send_from_directory, render_template, request, jsonify, redirect, send_file
 from flask_socketio import SocketIO, Namespace, emit, join_room, leave_room
 import paramiko
 import uuid
@@ -85,7 +85,7 @@ class SSHws(Namespace):
     join_room(room)
 
   def on_token(self, token):
-    print(token)
+    self.on_host(token)
 
   def on_disconnect(self):
     print("disconnect")
@@ -233,6 +233,16 @@ def replay():
   return redirect("http://jps.ilz.me/media/2017-12-24/ec87a486-0344-4f12-b27a-620321944f7f.gz")
 
 
+@app.route('/i18n/<i18n>')
+def i18n(i18n):
+  return send_file('./i18n/' + i18n + '.json')
+
+
+def read_file(filename, charset='utf-8'):
+  with open(filename, 'r') as f:
+    return f.read().decode(charset)
+
+
 if __name__ == '__main__':
   socketio = SocketIO(app)
   socketio.on_namespace(SSHws('/ssh'))

proxy.conf.json

 {
   "/api": {
-    "target": "http://127.0.0.1:8088",
+    "target": "http://127.0.0.1:5000",
+    "secure": false
+  },
+  "/i18n": {
+    "target": "http://127.0.0.1:5000",
     "secure": false
   },
   "/socket.io/": {

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

@@ -54,7 +54,7 @@ export class CleftbarComponent implements OnInit {
     DataStore.leftbarshow = false;
     DataStore.Nav.map(function (value, i) {
       value['children'].forEach((v, key) => {
-        if (DataStore.Nav[i]['children'][key]['id'] === 'HindLeftManager') {
+        if (DataStore.Nav[i]['children'][key]['id'] === 'HideLeftManager') {
           DataStore.Nav[i]['children'][key] = {
             'id': 'ShowLeftManager',
             'click': 'ShowLeft',
@@ -71,9 +71,9 @@ export class CleftbarComponent implements OnInit {
       value['children'].forEach((v, key) => {
         if (DataStore.Nav[i]['children'][key]['id'] === 'ShowLeftManager') {
           DataStore.Nav[i]['children'][key] = {
-            'id': 'HindLeftManager',
+            'id': 'HideLeftManager',
             'click': 'HideLeft',
-            'name': 'Hind left manager'
+            'name': 'Hide left manager'
           };
         }
       });

src/app/app-routing.module.ts

@@ -19,6 +19,7 @@ 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';
+import {SettingPageComponent} from './setting-page/setting-page.component';
 
 const appRoutes: Routes = [
   // {path: 'users/login', component: LoginComponent},
@@ -27,6 +28,7 @@ const appRoutes: Routes = [
   {path: 'replay/:token', component: ReplayPageComponent},
   {path: 'monitor/:token', component: MonitorPageComponent},
   {path: 'test', component: TestPageComponent},
+  {path: 'setting', component: SettingPageComponent},
   {path: 'undefined', component: BlankPageComponent},
   {path: '', component: ControlPageComponent},
   {path: '**', component: NotFoundComponent}

src/app/app.component.ts

@@ -6,14 +6,12 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component} from '@angular/core';
-import {AppService, HttpService} from './app.service';
 import {DataStore} from './globals';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  // directives: [LeftbarComponent, TermComponent]
 })
 
 export class AppComponent {

src/app/app.module.ts

@@ -17,7 +17,7 @@ import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 // service
-import {AppService, HttpService, LogService, UUIDService} from './app.service';
+import {AppService, HttpService, LocalStorageService, LogService, UUIDService} from './app.service';
 import {DialogService, ElementDialogAlertComponent} from './elements/dialog/dialog.service';
 
 // Elements
@@ -55,6 +55,16 @@ import {MaterialModule} from './MaterialModule.component';
 import {CookieService} from 'ngx-cookie-service';
 import {NgxDatatableModule} from '@swimlane/ngx-datatable';
 import {ElementTableComponent} from './elements/table/table.component';
+import {SettingPageComponent} from './setting-page/setting-page.component';
+import {ElementLeftbarComponent} from './elements/leftbar/leftbar.component';
+import {ElementOfooterComponent} from './elements/ofooter/ofooter.component';
+import {SettingPageNavComponent} from './setting-page/nav/nav.component';
+import {SettingPageBasicComponent} from './setting-page/basic/basic.component';
+import {SettingPageEmailComponent} from './setting-page/email/email.component';
+import {SettingPageLdapComponent} from './setting-page/ldap/ldap.component';
+import {SettingPageTerminalComponent} from './setting-page/terminal/terminal.component';
+import {SettingPageS3Component} from './setting-page/s3/s3.component';
+import {TransPipe} from './trans.pipe';
 
 @NgModule({
   imports: [
@@ -80,6 +90,9 @@ import {ElementTableComponent} from './elements/table/table.component';
     ElementServerMenuComponent,
     ElementIframeComponent,
     ElementDialogAlertComponent,
+    ElementTableComponent,
+    ElementLeftbarComponent,
+    ElementOfooterComponent,
     LoginComponent,
     SearchComponent,
     SearchFilter,
@@ -101,7 +114,14 @@ import {ElementTableComponent} from './elements/table/table.component';
     WindowsComponent,
     TestPageComponent,
     BlankPageComponent,
-    ElementTableComponent,
+    SettingPageComponent,
+    SettingPageNavComponent,
+    SettingPageBasicComponent,
+    SettingPageEmailComponent,
+    SettingPageLdapComponent,
+    SettingPageTerminalComponent,
+    SettingPageS3Component,
+    TransPipe,
   ],
   entryComponents: [
     CleftbarDialogComponent,
@@ -115,6 +135,7 @@ import {ElementTableComponent} from './elements/table/table.component';
     HttpService,
     LogService,
     UUIDService,
+    LocalStorageService,
     DialogService,
     CookieService,
     NGXLogger

src/app/app.service.ts

@@ -10,7 +10,7 @@ import {Router} from '@angular/router';
 import {CookieService} from 'ngx-cookie-service';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
-import {DataStore, User, Browser} from './globals';
+import {DataStore, User, Browser, i18n} from './globals';
 import {environment} from '../environments/environment';
 import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 import {NGXLogger} from 'ngx-logger';
@@ -76,7 +76,9 @@ export class HttpService {
       .set('password', 'jumpserver')
       .set('asset_id', assetID)
       .set('system_user_id', systemUserID);
-    return this.http.post('/guacamole/api/tokens', body.toString(), {headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')});
+    return this.http.post('/guacamole/api/tokens',
+      body.toString(),
+      {headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')});
   }
 
   search(q: string) {
@@ -135,14 +137,31 @@ export class LogService {
 
 }
 
+@Injectable()
+export class LocalStorageService {
+  constructor() {
+
+  }
+
+  get(key: string): string {
+    return localStorage.getItem(key);
+  }
+
+  set(key: string, value: any) {
+    return localStorage.setItem(key, value);
+  }
+}
+
 @Injectable()
 export class AppService implements OnInit {
   // user:User = user  ;
+  lang: string;
 
   constructor(private _http: HttpService,
               private _router: Router,
               private _logger: LogService,
-              private _cookie: CookieService) {
+              private _cookie: CookieService,
+              private _localStorage: LocalStorageService) {
     if (this._cookie.get('loglevel')) {
       // 0.- Level.OFF
       // 1.- Level.ERROR
@@ -166,8 +185,28 @@ export class AppService implements OnInit {
       this._logger.level = 2;
       this.checklogin();
     }
-    // this._logger
-    //   .debug(this._http.get_user_profile());
+
+    if (this._cookie.get('lang')) {
+      this.lang = this._cookie.get('lang');
+    } else {
+      this.lang = window.navigator.languages ? window.navigator.languages[0] : 'cn';
+      this._cookie.set('lang', this.lang);
+    }
+
+    if (this.lang !== 'en') {
+      this._http.get('/i18n/' + this.lang).subscribe(
+        data => {
+          this._localStorage.set('lang', JSON.stringify(data));
+        }
+      );
+    }
+    const l = this._localStorage.get('lang');
+    if (l) {
+      const data = JSON.parse(l);
+      Object.keys(data).forEach((k, _) => {
+        i18n.set(k, data[k]);
+      });
+    }
   }
 
   ngOnInit() {
@@ -254,7 +293,7 @@ export class AppService implements OnInit {
 //
 //     DataStore.Nav.map(function (value, i) {
 //       for (var ii in value['children']) {
-//         if (DataStore.Nav[i]['children'][ii]['id'] === 'HindLeftManager') {
+//         if (DataStore.Nav[i]['children'][ii]['id'] === 'HideLeftManager') {
 //           DataStore.Nav[i]['children'][ii] = {
 //             'id': 'ShowLeftManager',
 //             'click': 'ShowLeft',
@@ -273,9 +312,9 @@ export class AppService implements OnInit {
 //       for (var ii in value['children']) {
 //         if (DataStore.Nav[i]['children'][ii]['id'] === 'ShowLeftManager') {
 //           DataStore.Nav[i]['children'][ii] = {
-//             'id': 'HindLeftManager',
+//             'id': 'HideLeftManager',
 //             'click': 'HideLeft',
-//             'name': 'Hind left manager'
+//             'name': 'Hide left manager'
 //           };
 //         }
 //       }
@@ -376,3 +415,4 @@ export class UUIDService {
     return UUID.create()['hex'];
   }
 }
+

src/app/elements/leftbar/leftbar.component.html

+<nav class="navbar-default navbar-static-side" role="navigation">
+  <div class="sidebar-collapse">
+    <ul class="nav" id="side-menu">
+      <li id="index">
+        <a href="">
+          <i class="fa fa-dashboard" style="font-size: 13px"></i> <span class="nav-label"> trans 'Dashboard' </span><span
+          class="label label-info pull-right"></span>
+        </a>
+      </li>
+      <li id="users">
+        <a href="#">
+          <i class="fa fa-group" style="font-size: 13px"></i> <span class="nav-label"> trans 'Users' </span><span
+          class="fa arrow"></span>
+        </a>
+        <ul class="nav nav-second-level active">
+          <li id="user"><a href=""> trans 'User' </a></li>
+          <li id="user-group"><a href=""> trans 'User group' </a></li>
+          <li id="login-log"><a href=""> trans 'Login logs' </a></li>
+        </ul>
+      </li>
+      <li id="assets">
+        <a>
+          <i class="fa fa-inbox"></i> <span class="nav-label"> trans 'Assets' </span><span class="fa arrow"></span>
+        </a>
+        <ul class="nav nav-second-level">
+          <li id="asset"><a href=""> trans 'Asset' </a></li>
+          <li id="asset-group"><a href=""> trans 'Asset group' </a></li>
+          <li id="cluster"><a href=""> trans 'Cluster' </a></li>
+          <li id="admin-user"><a href=""> trans 'Admin user' </a></li>
+          <li id="system-user"><a href=""> trans 'System user' </a></li>
+          <li id="label"><a href=""> trans 'Labels' </a></li>
+        </ul>
+      </li>
+      <li id="perms">
+        <a href="#"><i class="fa fa-edit"></i> <span class="nav-label"> trans 'Perms' </span><span
+          class="fa arrow"></span></a>
+        <ul class="nav nav-second-level">
+          <li id="asset-permission">
+            <a href=""> trans 'Asset permission' </a>
+          </li>
+        </ul>
+      </li>
+      <li id="terminal">
+        <a>
+          <i class="fa fa-rocket"></i> <span class="nav-label"> trans 'Sessions' </span><span
+          class="fa arrow"></span>
+        </a>
+        <ul class="nav nav-second-level">
+          <li id="session-online"><a href=""> trans 'Session online' </a>
+          </li>
+          <li id="session-offline"><a href=""> trans 'Session offline' </a>
+          </li>
+          <li id="command"><a href=""> trans 'Commands' </a></li>
+          <li id="terminal"><a href=""> trans 'Terminal' </a></li>
+        </ul>
+      </li>
+      <li id="ops">
+        <a>
+          <i class="fa fa-coffee"></i> <span class="nav-label"> trans 'Job Center' </span><span
+          class="fa arrow"></span>
+        </a>
+        <ul class="nav nav-second-level">
+          <li id="task"><a href=""> trans 'Task' </a></li>
+        </ul>
+      </li>
+      <li id="settings">
+        <a href="">
+          <i class="fa fa-gears"></i> <span class="nav-label"> trans 'Settings' </span><span
+          class="label label-info pull-right"></span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</nav>

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

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

src/app/elements/leftbar/leftbar.component.ts

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

src/app/elements/nav/nav.component.html

+<script src="../../trans.pipe.spec.ts"></script>
 <div class="nav">
   <ul>
     <li><a [routerLink]="['']"><img src="static/imgs/logo.png" height="26px"/></a>
     </li>
     <li *ngFor="let v of DataStore.Nav" [ngClass]="{'dropdown': v.children}">
-      <a>{{v.name}}</a>
+      <a>{{v.name | trans}}</a>
       <ul [ngClass]="{'dropdown-content': v.children}">
         <li *ngFor="let vv of v.children" [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>
+          <a *ngIf="vv.href" [routerLink]="[vv.href]">{{vv.name|trans}}</a>
+          <a id="{{vv.id}}" *ngIf="vv.click" (click)="click(vv.click)">{{vv.name|trans}}</a>
         </li>
       </ul>
     </li>

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

@@ -181,9 +181,9 @@ export class ElementNavComponent implements OnInit {
       'name': 'View',
       'children': [
         {
-          'id': 'HindLeftManager',
+          'id': 'HideLeftManager',
           'click': 'HideLeft',
-          'name': 'Hind left manager'
+          'name': 'Hide left manager'
         },
         {
           'id': 'SplitVertical',

src/app/elements/ofooter/ofooter.component.html

+<div class="footer fixed">
+    <div class="pull-right">
+        Version <strong>{{version}}</strong> GPLv2.
+        <img style="display: none" src="http://www.jumpserver.org/img/evaluate_avatar1.jpg">
+    </div>
+    <div>
+        <strong>Copyright</strong> 北京堆栈科技有限公司 &copy; 2014-2018
+    </div>
+</div>

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

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

src/app/elements/ofooter/ofooter.component.ts

+import {Component, OnInit} from '@angular/core';
+import {version} from '../../../environments/environment';
+import {DataStore} from '../../globals';
+
+@Component({
+  selector: 'app-element-ofooter',
+  templateUrl: './ofooter.component.html',
+  styleUrls: ['./ofooter.component.scss']
+})
+export class ElementOfooterComponent implements OnInit {
+  version = version;
+
+  constructor() {
+    DataStore.NavShow = false;
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/elements/table/table.component.html

@@ -19,6 +19,8 @@
   ></ngx-datatable>
   <mat-paginator #paginator
                  [pageSize]="config.pageSize"
-                 [pageSizeOptions]="config.pageSizeOptions">
+                 [pageSizeOptions]="config.pageSizeOptions"
+                 (click)="test()">
   </mat-paginator>
 </div>
+<button (click)="test()">ssss</button>

src/app/elements/table/table.component.ts

 import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {DatatableComponent} from '@swimlane/ngx-datatable';
+import {MatPaginator} from '@angular/material';
+import {LogService} from '../../app.service';
 
 export let Config: {
   search: boolean,
@@ -17,7 +19,7 @@ export let Config: {
   scrollbarV: false,
   scrollbarH: false,
   rowHeight: 50,
-  footerHeight: 0,
+  footerHeight: 50,
   headerHeight: 50,
   limit: 10,
   columnMode: 'force',
@@ -36,14 +38,15 @@ export class ElementTableComponent implements OnInit {
   @Input() config: any;
   temp = [];
   @ViewChild(DatatableComponent) table: DatatableComponent;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
 
-
-  constructor() {
+  constructor(private _logger: LogService) {
 
   }
 
   ngOnInit() {
     Config = this.config;
+    this.paginator.length = this.rows.length;
   }
 
   updateFilter(event) {
@@ -60,4 +63,10 @@ export class ElementTableComponent implements OnInit {
     this.table.offset = 0;
   }
 
+  test() {
+    console.log(this.paginator._pageIndex);
+    console.log(this.paginator._pageIndex * this.paginator.pageSize + 1);
+    this.table.limit = this.paginator.pageSize;
+  }
+
 }

src/app/globals.ts

@@ -144,3 +144,6 @@ export let wsEvent: {
   event: string;
   data: any;
 };
+
+export const i18n = new Map();
+

src/app/setting-page/basic/basic.component.html

+<mat-form-field hintLabel="http://jumpserver.abc.com:8080">
+  <input matInput #input maxlength="10" placeholder="Current SITE URL">
+</mat-form-field>
+<mat-form-field hintLabel="User first login update profile done redirect to it">
+  <input matInput #input maxlength="10" placeholder="User Guide URL">
+</mat-form-field>
+<mat-form-field hintLabel="">
+  <input matInput #input maxlength="10" placeholder="Email Subject Prefix">
+</mat-form-field>
+<button mat-button>{{ 'Reset' | trans }}</button>
+<button mat-button>{{ 'Submit' | trans }}</button>
+

src/app/setting-page/basic/basic.component.spec.ts

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

src/app/setting-page/basic/basic.component.ts

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

src/app/setting-page/email/email.component.html

+<p>
+  email works!
+</p>

src/app/setting-page/email/email.component.spec.ts

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

src/app/setting-page/email/email.component.ts

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

src/app/setting-page/ldap/ldap.component.html

+<p>
+  ldap works!
+</p>

src/app/setting-page/ldap/ldap.component.spec.ts

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

src/app/setting-page/ldap/ldap.component.ts

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

src/app/setting-page/nav/nav.component.html

+<div class="panel-options">
+  <ul class="nav nav-tabs">
+    <li>
+      <a href=" " class="text-center"><i
+        class="fa fa-cubes"></i> trans 'Basic setting'</a>
+    </li>
+    <li>
+      <a href=" " class="text-center"><i
+        class="fa fa-envelope"></i> trans 'Email setting' </a>
+    </li>
+    <li>
+      <a href=" " class="text-center"><i
+        class="fa fa-archive"></i> trans 'LDAP setting' </a>
+    </li>
+    <li class="active">
+      <a href=" " class="text-center"><i
+        class="fa fa-hdd-o"></i> trans 'Terminal setting' </a>
+    </li>
+  </ul>
+</div>

src/app/setting-page/nav/nav.component.spec.ts

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

src/app/setting-page/nav/nav.component.ts

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

src/app/setting-page/s3/s3.component.html

+<p>
+  s3 works!
+</p>

src/app/setting-page/s3/s3.component.spec.ts

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

src/app/setting-page/s3/s3.component.ts

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

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

+<div class="wrapper">
+  <app-element-leftbar></app-element-leftbar>
+
+  <app-sp-basic></app-sp-basic>
+  <app-element-ofooter></app-element-ofooter>
+</div>

src/app/setting-page/setting-page.component.spec.ts

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

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

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

src/app/setting-page/terminal/terminal.component.html

+<p>
+  terminal works!
+</p>

src/app/setting-page/terminal/terminal.component.spec.ts

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

src/app/setting-page/terminal/terminal.component.ts

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

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

@@ -15,6 +15,20 @@ export class TestPageComponent implements OnInit {
     {name: 'Austin', gender: 'Male', company: 'Swimlane'},
     {name: 'Dany', gender: 'Male', company: 'KFC'},
     {name: 'Molly', gender: 'Female', company: 'Burger King'},
+    {name: 'Dany', gender: 'Male', company: 'KFC'},
+    {name: 'Molly', gender: 'Female', company: 'Burger King'},
+    {name: 'Dany', gender: 'Male', company: 'KFC'},
+    {name: 'Molly', gender: 'Female', company: 'Burger King'},
+    {name: 'Dany', gender: 'Male', company: 'KFC'},
+    {name: 'Molly', gender: 'Female', company: 'Burger King'},
+    {name: 'Dany', gender: 'Male', company: 'KFC'},
+    {name: 'Molly', gender: 'Female', company: 'Burger King'},
+    {name: 'Dany', gender: 'Male', company: 'KFC'},
+    {name: 'Molly', gender: 'Female', company: 'Burger King'},
+    {name: 'Dany', gender: 'Male', company: 'KFC'},
+    {name: 'Molly', gender: 'Female', company: 'Burger King'},
+    {name: 'Dany', gender: 'Male', company: 'KFC'},
+    {name: 'Molly', gender: 'Female', company: 'Burger King'},
   ];
   columns = [
     {prop: 'name'},

src/app/trans.pipe.spec.ts

+import { TransPipe } from './trans.pipe';
+
+describe('TransPipe', () => {
+  it('create an instance', () => {
+    const pipe = new TransPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/trans.pipe.ts

+import {Pipe, PipeTransform} from '@angular/core';
+import {i18n} from './globals';
+
+@Pipe({
+  name: 'trans'
+})
+export class TransPipe implements PipeTransform {
+
+  transform(value: any, args?: any): any {
+    if (i18n.has(value.toLowerCase())) {
+      return i18n.get(value.toLowerCase());
+    } else {
+      return value;
+    }
+  }
+}