hide recaptcha emblem when not used

src/app/app.module.ts

@@ -34,6 +34,7 @@ import {SplitButtonModule} from 'primeng/splitbutton';
 import {MenuModule} from 'primeng/menu';
 import { AdminLeftMenuComponent } from './shared/admin-left-menu/admin-left-menu.component';
 import {AccordionModule} from 'primeng/accordion';
+import { RecaptchaVisibilityService } from './service/recaptcha-visibility.service';
 
 export function appConfigFactory(config: AppConfigService) {
     return function create() {
@@ -98,6 +99,7 @@ export const jwtOptionsFactory = (appConfig: AppConfigService) => ({
     providers: [
         AuthGuard,
         AuthService,
+        RecaptchaVisibilityService,
         AppConfigService,
         provideZxvbnServiceForPSM(),
         {

src/app/service/recaptcha-visibility.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class RecaptchaVisibilityService {
+  showBadge(): void {
+    const badge = document.querySelector('.grecaptcha-badge') as HTMLElement;
+    if (badge) {
+      badge.style.visibility = 'visible';
+    }
+  }
+
+  hideBadge(): void {
+    const badge = document.querySelector('.grecaptcha-badge') as HTMLElement;
+    if (badge) {
+      badge.style.visibility = 'hidden';
+    }
+  }
+}

src/app/shared/about/about.component.ts

-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {AppConfigService, ChangelogService} from '../../service';
 import {GitInfo} from '../../model/gitinfo';
+import { RecaptchaVisibilityService } from '../../service/recaptcha-visibility.service';
 
 @Component({
     selector: 'app-about',
     templateUrl: './about.component.html',
     styleUrls: ['./about.component.css']
 })
-export class AboutComponent implements OnInit {
+export class AboutComponent implements OnInit, OnDestroy {
 
     public gitInfo: GitInfo;
 
     constructor(private changelogService: ChangelogService,
-                private appConfigService: AppConfigService) {
+                private appConfigService: AppConfigService,
+            private readonly recaptcha: RecaptchaVisibilityService) {
     }
 
     ngOnInit() {
+        this.recaptcha.showBadge();
         if (this.appConfigService.getShowGitInfo()) {
             this.changelogService.getGitInfo().subscribe(info => this.gitInfo = info);
         }
     }
+
+    ngOnDestroy(): void {
+        this.recaptcha.hideBadge();
+    }
 }

src/app/shared/shared.module.ts

@@ -72,6 +72,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import {ChartModule} from 'primeng/chart';
 import { RolesExcludedDirective } from '../directive/roles-exluded.directive';
 import { FileUploadModule } from 'primeng/fileupload';
+import { RecaptchaVisibilityService } from '../service/recaptcha-visibility.service';
 
 
 
@@ -155,6 +156,7 @@ import { FileUploadModule } from 'primeng/fileupload';
         PasswordValidator,
         UserDataService,
         NotificationService,
+        RecaptchaVisibilityService,
         AppConfigService,
         DatePipe,
         {

src/app/welcome/welcome.component.ts

 import {AppConfigService} from '../service/appconfig.service';
-import {AfterContentChecked, AfterViewChecked, Component, OnInit,} from '@angular/core';
+import {AfterContentChecked, AfterViewChecked, Component, OnDestroy, OnInit,} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ServiceUnavailableService} from '../service-unavailable/service-unavailable.service';
+import { RecaptchaVisibilityService } from '../service/recaptcha-visibility.service';
 
 @Component({
     selector: 'app-welcome',
     templateUrl: './welcome.component.html',
     styleUrls: ['./welcome.component.css']
 })
-export class WelcomeComponent implements OnInit, AfterViewChecked, AfterContentChecked {
+export class WelcomeComponent implements OnInit, AfterViewChecked, AfterContentChecked, OnDestroy {
 
     private height = 0;
 
@@ -19,7 +20,8 @@ export class WelcomeComponent implements OnInit, AfterViewChecked, AfterContentC
     constructor(private appConfig: AppConfigService,
                 public router: Router,
                 private serviceHealth: ServiceUnavailableService,
-                private readonly route: ActivatedRoute) {
+                private readonly route: ActivatedRoute,
+                private readonly recaptcha: RecaptchaVisibilityService) {
         this.route.queryParams.subscribe(params => {
             console.log(params)
             if (params.logout !== undefined) {
@@ -38,14 +40,21 @@ export class WelcomeComponent implements OnInit, AfterViewChecked, AfterContentC
 
         this.landingProfile = this.appConfig.getLandingProfile();
         console.log("Landing profile = ", this.landingProfile)
+        this.recaptcha.showBadge();
     }
 
     ngAfterContentChecked() {
         // this.onResize();
+         this.recaptcha.showBadge();
     }
 
     ngAfterViewChecked() {
         // this.onResize();
+         this.recaptcha.showBadge();
+    }
+
+    ngOnDestroy(): void {
+        this.recaptcha.hideBadge();
     }
 
     public onCloseBanner() {

src/styles.css

@@ -240,3 +240,8 @@ body .p-datatable .p-sortable-column.p-highlight{
 body .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{
     color:var(--primary-button-color);
 }
+
+.grecaptcha-badge { 
+    visibility: hidden; 
+    bottom: 45px !important;
+}
\ No newline at end of file