impr(input-indicator): add input indicator to all fields with validators (@Leonabcd123) (#7918)

Remove the `showIndicator` property from `InputField`, instead check
whether `validators` exists to decide whether we should show the input
indicator.

---------

Co-authored-by: Christian Fehmer <fehmer@users.noreply.github.com>

Author: Leonabcd123

frontend/__tests__/components/ui/form/InputField.spec.tsx

@@ -83,12 +83,10 @@ describe("InputField", () => {
     expect(screen.getByRole("textbox")).toBeDisabled();
   });
 
-  it("shows FieldIndicator when showIndicator is true", () => {
+  it("shows FieldIndicator", () => {
     const field = makeField("name");
     field.state.meta.isValidating = true;
-    const { container } = render(() => (
-      <InputField field={() => field} showIndicator />
-    ));
+    const { container } = render(() => <InputField field={() => field} />);
 
     expect(container.querySelector(".fa-circle-notch")).toBeInTheDocument();
   });

frontend/src/ts/components/pages/login/Register.tsx

@@ -166,7 +166,6 @@ export function Register(): JSXElement {
             <InputField
               field={field}
               placeholder="username"
-              showIndicator
               autocomplete="new-username"
               disabled={!getLoginPageInputsEnabled()}
             />
@@ -187,7 +186,6 @@ export function Register(): JSXElement {
             <InputField
               field={field}
               placeholder="email"
-              showIndicator
               autocomplete="new-email"
               disabled={!getLoginPageInputsEnabled()}
               onFocus={() => {
@@ -214,7 +212,6 @@ export function Register(): JSXElement {
           children={(field) => (
             <InputField
               field={field}
-              showIndicator
               autocomplete="verify-email"
               placeholder="verify email"
               disabled={!getLoginPageInputsEnabled()}
@@ -238,7 +235,6 @@ export function Register(): JSXElement {
             <InputField
               field={field}
               placeholder="password"
-              showIndicator
               autocomplete="new-password"
               type="password"
               disabled={!getLoginPageInputsEnabled()}
@@ -256,7 +252,6 @@ export function Register(): JSXElement {
           children={(field) => (
             <InputField
               field={field}
-              showIndicator
               placeholder="verify password"
               autocomplete="verify-password"
               type="password"

frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx

@@ -86,7 +86,6 @@ export function ProfileSearchPage(): JSXElement {
                   <InputField
                     field={field}
                     placeholder="username"
-                    showIndicator
                     autocomplete="new-username"
                     disabled={!isEditable()}
                   />

frontend/src/ts/components/ui/form/InputField.tsx

@@ -7,7 +7,6 @@ import { FieldIndicator } from "./FieldIndicator";
 export function InputField(props: {
   field: Accessor<AnyFieldApi>;
   placeholder?: string;
-  showIndicator?: boolean;
   autocomplete?: string;
   type?: string;
   disabled?: boolean;
@@ -24,7 +23,7 @@ export function InputField(props: {
           "rounded border-none bg-sub-alt p-[0.5em] text-em-base leading-[1.25em] caret-main outline-none",
           "focus-visible:shadow-[0_0_0_0.1rem_var(--bg-color),0_0_0_0.2rem_var(--text-color)]",
           "autofill-fix",
-          props.showIndicator === true ? "pr-[1.85em]" : "",
+          props.field().options.validators ? "pr-[1.85em]" : "",
           props.class,
         )}
         type={props.type ?? "text"}
@@ -40,7 +39,7 @@ export function InputField(props: {
         dir={props.dir}
         maxLength={props.maxLength}
       />
-      <Show when={props.showIndicator}>
+      <Show when={props.field().options.validators}>
         <FieldIndicator field={props.field()} />
       </Show>
     </div>

frontend/storybook/stories/Form.stories.tsx

@@ -64,7 +64,6 @@ export const withValidation = meta.story({
           children={(field) => (
             <InputField
               field={field}
-              showIndicator
               autocomplete="current-user"
               disabled={!isEditable()}
             />
@@ -79,7 +78,6 @@ export const withValidation = meta.story({
             <InputField
               field={field}
               type="password"
-              showIndicator
               autocomplete="current-password"
               disabled={!isEditable()}
             />