Fix password mismatch flash in authentication

[nicksan222]

This pull request fixes the brief “Passwords do not match” validation flash during successful Ory authentication flows. Password mismatch detection remains centralized in a dedicated hook and still requires the confirmation field whenever it is present. On submission, the confirmation state is reset and mismatch feedback is suppressed while the form is submitting.

This fixes l3montree-dev/devguard#2117

[Copilot]

Pull request overview

This PR addresses the “passwords do not match” flash during Ory authentication flows by moving password mismatch detection out of UI components into a dedicated React Hook Form-based hook, and updating affected UI + tests accordingly (related to issue #2117).

Changes:

• Introduces usePasswordMismatch hook to centralize mismatch detection and handle the “Ory clears password after submit” case.
• Updates Ory flow components to import and use the new hook instead of an inline implementation.
• Adds unit tests for the hook and extends an e2e test with an assertion about the mismatch message.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/hooks/usePasswordMismatch.ts	New hook encapsulating password mismatch detection logic.
src/hooks/usePasswordMismatch.test.tsx	Unit tests covering mismatch behavior and the “password cleared” scenario.
src/components/ory/flowcomponents/PasswordField.tsx	Removes the previously inlined usePasswordMismatch implementation.
src/components/ory/flowcomponents/Nodes/OryRegistrationInput.tsx	Switches to importing the hook from src/hooks.
src/components/ory/flowcomponents/Nodes/OryButton.tsx	Switches to importing the hook from src/hooks for submit disabling logic.
e2e/src/devguard-login-flow.e2e.spec.ts	Adds an assertion intended to ensure the mismatch message doesn’t appear.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[juliankepka]

Thanks for your Pull Request. Unfortunately this doesn't work.. The user is able to continue with the flow without using the "confirm password" field.

[juliankepka]

Thanks! Please remove all the unnecessary test files and rework the password logic.

I tried this solution. What do you think about this?

export function OryRegistrationInput(props: OryNodeInputProps) {
  const { node, attributes, onClick } = props;
  const {
    register,
    resetField,
    formState: { isSubmitting },
  } = useFormContext();
  const mismatch = usePasswordMismatch();
  const [confirmTouched, setConfirmTouched] = useState(false);
  const { value, name, autocomplete, maxlength, ...rest } = attributes;

  useEffect(() => {
    if (isSubmitting) {
      resetField("confirmPassword");
      setConfirmTouched(false);
    }
  }, [isSubmitting, resetField]);

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

[nicksan222]

@juliankepka thanks for the suggestions! 💯