bootstrap4 and login package

.angular-cli.json

@@ -19,10 +19,13 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
+        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
         "styles.css"
       ],
       "scripts": [
-        "../node_modules/jquery/dist/jquery.min.js"
+        "../node_modules/jquery/dist/jquery.min.js",
+        "../node_modules/tether/dist/js/tether.min.js",
+        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

package-lock.json

@@ -920,6 +920,15 @@
         "hoek": "2.16.3"
       }
     },
+    "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"
+      }
+    },
     "brace-expansion": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
@@ -8874,6 +8883,11 @@
         }
       }
     },
+    "tether": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.0.tgz",
+      "integrity": "sha1-D5+hcfdb9YSF2BSelHmdeudNHBo="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "^4.2.4",
     "@angular/router": "^4.2.4",
     "angular2-logger": "^0.6.0",
+    "bootstrap": "^4.0.0-alpha.6",
     "clipboard": "^1.7.1",
     "core-js": "^2.4.1",
     "jquery": "^3.2.1",
@@ -29,6 +30,7 @@
     "pty.js": "^0.3.1",
     "rxjs": "^5.4.2",
     "socket.io": "^2.0.3",
+    "tether": "^1.4.0",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {

src/app/app-routing.module.ts

@@ -6,10 +6,11 @@ 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';
 const appRoutes: Routes = [
   // { path: 'crisis-center', component: CrisisListComponent },
   {path: 'welcome', component: WelcomeComponent}, // <-- delete this line
+  {path: 'login', component: LoginComponent},
   {path: '', redirectTo: '/welcome', pathMatch: 'full'},
   {path: '**', component: PageNotFoundComponent}
 ];

src/app/app.module.ts

@@ -6,7 +6,7 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms'; // <-- NgModel lives here
 import {Logger, Options, Level as LoggerLevel} from 'angular2-logger/core';
-import { HttpModule } from '@angular/http';
+import {HttpModule} from '@angular/http';
 
 import {AppRoutingModule} from './app-routing.module';
 
@@ -17,6 +17,8 @@ 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';
+
 
 @NgModule({
   imports: [
@@ -31,7 +33,8 @@ import {PageNotFoundComponent} from './not-found.component';
     NavComponent,
     LeftbarComponent,
     FooterComponent,
-    PageNotFoundComponent
+    PageNotFoundComponent,
+    LoginComponent
     // HeroListComponent,
     // CrisisListComponent,
   ],
@@ -41,4 +44,5 @@ import {PageNotFoundComponent} from './not-found.component';
     Logger
   ]
 })
-export class AppModule {}
+export class AppModule {
+}

src/app/app.service.ts

@@ -24,6 +24,7 @@ import * as io from 'socket.io-client';
 //     console.log(message);
 //   }
 // }
+import {Router} from '@angular/router';
 
 
 export class User {
@@ -94,6 +95,7 @@ export class AppService {
   // searchrequest: any;
 
   constructor(private http: Http,
+              private _router: Router,
               private _logger: Logger) {
     if (Cookie.get('loglevel')) {
 
@@ -131,87 +133,87 @@ export class AppService {
 
       // DataStore.socket.emit('api', 'all');
     });
-    // this.checklogin();
+    this.checklogin();
+  }
+
+
+  checklogin() {
+    this._logger.log('service.ts:AppService,checklogin');
+
+    if (DataStore.Path) {
+      if (DataStore.Path['name'] === 'FOF' || DataStore.Path['name'] === 'Forgot') {
+      } else {
+        if (DataStore.logined) {
+          this._router.navigate([DataStore.Path['name']]);
+          // jQuery('angular2').show();
+        } else {
+          this.http.get('/api/checklogin')
+            .map(res => res.json())
+            .subscribe(
+              data => {
+                DataStore.logined = data.logined;
+                DataStore.user = data.user;
+              },
+              err => {
+                this._logger.error(err);
+                DataStore.logined = false;
+                this._router.navigate(['login']);
+              },
+              () => {
+                if (DataStore.logined) {
+                  if (jQuery.isEmptyObject(DataStore.Path)) {
+                    this._router.navigate(['']);
+                  } else {
+                    this._router.navigate([DataStore.Path['name'], DataStore.Path['res']]);
+                  }
+                } else {
+                  this._router.navigate(['login']);
+                }
+                // jQuery('angular2').show();
+              }
+            );
+        }
+      }
+    } else {
+      this._router.navigate(['FOF']);
+      // jQuery('angular2').show();
+    }
+  }
+
+  login(user: User) {
+    this._logger.log('service.ts:AppService,login');
+    DataStore.error['login'] = '';
+    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;
+          },
+          err => {
+            this._logger.error(err);
+            DataStore.logined = false;
+            this._router.navigate(['Login']);
+            DataStore.error['login'] = '后端错误,请重试';
+          },
+          () => {
+            if (DataStore.logined) {
+              if (jQuery.isEmptyObject(DataStore.Path))
+                this._router.navigate(['Index', '/']);
+              else
+                this._router.navigate([DataStore.Path['name'], DataStore.Path['res']]);
+            } else {
+              DataStore.error['login'] = '请检查用户名和密码';
+              this._router.navigate(['Login']);
+            }
+            // jQuery('angular2').show();
+
+          });
+    else
+      DataStore.error['login'] = '请检查用户名和密码';
+
   }
 
