overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

signup signin code modify

Browse Source
This commit is contained in:
geek 2018-04-12 17:06:15 +09:00
parent ce0b285ab2
commit b061609317
5 changed files with 122 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/packages/member/component/signup/signup.component.html
View File

@ -1,71 +1,78 @@
<form [formGroup]="signupForm" (ngSubmit)="signup()"> <form [formGroup]="signupForm" (ngSubmit)="signup()">
<div class="card login-panel ui-fluid"> <div class="card login-panel ui-fluid">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<img src="assets/layout/images/overFlow_CI_blue_185.png"> <img src="assets/layout/images/overFlow_CI_blue_185.png">
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input id="email" type="email" pInputText class="input ng-dirty ng-invalid" placeholder="Email" formControlName="email" required> <input type="email"
<div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all"> id="email"
Invalid email pInputText
</div> class="input ng-dirty ng-invalid"
</span> placeholder="Email"
</div> formControlName="email" required
<div class="ui-g-12"> value="geekhot@hotmail.co.kr" />
<span class="md-inputfield"> <div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
<input id="password" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Password" formControlName="password" Invalid email
required> </div>
<div *ngIf="password.touched && !password.valid" class="ui-message ui-messages-error ui-corner-all"> </span>
Invalid password </div>
</div> <div class="ui-g-12">
</span> <span class="md-inputfield">
</div> <input type="password"
<div class="ui-g-12"> id="password" pInputText class="input ng-dirty ng-invalid" placeholder="Password" formControlName="password"
<span class="md-inputfield"> required>
<input id="pwConfirm" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Retype your password" formControlName="pwConfirm" <div *ngIf="password.touched && !password.valid" class="ui-message ui-messages-error ui-corner-all">
required> Invalid password
<div *ngIf="pwConfirm.touched && !pwConfirm.valid" class="ui-message ui-messages-error ui-corner-all"> </div>
Not matched password </span>
</div> </div>
</span> <div class="ui-g-12">
</div> <span class="md-inputfield">
<input id="pwConfirm" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Retype your password" formControlName="pwConfirm"
required>
<div *ngIf="pwConfirm.touched && !pwConfirm.valid" class="ui-message ui-messages-error ui-corner-all">
Not matched password
</div>
</span>
</div>
<div class="ui-g-12"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input id="name" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Name" formControlName="name" required> <input id="name" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Name" formControlName="name" required>
<div *ngIf="name.touched && !name.valid" class="ui-message ui-messages-error ui-corner-all"> <div *ngIf="name.touched && !name.valid" class="ui-message ui-messages-error ui-corner-all">
Invalid Name Invalid Name
</div> </div>
</span> </span>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input id="phone" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Phone" formControlName="phone" required> <input id="phone" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Phone" formControlName="phone" required>
<div *ngIf="phone.touched && !phone.valid" class="ui-message ui-messages-error ui-corner-all"> <div *ngIf="phone.touched && !phone.valid" class="ui-message ui-messages-error ui-corner-all">
Invalid phone number Invalid phone number
</div> </div>
</span> </span>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input id="company" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Company" formControlName="company" required> <input id="company" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Company" formControlName="company" required>
<div *ngIf="company.touched && !company.valid" class="ui-message ui-messages-error ui-corner-all"> <div *ngIf="company.touched && !company.valid" class="ui-message ui-messages-error ui-corner-all">
Invalid company name Invalid company name
</div> </div>
</span> </span>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"> <button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span> <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
<span class="ui-button-text ui-c">Sign Up</span> <span class="ui-button-text ui-c">Sign Up</span>
</button> </button>
<a href="#">Sign In</a> <a href="#">Sign In</a>
</div> </div>
</div>
</div> </div>
</div>
</form> </form>

75
src/packages/member/component/signup/signup.component.ts
View File

