diff --git a/package.json b/package.json
index f3b80cb..5c99011 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,8 @@
"rxjs": "^5.5.8",
"rxjs-fetch": "^2.1.6",
"web-animations-js": "^2.3.1",
- "zone.js": "^0.8.25"
+ "zone.js": "^0.8.25",
+ "angular-google-recaptcha": "^1.0.3"
},
"devDependencies": {
"@angular/cli": "1.6.5",
diff --git a/src/index.html b/src/index.html
index b45c731..d6704d7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,6 +5,8 @@
overFlow
+
+
diff --git a/src/packages/member/component/signup/signup.component.html b/src/packages/member/component/signup/signup.component.html
index f38d2d0..3b91add 100644
--- a/src/packages/member/component/signup/signup.component.html
+++ b/src/packages/member/component/signup/signup.component.html
@@ -48,7 +48,7 @@
-
+
@@ -57,7 +57,7 @@
-
+
@@ -66,7 +66,7 @@
-
+
@@ -75,20 +75,29 @@
-
+
-
+
+
+
+
+
+
diff --git a/src/packages/member/component/signup/signup.component.ts b/src/packages/member/component/signup/signup.component.ts
index ef1d00c..15ca8ee 100644
--- a/src/packages/member/component/signup/signup.component.ts
+++ b/src/packages/member/component/signup/signup.component.ts
@@ -1,15 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import {
+ AfterContentInit,
+ AfterViewInit,
+ Component,
+ ElementRef,
+ EventEmitter,
+ Input,
+ NgZone,
+ OnDestroy,
+ OnInit,
+ Output
+} from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl } from '@angular/forms';
import { Member } from '@overflow/commons-typescript/model/member';
import * as AuthStore from '../../store/signup';
import {Store} from '@ngrx/store';
+import { Message } from 'primeng/api';
@Component({
selector: 'of-member-signup',
templateUrl: './signup.component.html',
})
-export class SignupComponent implements OnInit {
+export class SignupComponent implements OnInit, AfterViewInit, AfterContentInit, OnDestroy {
+ myRecaptcha = new FormControl(false);
signupForm: FormGroup;
email: AbstractControl;
@@ -20,17 +33,79 @@ export class SignupComponent implements OnInit {
company: AbstractControl;
termsDisplay = false;
policyDisplay = false;
+ 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 = new EventEmitter();
+ // @Output() onExpire: EventEmitter = new EventEmitter();
constructor(
private router: Router,
private formBuilder: FormBuilder,
private store: Store,
+ public el: ElementRef,
+ public _zone: NgZone,
) { }
+ ngAfterViewInit() {
+ // console.log('ddddd');
+ }
+
+ ngAfterContentInit() {
+ // if ((window).grecaptcha) {
+ // console.log((window).grecaptcha);
+ // this.init();
+ // } else {
+ // (window)[this.initCallback] = () => {
+ // this.init();
+ // };
+ // }
+ }
+
+ init() {
+ // console.log(this.el.nativeElement.children[2]);
+ // console.log((window).grecaptcha.render());
+ //
+ //
+ //
+ // this._instance = (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()); },
+ // });
+ }
+
ngOnInit() {
this.initForm();
}
+ ngOnDestroy() {
+ // if (this._instance != null) {
+ // (window).grecaptcha.reset(this._instance);
+ // }
+ }
+
+ reset() {
+ // if (this._instance === null)
+ // return;
+ //
+ // (window).grecaptcha.reset(this._instance);
+ }
+
initForm() {
this.signupForm = this.formBuilder.group({
'email': [
@@ -121,4 +196,26 @@ export class SignupComponent implements OnInit {
onPolicyDisplayClose() {
this.policyDisplay = false;
}
+
+ // 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');
+ }
}
diff --git a/src/packages/member/member.module.ts b/src/packages/member/member.module.ts
index 9450e94..202587c 100644
--- a/src/packages/member/member.module.ts
+++ b/src/packages/member/member.module.ts
@@ -9,6 +9,8 @@ import { COMPONENTS } from './component';
import { SERVICES } from './service';
import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
import { QRCodeModule } from 'angularx-qrcode';
+import { CaptchaModule } from 'primeng/captcha';
+import { RecaptchaModule } from 'angular-google-recaptcha';
@NgModule({
imports: [
@@ -20,6 +22,9 @@ import { QRCodeModule } from 'angularx-qrcode';
MemberRESTModule,
PrimeNGModules,
QRCodeModule,
+ RecaptchaModule.forRoot({
+ siteKey: '6Ldld1gUAAAAAKBn115dpJcFpsI4G0ZTCcmP29iA',
+ }),
],
declarations: [
COMPONENTS,