zheng/blog-frontEnd
1
0
Fork 0
Code Issues 2 Pull Requests 12 Actions Packages Projects Releases Wiki Activity

修改路径

Browse Source
This commit is contained in:
小海
2020-05-16 22:18:45 +08:00
parent abc792a561
commit 42177a7721
683 changed files with 92 additions and 18398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/view/login-registration/components/login/login.component.html Normal file
View File

@@ -0,0 +1,30 @@
<div class="bruce flex-ct-x">
<form class="bubble-distribution">
<h3>登录</h3>
<div class="emailDiv">
<input type="email" name="email" [(ngModel)]="loginReq.email" placeholder="请输入邮箱"
pattern="^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"
required>
<img class="img" src="https://oss.celess.cn/web/greeting.1415c1c.png" alt="">
</div>
<div class="pwdDiv">
<input type="password" [(ngModel)]="loginReq.password" name="pwd" placeholder="请输入密码(6到16位字符)"
pattern="^[\w_-]{6,16}$"
required>
<img class="img" src="https://oss.celess.cn/web/blindfold.58ce423.png" alt="">
</div>
<br>
<input type="checkbox" id="isRemember" name="isRemember" [(ngModel)]="loginReq.isRememberMe"> <label
for="isRemember"> 记住密码</label>
<span id="sendEmail" *ngIf="showSendEmail" (click)="sendEmail()">找回密码</span>
<span [style]="{display: showSendEmail?'block':'inline',float:showSendEmail?null:'right'}" class="to-reg">还没有账号，去
<a [routerLink]="'/user/registration'"
(click)="loginStatus.emit(true)">注册</a>
</span>
<img class="img" src="https://oss.celess.cn/web/normal.0447fe9.png" alt="">
<button nz-button nzType="primary" (click)="doLogin()" [nzLoading]="submitting">登录</button>
</form>
</div>

9
src/app/view/login-registration/components/login/login.component.less Normal file
View File

@@ -0,0 +1,9 @@
@import "../../login-registration.component.less";
#sendEmail {
float: right;
}
.to-reg {
line-height: 40px;
}

25
src/app/view/login-registration/components/login/login.component.spec.ts Normal file
View File

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

81
src/app/view/login-registration/components/login/login.component.ts Normal file
View File

@@ -0,0 +1,81 @@
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {NzMessageService} from 'ng-zorro-antd';
import {LoginReq} from '../../../../class/User';
import {ActivatedRoute, Router} from '@angular/router';
import {LoginRegistrationService} from '../../service/login-registration.service';
import {Title} from '@angular/platform-browser';
import {GlobalUserService} from '../../../../services/global-user.service';
@Component({
selector: 'c-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {
constructor(private nzMessageService: NzMessageService,
private userService: GlobalUserService,
private activatedRoute: ActivatedRoute,
private router: Router,
private loginRegistrationService: LoginRegistrationService,
private title: Title) {
this.title.setTitle('小海博客 | 登录 ');
}
submitting: boolean = false;
loginReq: LoginReq = new LoginReq(null, true, null);
@Output() loginStatus = new EventEmitter<boolean>();
@Input() showSendEmail: boolean = true;
private url: string;
ngOnInit() {
this.url = this.activatedRoute.snapshot.queryParamMap.get('url');
this.loginReq.email = localStorage.getItem('e');
this.loginReq.password = localStorage.getItem('p');
localStorage.removeItem('e');
localStorage.removeItem('p');
}
doLogin() {
this.submitting = true;
const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
const pwdReg = /^[\w_-]{6,16}$/;
if (!this.loginReq.email || !emailReg.test(this.loginReq.email)) {
this.submitting = false;
this.nzMessageService.error('邮箱格式不正确');
return;
}
if (!this.loginReq.password || !pwdReg.test(this.loginReq.password)) {
this.submitting = false;
this.nzMessageService.error('密码格式不正确');
return;
}
this.userService.login(this.loginReq, {
complete: () => null,
error: (err) => {
this.nzMessageService.error(err.msg);
this.submitting = false;
this.loginStatus.emit(false);
},
next: data => {
this.submitting = false;
this.nzMessageService.success('登录成功，欢迎你' + data.result.displayName);
this.loginStatus.emit(true);
if (this.url) {
this.router.navigateByUrl(this.url);
} else {
// window.location.href = '/admin/';
this.router.navigateByUrl('/admin')
}
}
}
);
}
sendEmail() {
this.loginRegistrationService.showModal = true;
}
}

26
src/app/view/login-registration/components/registration/registration.component.html Normal file
View File

@@ -0,0 +1,26 @@
<div class="bruce flex-ct-x">
<form class="bubble-distribution">
<h3>注册</h3>
<div class="emailDiv">
<input type="email" name="email" [(ngModel)]="email" placeholder="请输入邮箱"
pattern="^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"
required>
<img class="img" src="https://oss.celess.cn/web/greeting.1415c1c.png" alt="">
</div>
<div class="pwdDiv">
<input type="password" [(ngModel)]="pwd" name="pwd" placeholder="请输入密码(6到16位字符)"
pattern="^[\w_-]{6,16}$"
required>
<img class="img" src="https://oss.celess.cn/web/blindfold.58ce423.png" alt="">
</div>
<div class="codeDiv">
<input type="text" name="code" placeholder="请输入验证码" pattern="^[\w]{4}$" maxLength="4"
[(ngModel)]="imgCode" required>
<img [src]="imgCodeUrl" id="imgCode" alt="imgcode" (click)="changeImg()" title="点击更换验证码">
<img class="img" src="https://oss.celess.cn/web/greeting.1415c1c.png" alt="">
</div>
<img class="img" src="https://oss.celess.cn/web/normal.0447fe9.png" alt="">
<br>
<button nz-button nzType="primary" (click)="doRegistration()" [nzLoading]="submitting">注册</button>
</form>
</div>

1
src/app/view/login-registration/components/registration/registration.component.less Normal file
View File

@@ -0,0 +1 @@
@import "../../login-registration.component.less";

25
src/app/view/login-registration/components/registration/registration.component.spec.ts Normal file
View File

@@ -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();
});
});

