diff --git a/feature-libs/user/profile/occ/adapters/occ-user-profile.adapter.spec.ts b/feature-libs/user/profile/occ/adapters/occ-user-profile.adapter.spec.ts index 21ebafb1ad3..ccacf256763 100644 --- a/feature-libs/user/profile/occ/adapters/occ-user-profile.adapter.spec.ts +++ b/feature-libs/user/profile/occ/adapters/occ-user-profile.adapter.spec.ts @@ -22,7 +22,7 @@ import { import { UserSignUp } from '@spartacus/user/profile/root'; import { OccUserProfileAdapter } from './occ-user-profile.adapter'; import { Observable, of } from 'rxjs'; -import { CaptchaApiConfig, CaptchaProvider } from '@spartacus/storefront'; +import { CaptchaApiConfig, CaptchaRenderer } from '@spartacus/storefront'; export const mockOccModuleConfig: OccConfig = { backend: { @@ -68,7 +68,7 @@ const user: User = { }; const mockToken = 'mock-token'; -class MockCaptchaService implements CaptchaProvider { +class MockCaptchaService implements CaptchaRenderer { getCaptchaConfig(): Observable { return of({ enabled: true, @@ -88,7 +88,7 @@ class MockCaptchaService implements CaptchaProvider { const mockCaptchaApiConfig: CaptchaApiConfig = { apiUrl: 'mock-url', fields: { 'mock-field-key': 'mock-field-value' }, - captchaProvider: MockCaptchaService, + captchaRenderer: MockCaptchaService, }; describe('OccUserProfileAdapter', () => { diff --git a/feature-libs/user/profile/occ/adapters/occ-user-profile.adapter.ts b/feature-libs/user/profile/occ/adapters/occ-user-profile.adapter.ts index 1dd95092eac..a5542882a5f 100644 --- a/feature-libs/user/profile/occ/adapters/occ-user-profile.adapter.ts +++ b/feature-libs/user/profile/occ/adapters/occ-user-profile.adapter.ts @@ -27,7 +27,7 @@ import { import { Title, UserSignUp } from '@spartacus/user/profile/root'; import { Observable } from 'rxjs'; import { catchError, map } from 'rxjs/operators'; -import { CaptchaApiConfig, CaptchaProvider } from '@spartacus/storefront'; +import { CaptchaApiConfig, CaptchaRenderer } from '@spartacus/storefront'; const CONTENT_TYPE_JSON_HEADER = { 'Content-Type': 'application/json' }; const CONTENT_TYPE_URLENCODED_HEADER = { @@ -185,9 +185,9 @@ export class OccUserProfileAdapter implements UserProfileAdapter { } protected appendCaptchaToken(currentHeaders: HttpHeaders): HttpHeaders { - if (this.injector && this.captchaConfig?.captchaProvider) { - const provider = this.injector.get( - this.captchaConfig.captchaProvider + if (this.injector && this.captchaConfig?.captchaRenderer) { + const provider = this.injector.get( + this.captchaConfig.captchaRenderer ); const isCaptchaEnabled = provider .getCaptchaConfig() diff --git a/projects/storefrontlib/shared/components/captcha/captcha-api-config.ts b/projects/storefrontlib/shared/components/captcha/captcha-api-config.ts index b387e5857cd..ce4590cd50b 100644 --- a/projects/storefrontlib/shared/components/captcha/captcha-api-config.ts +++ b/projects/storefrontlib/shared/components/captcha/captcha-api-config.ts @@ -7,7 +7,7 @@ import { Injectable, Type } from '@angular/core'; import { Config } from '@spartacus/core'; -import { CaptchaProvider } from './captcha.model'; +import { CaptchaRenderer } from './captcha.renderer'; @Injectable({ providedIn: 'root', @@ -18,13 +18,13 @@ import { CaptchaProvider } from './captcha.model'; * Configuration for the frontend: This class defines how to render the captcha component * and obtain the appropriate token. * - * @property {Type} captchaProvider - An implementation of the CaptchaProvider + * @property {Type} - An implementation of the CaptchaRenderer * interface that renders the UI and interacts with the user. * @property {string} [apiUrl] - An optional parameter specifying the API endpoint for captcha validation. * @property {Object} [fields] - An optional parameter that holds additional fields needed for the captcha configuration. */ export abstract class CaptchaApiConfig { - captchaProvider?: Type; + captchaRenderer?: Type; apiUrl?: string; fields?: { [key: string]: string }; } diff --git a/projects/storefrontlib/shared/components/captcha/captcha.component.spec.ts b/projects/storefrontlib/shared/components/captcha/captcha.component.spec.ts index 52fbd129e41..2f628e19a73 100644 --- a/projects/storefrontlib/shared/components/captcha/captcha.component.spec.ts +++ b/projects/storefrontlib/shared/components/captcha/captcha.component.spec.ts @@ -1,10 +1,10 @@ import { Observable, of } from 'rxjs'; import { CaptchaConfig } from '@spartacus/core'; -import { CaptchaComponent, CaptchaProvider } from '@spartacus/storefront'; +import { CaptchaComponent, CaptchaRenderer } from '@spartacus/storefront'; import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { CaptchaApiConfig } from './captcha-api-config'; -class MockCaptchaService implements CaptchaProvider { +class MockCaptchaService implements CaptchaRenderer { getCaptchaConfig(): Observable { return of({ enabled: true, @@ -24,13 +24,13 @@ class MockCaptchaService implements CaptchaProvider { const mockCaptchaApiConfig: CaptchaApiConfig = { apiUrl: 'mock-url', fields: { 'mock-field-key': 'mock-field-value' }, - captchaProvider: MockCaptchaService, + captchaRenderer: MockCaptchaService, }; describe('Captcha Component', () => { let component: CaptchaComponent; let fixture: ComponentFixture; - let service: CaptchaProvider; + let service: CaptchaRenderer; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ diff --git a/projects/storefrontlib/shared/components/captcha/captcha.component.ts b/projects/storefrontlib/shared/components/captcha/captcha.component.ts index b1eb284a31d..9cd72c66d34 100644 --- a/projects/storefrontlib/shared/components/captcha/captcha.component.ts +++ b/projects/storefrontlib/shared/components/captcha/captcha.component.ts @@ -20,7 +20,7 @@ import { of, Subscription } from 'rxjs'; import { concatMap } from 'rxjs/operators'; import { CaptchaApiConfig } from './captcha-api-config'; -import { CaptchaProvider } from './captcha.model'; +import { CaptchaRenderer } from './captcha.renderer'; @Component({ selector: 'cx-captcha', @@ -45,17 +45,17 @@ export class CaptchaComponent implements AfterViewInit, OnDestroy { * config. */ ngAfterViewInit(): void { - if (this.config?.captchaProvider) { - const captchaProvider = this.injector.get( - this.config.captchaProvider + if (this.config?.captchaRenderer) { + const captchaRenderer = this.injector.get( + this.config.captchaRenderer ); this.subscription.add( - captchaProvider + captchaRenderer .getCaptchaConfig() .pipe( concatMap((captchaConfig) => { if (captchaConfig?.enabled) { - return captchaProvider.renderCaptcha({ + return captchaRenderer.renderCaptcha({ element: this.captchaRef.nativeElement, }); } else { diff --git a/projects/storefrontlib/shared/components/captcha/captcha.model.ts b/projects/storefrontlib/shared/components/captcha/captcha.model.ts index 91d66909311..045ab882ae0 100644 --- a/projects/storefrontlib/shared/components/captcha/captcha.model.ts +++ b/projects/storefrontlib/shared/components/captcha/captcha.model.ts @@ -5,31 +5,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Observable } from 'rxjs'; -import { CaptchaConfig } from '@spartacus/core'; - export interface RenderParams { element?: HTMLElement | string; publicKey?: string; } - -export interface CaptchaProvider { - /** - * Renders captcha widget - * - * @params parameters required by a provider - * @returns Observable for the key returned by a provider once user validated - */ - renderCaptcha(params: RenderParams): Observable; - - /** - * @returns Observable for the backend request to retrieve commerce cloud - * captcha configuration (such as public key and whether captca is enabled) - * */ - getCaptchaConfig(): Observable; - - /** - * @returns captcha token - */ - getToken(): string; -} diff --git a/projects/storefrontlib/shared/components/captcha/captcha.renderer.ts b/projects/storefrontlib/shared/components/captcha/captcha.renderer.ts new file mode 100644 index 00000000000..09932667275 --- /dev/null +++ b/projects/storefrontlib/shared/components/captcha/captcha.renderer.ts @@ -0,0 +1,30 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP Spartacus team + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { Observable } from 'rxjs'; +import { RenderParams } from './captcha.model'; +import { CaptchaConfig } from '@spartacus/core'; + +export interface CaptchaRenderer { + /** + * Renders captcha widget + * + * @RenderParams parameters required by a provider, includes html element to append CAPTCHA UI element. + * @returns Observable for the key returned by a provider once user validated + */ + renderCaptcha(params: RenderParams): Observable; + + /** + * @returns Observable for the backend request to retrieve commerce cloud + * captcha configuration (such as public key and whether captca is enabled) + * */ + getCaptchaConfig(): Observable; + + /** + * @returns captcha token + */ + getToken(): string; +} diff --git a/projects/storefrontlib/shared/components/captcha/captcha.service.ts b/projects/storefrontlib/shared/components/captcha/captcha.service.ts index 3c61a041c06..ca863331157 100644 --- a/projects/storefrontlib/shared/components/captcha/captcha.service.ts +++ b/projects/storefrontlib/shared/components/captcha/captcha.service.ts @@ -15,8 +15,9 @@ import { } from '@spartacus/core'; import { forkJoin, map, Observable, ReplaySubject, Subscription } from 'rxjs'; import { concatMap, take } from 'rxjs/operators'; -import { CaptchaProvider, RenderParams } from './captcha.model'; +import { RenderParams } from './captcha.model'; import { CaptchaApiConfig } from './captcha-api-config'; +import { CaptchaRenderer } from './captcha.renderer'; /** * Global function to be passes as "onload" url param for captcha