member_webapp/src/packages/member/component/signup/signup.component.ts

222 lines
5.4 KiB
TypeScript
Raw Normal View History

2018-05-14 08:10:55 +00:00
import {
AfterContentInit,
AfterViewInit,
Component,
ElementRef,
EventEmitter,
Input,
NgZone,
OnDestroy,
OnInit,
Output
} from '@angular/core';
2018-04-06 06:59:49 +00:00
import { Router } from '@angular/router';
2018-04-10 10:19:41 +00:00
import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl } from '@angular/forms';
2018-05-02 08:09:39 +00:00
import { Member } from '@overflow/commons-typescript/model/member';
2018-04-12 08:06:15 +00:00
import * as AuthStore from '../../store/signup';
import {Store} from '@ngrx/store';
2018-05-14 08:10:55 +00:00
import { Message } from 'primeng/api';
2018-04-06 06:59:49 +00:00
@Component({
selector: 'of-member-signup',
templateUrl: './signup.component.html',
})
2018-05-14 08:10:55 +00:00
export class SignupComponent implements OnInit, AfterViewInit, AfterContentInit, OnDestroy {
myRecaptcha = new FormControl(false);
2018-04-06 06:59:49 +00:00
signupForm: FormGroup;
2018-04-10 10:19:41 +00:00
email: AbstractControl;
password: AbstractControl;
pwConfirm: AbstractControl;
name: AbstractControl;
phone: AbstractControl;
company: AbstractControl;
2018-05-03 07:19:10 +00:00
termsDisplay = false;
policyDisplay = false;
2018-05-14 08:10:55 +00:00
msgs: Message[] = [];
// private _instance: any = null;
// @Input() initCallback = 'initRecaptcha';
// @Input() siteKey = '6Ldld1gUAAAAAKBn115dpJcFpsI4G0ZTCcmP29iA';
// @Input() theme = 'light';
// @Input() type = 'image';
// @Input() size = 'normal';
// @Input() tabindex = 0;
// @Input() language: string = null;
// @Output() onResponse: EventEmitter<any> = new EventEmitter();
// @Output() onExpire: EventEmitter<any> = new EventEmitter();
2018-04-06 06:59:49 +00:00
constructor(
private router: Router,
2018-04-12 08:06:15 +00:00
private formBuilder: FormBuilder,
private store: Store<AuthStore.State>,
2018-05-14 08:10:55 +00:00
public el: ElementRef,
public _zone: NgZone,
2018-04-06 06:59:49 +00:00
) { }
2018-05-14 08:10:55 +00:00
ngAfterViewInit() {
// console.log('ddddd');
}
ngAfterContentInit() {
// if ((<any>window).grecaptcha) {
// console.log((<any>window).grecaptcha);
// this.init();
// } else {
// (<any>window)[this.initCallback] = () => {
// this.init();
// };
// }
}
init() {
// console.log(this.el.nativeElement.children[2]);
// console.log((<any>window).grecaptcha.render());
//
//
//
// this._instance = (<any>window).grecaptcha.render(this.el.nativeElement.children[2], {
// 'sitekey': this.siteKey,
// 'theme': this.theme,
// 'type': this.type,
// 'size': this.size,
// 'tabindex': this.tabindex,
// 'hl': this.language,
// 'callback': (response: string) => {this._zone.run(() => this.recaptchaCallback(response)); },
// 'expired-callback': () => {this._zone.run(() => this.recaptchaExpiredCallback()); },
// });
}
2018-04-06 06:59:49 +00:00
ngOnInit() {
this.initForm();
}
2018-05-14 08:10:55 +00:00
ngOnDestroy() {
// if (this._instance != null) {
// (<any>window).grecaptcha.reset(this._instance);
// }
}
reset() {
// if (this._instance === null)
// return;
//
// (<any>window).grecaptcha.reset(this._instance);
}
2018-04-06 06:59:49 +00:00
initForm() {
this.signupForm = this.formBuilder.group({
2018-04-12 08:06:15 +00:00
'email': [
'geekhot@hotmail.co.kr',
[
Validators.required,
Validators.email
]
2018-04-06 06:59:49 +00:00
],
2018-04-12 08:06:15 +00:00
'password': [
'!@#$Qwer1234',
[
Validators.required,
Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,}$'),
Validators.minLength(6),
Validators.maxLength(25),
]
2018-04-06 06:59:49 +00:00
],
2018-04-12 08:06:15 +00:00
'pwConfirm': [
'!@#$Qwer1234',
[
Validators.compose([
2018-04-10 10:19:41 +00:00
Validators.required, this.pwMatchValidator
])
2018-04-12 08:06:15 +00:00
]
2018-04-06 06:59:49 +00:00
],
2018-04-12 08:06:15 +00:00
'name': [
'Park',
[
Validators.required
]
2018-04-06 06:59:49 +00:00
],
2018-04-12 08:06:15 +00:00
'phone': [
'010-3040-0303',
[
Validators.required
]
2018-04-06 06:59:49 +00:00
],
2018-04-12 08:06:15 +00:00
'company': [
'atgame',
[
Validators.required
]
2018-04-06 06:59:49 +00:00
],
2018-04-10 10:19:41 +00:00
});
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'];
2018-04-10 07:30:05 +00:00
}
2018-04-10 10:19:41 +00:00
pwMatchValidator(control: FormControl): { [s: string]: boolean } {
let pw;
if (control.parent) {
pw = control.parent.controls['password'].value;
}
if (control.value !== pw) {
return { notMatched: true };
}
}
2018-04-06 06:59:49 +00:00
2018-04-10 07:30:05 +00:00
signup() {
2018-04-12 08:06:15 +00:00
const signupValue = Object.assign({}, this.signupForm.value);
const password = signupValue.password;
2018-04-10 10:19:41 +00:00
const member: Member = {
2018-04-12 08:06:15 +00:00
email: signupValue.email,
name: signupValue.name,
phone: signupValue.phone,
companyName: signupValue.company,
2018-04-10 10:19:41 +00:00
};
2018-04-12 08:06:15 +00:00
this.store.dispatch(new AuthStore.Signup({member, password}));
2018-04-10 10:19:41 +00:00
console.log(member);
2018-04-06 06:59:49 +00:00
}
2018-05-03 07:19:10 +00:00
termsDisplayOpen() {
this.termsDisplay = true;
}
onTermsDisplayClose() {
this.termsDisplay = false;
}
policyDisplayOpen() {
this.policyDisplay = true;
}
onPolicyDisplayClose() {
this.policyDisplay = false;
}
2018-05-14 08:10:55 +00:00
// showResponse(event) {
// this.msgs = [];
// this.msgs.push({severity: 'info', summary: 'Succees', detail: 'User Responded'});
// }
recaptchaCallback(response: string) {
// this.onResponse.emit({
// response: response
// });
}
recaptchaExpiredCallback() {
// this.onExpire.emit();
}
onScriptLoad() {
console.log('Google reCAPTCHA loaded and is ready for use!');
}
onScriptError() {
console.log('Something went long when loading the Google reCAPTCHA');
}
2018-04-06 06:59:49 +00:00
}