added captcha to login component

src/app/app.module.ts

@@ -40,6 +40,7 @@ import { ErrorInterceptor } from './interceptors/error.interceptor';
 import { ForgotPasswordComponent } from './components/onboarding/forgot-password/forgot-password.component';
 import { LanguageMenuComponent } from './components/language-menu/language-menu.component';
 import { ProfileComponent } from './components/onboarding/profile/profile.component';
+import {CaptchaModule} from 'primeng/captcha';
 
 registerLocaleData(localeDe, 'de');
 
@@ -103,6 +104,7 @@ export function tokenGetter(): string | null {
       progressBar: true,
       positionClass: 'toast-top-full-width'
     }),
+    CaptchaModule,
   ],
   providers: [
     {

src/app/components/onboarding/login/login.component.html

@@ -2,7 +2,7 @@
   <div class="login-layout" class="p-col-11 p-md-4 login-sep1">
       <form [formGroup] = "loginFormGroup" (ngSubmit)="submit()">
           <p>
-            <arpa-language-menu></arpa-language-menu>
+            <arpa-language-menu (onclick) = "cpt.reset()"></arpa-language-menu>
           </p>
           <p style="height:2px"></p>
           <p class="p-float-label">
@@ -15,14 +15,15 @@
             <label for="float-input">{{ 'PASSWORD' | translate }}</label>
             <i id="eyeButton" class="p-ml-2 pi {{hide ? 'pi-eye-slash' : 'pi-eye'}}" (click)="hide = !hide"></i>
           </p>
+          <p-captcha #cpt siteKey = "{{captchaKey}}"  theme = 'dark' language="{{this.language}}" (onResponse)="showResponse($event)" initCallback="loadCaptcha"></p-captcha>
           <p style="height:10px"></p>
           <table>
             <tr>
               <td>
                 <button
                   pButton
                   label="{{ 'LOGIN' | translate }}"
-                  [disabled]="loginFormGroup.invalid || loginFormGroup.pristine ">
+                  [disabled]="loginFormGroup.invalid || loginFormGroup.pristine || !captchaSuccess">
                 </button>
               </td>
               <td width="20px;"></td>

src/app/components/onboarding/login/login.component.ts

@@ -1,10 +1,12 @@
+import { environment } from './../../../../environments/environment';
 import { SubSink } from 'subsink';
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { AuthService } from '../../../services/auth.service';
 import { ToastService } from '../../../services/toast.service';
 import { LoadingService} from '../../../services/loading.service';
+import { TranslateService } from '@ngx-translate/core';
 
 export const LOCAL_STORAGE_TOKEN_KEY = 'token';
 
@@ -19,12 +21,18 @@ export class LoginComponent implements OnInit, OnDestroy {
   loginRequest = false;
   private subs = new SubSink();
   hide = true;
+  language: string;
+  captchaSuccess = false;
+  captchaKey = environment.captcha.key;
+  script: any;
 
   constructor(formBuilder: FormBuilder,
               private router: Router,
               private authService: AuthService,
               private toastService: ToastService,
-              private loadingService: LoadingService
+              private loadingService: LoadingService,
+              private translate: TranslateService,
+              private renderer: Renderer2
   ) {
     this.loginFormGroup = formBuilder.group({
       usernameOrEmail: [null,
@@ -44,6 +52,20 @@ export class LoginComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.translate
+      .stream('SHORTCUT')
+      .subscribe(v => this.setLanguage(v));
+    this.script = this.renderer.createElement('script');
+    this.script = this.renderer.createElement('script');
+    this.script.defer = true;
+    this.script.async = true;
+    this.script.src = 'https://www.google.com/recaptcha/api.js?render=explicit&onload=loadCaptcha';
+    this.renderer.appendChild(document.body, this.script);
+  }
+
+  setLanguage(param: any) {
+    this.language = param;
+    console.log(this.language);
   }
 
   ngOnDestroy(): void {
@@ -88,6 +110,10 @@ export class LoginComponent implements OnInit, OnDestroy {
       })
     );
   }
+
+  showResponse(response: any) {
+    this.captchaSuccess = true;
+  }
 }
 
 

src/assets/i18n/de.json

@@ -1,4 +1,5 @@
 {
+  "SHORTCUT": "de",
   "EMAILADDRESS": "E-Mailadresse",
   "USERNAME": "Benutzername",
   "GIVENNAME": "Vorname",

src/assets/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "SHORTCUT": "en",
   "EMAILADDRESS": "Email address",
   "USERNAME": "Username",
   "GIVENNAME": "Given name",

src/environments/environment.prod.ts

@@ -1,6 +1,9 @@
 export const environment = {
   production: true,
-    api: {
+  captcha: {
+    key: '6Le-g3QaAAAAAJmIN-s37441yuZPBp1M7nqUwtED'
+  },
+  api: {
     protocol: 'https',
     baseUrl: 'orso-arpa.azurewebsites.net'
   },

src/environments/environment.ts

@@ -4,10 +4,12 @@
 
 export const environment = {
   production: false,
+  captcha: {
+    key: '6Le-g3QaAAAAAJmIN-s37441yuZPBp1M7nqUwtED'
+  },
   api: {
-    protocol: 'http',
-    baseUrl: 'localhost:5000'
-
+    protocol: 'https',
+    baseUrl: 'orso-arpa.azurewebsites.net'
   },
   web:
   {