Improve StrongForm validation UX and text input styling

apps/cyberstorm-remix/app/commonComponents/RequiredIndicator/RequiredIndicator.tsx

@@ -0,0 +1,20 @@
+import { memo } from "react";
+
+export interface RequiredIndicatorProps {
+  title?: string;
+  className?: string;
+}
+
+export const RequiredIndicator = memo(function RequiredIndicator(
+  props: RequiredIndicatorProps
+) {
+  const { title = "Required", className } = props;
+
+  return (
+    <span aria-hidden="true" title={title} className={className}>
+      *
+    </span>
+  );
+});
+
+RequiredIndicator.displayName = "RequiredIndicator";

apps/cyberstorm-remix/app/settings/teams/Teams.tsx

@@ -15,6 +15,7 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useReducer, useState } from "react";
 import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
+import { RequiredIndicator } from "~/commonComponents/RequiredIndicator/RequiredIndicator";
 import {
   type RequestConfig,
   teamCreate,
@@ -183,6 +184,8 @@ function CreateTeamForm(props: { config: () => RequestConfig }) {
     },
   });
 
+  const teamNameFieldProps = strongForm.getFieldComponentProps("name");
+
   const [open, setOpen] = useState(false);
 
   return (
@@ -208,9 +211,10 @@ function CreateTeamForm(props: { config: () => RequestConfig }) {
         </div>
         <div className="create-team-form__input">
           <label className="create-team-form__label" htmlFor="teamName">
-            Team Name
+            Team Name <RequiredIndicator />
           </label>
           <NewTextInput
+            value={formInputs.name}
             onChange={(v) =>
               updateFormFieldState({
                 field: "name",
@@ -219,6 +223,8 @@ function CreateTeamForm(props: { config: () => RequestConfig }) {
             }
             placeholder={"MyCoolTeam"}
             id="teamName"
+            required
+            {...teamNameFieldProps}
           />
         </div>
       </Modal.Body>

apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/MemberAddForm.tsx

@@ -18,6 +18,7 @@ import {
 } from "@thunderstore/thunderstore-api";
 
 import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
+import { RequiredIndicator } from "~/commonComponents/RequiredIndicator/RequiredIndicator";
 
 const roleOptions: SelectOption<"owner" | "member">[] = [
   { value: "member", label: "Member" },
@@ -95,6 +96,8 @@ export function MemberAddForm(props: {
     },
   });
 
+  const usernameFieldProps = strongForm.getFieldComponentProps("username");
+
   return (
     <Modal
       open={open}
@@ -121,7 +124,7 @@ export function MemberAddForm(props: {
         <div className="add-member-form__fields">
           <div className="add-member-form__field add-member-form__username">
             <label className="add-member-form__label" htmlFor="username">
-              Username
+              Username <RequiredIndicator />
             </label>
             <NewTextInput
               name={"username"}
@@ -136,6 +139,8 @@ export function MemberAddForm(props: {
               }}
               rootClasses="add-member-form__username-input"
               id="username"
+              required
+              {...usernameFieldProps}
             />
             {error && <div className="add-member-form__error">{error}</div>}
           </div>

apps/cyberstorm-remix/app/settings/teams/team/tabs/Profile/Profile.tsx

@@ -15,6 +15,7 @@ import {
 
 import { type OutletContextShape } from "app/root";
 import { makeTeamSettingsTabLoader } from "cyberstorm/utils/dapperClientLoaders";
+import { isTeamOwner } from "cyberstorm/utils/permissions";
 import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
 import "./Profile.css";
 
@@ -49,6 +50,8 @@ function ProfileForm(props: { team: TeamDetails }) {
   const revalidator = useRevalidator();
   const toast = useToast();
 
+  const formDisabled = !isTeamOwner(team.name, outletContext.currentUser);
+
   function formFieldUpdateAction(
     state: TeamDetailsEditRequestData,
     action: {
@@ -131,10 +134,15 @@ function ProfileForm(props: { team: TeamDetails }) {
                 })
               }
               rootClasses="team-profile__input"
+              disabled={formDisabled}
             />
           </div>
         </div>
-        <NewButton rootClasses="team-profile__save" onClick={strongForm.submit}>
+        <NewButton
+          rootClasses="team-profile__save"
+          onClick={strongForm.submit}
+          disabled={formDisabled}
+        >
           Save changes
         </NewButton>
       </div>

apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccounts.tsx

@@ -25,6 +25,7 @@ import { type OutletContextShape } from "app/root";
 import { makeTeamSettingsTabLoader } from "cyberstorm/utils/dapperClientLoaders";
 import { isTeamOwner } from "cyberstorm/utils/permissions";
 import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
+import { RequiredIndicator } from "~/commonComponents/RequiredIndicator/RequiredIndicator";
 import { ServiceAccountsTable } from "./ServiceAccountsTable";
 import "./ServiceAccounts.css";
 
@@ -154,6 +155,8 @@ function AddServiceAccountForm(props: {
     },
   });
 
+  const nicknameFieldProps = strongForm.getFieldComponentProps("nickname");
+
   const handleOpenChange = (nextOpen: boolean) => {
     setOpen(nextOpen);
     if (!nextOpen) {
@@ -197,46 +200,47 @@ function AddServiceAccountForm(props: {
           </NewAlert>
         </Modal.Body>
       ) : (
-        <Modal.Body>
-          <form
-            className="service-accounts__form"
-            onSubmit={(e) => {
-              e.preventDefault();
-              if (strongForm.isReady) {
-                strongForm.submit();
-              }
-            }}
-          >
-            <div>
-              Enter the nickname of the service account you wish to add to the
-              team <span>{props.teamName}</span>
-            </div>
-            <div className="service-accounts__nickname-input">
-              <NewTextInput
-                value={formInputs.nickname}
-                onChange={(e) => {
-                  updateFormFieldState({
-                    field: "nickname",
-                    value: e.target.value,
-                  });
-                }}
-                placeholder={"ExampleName"}
-                maxLength={32}
-              />
-              <div className="service-accounts__nickname-input-max-length">
-                Max. 32 characters
+        <>
+          <Modal.Body>
+            <div className="service-accounts__form">
+              <div>
+                Enter the nickname of the service account you wish to add to the
+                team <span>{props.teamName}</span>
               </div>
+              <label htmlFor="serviceAccountNickname">
+                Nickname <RequiredIndicator />
+              </label>
+              <div className="service-accounts__nickname-input">
+                <NewTextInput
+                  id="serviceAccountNickname"
+                  value={formInputs.nickname}
+                  onChange={(e) => {
+                    updateFormFieldState({
+                      field: "nickname",
+                      value: e.target.value,
+                    });
+                  }}
+                  placeholder={"ExampleName"}
+                  maxLength={32}
+                  required
+                  {...nicknameFieldProps}
+                />
+                <div className="service-accounts__nickname-input-max-length">
+                  Max. 32 characters
+                </div>
+              </div>
+              {error && <NewAlert csVariant="danger">{error}</NewAlert>}
             </div>
-            {error && <NewAlert csVariant="danger">{error}</NewAlert>}
-          </form>
-        </Modal.Body>
-      )}
-      {serviceAccountAdded ? null : (
-        <Modal.Footer>
-          <NewButton onClick={strongForm.submit} disabled={!strongForm.isReady}>
-            Add Service Account
-          </NewButton>
-        </Modal.Footer>
+          </Modal.Body>
+          <Modal.Footer>
+            <NewButton
+              onClick={strongForm.submit}
+              disabled={!strongForm.isReady}
+            >
+              Add Service Account
+            </NewButton>
+          </Modal.Footer>
+        </>
       )}
     </Modal>
   );

apps/cyberstorm-remix/cyberstorm/utils/StrongForm/useStrongForm.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   ParseError,
   RequestBodyParseError,
@@ -57,20 +57,105 @@ export function useStrongForm<
   const [submitOutput, setSubmitOutput] = useState<SubmissionOutput>();
   const [submitError, setSubmitError] = useState<SubmissionError>();
   const [inputErrors, setInputErrors] = useState<InputErrors>();
+  const [fieldInteractions, setFieldInteractions] = useState<
+    Partial<
+      Record<
+        keyof Inputs,
+        {
+          hasFocused: boolean;
+          hasBlurred: boolean;
+        }
+      >
+    >
+  >({});
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false);
+
+  const isValueEmpty = (value: unknown) => {
+    if (typeof value === "string") {
+      return value.trim() === "";
+    }
+    return value === undefined || value === null;
+  };
 
   const isReady = useMemo(() => {
     if (!props.validators) return true;
     for (const key in props.validators) {
       const validator = props.validators[key];
-      const value = props.inputs[key];
+      const value = props.inputs[key as keyof Inputs];
       // NOTE: Expand the checks as more validators are added
-      if (validator?.required) {
-        if (typeof value === "string" && value.trim() === "") return false;
-        if (value === undefined || value === null) return false;
+      if (validator?.required && isValueEmpty(value)) {
+        return false;
       }
     }
     return true;
-  }, [props.inputs]);
+  }, [props.inputs, props.validators]);
+
+  const getFieldState = useCallback(
+    <K extends keyof Inputs>(field: K) => {
+      const validator = props.validators?.[field];
+      const value = props.inputs[field];
+      const isRequired = Boolean(validator?.required);
+      const rawInvalid = isRequired && isValueEmpty(value);
+      const interactions = fieldInteractions[field];
+      const hasFinishedInteraction =
+        Boolean(interactions?.hasFocused && interactions?.hasBlurred) ||
+        hasAttemptedSubmit;
+      const isInvalid = rawInvalid && hasFinishedInteraction;
+      return {
+        isRequired,
+        isInvalid,
+      };
+    },
+    [fieldInteractions, hasAttemptedSubmit, props.inputs, props.validators]
+  );
+
+  const markFieldInteraction = useCallback(
+    (field: keyof Inputs, type: "focus" | "blur") => {
+      setFieldInteractions((prev) => {
+        const current = prev[field] ?? { hasFocused: false, hasBlurred: false };
+        const next =
+          type === "focus"
+            ? { ...current, hasFocused: true }
+            : { ...current, hasBlurred: true };
+        if (
+          current.hasFocused === next.hasFocused &&
+          current.hasBlurred === next.hasBlurred
+        ) {
+          return prev;
+        }
+        return { ...prev, [field]: next };
+      });
+    },
+    []
+  );
+
+  const getFieldInteractionProps = useCallback(
+    (field: keyof Inputs) => ({
+      onFocus: () => markFieldInteraction(field, "focus"),
+      onBlur: () => markFieldInteraction(field, "blur"),
+    }),
+    [markFieldInteraction]
+  );
+
+  const getFieldComponentProps = useCallback(
+    (field: keyof Inputs, options?: { disabled?: boolean }) => {
+      const fieldState = getFieldState(field);
+      const modifiers: ("invalid" | "disabled")[] = [];
+      if (fieldState.isInvalid) {
+        modifiers.push("invalid" as const);
+      }
+      if (options?.disabled) {
+        modifiers.push("disabled" as const);
+      }
+      const interactionProps = getFieldInteractionProps(field);
+      return {
+        ...interactionProps,
+        "aria-invalid": fieldState.isInvalid,
+        csModifiers: modifiers,
+      };
+    },
+    [getFieldInteractionProps, getFieldState]
+  );
 
   useEffect(() => {
     if (refining || submitting) {
@@ -106,6 +191,7 @@ export function useStrongForm<
   }, [props.inputs]);
 
   const submit = async () => {
+    setHasAttemptedSubmit(true);
     if (submitting) {
       const error = new Error("Form is already submitting!");
       if (props.onSubmitError) {
@@ -193,5 +279,8 @@ export function useStrongForm<
     refineError,
     inputErrors,
     isReady,
+    getFieldState,
+    getFieldInteractionProps,
+    getFieldComponentProps,
   };
 }