recaptcha

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",

src/index.html

@@ -5,6 +5,8 @@
   <title>overFlow</title>
   <base href="/">
 
+  <!--<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=initRecaptcha" async defer></script>-->
+  <!--<script src='https://www.google.com/recaptcha/api.js?render=6Ldld1gUAAAAAKBn115dpJcFpsI4G0ZTCcmP29iA'></script>-->
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

src/packages/member/component/signup/signup.component.html

@@ -81,14 +81,23 @@
                         |
                         <a href="javascript:void(0)" (click)="policyDisplayOpen()">Privacy Policy</a>
                         </div>
+                        <div class="content-section implementation">
+                          <!--<p-growl [value]="msgs" sticky="sticky"></p-growl>-->
 
+                          <!--<p-captcha siteKey="6Ldld1gUAAAAAKBn115dpJcFpsI4G0ZTCcmP29iA" (onResponse)="showResponse($event)" initCallback="initRecaptcha" ></p-captcha>-->
+                          <recaptcha
+                            [formControl]="myRecaptcha"
+                            (scriptLoad)="onScriptLoad()"
+                            (scriptError)="onScriptError()"
+                          ></recaptcha>
+                        </div>
                         <div class="ui-g-12 ui-g-padding-15">
-                        <button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
+                          <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-icon-left ui-c fa fa-fw ui-icon-person"></span>
-                            <span class="ui-button-text ui-c">Sign Up</span>
+                              <span class="ui-button-text ui-c">Sign Up</span>
-                        </button>
+                          </button>
 
-                        <a href="/auth/signin">Sign In</a>
+                          <a href="/auth/signin">Sign In</a>
                         </div>
                     </div>
                 </div>

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<any> = new EventEmitter();
+  // @Output() onExpire: EventEmitter<any> = new EventEmitter();
 
   constructor(
     private router: Router,
     private formBuilder: FormBuilder,
     private store: Store<AuthStore.State>,
+    public el: ElementRef,
+    public _zone: NgZone,
   ) { }
 
+  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()); },
+    // });
+  }
+
   ngOnInit() {
     this.initForm();
   }
 
+  ngOnDestroy() {
+    // if (this._instance != null) {
+    //   (<any>window).grecaptcha.reset(this._instance);
+    // }
+  }
+
+  reset() {
+    // if (this._instance === null)
+    //   return;
+    //
+    // (<any>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');
+  }
 }

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,