feat: lots update

.angular-cli.json

@@ -22,6 +22,8 @@
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
         "../node_modules/xterm/dist/xterm.css",
         "../node_modules/layui-layer/dist/theme/default/layer.css",
+        "../node_modules/animate.css/animate.min.css",
+        "./assets/css/style.css",
         "styles.css"
       ],
       "scripts": [

package-lock.json

@@ -484,6 +484,11 @@
       "resolved": "https://registry.npmjs.org/angular2-logger/-/angular2-logger-0.6.0.tgz",
       "integrity": "sha1-UBnEeSQn1/H0QslHABZX4QsuP2M="
     },
+    "animate.css": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.5.2.tgz",
+      "integrity": "sha1-keZo3AaagI5eSZUUhnuXquAWbDY="
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "^4.2.4",
     "@angular/router": "^4.2.4",
     "angular2-logger": "^0.6.0",
+    "animate.css": "^3.5.2",
     "body-parser": "^1.18.2",
     "bootstrap": "^4.0.0-alpha.6",
     "clipboard": "^1.7.1",

src/app/BasicPage/login/login.component.css

-/* login form */
-form {
-  top: 80px;
-  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;
-}
 
-.form {
-  z-index: 9;
+.loginColumns {
+  max-width: 800px;
+  margin: 0px auto;
+  padding: 100px 20px 20px;
 }
 
-.black {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 5;
-  background-color: #000000;
+p {
+  font-size: 13px;
 }
 
-/* login form end */

src/app/BasicPage/login/login.component.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 class="container loginColumns animated fadeInDown">
+  <div class="row justify-content-md-center">
+    <div class="col col-md-6">
+      <h2 class="font-bold">欢迎使用Jumpserver开源跳板机</h2>
+      <p>
+        Jumpserver是一款使用Python, Django开发的开源跳板机系统, 助力互联网企业高效 用户、资产、权限、审计 管理
+      </p>
+      <p>
+        我们自五湖四海，我们对开源精神无比敬仰和崇拜，我们对完美、整洁、优雅 无止境的追求
+      </p>
+      <p>
+        专注自动化运维，努力打造 易用、稳定、安全、自动化 的跳板机, 这是我们的不懈的追求和动力
+      </p>
+      <p>
+        <small>永远年轻，永远热泪盈眶 stay foolish stay hungry</small>
+      </p>
+
     </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 class="col col-md-6">
+      <div class="ibox-content">
+        <div><img src="/assets/imgs/logo.png" width="82" height="82"> <span class="font-bold text-center"
+                                                                            style="font-size: 32px; font-family: inherit">登录</span>
+        </div>
+        <form class="m-t" #f="ngForm" (ngSubmit)="onSubmit(f)">
+          <p class="red-fonts">* Please enter a correct Username and password. Note that both fields may be
+            case-sensitive.</p>
+          <div class="form-group">
+            <input type="text" class="form-control" id="username" name="username" placeholder="Username" required
+                   autofocus pattern="^\w+$" [(ngModel)]="User.username">
+          </div>
+          <div class="form-group">
+            <input type="password" class="form-control" id="password" name="password" placeholder="Password"
+                   [(ngModel)]="User.password" required (ngEnter)="onSubmit(f)">
+          </div>
+          <!--<div>-->
+
+          <!--<img src="/captcha/image/c6fc850ce5a0c4d12e56e0ed2f02b55d1659a83a/" alt="captcha" class="captcha"><input-->
+          <!--id="id_captcha_0" name="captcha_0" type="hidden" value="c6fc850ce5a0c4d12e56e0ed2f02b55d1659a83a">-->
+
+          <!--<div class="row">-->
+          <!--<div class="col-sm-6">-->
+          <!--<input autocomplete="off" id="id_captcha_1" class="form-control" name="captcha_1" placeholder="Captcha"-->
+          <!--type="text">-->
+          <!--</div>-->
+          <!--</div>-->
+          <!--<br>-->
+          <!--</div>-->
+          <button type="submit" class="btn btn-primary block full-width m-b">Login</button>
+
+          <a href="/users/password/forgot">
+            <small>Forgot password?</small>
+          </a>
+
+          <p class="text-muted text-center">
+          </p>
+        </form>
+        <p class="m-t">
+        </p>
+      </div>
     </div>
-    <button type="submit">{{loginBotton}}</button>
-  </form>
+  </div>
+  <hr>
+  <div class="row">
+    <div class="col-md-6">
+      Copyright Jumpserver.org
+    </div>
+    <div class="col-md-6 text-right">
+      <small>© 2014-2017</small>
+    </div>
+  </div>
 </div>
+

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

@@ -29,6 +29,7 @@ export class LoginComponent implements OnInit {
               private _router: Router,
               private _logger: Logger) {
     this._logger.log('login.ts:LoginComponent');
+    DataStore.NavShow = false;
   }
 
 

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

@@ -115,14 +115,140 @@ export class NavComponent implements OnInit {
 
   getnav() {
     this._logger.log('getnav');
-    return this._http.get('/api/nav')
-      .map(res => res.json())
-      .subscribe(response => {
-        DataStore.Nav = response;
-      });
+    // this._http.get('/api/nav')
+    //   .map(res => res.json())
+    //   .subscribe(response => {
+    //     DataStore.Nav = response;
+    //   });
+    DataStore.Nav = [{
+      "id": "File",
+      "name": "Server",
+      "children": [
+        {
+          "id": "NewConnection",
+          "href": "",
+          "name": "New connection",
+          "disable": true
+        },
+        {
+          "id": "Connect",
+          "click": "Connect",
+          "name": "Connect",
+          "disable": true
+        },
+        {
+          "id": "Disconnect",
+          "click": "Disconnect",
+          "name": "Disconnect"
+        },
+        {
+          "id": "DisconnectAll",
+          "click": "DisconnectAll",
+          "name": "Disconnect all"
+        },
+        {
+          "id": "Duplicate",
+          "href": "",
+          "name": "Duplicate",
+          "disable": true
+        },
+        {
+          "id": "Upload",
+          "href": "",
+          "name": "Upload",
+          "disable": true
+        },
+        {
+          "id": "Download",
+          "href": "",
+          "name": "Download",
+          "disable": true
+        },
+        {
+          "id": " Search",
+          "href": "",
+          "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": "",
+          "name": "Split vertical",
+          "disable": true
+        },
+        {
+          "id": "CommandBar",
+          "href": "",
+          "name": "Command bar",
+          "disable": true
+        },
+        {
+          "id": "ShareSession",
+          "href": "",
+          "name": "Share session (read/write)",
+          "disable": true
+        },
+        {
+          "id": "Language",
+          "href": "",
+          "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"
+        }]
+    }]
   }
 
   static Hide() {
     jQuery("app-nav").hide()
   }
+
+  Connect() {
+    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);
+
+    });
+  }
 }

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

@@ -68,4 +68,5 @@
   padding-left: 14px;
   width: 100%;
   border: none;
+  height: 28px;
 }

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

@@ -5,7 +5,7 @@
            type="text" tabindex="1" spellcheck="false" autofocus [(ngModel)]="q" (keyup.enter)="Search(q)">
   </div>
   <ul class="filetree">
-    <li *ngFor="let hostGroup of HostGroups ; let i = index ">
+    <li *ngFor="let hostGroup of HostGroups | SearchFilter: q; let i = index ">
       <input type="checkbox" id="hostgroup-{{i}}">
       <label for="hostgroup-{{i}}">{{hostGroup.name}}</label>
       <ul>

src/app/ControlPage/search/search.component.ts

@@ -64,7 +64,8 @@ export class SearchFilter implements PipeTransform {
     if (input) {
       input = input.toLowerCase();
       return value.filter(function (el: any) {
-        return el.name.toLowerCase().indexOf(input) > -1 || el.comment.toLocaleLowerCase().indexOf(input) > -1;
+        // ToDo: search with a simple SQL like language, and a bug search a group's hosts
+        return JSON.stringify(el).toLowerCase().indexOf(input) > -1;
       })
     }
     return value;

src/app/app-routing.module.ts

@@ -19,7 +19,7 @@ import {TermpageComponent} from "./termpage/termpage.component";
 const appRoutes: Routes = [
   // { path: 'crisis-center', component: CrisisListComponent },
   // {path: 'welcome', component: IndexPageComponent}, // <-- delete this line
-  {path: 'login', component: LoginComponent},
+  {path: 'users/login', component: LoginComponent},
   {path: 'control', component: ControlPageComponent},
   {path: 'rdp/:token', component: RdppageComponent},
   {path: 'term/:token', component: TermpageComponent},

src/app/termpage/termpage.component.ts

@@ -14,7 +14,6 @@ declare let Terminal: any;
 export class TermpageComponent implements OnInit {
   constructor(private activatedRoute: ActivatedRoute) {
     DataStore.NavShow = false;
-
   }
 
   ngOnInit() {

src/styles.css

@@ -14,6 +14,7 @@ body {
   overflow-x: hidden; /* Prevent scroll on narrow devices */
   height: 100%;
   width: 100%;
+  background-color: rgb(243, 243, 244);
 }
 
 app-root {