[web] Misc. CIAM fixes (#30196)

* Remove focused style from the stepper

* Reduce spacing between password input and password policy

* Make input validation icon larger

* Make animated-tick.svg faster

* Move notification to below h1

* Move notification to below h1

* Fix: Warning: Invalid DOM property `autocomplete`. Did you mean `autoComplete`?

* Wrap form-text in a span so it's displayed correctly and not altered by flex

* Remove "Please request a new password reset email and follow the link." text after the email is entered

* Remove (unnecessary?) flex property on .ciam-form-text-icon

* Rename `messageTextNode` to `messageTextSpan`

* Revert changes to input-validator.ts

GitOrigin-RevId: ad83c92a59b9dbc872cf4e49362b0baec9fb5b93

services/web/app/views/user/passwordResetCiam.pug

@@ -43,11 +43,9 @@ block content
 				)
 					if error === 'password_reset_token_expired'
 						h1 #{translate("sorry_your_token_expired")}
-						p.intro-p #{translate('please_request_a_new_password_reset_email_and_follow_the_link')}.
 					else
 						h1(data-ol-not-sent) #{translate("reset_your_password")}
 						h1(hidden data-ol-sent) #{translate("check_your_inbox")} 
-						p.intro-p(data-ol-not-sent) #{translate("enter_your_email_and_we_will_send_reset_instructions")}
 
 					div(data-ol-not-sent)
 						+formMessagesNewStyle
@@ -57,7 +55,14 @@ block content
 
 						div(data-ol-custom-form-message='no-password-allowed-due-to-sso' hidden)
 							+ciamErrorNotification
-								p !{translate('you_cant_reset_password_due_to_sso', {}, [{name: 'a', attrs: {href: '/sso-login'}}])}
+								p !{translate('you_cant_reset_password_due_to_sso', {}, [{ name: 'a', attrs: { href: '/sso-login' } }])}
+
+					if error === 'password_reset_token_expired'
+						p.intro-p(data-ol-not-sent) #{translate('please_request_a_new_password_reset_email_and_follow_the_link')}.
+					else
+						p.intro-p(data-ol-not-sent) #{translate("enter_your_email_and_we_will_send_reset_instructions")}
+
+					div(data-ol-not-sent)
 						input(name='_csrf' type='hidden' value=csrfToken)
 						.form-group.form-group-ds
 							label.form-label(for='email') #{translate("email")}

services/web/frontend/js/features/settings/components/emails/ciam-six-digits-input.tsx

@@ -37,7 +37,7 @@ const CIAMSixDigitsInput = forwardRef<
         )}
         maxLength={7}
         inputMode="numeric"
-        autocomplete="off"
+        autoComplete="off"
         data-1p-ignore
       />
       {group1.length > 0 && (

services/web/frontend/js/features/settings/components/emails/confirm-email-form.tsx

@@ -207,6 +207,15 @@ export function ConfirmEmailForm({
 
   const NotificationComponent = isCiam ? DSNotification : Notification
 
+  const outerErrorEl = (feedback?.type === 'alert' || outerErrorDisplay) && (
+    <NotificationComponent
+      ariaLive="polite"
+      className="confirm-email-alert"
+      type={outerErrorDisplay ? 'error' : feedback!.style}
+      content={outerErrorDisplay || <ErrorMessage error={feedback!.message!} />}
+    />
+  )
+
   return (
     <form
       onSubmit={submitHandler}
@@ -215,16 +224,7 @@ export function ConfirmEmailForm({
       data-testid="confirm-email-form"
     >
       <div className="confirm-email-form-inner">
-        {(feedback?.type === 'alert' || outerErrorDisplay) && (
-          <NotificationComponent
-            ariaLive="polite"
-            className="confirm-email-alert"
-            type={outerErrorDisplay ? 'error' : feedback!.style}
-            content={
-              outerErrorDisplay || <ErrorMessage error={feedback!.message!} />
-            }
-          />
-        )}
+        {!isCiam && outerErrorEl}
 
         <Title
           isModal={isModal}
@@ -233,6 +233,8 @@ export function ConfirmEmailForm({
           outerErrorDisplay={outerErrorDisplay}
         />
 
+        {isCiam && outerErrorEl}
+
         {isCiam && <p>{longLabel}</p>}
 
         {isCiam ? (

services/web/frontend/js/shared/components/ciam-stepper.tsx

@@ -17,7 +17,6 @@ export function CiamStepper({
         aria-label={t('progress_bar_percentage')}
         aria-valuenow={active + 1}
         aria-valuemax={steps}
-        tabIndex={0}
       >
         {Array.from({ length: steps }).map((_, i) => (
           <div

services/web/frontend/js/shared/components/ds/ds-form-text.tsx

@@ -50,7 +50,7 @@ function DSFormText({
     >
       <span className="form-text-inner-ds">
         <FormTextIcon type={type} />
-        {children}
+        <span>{children}</span>
       </span>
     </Form.Text>
   )

services/web/frontend/js/shared/components/form/form-text.tsx

@@ -51,7 +51,7 @@ function FormText({
     >
       <span className="form-text-inner">
         <FormTextIcon type={type} />
-        {children}
+        <span>{children}</span>
       </span>
     </Form.Text>
   )

services/web/frontend/stylesheets/ciam/ciam-password-reset.scss

@@ -16,8 +16,8 @@
     color: var(--ds-color-text-secondary);
   }
 
-  .form-group-ds {
-    margin-bottom: var(--ds-spacing-400);
+  &.ciam-password-set .form-group-ds {
+    margin-bottom: var(--ds-spacing-200);
   }
 
   .actions {

services/web/frontend/stylesheets/ds/components/form-control.scss

@@ -113,6 +113,7 @@ input.form-control.form-control-ds {
   }
 
   .ciam-form-text-icon {
+    display: block;
     font-size: math.div(20em, 14);
   }
 }