-//
-//   checklogin() {
-//     this._logger.log('service.ts:AppService,checklogin');
-//
-//     if (DataStore.Path)
-//       if (DataStore.Path['name'] == 'FOF' || DataStore.Path['name'] == 'Forgot') {
-//       }
-//       // jQuery('angular2').show();
-//       else {
-//         if (DataStore.logined) {
-//           this._router.navigate([DataStore.Path['name']]);
-//           // jQuery('angular2').show();
-//         } else {
-//           this.http.get('/api/checklogin')
-//             .map(res => res.json())
-//             .subscribe(
-//               data => {
-//                 DataStore.logined = data.logined;
-//                 DataStore.user = data.user;
-//               },
-//               err => {
-//                 this._logger.error(err);
-//                 DataStore.logined = false;
-//                 this._router.navigate(['Login']);
-//               },
-//               () => {
-//                 if (DataStore.logined) {
-//                   if (jQuery.isEmptyObject(DataStore.Path))
-//                     this._router.navigate(['Index', '/']);
-//                   else
-//                     this._router.navigate([DataStore.Path['name'], DataStore.Path['res']]);
-//                 }
-//                 else
-//                   this._router.navigate(['Login']);
-//                 // jQuery('angular2').show();
-//               }
-//             );
-//         }
-//       }
-//     else {
-//       this._router.navigate(['FOF']);
-//       // jQuery('angular2').show();
-//     }
-//   }
-//
-//   login(user: User) {
-//     this._logger.log('service.ts:AppService,login');
-//     DataStore.error['login'] = '';
-//     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;
-//           },
-//           err => {
-//             this._logger.error(err);
-//             DataStore.logined = false;
-//             this._router.navigate(['Login']);
-//             DataStore.error['login'] = '后端错误,请重试';
-//           },
-//           () => {
-//             if (DataStore.logined) {
-//               if (jQuery.isEmptyObject(DataStore.Path))
-//                 this._router.navigate(['Index', '/']);
-//               else
-//                 this._router.navigate([DataStore.Path['name'], DataStore.Path['res']]);
-//             } else {
-//               DataStore.error['login'] = '请检查用户名和密码';
-//               this._router.navigate(['Login']);
-//             }
-//             // jQuery('angular2').show();
-//
-//           });
-//     else
-//       DataStore.error['login'] = '请检查用户名和密码';
-//
-//   }
 //
 //
 //   HideLeft() {

src/app/footer.html

-footer
+<div class="container">
+  <footer>
+    <p>© Company 2017</p>
+  </footer>
+</div>

src/app/leftbar.html

-<h3>leftbar</h3>
+<!--<h3>leftbar</h3>-->

src/app/login.component.ts

