[3828] Added reset form to clear formvalues#25
Conversation
Signed-off-by: Zeeshan Mehboob <zeeshan.mehboob@infosys.com>
📝 WalkthroughWalkthroughAuthentication component renderers now receive form-reset callbacks across shared contracts and React/Vue pipelines. Embedded non-submit actions reset local form state and submit empty data, while submit actions continue submitting collected form data. ChangesAuth form reset flow
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant AuthForm
participant ComponentRenderer
participant EmbeddedAction
participant SubmitHandler
AuthForm->>ComponentRenderer: provide resetForm
ComponentRenderer->>EmbeddedAction: render action with resetForm
EmbeddedAction->>AuthForm: reset on non-submit action
EmbeddedAction->>SubmitHandler: submit form data or empty data
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
packages/react/src/components/presentation/auth/AuthOptionFactory.tsx (1)
418-439: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winPrevent native form submission for Block submit buttons. The
Blockflow renders a real<form>with noonSubmit/preventDefault, and this button now usestype="submit"for submit events. Clicking it will trigger the browser’s form submit in addition tohandleClick, which can reload the page and drop SPA/auth state.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/react/src/components/presentation/auth/AuthOptionFactory.tsx` around lines 418 - 439, Prevent native form submission for Block-flow buttons by ensuring the Button rendered in the relevant auth option path does not use submit semantics when the surrounding form lacks submit handling. Update the type selection associated with handleClick/buttonType so Block buttons use type="button", while preserving submit behavior only where explicitly handled.packages/react/src/components/presentation/auth/SignIn/BaseSignIn.tsx (1)
351-361: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winresetForm doesn't clear
apiError/flow messages, unlike the Vue counterpart.
resetFormhere is justform.reset(), which only touchesuseForm's internal state (values/touched/errors).apiError(component-leveluseState) and flow messages are untouched. Compare with Vue'sBaseSignIn.tsresetForm(lines 293-304), which explicitly doesapiError.value = null; clearMessages();in addition to resetting field values. As a result, clicking Cancel/Back in React will leave a stale error message visible, while Vue correctly clears it.Proposed fix
+ const resetFormAndErrors = useCallback(() => { + resetForm(); + setApiError(null); + clearMessages(); + }, [resetForm, clearMessages]);Then pass
resetFormAndErrorsinstead ofresetFormtorenderSignInComponents.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/react/src/components/presentation/auth/SignIn/BaseSignIn.tsx` around lines 351 - 361, Update BaseSignIn’s reset handling so it clears both form state and component-level errors/flow messages: define a resetFormAndErrors handler that calls resetForm, sets apiError to null, and invokes clearMessages, then pass this handler to renderSignInComponents instead of resetForm.packages/react/src/components/presentation/auth/SignUp/BaseSignUp.tsx (1)
961-982: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winType
formproperly to fix the unsafe-argument lint error; resetForm also skips apiError/messages.Static analysis flags
resetFormasanybeing passed where() => voidis expected (line 970), becauseformis declared asconst form: any = useForm<Record<string, string>>(...)(line 469 area) instead ofReturnType<typeof useForm>as done inBaseSignIn.tsx. Typing it properly resolves the lint error and restores type safety for the whole destructured object.Separately,
resetForm(i.e.form.reset) won't clearapiError/flow messages, the same gap flagged inBaseSignIn.tsx— worth addressing together since this file also now feedsresetForminto the Cancel/Back button flow.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/react/src/components/presentation/auth/SignUp/BaseSignUp.tsx` around lines 961 - 982, Type the form instance in BaseSignUp using the return type of useForm instead of any, so the destructured resetForm and related values passed by renderComponents are type-safe. Update the reset flow used by renderComponents and the Cancel/Back actions to also clear apiError and flow messages, matching the behavior in BaseSignIn.Source: Linters/SAST tools
packages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.ts (1)
291-312: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winPrevent the generic submit button from triggering a native form submit.
Buttonforwardstypeto a real<button>, and the enclosing<form>has no submit guard, so the defaulttype="submit"path can reload the page instead of staying in Vue's click flow. Add a form submit preventer or stop the default action in the button handler.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.ts` around lines 291 - 312, Prevent the generic submit button from causing a native form submission by updating the button handling in AuthOptionFactoryCore, specifically the Button configuration around handleClick and buttonType. Add a form-level submit preventer or ensure the click handler calls preventDefault before continuing the Vue flow, while preserving intended button types and existing validation behavior.
🧹 Nitpick comments (4)
packages/vue/src/components/presentation/invite-user/BaseInviteUser.ts (1)
314-338: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueOptional:
resetFormandresetFlowshare partial reset logic; consider consolidating.
resetFlow(lines 314-325) already clearsformValues/formErrors/touchedFields/apiErroras part of a larger reset, and the newresetForm(327-338) duplicates that subset plusisFormValid. Also identical toBaseAcceptInvite.ts'sresetForm. Not urgent given the small size of each block, but a shared helper (e.g.resetFormState()) would reduce drift risk if reset semantics change later.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/vue/src/components/presentation/invite-user/BaseInviteUser.ts` around lines 314 - 338, Consolidate the duplicated form-state reset logic used by resetFlow and resetForm in BaseInviteUser.ts. Introduce a shared resetFormState helper for formValues, formErrors, touchedFields, and apiError, then call it from both resetFlow and resetForm while preserving resetForm’s isFormValid behavior; align with the equivalent resetForm implementation in BaseAcceptInvite.ts where appropriate.packages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.ts (1)
206-214: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winType
buttonTypeEnumexplicitly to resolve unsafe-assignment/member-access lint errors.ESLint flags unsafe member access on
EmbeddedFlowEventType.Submit/Reset/Cancel/Trigger/Backand an unsafe assignment forbuttonType, plus aprefer-nullish-coalescinghint on|| 'submit'. DeclaringbuttonTypeEnumwith an explicitRecord<string, HTMLButtonElement['type']>type resolves the assignment error, and switching to??addresses the coalescing hint.Proposed fix
- const buttonTypeEnum = { + const buttonTypeEnum: Record<string, HTMLButtonElement['type']> = { [EmbeddedFlowEventType.Submit]: 'submit', [EmbeddedFlowEventType.Reset]: 'reset', [EmbeddedFlowEventType.Cancel]: 'button', [EmbeddedFlowEventType.Trigger]: 'button', [EmbeddedFlowEventType.Back]: 'button', }; - const buttonType: HTMLButtonElement['type'] = buttonTypeEnum[eventType.toUpperCase()] || 'submit'; + const buttonType: HTMLButtonElement['type'] = buttonTypeEnum[eventType.toUpperCase()] ?? 'submit';🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.ts` around lines 206 - 214, Explicitly type the buttonTypeEnum mapping in the button-type selection logic as Record<string, HTMLButtonElement['type']> to eliminate unsafe member access and assignment lint errors, then replace the || 'submit' fallback with ?? 'submit' while preserving the existing event mappings.Source: Linters/SAST tools
packages/vue/src/components/auth/sign-up/BaseSignUp.ts (1)
276-292: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate field-rebuilding logic with
setupFormFields; minor nullish-coalescing fix available.This mirrors
setupFormFields(lines 226-236) almost exactly (rebuild values fromextractFormFields, reset touched/errors/validity), differing only in also clearingapiError. Consider havingresetFormcall/share logic withsetupFormFieldsto avoid drift. Separately, static analysis flagsprops.components || [](line 281) forprefer-nullish-coalescing; swapping to??is a safe, trivial fix.Suggested fix for the coalescing hint
- const fields: FieldDefinition[] = extractFormFields(props.components || []); + const fields: FieldDefinition[] = extractFormFields(props.components ?? []);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/vue/src/components/auth/sign-up/BaseSignUp.ts` around lines 276 - 292, Refactor resetForm and setupFormFields to share the common field/value, touched-state, error, and validity reset logic, while preserving resetForm’s apiError clearing; update the shared field extraction to use nullish coalescing (props.components ?? []) instead of ||. Use the existing resetForm and setupFormFields symbols to locate and consolidate the duplicated behavior.Source: Linters/SAST tools
packages/vue/src/components/auth/sign-in/BaseSignIn.ts (1)
289-305: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate field-rebuilding logic with the
watchcallback above.The
extractFormFields(...)→ buildfreshValues→ assign toformValues.valuesequence here duplicates thewatch(() => props.components, ...)callback (lines 188-200). Consider extracting a small helper (e.g.buildFreshValues(components)) used by both, so future changes to field initialization don't need to be kept in sync manually.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/vue/src/components/auth/sign-in/BaseSignIn.ts` around lines 289 - 305, Extract the shared field-initialization sequence from resetForm and the props.components watch callback into a helper such as buildFreshValues(components). Use this helper in both locations to assign formValues.value, while preserving resetForm’s touchedFields, submission, API error, and message resets.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/react/src/components/presentation/auth/AuthOptionFactory.tsx`:
- Around line 308-319: Replace the `|| 'submit'` fallback in the button type
assignment within the event-type handling logic with `?? 'submit'`, preserving
the existing nullish fallback behavior and resolving the lint warning.
In
`@packages/react/src/components/presentation/auth/InviteUser/BaseInviteUser.tsx`:
- Around line 556-564: Update the `resetForm` callback in `BaseInviteUser` to
also clear the API error state and restore form validity, matching the Vue
implementation: set `apiError` to null and `isFormValid` to true alongside the
existing form state resets.
---
Outside diff comments:
In `@packages/react/src/components/presentation/auth/AuthOptionFactory.tsx`:
- Around line 418-439: Prevent native form submission for Block-flow buttons by
ensuring the Button rendered in the relevant auth option path does not use
submit semantics when the surrounding form lacks submit handling. Update the
type selection associated with handleClick/buttonType so Block buttons use
type="button", while preserving submit behavior only where explicitly handled.
In `@packages/react/src/components/presentation/auth/SignIn/BaseSignIn.tsx`:
- Around line 351-361: Update BaseSignIn’s reset handling so it clears both form
state and component-level errors/flow messages: define a resetFormAndErrors
handler that calls resetForm, sets apiError to null, and invokes clearMessages,
then pass this handler to renderSignInComponents instead of resetForm.
In `@packages/react/src/components/presentation/auth/SignUp/BaseSignUp.tsx`:
- Around line 961-982: Type the form instance in BaseSignUp using the return
type of useForm instead of any, so the destructured resetForm and related values
passed by renderComponents are type-safe. Update the reset flow used by
renderComponents and the Cancel/Back actions to also clear apiError and flow
messages, matching the behavior in BaseSignIn.
In `@packages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.ts`:
- Around line 291-312: Prevent the generic submit button from causing a native
form submission by updating the button handling in AuthOptionFactoryCore,
specifically the Button configuration around handleClick and buttonType. Add a
form-level submit preventer or ensure the click handler calls preventDefault
before continuing the Vue flow, while preserving intended button types and
existing validation behavior.
---
Nitpick comments:
In `@packages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.ts`:
- Around line 206-214: Explicitly type the buttonTypeEnum mapping in the
button-type selection logic as Record<string, HTMLButtonElement['type']> to
eliminate unsafe member access and assignment lint errors, then replace the ||
'submit' fallback with ?? 'submit' while preserving the existing event mappings.
In `@packages/vue/src/components/auth/sign-in/BaseSignIn.ts`:
- Around line 289-305: Extract the shared field-initialization sequence from
resetForm and the props.components watch callback into a helper such as
buildFreshValues(components). Use this helper in both locations to assign
formValues.value, while preserving resetForm’s touchedFields, submission, API
error, and message resets.
In `@packages/vue/src/components/auth/sign-up/BaseSignUp.ts`:
- Around line 276-292: Refactor resetForm and setupFormFields to share the
common field/value, touched-state, error, and validity reset logic, while
preserving resetForm’s apiError clearing; update the shared field extraction to
use nullish coalescing (props.components ?? []) instead of ||. Use the existing
resetForm and setupFormFields symbols to locate and consolidate the duplicated
behavior.
In `@packages/vue/src/components/presentation/invite-user/BaseInviteUser.ts`:
- Around line 314-338: Consolidate the duplicated form-state reset logic used by
resetFlow and resetForm in BaseInviteUser.ts. Introduce a shared resetFormState
helper for formValues, formErrors, touchedFields, and apiError, then call it
from both resetFlow and resetForm while preserving resetForm’s isFormValid
behavior; align with the equivalent resetForm implementation in
BaseAcceptInvite.ts where appropriate.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 56b1e121-b3d6-463a-a37c-b7a1c7323d2b
📒 Files selected for processing (14)
packages/javascript/src/models/extensions/components.tspackages/react/src/components/presentation/auth/AcceptInvite/BaseAcceptInvite.tsxpackages/react/src/components/presentation/auth/AuthOptionFactory.tsxpackages/react/src/components/presentation/auth/InviteUser/BaseInviteUser.tsxpackages/react/src/components/presentation/auth/Recovery/BaseRecovery.tsxpackages/react/src/components/presentation/auth/SignIn/BaseSignIn.tsxpackages/react/src/components/presentation/auth/SignUp/BaseSignUp.tsxpackages/react/src/components/presentation/auth/__tests__/AuthOptionFactory.test.tsxpackages/react/src/contexts/ComponentRenderer/ComponentRendererContext.tspackages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.tspackages/vue/src/components/auth/sign-in/BaseSignIn.tspackages/vue/src/components/auth/sign-up/BaseSignUp.tspackages/vue/src/components/presentation/accept-invite/BaseAcceptInvite.tspackages/vue/src/components/presentation/invite-user/BaseInviteUser.ts
Signed-off-by: Zeeshan Mehboob <zeeshan.mehboob@infosys.com>
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/react/src/components/presentation/auth/AuthOptionFactory.tsx (1)
309-319: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winNormalize
eventTypeonce before branching.component.eventTypecan be empty, which still renders a submit button but routes the click handler through the non-submit path, resets the form, and submits{}. Reuse one normalized event value for validation, consent, and submit/reset handling.packages/react/src/components/presentation/auth/AuthOptionFactory.tsx:309-363🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/react/src/components/presentation/auth/AuthOptionFactory.tsx` around lines 309 - 319, Normalize component.eventType once to a valid EmbeddedFlowEventType before deriving shouldSkipValidation, button type, validation, consent, and click handling; default empty or unknown values to Submit so rendering and behavior remain consistent. Reuse this normalized value throughout the relevant AuthOptionFactory logic instead of repeatedly calling toUpperCase on the raw eventType.Source: Linters/SAST tools
packages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.ts (1)
204-214: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winDefault omitted action types to submit semantics.
eventType || ''falls through to the reset path, so the fallback submit button clears the form and callsonSubmitwith{}. Normalize the event toEmbeddedFlowEventType.Submitbefore these checks.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.ts` around lines 204 - 214, The event normalization currently allows an empty or missing event type to follow reset behavior. In the logic containing shouldSkipValidation and buttonTypeEnum, normalize eventType to EmbeddedFlowEventType.Submit before validation checks, action dispatch, and button-type selection so omitted actions use submit semantics and invoke onSubmit correctly.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/react/src/components/presentation/auth/AuthOptionFactory.tsx`:
- Around line 309-319: Normalize component.eventType once to a valid
EmbeddedFlowEventType before deriving shouldSkipValidation, button type,
validation, consent, and click handling; default empty or unknown values to
Submit so rendering and behavior remain consistent. Reuse this normalized value
throughout the relevant AuthOptionFactory logic instead of repeatedly calling
toUpperCase on the raw eventType.
In `@packages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.ts`:
- Around line 204-214: The event normalization currently allows an empty or
missing event type to follow reset behavior. In the logic containing
shouldSkipValidation and buttonTypeEnum, normalize eventType to
EmbeddedFlowEventType.Submit before validation checks, action dispatch, and
button-type selection so omitted actions use submit semantics and invoke
onSubmit correctly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: c459410c-de6e-4669-93b8-2d8b009beafd
📒 Files selected for processing (3)
packages/react/src/components/presentation/auth/AuthOptionFactory.tsxpackages/react/src/components/presentation/auth/InviteUser/BaseInviteUser.tsxpackages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/react/src/components/presentation/auth/InviteUser/BaseInviteUser.tsx
1 participant
Purpose
In certain flows (such as utilizing the flow graph to navigate backward to a previous node), two core issues occurred due to missing form-reset capabilities:
This PR introduces explicit form-reset handling and refines button behavior to ensure that backward navigation or cancellation actions do not trigger accidental form submissions, preserving the form state for subsequent visits.
Summary
Introduced a
resetFormmechanism to allow authentication components to explicitly reset their internal form state, and exposed it via context to support custom renderers. Additionally, enhanced button behavior by expanding supported event types (reset,cancel,back) with proper underlying HTML button type mappings to prevent accidental form submissions.Key Changes
Enhanced Button Event Handling & Form Protection:
submitandtriggerto now includereset,cancel, andback. (The core UI and interface for these were already present).submitmaps totype="submit",resetmaps totype="reset", and all other actions (likecancelorback) map totype="button".submitaction will process and submit actual form values, while other types simply handle their action or reset the form.submitto ensure existing implementations don't break.Factory Updates (
AuthOptionFactory):resetFormtocreateAuthComponentFromFlow.renderSignInComponents,renderSignupComponent,renderRecoveryComponents, andrenderInviteUserComponents.Context Exposure:
resetFormtoComponentRenderContext, making it accessible outside the factory and available for custom renderer components (e.g., inside anonSubmithandler).Base Component Integration:
resetFormfunctionality:BaseSignIn/BaseSignupBaseRecoveryBaseAcceptInvite/BaseInviteUserCross-Framework Parity:
Related Issues
Related PRs
Checklist
breaking changelabel added.Security checks
Summary by CodeRabbit
New Features
Behavior Updates
Tests