149 lines
3.5 KiB
TypeScript
149 lines
3.5 KiB
TypeScript
import {
|
|
Component,
|
|
OnDestroy,
|
|
OnInit,
|
|
Output,
|
|
EventEmitter, Input,
|
|
} from '@angular/core';
|
|
import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl, ValidationErrors } 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}>();
|
|
@Output() doneSignup = new EventEmitter();
|
|
|
|
@Input() signupComplete;
|
|
|
|
signupForm: FormGroup;
|
|
email: AbstractControl;
|
|
password: AbstractControl;
|
|
pwConfirm: AbstractControl;
|
|
name: AbstractControl;
|
|
phone: AbstractControl;
|
|
company: AbstractControl;
|
|
selectPolicy: AbstractControl;
|
|
captcha: 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
|
|
]
|
|
],
|
|
'selectPolicy': [
|
|
false, [ Validators.requiredTrue ],
|
|
],
|
|
'captcha': [
|
|
false, [ Validators.requiredTrue ],
|
|
]
|
|
});
|
|
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'];
|
|
this.selectPolicy = this.signupForm.controls['selectPolicy'];
|
|
this.captcha = this.signupForm.controls['captcha'];
|
|
}
|
|
|
|
pwMatchValidator(control: FormControl): ValidationErrors {
|
|
let pw;
|
|
if (control.parent) {
|
|
pw = control.parent.controls['password'].value;
|
|
}
|
|
if (control.value !== pw) {
|
|
return { notMatched: true };
|
|
}
|
|
return null;
|
|
}
|
|
|
|
signupFormSubmit() {
|
|
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;
|
|
}
|
|
|
|
policyDisplayOpen() {
|
|
this.policyDisplay = true;
|
|
}
|
|
|
|
closeSignup() {
|
|
this.doneSignup.emit();
|
|
}
|
|
|
|
onScriptLoad() {
|
|
console.log('Google reCAPTCHA loaded and is ready for use!');
|
|
}
|
|
|
|
onScriptError() {
|
|
console.log('Something went long when loading the Google reCAPTCHA');
|
|
}
|
|
}
|