fix: Add asterisks to customer id, roles and rights required input fields (#21369)

Closes: https://jira.tools.sap/browse/CXSPA-12700, https://jira.tools.sap/browse/CXSPA-12701, https://jira.tools.sap/browse/CXSPA-12725, https://jira.tools.sap/browse/CXSPA-12727

Author: Zeyber

feature-libs/organization/administration/components/user/form/user-form.component.html

@@ -100,6 +100,7 @@
     <fieldset required="true" class="full-width" formArrayName="roles">
       <legend class="label-content required">
         {{ 'orgUser.roles' | cxTranslate }}
+        <cx-form-required-asterisks *cxFeature="'showRequiredAsterisks'" />
       </legend>
 
       <label
@@ -123,6 +124,7 @@
     <fieldset required="true" class="full-width">
       <legend class="label-content required">
         {{ 'orgUser.rights' | cxTranslate }}
+        <cx-form-required-asterisks *cxFeature="'showRequiredAsterisks'" />
       </legend>
 
       <label

feature-libs/organization/administration/components/user/form/user-form.component.ts

@@ -23,6 +23,7 @@ import {
   B2BUser,
   B2BUserRight,
   B2BUserRole,
+  FeatureDirective,
   Title,
   TranslatePipe,
 } from '@spartacus/core';
@@ -72,6 +73,7 @@ import { UserItemService } from '../services/user-item.service';
     NgFor,
     AsyncPipe,
     TranslatePipe,
+    FeatureDirective,
   ],
 })
 export class UserFormComponent implements OnInit {

feature-libs/user/profile/components/update-profile/update-profile.component.html

@@ -79,9 +79,10 @@
   </label>
 
   <label>
-    <span class="label-content">{{
-      'updateProfileForm.customerId' | cxTranslate
-    }}</span>
+    <span class="label-content"
+      >{{ 'updateProfileForm.customerId' | cxTranslate }}
+      <cx-form-required-asterisks *cxFeature="'showRequiredAsterisks'" />
+    </span>
     <input
       required="true"
       type="text"

feature-libs/user/profile/components/update-profile/update-profile.component.ts

@@ -17,7 +17,11 @@ import {
   UntypedFormGroup,
 } from '@angular/forms';
 import { NgOptionComponent, NgSelectComponent } from '@ng-select/ng-select';
-import { RoutingService, TranslatePipe } from '@spartacus/core';
+import {
+  FeatureDirective,
+  RoutingService,
+  TranslatePipe,
+} from '@spartacus/core';
 import {
   FormErrorsComponent,
   FormRequiredAsterisksComponent,
@@ -48,6 +52,7 @@ import { UpdateProfileComponentService } from './update-profile-component.servic
     FormErrorsComponent,
     AsyncPipe,
     TranslatePipe,
+    FeatureDirective,
   ],
 })
 export class UpdateProfileComponent {

projects/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -464,6 +464,11 @@ export interface FeatureTogglesInterface {
    * Requires the corresponding OCC endpoint to be available on the backend (from 2211.28 version).
    */
   enableRemoveVoucherEndpoint?: boolean;
+
+  /**
+   * When enabled, displays required field asterisks for form fields.
+   */
+  showRequiredAsterisks?: boolean;
 }
 
 export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
@@ -519,4 +524,5 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yVocalizeDropdownItemCount: false,
   useEnhancedSecurePasswordValidators: false,
   enableRemoveVoucherEndpoint: false,
+  showRequiredAsterisks: false,
 };

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -348,6 +348,7 @@ if (environment.cpq) {
         a11yVocalizeDropdownItemCount: true,
         useEnhancedSecurePasswordValidators: true,
         enableRemoveVoucherEndpoint: true,
+        showRequiredAsterisks: true,
       };
       return appFeatureToggles;
     }),