104
src/app/view/login-registration/components/registration/registration.component.ts Normal file
View File

@@ -0,0 +1,104 @@
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {environment} from '../../../../../environments/environment';
import {ApiService} from '../../../../api/api.service';
import {NzMessageService} from 'ng-zorro-antd';
import {Router} from '@angular/router';
import {ErrDispatch} from '../../../../class/ErrDispatch';
import {RequestObj} from '../../../../class/HttpReqAndResp';
import {LoginReq} from '../../../../class/User';
import {Title} from '@angular/platform-browser';
@Component({
selector: 'c-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.less'],
providers: [ApiService]
})
export class RegistrationComponent implements OnInit, ErrDispatch {
constructor(private apiService: ApiService,
private nzMessageService: NzMessageService,
private router: Router,
private title: Title) {
apiService.setErrDispatch(this);
this.title.setTitle('小海博客 | 注册');
}
imgCodeUrl: string;
imgCode: string;
email: string;
pwd: string;
submitting: boolean;
@Output() regStatus = new EventEmitter<boolean>();
@Output() regAccount = new EventEmitter<LoginReq>();
ngOnInit() {
this.imgCodeUrl = environment.host + '/imgCode';
this.submitting = false;
}
changeImg() {
this.imgCode = '';
this.imgCodeUrl = environment.host + '/imgCode?t=' + new Date().valueOf();
}
// 提交注册
doRegistration() {
this.submitting = true;
// 数据验证
if (!this.email || !this.pwd) {
this.nzMessageService.error('邮箱账号和密码不可为空');
this.submitting = false;
return;
}
const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if (!emailReg.test(this.email)) {
this.nzMessageService.error('邮箱格式不正确');
this.submitting = false;
return;
}
const pwdReg = /^[\w_-]{6,16}$/;
if (!pwdReg.test(this.pwd)) {
this.nzMessageService.error('密码格式不正确');
this.submitting = false;
return;
}
if (!this.imgCode || this.imgCode.length !== 4) {
this.nzMessageService.error('验证码不正确');
this.submitting = false;
return;
}
// 验证验证码
this.apiService.verifyImgCode(this.imgCode).subscribe(data => {
// 验证成功 注册
this.apiService.registration(this.email, this.pwd).subscribe(regData => {
localStorage.setItem('e', this.email);
localStorage.setItem('p', this.pwd);
this.email = '';
this.pwd = '';
this.imgCode = '';
this.submitting = false;
this.nzMessageService.success('注册成功，三秒后跳转登录页面');
this.regStatus.emit(true);
this.regAccount.emit(new LoginReq(this.email, true, this.pwd));
setTimeout(() => {
if (this.router) {
this.router.navigateByUrl('/user/login');
}
}, 3000);
}
);
},
);
}
errHandler(code: number, msg: string, request?: RequestObj): void {
this.nzMessageService.error('reg' + msg);
this.regStatus.emit(false);
}
}