member_webapp/@overflow/member/component/member-signup.component.ts
crusader 869fcf4e72 ing
2018-05-28 14:41:56 +09:00

144 lines
3.2 KiB
TypeScript

import {
Component,
OnDestroy,
OnInit,
Output,
EventEmitter,
} from '@angular/core';
import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl } from '@angular/forms';
import { Member } from '@overflow/commons-typescript/model/member';
@Component({
selector: 'of-member-signup',
templateUrl: './member-signup.component.html',
})
export class MemberSignupComponent implements OnInit, OnDestroy {
@Output() signup = new EventEmitter<{member: Member, password: string}>();
myRecaptcha = new FormControl(false);
signupForm: FormGroup;
email: AbstractControl;
password: AbstractControl;
pwConfirm: AbstractControl;
name: AbstractControl;
phone: AbstractControl;
company: AbstractControl;
termsDisplay = false;
policyDisplay = false;
constructor(
private formBuilder: FormBuilder,
) { }
ngOnInit() {
this.initForm();
}
ngOnDestroy() {
}
initForm() {
this.signupForm = this.formBuilder.group({
'email': [
'geekhot@hotmail.co.kr',
[
Validators.required,
Validators.email
]
],
'password': [
'!@#$Qwer1234',
[
Validators.required,
Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,}$'),
Validators.minLength(6),
Validators.maxLength(25),
]
],
'pwConfirm': [
'!@#$Qwer1234',
[
Validators.compose([
Validators.required, this.pwMatchValidator
])
]
],
'name': [
'Park',
[
Validators.required
]
],
'phone': [
'010-3040-0303',
[
Validators.required
]
],
'company': [
'atgame',
[
Validators.required
]
],
});
this.email = this.signupForm.controls['email'];
this.password = this.signupForm.controls['password'];
this.pwConfirm = this.signupForm.controls['pwConfirm'];
this.name = this.signupForm.controls['name'];
this.phone = this.signupForm.controls['phone'];
this.company = this.signupForm.controls['company'];
}
pwMatchValidator(control: FormControl): { [s: string]: boolean } {
let pw;
if (control.parent) {
pw = control.parent.controls['password'].value;
}
if (control.value !== pw) {
return { notMatched: true };
}
}
signupFormSubmit() {
if (!this.myRecaptcha.valid) {
console.log('dddddddd');
return;
}
const signupValue = Object.assign({}, this.signupForm.value);
const password = signupValue.password;
const member: Member = {
email: signupValue.email,
name: signupValue.name,
phone: signupValue.phone,
companyName: signupValue.company,
};
this.signup.emit({member: member, password: password});
}
termsDisplayOpen() {
this.termsDisplay = true;
}
onTermsDisplayClose() {
this.termsDisplay = false;
}
policyDisplayOpen() {
this.policyDisplay = true;
}
onPolicyDisplayClose() {
this.policyDisplay = false;
}
onScriptLoad() {
console.log('Google reCAPTCHA loaded and is ready for use!');
}
onScriptError() {
console.log('Something went long when loading the Google reCAPTCHA');
}
}