@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl } from '@angular/forms'; import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl } from '@angular/forms';
import { Member } from '../../model'; import { Member } from '../../model';
import * as AuthStore from '../../store/signup';
import {Store} from '@ngrx/store';
@Component({ @Component({
selector: 'of-member-signup', selector: 'of-member-signup',
@ -20,7 +22,8 @@ export class SignupComponent implements OnInit {
constructor( constructor(
private router: Router, private router: Router,
private formBuilder: FormBuilder private formBuilder: FormBuilder,
private store: Store<AuthStore.State>,
) { } ) { }
ngOnInit() { ngOnInit() {
@ -29,35 +32,47 @@ export class SignupComponent implements OnInit {
initForm() { initForm() {
this.signupForm = this.formBuilder.group({ this.signupForm = this.formBuilder.group({
'email': ['', [ 'email': [
Validators.required, 'geekhot@hotmail.co.kr',
Validators.email [
] Validators.required,
Validators.email
]
], ],
'password': ['', [ 'password': [
Validators.required, '!@#$Qwer1234',
Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'), [
Validators.minLength(6), Validators.required,
Validators.maxLength(25), Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,}$'),
] Validators.minLength(6),
Validators.maxLength(25),
]
], ],
'pwConfirm': ['', [ 'pwConfirm': [
Validators.compose([ '!@#$Qwer1234',
[
Validators.compose([
Validators.required, this.pwMatchValidator Validators.required, this.pwMatchValidator
]) ])
] ]
], ],
'name': ['', [ 'name': [
Validators.required 'Park',
] [
Validators.required
]
], ],
'phone': ['', [ 'phone': [
Validators.required '010-3040-0303',
] [
Validators.required
]
], ],
'company': ['', [ 'company': [
Validators.required 'atgame',
] [
Validators.required
]
], ],
}); });
this.email = this.signupForm.controls['email']; this.email = this.signupForm.controls['email'];
@ -79,14 +94,16 @@ export class SignupComponent implements OnInit {
} }
signup() { signup() {
const signinValue = Object.assign({}, this.signupForm.value); const signupValue = Object.assign({}, this.signupForm.value);
const password = signupValue.password;
const member: Member = { const member: Member = {
email: signinValue.email, email: signupValue.email,
password: signinValue.password, password: signupValue.password,
name: signinValue.name, name: signupValue.name,
phone: signinValue.phone, phone: signupValue.phone,
companyName: signinValue.company, companyName: signupValue.company,
}; };
this.store.dispatch(new AuthStore.Signup({member, password}));
console.log(member); console.log(member);
} }

3
src/packages/member/service/member.service.ts
View File

@ -34,10 +34,11 @@ export class MemberService {
}); });
} }
public signup(member: Member): Observable<Member> { public signup(member: Member, password: string): Observable<Member> {
return this.restService.request<Member>('post', '/account/signup', { return this.restService.request<Member>('post', '/account/signup', {
body: { body: {
member: member, member: member,
password: password,
}, },
}); });
} }

2
src/packages/member/store/signup/signup.action.ts
View File

@ -13,7 +13,7 @@ export enum ActionType {
export class Signup implements Action { export class Signup implements Action {
readonly type = ActionType.Signup; readonly type = ActionType.Signup;
constructor(public payload: Member) {} constructor(public payload: {member: Member, password: string}) {}
} }
export class SignupSuccess implements Action { export class SignupSuccess implements Action {

4
src/packages/member/store/signup/signup.effect.ts
View File

@ -36,9 +36,9 @@ export class Effects {
signup$: Observable<Action> = this.actions$ signup$: Observable<Action> = this.actions$
.ofType(ActionType.Signup) .ofType(ActionType.Signup)
.map((action: Signup) => action.payload) .map((action: Signup) => action.payload)
.exhaustMap(member => .exhaustMap(payload =>
this.memberService this.memberService
.signup(member) .signup(payload.member, payload.password)
.map(_member => new SignupSuccess(_member)) .map(_member => new SignupSuccess(_member))
.catch(error => of(new SignupFailure(error))) .catch(error => of(new SignupFailure(error)))
); );