从"Blog"仓库中分离出来
This commit is contained in:
小海
93
index/src/app/pages/registration/registration.component.css
Normal file
93
index/src/app/pages/registration/registration.component.css
Normal file
@@ -0,0 +1,93 @@
|
||||
.main {
|
||||
width: 500px;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.ioc_text {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.remain {
|
||||
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin: 20px 0 0 12%;
|
||||
height: 32px;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
width: 75%;
|
||||
height: 32px;
|
||||
background: #fafafa;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.verStatus {
|
||||
width: 10px;
|
||||
line-height: 32px;
|
||||
margin-left: -20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.br-text {
|
||||
margin-left: 12%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 80%;
|
||||
height: 40px;
|
||||
margin-left: 10%;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: turquoise;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3385FF
|
||||
}
|
||||
|
||||
|
||||
/* 全屏遮罩 */
|
||||
.fullS {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: none;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.loading span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.main {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
56
index/src/app/pages/registration/registration.component.html
Normal file
56
index/src/app/pages/registration/registration.component.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<div>
|
||||
<div class="main">
|
||||
<div class="ioc_text">
|
||||
<h1><strong>小海</strong></h1>
|
||||
</div>
|
||||
<form>
|
||||
<div class="remain">
|
||||
<div class="input-group mb-4 bootint" id="username">
|
||||
<!-- <div class="input-group-prepend">
|
||||
<span class="input-group-text"><i class="fa fa-user"></i></span>
|
||||
</div> -->
|
||||
<input type="text" name="email" class="form-control" placeholder="请输入你的邮箱" [(ngModel)]="email">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-4 bootint" id="password">
|
||||
<!-- <div class="input-group-prepend">
|
||||
<span class="input-group-text"><i class="fa fa-unlock-alt"></i></span>
|
||||
</div> -->
|
||||
<input type="password" name="password" class="form-control" placeholder="请输入你要设置的密码（8位以上）"
|
||||
[(ngModel)]="password">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-4 bootint" id="repassword">
|
||||
<input type="password" name="repaassword" class="form-control" placeholder="请再次输入密码" [(ngModel)]="rePassword">
|
||||
<i nz-icon class="verStatus" [hidden]="rePassword==null" [nzType]="password==rePassword?'check-circle':'close-circle'" nzTheme="outline"></i>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" name="code" placeholder="验证码" (blur)="handleKeyUp()" [(ngModel)]="imgCode"
|
||||
class="form-control" style="width: 60%;" id="verifyImgCode">
|
||||
<i nz-icon class="verStatus" [hidden]="imgCode==''" [nzType]="imgCodeStatus?'check-circle':'close-circle'" nzTheme="outline"></i>
|
||||
<img [src]="imgCodeUrl" (click)="changeImg()" alt="Code" title="点击更换验证码"/>
|
||||
</div>
|
||||
|
||||
<div class="br-text">
|
||||
<p>
|
||||
<span>已有账号了?</span>
|
||||
<a (click)="userService.showModal('login')">登录</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="padding-top: 10px">
|
||||
<button type="submit" class="btn" (click)="doRegistration()">注册</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fullS" *ngIf="show">
|
||||
<nz-spin [nzSpinning]="show" class="loading">
|
||||
<div class="loading">
|
||||
<span>加载中..</span>
|
||||
</div>
|
||||
</nz-spin>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RegistrationComponent } from './registration.component';
|
||||
|
||||
describe('RegistrationComponent', () => {
|
||||
let component: RegistrationComponent;
|
||||
let fixture: ComponentFixture<RegistrationComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ RegistrationComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(RegistrationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
92
index/src/app/pages/registration/registration.component.ts
Normal file
92
index/src/app/pages/registration/registration.component.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {Router} from '@angular/router';
|
||||
import {NzMessageService} from 'ng-zorro-antd';
|
||||
import {UserService} from '../../services/user/user.service';
|
||||
import {environment} from '../../../environments/environment';
|
||||
import {LoginReq} from '../../class/loginReq';
|
||||
|
||||
@Component({
|
||||
selector: 'app-registration',
|
||||
templateUrl: './registration.component.html',
|
||||
styleUrls: ['./registration.component.css']
|
||||
})
|
||||
export class RegistrationComponent implements OnInit {
|
||||
|
||||
|
||||
imgCodeUrl: string = environment.host + '/imgCode';
|
||||
|
||||
// 遮罩
|
||||
show = false;
|
||||
// 输入框的验证码
|
||||
imgCode: string = '';
|
||||
email: string = null;
|
||||
password: string = null;
|
||||
rePassword: string = null;
|
||||
// 验证码验证状态
|
||||
public imgCodeStatus: boolean;
|
||||
|
||||
constructor(public userService: UserService,
|
||||
private router: Router,
|
||||
private message: NzMessageService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
changeImg() {
|
||||
this.imgCodeUrl = environment.host + '/imgCode?time=' + (new Date()).getTime();
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证码验证
|
||||
*/
|
||||
handleKeyUp() {
|
||||
if (this.imgCode.length === 4) {
|
||||
this.userService.imgCodeVerify(this.imgCode).subscribe(data => {
|
||||
if (data.code === 0) {
|
||||
this.imgCodeStatus = true;
|
||||
} else {
|
||||
this.imgCodeStatus = false;
|
||||
this.message.warning('验证码验证失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 注册的数据提交
|
||||
*/
|
||||
doRegistration() {
|
||||
if (this.imgCodeStatus) {
|
||||
if (this.email == null || this.password == null || this.rePassword == null) {
|
||||
this.message.warning('用户名和密码均不能为空');
|
||||
return;
|
||||
}
|
||||
if (this.rePassword !== this.password) {
|
||||
this.message.warning('两次密码不匹配');
|
||||
return;
|
||||
}
|
||||
this.show = true;
|
||||
|
||||
this.userService.registration(this.email, this.password).subscribe(data => {
|
||||
this.show = false;
|
||||
this.userService.tempUser = new LoginReq();
|
||||
if (data.code === 0) {
|
||||
this.userService.tempUser.email = this.email;
|
||||
this.userService.tempUser.password = this.password;
|
||||
// 注册成功
|
||||
this.message.success('注册成功!');
|
||||
setTimeout(() => {
|
||||
// 换成登录的modal
|
||||
this.userService.loginModalType = 'login';
|
||||
}, 300);
|
||||
} else {
|
||||
this.message.error('注册失败，原因：' + data.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
document.getElementById('verifyImgCode').focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user