+/**
+ * Created by liuzheng on 2017/9/16.
+ */
+
+import {Component, OnInit} from '@angular/core';
+import {Logger} from 'angular2-logger/core';
+
+import {AppService, DataStore, User} from './app.service';
+import {Router} from '@angular/router';
+
+declare let jQuery: any;
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './login.html',
+  styleUrls: ['./login.css'],
+  providers: [AppService, User]
+})
+// ToDo: ngEnter and redirect to default page
+
+export class LoginComponent implements OnInit {
+  DataStore = DataStore;
+
+
+  constructor(private _appService: AppService,
+              private _logger: Logger,
+              private _router: Router,
+              private user: User) {
+    this._logger.log('login.ts:LoginComponent');
+  }
+
+
+  onSubmit() {
+    this._logger.log(DataStore);
+    this._appService.login(this.user);
+  }
+
+  ngOnInit() {
+    jQuery('#form').fadeIn('slow');
+    this._router.navigate(['/login']);
+    // jQuery('nav').hide();
+    const vm = this;
+    window.onresize = function () {
+      if (!DataStore.logined) {
+        vm.background();
+      }
+    };
+
+    this.timer();
+
+  }
+
+  timer() {
+    if (DataStore.windowsize[0] !== document.documentElement.clientWidth ||
+      DataStore.windowsize[1] !== document.documentElement.clientHeight &&
+      !DataStore.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/login.css

+
+/* login form */
+form {
+    position: relative;
+    width: 300px;
+    margin: 0 auto;
+    background: rgba(130, 130, 130, .3);
+    padding: 20px 22px;
+    border: 1px solid;
+    border-top-color: rgba(255, 255, 255, .4);
+    border-left-color: rgba(255, 255, 255, .4);
+    border-bottom-color: rgba(60, 60, 60, .4);
+    border-right-color: rgba(60, 60, 60, .4);
+}
+
+form input, form button {
+    width: 250px;
+    border: 1px solid;
+    border-bottom-color: rgba(255, 255, 255, .5);
+    border-right-color: rgba(60, 60, 60, .35);
+    border-top-color: rgba(60, 60, 60, .35);
+    border-left-color: rgba(80, 80, 80, .45);
+    background-color: rgba(0, 0, 0, .2);
+    background-repeat: 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;
+}
+
+/* login form end */

src/app/login.html

+<div style="position: fixed;top: 0;left:0;width:100%;height:100%;z-index: 5;background-color: #000000;"></div>
+<canvas id="q" style="position:fixed;top: 0;z-index: 5;"></canvas>
+<div id="form" style="z-index: 9;display: none;">
+  <form (ngSubmit)="onSubmit()" style="z-index:9;">
+    <div class="from-group">
+      <input type="text" name="username" id="username" placeholder="Username" [(ngModel)]="user.username" required>
+      <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()">
+      <span class="fa fa-key form-control-feedback"></span>
+    </div>
+    <button type="submit">login to your account</button>
+  </form>
+</div>

src/app/nav.html

-<div class="nav" >
-nav{{DataStore.leftbar}}
-</div>
+<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse" *ngIf="DataStore.logined">
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <a class="navbar-brand" href="#">Navbar</a>
+
+      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item active">
+            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled" href="#">Disabled</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+            <div class="dropdown-menu" aria-labelledby="dropdown01">
+              <a class="dropdown-item" href="#">Action</a>
+              <a class="dropdown-item" href="#">Another action</a>
+              <a class="dropdown-item" href="#">Something else here</a>
+            </div>
+          </li>
+        </ul>
+        <form class="form-inline my-2 my-lg-0">
+          <input class="form-control mr-sm-2" type="text" placeholder="Search">
+          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+        </form>
+      </div>
+    </nav>

src/app/welcome.html

-<h2>welcome</h2>
+<div class="container">
+
+  <div class="row row-offcanvas row-offcanvas-right">
+
+    <div class="col-12 col-md-9">
+      <p class="float-right hidden-md-up">
+        <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
+      </p>
+      <div class="jumbotron">
+        <h1>Hello, world!</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>
+      <div class="row">
+        <div class="col-6 col-lg-4">
+          <h2>Heading</h2>
+          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+            condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
+            Donec sed odio dui. </p>
+          <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
+        </div><!--/span-->
+        <div class="col-6 col-lg-4">
+          <h2>Heading</h2>
+          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+            condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
+            Donec sed odio dui. </p>
+          <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
+        </div><!--/span-->
+        <div class="col-6 col-lg-4">
+          <h2>Heading</h2>
+          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+            condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
+            Donec sed odio dui. </p>
+          <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
+        </div><!--/span-->
+        <div class="col-6 col-lg-4">
+          <h2>Heading</h2>
+          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+            condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
+            Donec sed odio dui. </p>
+          <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
+        </div><!--/span-->
+        <div class="col-6 col-lg-4">
+          <h2>Heading</h2>
+          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+            condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
+            Donec sed odio dui. </p>
+          <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
+        </div><!--/span-->
+        <div class="col-6 col-lg-4">
+          <h2>Heading</h2>
+          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+            condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
+            Donec sed odio dui. </p>
+          <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
+        </div><!--/span-->
+      </div><!--/row-->
+    </div><!--/span-->
+
+    <div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
+      <div class="list-group">
+        <a href="#" class="list-group-item active">Link</a>
+        <a href="#" class="list-group-item">Link</a>
+        <a href="#" class="list-group-item">Link</a>
+        <a href="#" class="list-group-item">Link</a>
+        <a href="#" class="list-group-item">Link</a>
+        <a href="#" class="list-group-item">Link</a>
+        <a href="#" class="list-group-item">Link</a>
+        <a href="#" class="list-group-item">Link</a>
+        <a href="#" class="list-group-item">Link</a>
+        <a href="#" class="list-group-item">Link</a>
+      </div>
+    </div><!--/span-->
+  </div><!--/row-->
+
+  <hr>
+
+
+</div>

src/styles.css

 /* You can add global styles to this file, and also import other style files */
+/*
+ * Style tweaks
+ * --------------------------------------------------
+ */
+html,
+body {
+  overflow-x: hidden; /* Prevent scroll on narrow devices */
+}
+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 */
+  }
+
+  .row-offcanvas-left.active {
+    left: 50%; /* 6 columns */
+  }
+
+  .sidebar-offcanvas {
+    position: absolute;
+    top: 0;
+    width: 50%; /* 6 columns */
+  }
+}