signup signin code modify
This commit is contained in:
geek
parent
ce0b285ab2
commit
b061609317
|
|
@ -1,71 +1,78 @@
|
|||
<form [formGroup]="signupForm" (ngSubmit)="signup()">
|
||||
<div class="card login-panel ui-fluid">
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<img src="assets/layout/images/overFlow_CI_blue_185.png">
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<input id="email" type="email" pInputText class="input ng-dirty ng-invalid" placeholder="Email" formControlName="email" required>
|
||||
<div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
|
||||
Invalid email
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<input id="password" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Password" formControlName="password"
|
||||
required>
|
||||
<div *ngIf="password.touched && !password.valid" class="ui-message ui-messages-error ui-corner-all">
|
||||
Invalid password
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<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="card login-panel ui-fluid">
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<img src="assets/layout/images/overFlow_CI_blue_185.png">
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<input type="email"
|
||||
id="email"
|
||||
pInputText
|
||||
class="input ng-dirty ng-invalid"
|
||||
placeholder="Email"
|
||||
formControlName="email" required
|
||||
value="geekhot@hotmail.co.kr" />
|
||||
<div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
|
||||
Invalid email
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<input type="password"
|
||||
id="password" pInputText class="input ng-dirty ng-invalid" placeholder="Password" formControlName="password"
|
||||
required>
|
||||
<div *ngIf="password.touched && !password.valid" class="ui-message ui-messages-error ui-corner-all">
|
||||
Invalid password
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<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">
|
||||
<span class="md-inputfield">
|
||||
<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">
|
||||
Invalid Name
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<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">
|
||||
Invalid Name
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<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">
|
||||
Invalid phone number
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<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">
|
||||
Invalid phone number
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<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">
|
||||
Invalid company name
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<span class="md-inputfield">
|
||||
<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">
|
||||
Invalid company name
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</button>
|
||||
<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">
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<a href="#">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
|
|||
import { Router } from '@angular/router';
|
||||
import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl } from '@angular/forms';
|
||||
import { Member } from '../../model';
|
||||
import * as AuthStore from '../../store/signup';
|
||||
import {Store} from '@ngrx/store';
|
||||
|
||||
@Component({
|
||||
selector: 'of-member-signup',
|
||||
|
|
@ -20,7 +22,8 @@ export class SignupComponent implements OnInit {
|
|||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private formBuilder: FormBuilder
|
||||
private formBuilder: FormBuilder,
|
||||
private store: Store<AuthStore.State>,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -29,35 +32,47 @@ export class SignupComponent implements OnInit {
|
|||
|
||||
initForm() {
|
||||
this.signupForm = this.formBuilder.group({
|
||||
'email': ['', [
|
||||
Validators.required,
|
||||
Validators.email
|
||||
]
|
||||
'email': [
|
||||
'geekhot@hotmail.co.kr',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.email
|
||||
]
|
||||
],
|
||||
'password': ['', [
|
||||
Validators.required,
|
||||
Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
|
||||
Validators.minLength(6),
|
||||
Validators.maxLength(25),
|
||||
]
|
||||
'password': [
|
||||
'!@#$Qwer1234',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,}$'),
|
||||
Validators.minLength(6),
|
||||
Validators.maxLength(25),
|
||||
]
|
||||
],
|
||||
'pwConfirm': ['', [
|
||||
Validators.compose([
|
||||
'pwConfirm': [
|
||||
'!@#$Qwer1234',
|
||||
[
|
||||
Validators.compose([
|
||||
Validators.required, this.pwMatchValidator
|
||||
])
|
||||
]
|
||||
]
|
||||
],
|
||||
'name': ['', [
|
||||
Validators.required
|
||||
]
|
||||
'name': [
|
||||
'Park',
|
||||
[
|
||||
Validators.required
|
||||
]
|
||||
],
|
||||
'phone': ['', [
|
||||
Validators.required
|
||||
]
|
||||
'phone': [
|
||||
'010-3040-0303',
|
||||
[
|
||||
Validators.required
|
||||
]
|
||||
],
|
||||
'company': ['', [
|
||||
Validators.required
|
||||
]
|
||||
'company': [
|
||||
'atgame',
|
||||
[
|
||||
Validators.required
|
||||
]
|
||||
],
|
||||
});
|
||||
this.email = this.signupForm.controls['email'];
|
||||
|
|
@ -79,14 +94,16 @@ export class SignupComponent implements OnInit {
|
|||
}
|
||||
|
||||
signup() {
|
||||
const signinValue = Object.assign({}, this.signupForm.value);
|
||||
const signupValue = Object.assign({}, this.signupForm.value);
|
||||
const password = signupValue.password;
|
||||
const member: Member = {
|
||||
email: signinValue.email,
|
||||
password: signinValue.password,
|
||||
name: signinValue.name,
|
||||
phone: signinValue.phone,
|
||||
companyName: signinValue.company,
|
||||
email: signupValue.email,
|
||||
password: signupValue.password,
|
||||
name: signupValue.name,
|
||||
phone: signupValue.phone,
|
||||
companyName: signupValue.company,
|
||||
};
|
||||
this.store.dispatch(new AuthStore.Signup({member, password}));
|
||||
console.log(member);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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', {
|
||||
body: {
|
||||
member: member,
|
||||
password: password,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export enum ActionType {
|
|||
export class Signup implements Action {
|
||||
readonly type = ActionType.Signup;
|
||||
|
||||
constructor(public payload: Member) {}
|
||||
constructor(public payload: {member: Member, password: string}) {}
|
||||
}
|
||||
|
||||
export class SignupSuccess implements Action {
|
||||
|
|
|
|||
|
|
@ -36,9 +36,9 @@ export class Effects {
|
|||
signup$: Observable<Action> = this.actions$
|
||||
.ofType(ActionType.Signup)
|
||||
.map((action: Signup) => action.payload)
|
||||
.exhaustMap(member =>
|
||||
.exhaustMap(payload =>
|
||||
this.memberService
|
||||
.signup(member)
|
||||
.signup(payload.member, payload.password)
|
||||
.map(_member => new SignupSuccess(_member))
|
||||
.catch(error => of(new SignupFailure(error)))
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user