Task #58593: captcha v3 added in signup page

sunbird-cb · Jun 8, 2022 · bd3273b · bd3273b
1 parent 97af1cc
commit bd3273b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/src/app/routes/public/public-signup/public-signup.component.html b/src/app/routes/public/public-signup/public-signup.component.html
@@ -201,11 +201,14 @@ <h1 class="mat-h1 margin-remove inline-block ng-star-inserted">
                     aria-label="I confirm that the above provided information are accurate. checkbox" required>
                     <label class="margin-remove-bottom mat-body-2 ws-mat-black60-text" i18n-aria-label
                       aria-label="I confirm that the above provided information are accurate. checkbox label">
-                    I confirm that the above provided information are accurate.
+                    I confirm that the above provided information is accurate.
                     </label>
                   </mat-checkbox>
                 </div>
               </div>
+              <!-- <div>
+                <re-captcha formControlName="recaptchaReactive"></re-captcha>
+              </div> -->
               <div class="w-full margin-top-l">
                 <div class="button_box flex flex-col items-center justify-center">
                   <button mat-flat-button type="submit"
@@ -215,6 +218,12 @@ <h1 class="mat-h1 margin-remove inline-block ng-star-inserted">
                   </button>
                 </div>
               </div>
+              <div class="w-full margin-top-l">
+                <div class="flex items-center justify-center mat-body-1">
+                    Already have an account? 
+                    <a href="/protected/v8/resource" class="ml-2 btn btn-outline-secondary ws-mat-default-text">Sign in here</a>
+                </div>
+              </div>
             </div>
           </div>
         </div>

diff --git a/src/app/routes/public/public-signup/public-signup.component.ts b/src/app/routes/public/public-signup/public-signup.component.ts
@@ -6,6 +6,7 @@ import { LoggerService, ConfigurationsService, NsInstanceConfig } from '@sunbird
 import { debounceTime, distinctUntilChanged, startWith, map } from 'rxjs/operators'
 import { environment } from 'src/environments/environment'
 import { MatSnackBar, MatDialog } from '@angular/material'
+import { ReCaptchaV3Service } from 'ng-recaptcha'
 import { SignupSuccessDialogueComponent } from './signup-success-dialogue/signup-success-dialogue/signup-success-dialogue.component'
 
 export function forbiddenNamesValidator(optionsArray: any): ValidatorFn {
@@ -61,13 +62,15 @@ export class PublicSignupComponent implements OnInit, OnDestroy {
   confirm = false
 
   private subscriptionContact: Subscription | null = null
+  private recaptchaSubscription!: Subscription
 
   constructor(
     private signupSvc: SignupService,
     private loggerSvc: LoggerService,
     private configSvc: ConfigurationsService,
     private snackBar: MatSnackBar,
     private dialog: MatDialog,
+    private recaptchaV3Service: ReCaptchaV3Service
   ) {
     this.registrationForm = new FormGroup({
       firstname: new FormControl('', [Validators.required, Validators.pattern(this.namePatern)]),
@@ -76,6 +79,7 @@ export class PublicSignupComponent implements OnInit, OnDestroy {
       email: new FormControl('', [Validators.required, Validators.email]),
       department: new FormControl('', [Validators.required, forbiddenNamesValidator(this.masterDepartments)]),
       confirmBox: new FormControl(false, [Validators.required]),
+      // recaptchaReactive: new FormControl(null, [Validators.required]),
     })
   }
 
@@ -168,6 +172,9 @@ export class PublicSignupComponent implements OnInit, OnDestroy {
     if (this.subscriptionContact) {
       this.subscriptionContact.unsubscribe()
     }
+    if (this.recaptchaSubscription) {
+      this.recaptchaSubscription.unsubscribe()
+    }
   }
 
   displayFn = (value: any) =>  {
@@ -179,6 +186,19 @@ export class PublicSignupComponent implements OnInit, OnDestroy {
   }
 
   signup() {
+
+    this.recaptchaSubscription = this.recaptchaV3Service.execute('importantAction')
+    .subscribe(
+      _token => {
+        // tslint:disable-next-line: no-console
+        console.log('captcha validation success')
+      },
+      error => {
+        // tslint:disable-next-line: no-console
+        console.error('captcha validation error', error)
+      }
+    )
+
     const req = {
       firstName: this.registrationForm.value.firstname || '',
       lastName: this.registrationForm.value.lastname || '',

diff --git a/src/app/routes/public/public-signup/public-signup.module.ts b/src/app/routes/public/public-signup/public-signup.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core'
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import {
   MatToolbarModule,
@@ -29,7 +29,9 @@ import { PublicSignupComponent } from './public-signup.component'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { SignupService } from './signup.service'
+import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha'
 import { SignupSuccessDialogueComponent } from './signup-success-dialogue/signup-success-dialogue/signup-success-dialogue.component'
+import { environment } from 'src/environments/environment'
 
 @NgModule({
   declarations: [PublicSignupComponent, SignupSuccessDialogueComponent],
@@ -61,9 +63,17 @@ import { SignupSuccessDialogueComponent } from './signup-success-dialogue/signup
     MatButtonToggleModule,
     MatTabsModule,
     MatAutocompleteModule,
+    RecaptchaV3Module,
   ],
   exports: [PublicSignupComponent],
-  providers: [SignupService],
+  providers: [
+    SignupService,
+    {
+      provide: RECAPTCHA_V3_SITE_KEY,
+      useValue: environment.recaptcha.siteKey,
+    },
+  ],
   entryComponents: [SignupSuccessDialogueComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class PublicSignupModule { }