From 3a419e6becd55e2923dcf7abcfbba3b41e12c2a2 Mon Sep 17 00:00:00 2001 From: "Bartkowiak, Piotr (External)" Date: Tue, 22 Oct 2024 13:05:58 +0200 Subject: [PATCH] Password visibility switch, input value overflow fix --- .../csagent-login-form/csagent-login-form.component.ts | 5 ++++- .../order-guest-register-form.component.ts | 5 ++++- .../user-change-password-form.component.ts | 6 ++++-- .../components/login-form/login-form.component.ts | 5 ++++- .../otp-login-form/otp-login-form.component.ts | 6 +++++- .../profile/components/register/register.component.ts | 5 ++++- .../reset-password/reset-password.component.ts | 5 ++++- .../components/update-email/update-email.component.ts | 5 ++++- .../update-password/my-account-v2-password.component.ts | 6 +++++- .../update-password/update-password.component.ts | 6 ++++-- .../feature-toggles/config/feature-toggles.ts | 6 ++++++ .../src/app/spartacus/spartacus-features.module.ts | 1 + projects/storefrontstyles/scss/cxbase/blocks/forms.scss | 9 +++++++++ 13 files changed, 58 insertions(+), 12 deletions(-) diff --git a/feature-libs/asm/components/csagent-login-form/csagent-login-form.component.ts b/feature-libs/asm/components/csagent-login-form/csagent-login-form.component.ts index 5f1e02b9f9a..238abc245ad 100644 --- a/feature-libs/asm/components/csagent-login-form/csagent-login-form.component.ts +++ b/feature-libs/asm/components/csagent-login-form/csagent-login-form.component.ts @@ -10,6 +10,7 @@ import { UntypedFormGroup, Validators, } from '@angular/forms'; +import { useFeatureStyles } from '@spartacus/core'; @Component({ selector: 'cx-csagent-login-form', @@ -24,7 +25,9 @@ export class CSAgentLoginFormComponent implements OnInit { @Output() submitEvent = new EventEmitter<{ userId: string; password: string }>(); - constructor(protected fb: UntypedFormBuilder) {} + constructor(protected fb: UntypedFormBuilder) { + useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow'); + } ngOnInit(): void { this.csAgentLoginForm = this.fb.group({ diff --git a/feature-libs/order/components/order-confirmation/order-guest-register-form/order-guest-register-form.component.ts b/feature-libs/order/components/order-confirmation/order-guest-register-form/order-guest-register-form.component.ts index 8e0cc10186c..e033cee7955 100644 --- a/feature-libs/order/components/order-confirmation/order-guest-register-form/order-guest-register-form.component.ts +++ b/feature-libs/order/components/order-confirmation/order-guest-register-form/order-guest-register-form.component.ts @@ -14,6 +14,7 @@ import { AuthService, FeatureConfigService, RoutingService, + useFeatureStyles, } from '@spartacus/core'; import { CustomFormValidators } from '@spartacus/storefront'; import { UserRegisterFacade } from '@spartacus/user/profile/root'; @@ -68,7 +69,9 @@ export class OrderGuestRegisterFormComponent implements OnDestroy { protected routingService: RoutingService, protected authService: AuthService, protected fb: UntypedFormBuilder - ) {} + ) { + useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow'); + } submit() { if (this.guestRegisterForm.valid) { diff --git a/feature-libs/organization/administration/components/user/change-password-form/user-change-password-form.component.ts b/feature-libs/organization/administration/components/user/change-password-form/user-change-password-form.component.ts index 8638b683e8f..4b12b2e4f95 100644 --- a/feature-libs/organization/administration/components/user/change-password-form/user-change-password-form.component.ts +++ b/feature-libs/organization/administration/components/user/change-password-form/user-change-password-form.component.ts @@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; -import { User } from '@spartacus/core'; +import { useFeatureStyles, User } from '@spartacus/core'; import { LoadStatus } from '@spartacus/organization/administration/core'; import { Observable } from 'rxjs'; import { filter, first, map, switchMap, take } from 'rxjs/operators'; @@ -29,7 +29,9 @@ export class UserChangePasswordFormComponent { protected itemService: UserItemService, protected formService: UserChangePasswordFormService, protected messageService: MessageService - ) {} + ) { + useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow'); + } save(form: UntypedFormGroup): void { this.itemService.current$ diff --git a/feature-libs/user/account/components/login-form/login-form.component.ts b/feature-libs/user/account/components/login-form/login-form.component.ts index ff84b73d116..80221969a66 100644 --- a/feature-libs/user/account/components/login-form/login-form.component.ts +++ b/feature-libs/user/account/components/login-form/login-form.component.ts @@ -6,6 +6,7 @@ import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; +import { useFeatureStyles } from '@spartacus/core'; import { Observable } from 'rxjs'; import { LoginFormComponentService } from './login-form-component.service'; @@ -15,7 +16,9 @@ import { LoginFormComponentService } from './login-form-component.service'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class LoginFormComponent { - constructor(protected service: LoginFormComponentService) {} + constructor(protected service: LoginFormComponentService) { + useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow'); + } form: UntypedFormGroup = this.service.form; isUpdating$: Observable = this.service.isUpdating$; diff --git a/feature-libs/user/account/components/otp-login-form/otp-login-form.component.ts b/feature-libs/user/account/components/otp-login-form/otp-login-form.component.ts index 9e9b600615a..65f5ad8eb21 100644 --- a/feature-libs/user/account/components/otp-login-form/otp-login-form.component.ts +++ b/feature-libs/user/account/components/otp-login-form/otp-login-form.component.ts @@ -15,7 +15,7 @@ import { UntypedFormGroup, Validators, } from '@angular/forms'; -import { RoutingService, WindowRef } from '@spartacus/core'; +import { RoutingService, useFeatureStyles, WindowRef } from '@spartacus/core'; import { CustomFormValidators } from '@spartacus/storefront'; import { BehaviorSubject, Observable, tap } from 'rxjs'; @@ -58,6 +58,10 @@ export class OneTimePasswordLoginFormComponent { @HostBinding('class.user-form') style = true; + constructor() { + useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow'); + } + onSubmit(): void { if (!this.form.valid) { this.form.markAllAsTouched(); diff --git a/feature-libs/user/profile/components/register/register.component.ts b/feature-libs/user/profile/components/register/register.component.ts index 88e4ddeaf4e..c1a598e7e5f 100644 --- a/feature-libs/user/profile/components/register/register.component.ts +++ b/feature-libs/user/profile/components/register/register.component.ts @@ -24,6 +24,7 @@ import { GlobalMessageType, OAuthFlow, RoutingService, + useFeatureStyles, } from '@spartacus/core'; import { CustomFormValidators, sortTitles } from '@spartacus/storefront'; import { Title, UserSignUp } from '@spartacus/user/profile/root'; @@ -118,7 +119,9 @@ export class RegisterComponent implements OnInit, OnDestroy { protected anonymousConsentsConfig: AnonymousConsentsConfig, protected authConfigService: AuthConfigService, protected registerComponentService: RegisterComponentService - ) {} + ) { + useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow'); + } ngOnInit() { this.titles$ = this.registerComponentService.getTitles().pipe( diff --git a/feature-libs/user/profile/components/reset-password/reset-password.component.ts b/feature-libs/user/profile/components/reset-password/reset-password.component.ts index d31bd92fbfc..a2cca056396 100644 --- a/feature-libs/user/profile/components/reset-password/reset-password.component.ts +++ b/feature-libs/user/profile/components/reset-password/reset-password.component.ts @@ -6,6 +6,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; +import { useFeatureStyles } from '@spartacus/core'; import { Observable } from 'rxjs'; import { ResetPasswordComponentService } from './reset-password-component.service'; @@ -21,7 +22,9 @@ export class ResetPasswordComponent { token$: Observable = this.service.resetToken$; - constructor(protected service: ResetPasswordComponentService) {} + constructor(protected service: ResetPasswordComponentService) { + useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow'); + } onSubmit(token: string) { this.service.resetPassword(token); diff --git a/feature-libs/user/profile/components/update-email/update-email.component.ts b/feature-libs/user/profile/components/update-email/update-email.component.ts index 209b0ff20bc..16dd3a48785 100644 --- a/feature-libs/user/profile/components/update-email/update-email.component.ts +++ b/feature-libs/user/profile/components/update-email/update-email.component.ts @@ -6,6 +6,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; +import { useFeatureStyles } from '@spartacus/core'; import { Observable } from 'rxjs'; import { UpdateEmailComponentService } from './update-email-component.service'; @@ -16,7 +17,9 @@ import { UpdateEmailComponentService } from './update-email-component.service'; host: { class: 'user-form' }, }) export class UpdateEmailComponent { - constructor(protected service: UpdateEmailComponentService) {} + constructor(protected service: UpdateEmailComponentService) { + useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow'); + } form: UntypedFormGroup = this.service.form; isUpdating$: Observable = this.service.isUpdating$; diff --git a/feature-libs/user/profile/components/update-password/my-account-v2-password.component.ts b/feature-libs/user/profile/components/update-password/my-account-v2-password.component.ts index c63b91a0d53..95f3e047f2f 100644 --- a/feature-libs/user/profile/components/update-password/my-account-v2-password.component.ts +++ b/feature-libs/user/profile/components/update-password/my-account-v2-password.component.ts @@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; -import { GlobalMessageType } from '@spartacus/core'; +import { GlobalMessageType, useFeatureStyles } from '@spartacus/core'; import { Observable } from 'rxjs'; import { UpdatePasswordComponentService } from './update-password-component.service'; @@ -26,6 +26,10 @@ export class MyAccountV2PasswordComponent { form: UntypedFormGroup = this.service.form; isUpdating$: Observable = this.service.isUpdating$; + constructor() { + useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow'); + } + onSubmit(): void { this.service.updatePassword(); } diff --git a/feature-libs/user/profile/components/update-password/update-password.component.ts b/feature-libs/user/profile/components/update-password/update-password.component.ts index a5c6b4ceffb..c0278f3f0b9 100644 --- a/feature-libs/user/profile/components/update-password/update-password.component.ts +++ b/feature-libs/user/profile/components/update-password/update-password.component.ts @@ -11,9 +11,9 @@ import { inject, } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; +import { RoutingService, useFeatureStyles } from '@spartacus/core'; import { Observable } from 'rxjs'; import { UpdatePasswordComponentService } from './update-password-component.service'; -import { RoutingService } from '@spartacus/core'; @Component({ selector: 'cx-update-password', @@ -26,7 +26,9 @@ export class UpdatePasswordComponent { optional: true, }); - constructor(protected service: UpdatePasswordComponentService) {} + constructor(protected service: UpdatePasswordComponentService) { + useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow'); + } form: UntypedFormGroup = this.service.form; isUpdating$: Observable = this.service.isUpdating$; diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts index 1609200e2f5..c2c3774f459 100644 --- a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts +++ b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts @@ -582,6 +582,11 @@ export interface FeatureTogglesInterface { */ a11ySearchBoxFocusOnEscape?: boolean; + /** + * Stops the inputs value from obstructing the 'PasswordVisibilityToggleComponent'. + */ + a11yPasswordVisibliltyBtnValueOverflow?: boolean; + /** * `StoreComponent and MyPreferredStoreComponent` an icon in a button that triggers showing * store's opening hours has an acceptable contrast ratio in a default theme @@ -760,6 +765,7 @@ export const defaultFeatureToggles: Required = { a11yDialogTriggerRefocus: false, a11yAddToWishlistFocus: false, a11ySearchBoxFocusOnEscape: false, + a11yPasswordVisibliltyBtnValueOverflow: false, a11yViewHoursButtonIconContrast: false, occCartNameAndDescriptionInHttpRequestBody: false, cmsBottomHeaderSlotUsingFlexStyles: false, diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index 766e942f566..ef101805836 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -376,6 +376,7 @@ if (environment.cpq) { a11yDialogTriggerRefocus: true, a11yAddToWishlistFocus: true, a11ySearchBoxFocusOnEscape: true, + a11yPasswordVisibliltyBtnValueOverflow: true, a11yViewHoursButtonIconContrast: true, cmsBottomHeaderSlotUsingFlexStyles: true, useSiteThemeService: false, diff --git a/projects/storefrontstyles/scss/cxbase/blocks/forms.scss b/projects/storefrontstyles/scss/cxbase/blocks/forms.scss index 50240ed2934..6abe7309592 100644 --- a/projects/storefrontstyles/scss/cxbase/blocks/forms.scss +++ b/projects/storefrontstyles/scss/cxbase/blocks/forms.scss @@ -503,3 +503,12 @@ form { } } } + +input[cxpasswordvisibilityswitch] { + @include forFeature('a11yPasswordVisibliltyBtnValueOverflow') { + $password-visibbility-btn-width: 30px; + padding-inline-end: calc( + $password-visibbility-btn-width + $input-padding-x + ); + } +}