Commit be295278 authored by i317280's avatar i317280

update

parent 900f0899
......@@ -184,6 +184,7 @@ export class AppService {
login(user: User) {
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())
.subscribe(
......
......@@ -5,6 +5,7 @@
import {Component, OnInit} from '@angular/core';
import {Logger} from 'angular2-logger/core';
import {AppService, DataStore, User} from './app.service';
import {NgForm} from '@angular/forms';
declare let jQuery: any;
......@@ -26,58 +27,18 @@ export class LoginComponent implements OnInit {
}
onSubmit() {
this._logger.log(DataStore);
onSubmit(f: NgForm) {
if (f.valid) {
this.user.username = f.value.email;
this.user.password = f.value.password;
this._appService.login(this.user);
} else {
this._logger.error("the form not valid")
}
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);
}
ngOnInit() {
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);
}
}
/* 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;
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
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-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
form input:focus {
background-color: rgba(0, 0, 0, .4);
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.from-group {
.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-control-feedback {
position: absolute;
color: #ffffff;
top: 2px;
right: 2px;
.form-signin .form-control:focus {
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-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
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-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
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 */
<div class="black"></div>
<canvas id="q"></canvas>
<div class="form">
<form (ngSubmit)="onSubmit()">
<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>
<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 #email="ngModel" 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)">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</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>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
......@@ -9,7 +9,8 @@
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<div class="container">
<app-root></app-root>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment