recaptcha
This commit is contained in:
geek
parent
604cc8e9d5
commit
37ae4e9646
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui-g-12 ui-g-padding-15">
|
||||
<span class="md-inputfield">
|
||||
<input id="name" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Name" formControlName="name" required>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui-g-12 ui-g-padding-15">
|
||||
<span class="md-inputfield">
|
||||
<input id="phone" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Phone" formControlName="phone" required>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui-g-12 ui-g-padding-15">
|
||||
<span class="md-inputfield">
|
||||
<input id="company" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Company" formControlName="company" required>
|
||||
|
|
@ -75,20 +75,29 @@
|
|||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui-g-12 ui-g-padding-15">
|
||||
<a href="javascript:void(0)" (click)="termsDisplayOpen()">Terms Of Use</a>
|
||||
|
|
||||
<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">
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<a href="/auth/signin">Sign In</a>
|
||||
<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-text ui-c">Sign Up</span>
|
||||
</button>
|
||||
|
||||
<a href="/auth/signin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user