From a7f79daaebf17b696cc394f9491ce83063bb6b5b Mon Sep 17 00:00:00 2001
From: kbeyro <121854496+kbeyro@users.noreply.github.com>
Date: Fri, 16 May 2025 11:58:05 +0200
Subject: [PATCH] hide recaptcha emblem when not used
---
src/app/app.module.ts | 2 ++
.../service/recaptcha-visibility.service.ts | 18 ++++++++++++++++++
src/app/shared/about/about.component.ts | 13 ++++++++++---
src/app/shared/shared.module.ts | 2 ++
src/app/welcome/welcome.component.ts | 15 ++++++++++++---
src/styles.css | 5 +++++
6 files changed, 49 insertions(+), 6 deletions(-)
create mode 100644 src/app/service/recaptcha-visibility.service.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index be39d339..98aa0120 100644
--- a/src/app/app.module.ts
+++ b/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(),
{
diff --git a/src/app/service/recaptcha-visibility.service.ts b/src/app/service/recaptcha-visibility.service.ts
new file mode 100644
index 00000000..7a29d3a8
--- /dev/null
+++ b/src/app/service/recaptcha-visibility.service.ts
@@ -0,0 +1,18 @@
+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';
+ }
+ }
+}
diff --git a/src/app/shared/about/about.component.ts b/src/app/shared/about/about.component.ts
index c458c63c..dc297fd7 100644
--- a/src/app/shared/about/about.component.ts
+++ b/src/app/shared/about/about.component.ts
@@ -1,23 +1,30 @@
-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();
+ }
}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 20ffb98d..16772820 100644
--- a/src/app/shared/shared.module.ts
+++ b/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,
{
diff --git a/src/app/welcome/welcome.component.ts b/src/app/welcome/welcome.component.ts
index 6e8a863f..29d846e9 100644
--- a/src/app/welcome/welcome.component.ts
+++ b/src/app/welcome/welcome.component.ts
@@ -1,14 +1,15 @@
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() {
diff --git a/src/styles.css b/src/styles.css
index b467c8f2..908c0bd3 100644
--- a/src/styles.css
+++ b/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
--
GitLab