Skip to content

[3828] Added reset form to clear formvalues #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zesu22 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[3828] Added reset form to clear formvalues #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4113df1
[3828] added reset form to clear formvalues
zesu22 Jul 10, 2026
5b79a14
[3828] coderabbit comments resolved
zesu22 Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/javascript/src/models/extensions/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export interface ComponentRenderContext {
isFormValid: boolean;
isLoading: boolean;
meta?: FlowMetadataResponse | null;
resetForm?: () => void;
onInputBlur?: (name: string) => void;
onInputChange: (name: string, value: string) => void;
onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;
Expand Down
10 changes: 10 additions & 0 deletions packages/react/src/components/presentation/auth/AcceptInvite/BaseAcceptInvite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -660,6 +660,15 @@ const BaseAcceptInvite: FC<BaseAcceptInviteProps> = ({
],
);

/**
* reset form values, errors, and touched fields to initial state
*/
const resetForm = useCallback(() => {
setFormValues({});
setFormErrors({});
setTouchedFields({});
}, []);

/**
* Validate invite token on component mount.
*/
Expand Down Expand Up @@ -879,6 +888,7 @@ const BaseAcceptInvite: FC<BaseAcceptInviteProps> = ({
formErrors,
isLoading,
isFormValid,
resetForm,
handleInputChange,
{
_customRenderers: customRenderers,
Expand Down
33 changes: 31 additions & 2 deletions packages/react/src/components/presentation/auth/AuthOptionFactory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,7 @@ const createAuthComponentFromFlow = (
formErrors: Record<string, string>,
isLoading: boolean,
isFormValid: boolean,
resetForm: () => void,
onInputChange: (name: string, value: string) => void,
authType: AuthType,
options: {
Expand Down Expand Up @@ -230,6 +231,7 @@ const createAuthComponentFromFlow = (
isFormValid,
isLoading,
meta: options.meta,
resetForm,
onInputBlur: options.onInputBlur,
onInputChange,
onSubmit: options.onSubmit,
Expand Down Expand Up @@ -304,7 +306,17 @@ const createAuthComponentFromFlow = (
const componentVariant: string = component.variant || '';

// Only validate on submit type events.
const shouldSkipValidation: boolean = eventType.toUpperCase() === EmbeddedFlowEventType.Trigger;
const shouldSkipValidation: boolean = eventType.toUpperCase() !== EmbeddedFlowEventType.Submit;

// Determine the button type based on the event type. Default to 'submit' if not recognized.
const buttonTypeEnum = {
[EmbeddedFlowEventType.Submit]: 'submit',
[EmbeddedFlowEventType.Reset]: 'reset',
[EmbeddedFlowEventType.Cancel]: 'button',
[EmbeddedFlowEventType.Trigger]: 'button',
[EmbeddedFlowEventType.Back]: 'button',
};
const buttonType: HTMLButtonElement['type'] = buttonTypeEnum[eventType.toUpperCase()] ?? 'submit';

const handleClick = (): any => {
if (options.onSubmit) {
Expand Down Expand Up @@ -342,7 +354,13 @@ const createAuthComponentFromFlow = (
formData['consent_decisions'] = JSON.stringify(decisions);
}

options.onSubmit(component, formData, shouldSkipValidation);
// For submit events, pass the form data to the onSubmit callback. For other event types, reset the form and call onSubmit with an empty data object.
if (eventType.toUpperCase() === EmbeddedFlowEventType.Submit) {
options.onSubmit(component, formData, shouldSkipValidation);
} else {
resetForm();
options.onSubmit(component, {}, shouldSkipValidation);
}
}
};

Expand Down Expand Up @@ -415,6 +433,7 @@ const createAuthComponentFromFlow = (
color={component.variant?.toLowerCase() === 'primary' ? 'primary' : 'secondary'}
startIcon={startIconEl}
endIcon={endIconEl}
type={buttonType}
>
{buttonText || 'Submit'}
</Button>
Expand Down Expand Up @@ -520,6 +539,7 @@ const createAuthComponentFromFlow = (
formErrors,
isLoading,
isFormValid,
resetForm,
onInputChange,
authType,
{
Expand Down Expand Up @@ -672,6 +692,7 @@ const createAuthComponentFromFlow = (
formErrors,
isLoading,
isFormValid,
resetForm,
onInputChange,
authType,
{
Expand Down Expand Up @@ -736,6 +757,7 @@ export const renderSignInComponents = (
formErrors: Record<string, string>,
isLoading: boolean,
isFormValid: boolean,
resetForm: () => void,
onInputChange: (name: string, value: string) => void,
options?: {
/** @internal */
Expand Down Expand Up @@ -767,6 +789,7 @@ export const renderSignInComponents = (
formErrors,
isLoading,
isFormValid,
resetForm,
onInputChange,
'signin',
{
Expand All @@ -787,6 +810,7 @@ export const renderSignUpComponents = (
formErrors: Record<string, string>,
isLoading: boolean,
isFormValid: boolean,
resetForm: () => void,
onInputChange: (name: string, value: string) => void,
options?: {
/** @internal */
Expand Down Expand Up @@ -816,6 +840,7 @@ export const renderSignUpComponents = (
formErrors,
isLoading,
isFormValid,
resetForm,
onInputChange,
'signup',
{
Expand All @@ -836,6 +861,7 @@ export const renderRecoveryComponents = (
formErrors: Record<string, string>,
isLoading: boolean,
isFormValid: boolean,
resetForm: () => void,
onInputChange: (name: string, value: string) => void,
options?: {
/** @internal */
Expand Down Expand Up @@ -867,6 +893,7 @@ export const renderRecoveryComponents = (
formErrors,
isLoading,
isFormValid,
resetForm,
onInputChange,
'recovery',
{
Expand All @@ -888,6 +915,7 @@ export const renderInviteUserComponents = (
formErrors: Record<string, string>,
isLoading: boolean,
isFormValid: boolean,
resetForm: () => void,
onInputChange: (name: string, value: string) => void,
options?: {
/** @internal */
Expand Down Expand Up @@ -923,6 +951,7 @@ export const renderInviteUserComponents = (
formErrors,
isLoading,
isFormValid,
resetForm,
onInputChange,
'signup',
{
Expand Down
12 changes: 12 additions & 0 deletions packages/react/src/components/presentation/auth/InviteUser/BaseInviteUser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -553,6 +553,17 @@ const BaseInviteUser: FC<BaseInviteUserProps> = ({
initializationAttemptedRef.current = false;
}, []);

/**
* reset form values, errors, and touched fields to initial state
*/
const resetForm = useCallback(() => {
setFormValues({});
setFormErrors({});
setTouchedFields({});
setApiError(null);
setIsFormValid(true);
}, []);

Comment thread
coderabbitai[bot] marked this conversation as resolved.
/**
* Initialize the flow on component mount.
*/
Expand Down Expand Up @@ -647,6 +658,7 @@ const BaseInviteUser: FC<BaseInviteUserProps> = ({
formErrors,
isLoading,
isFormValid,
resetForm,
handleInputChange,
{
_customRenderers: customRenderers,
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/presentation/auth/Recovery/BaseRecovery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -398,6 +398,7 @@ const BaseRecoveryContent: FC<BaseRecoveryProps> = ({
formErrors,
isLoading,
isFormValid,
resetForm,
handleInputChange,
{
_customRenderers: customRenderers,
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/components/presentation/auth/SignIn/BaseSignIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,6 +357,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
setTouched: setFormTouched,
validateForm,
touchAllFields,
reset: resetForm,
} = form;

/**
Expand Down Expand Up @@ -471,6 +472,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
formErrors,
isLoading,
isFormValid,
resetForm,
handleInputChange,
{
_customRenderers: customRenderers,
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/presentation/auth/SignUp/BaseSignUp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -967,6 +967,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
formErrors,
isLoading,
isFormValid,
resetForm,
handleInputChange,
{
_customRenderers: customRenderers,
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/presentation/auth/__tests__/AuthOptionFactory.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const renderInto = (
false,
true,
() => undefined,
() => undefined,
{onSubmit},
);
return render(<div>{elements}</div>);
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/contexts/ComponentRenderer/ComponentRendererContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export interface ComponentRenderContext {
isFormValid: boolean;
isLoading: boolean;
meta?: FlowMetadataResponse | null;
resetForm?: () => void;
onInputBlur?: (name: string) => void;
onInputChange: (name: string, value: string) => void;
onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;
Expand Down
30 changes: 28 additions & 2 deletions packages/vue/src/components/auth/sign-in/AuthOptionFactoryCore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ const createAuthComponentFromFlow = (
formErrors: Record<string, string>,
isLoading: boolean,
isFormValid: boolean,
resetForm: () => void,
onInputChange: (name: string, value: string) => void,
options: {
additionalData?: Record<string, any>;
Expand Down Expand Up @@ -200,7 +201,17 @@ const createAuthComponentFromFlow = (
const buttonText: string = resolve(component.label);
const componentVariant: string = component.variant || '';

const shouldSkipValidation: boolean = eventType.toUpperCase() === EmbeddedFlowEventType.Trigger;
const shouldSkipValidation: boolean = eventType.toUpperCase() !== EmbeddedFlowEventType.Submit;

// Determine the button type based on the event type. Default to 'submit' if not recognized.
const buttonTypeEnum = {
[EmbeddedFlowEventType.Submit]: 'submit',
[EmbeddedFlowEventType.Reset]: 'reset',
[EmbeddedFlowEventType.Cancel]: 'button',
[EmbeddedFlowEventType.Trigger]: 'button',
[EmbeddedFlowEventType.Back]: 'button',
};
const buttonType: HTMLButtonElement['type'] = buttonTypeEnum[eventType.toUpperCase()] ?? 'submit';

const handleClick = (): void => {
if (options.onSubmit) {
Expand Down Expand Up @@ -234,7 +245,13 @@ const createAuthComponentFromFlow = (
formData['consent_decisions'] = JSON.stringify(decisions);
}

options.onSubmit(component, formData, shouldSkipValidation);
// For submit events, pass the form data to the onSubmit callback. For other event types, reset the form and call onSubmit with an empty data object.
if (eventType.toUpperCase() === EmbeddedFlowEventType.Submit) {
options.onSubmit(component, formData, shouldSkipValidation);
} else {
resetForm();
options.onSubmit(component, {}, shouldSkipValidation);
}
}
};

Expand Down Expand Up @@ -288,6 +305,7 @@ const createAuthComponentFromFlow = (
onClick: handleClick,
startIcon: startIconVNode ?? undefined,
variant: component.variant?.toLowerCase() === 'primary' ? 'solid' : 'outline',
type: buttonType,
},
{default: () => buttonText || 'Submit'},
);
Expand Down Expand Up @@ -350,6 +368,7 @@ const createAuthComponentFromFlow = (
formErrors,
isLoading,
isFormValid,
resetForm,
onInputChange,
{
...options,
Expand Down Expand Up @@ -420,6 +439,7 @@ const createAuthComponentFromFlow = (
formErrors,
isLoading,
isFormValid,
resetForm,
onInputChange,
{
...options,
Expand Down Expand Up @@ -466,6 +486,7 @@ export const renderSignInComponents = (
formErrors: Record<string, string>,
isLoading: boolean,
isFormValid: boolean,
resetForm: () => void,
onInputChange: (name: string, value: string) => void,
options?: {
additionalData?: Record<string, any>;
Expand All @@ -489,6 +510,7 @@ export const renderSignInComponents = (
formErrors,
isLoading,
isFormValid,
resetForm,
onInputChange,
{
...options,
Expand All @@ -509,6 +531,7 @@ export const renderSignUpComponents = (
formErrors: Record<string, string>,
isLoading: boolean,
isFormValid: boolean,
resetForm: () => void,
onInputChange: (name: string, value: string) => void,
options?: {
additionalData?: Record<string, any>;
Expand All @@ -532,6 +555,7 @@ export const renderSignUpComponents = (
formErrors,
isLoading,
isFormValid,
resetForm,
onInputChange,
{
...options,
Expand All @@ -552,6 +576,7 @@ export const renderInviteUserComponents = (
formErrors: Record<string, string>,
isLoading: boolean,
isFormValid: boolean,
resetForm: () => void,
onInputChange: (name: string, value: string) => void,
options?: {
additionalData?: Record<string, any>;
Expand All @@ -575,6 +600,7 @@ export const renderInviteUserComponents = (
formErrors,
isLoading,
isFormValid,
resetForm,
onInputChange,
{
...options,
Expand Down
18 changes: 18 additions & 0 deletions packages/vue/src/components/auth/sign-in/BaseSignIn.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,23 @@ const BaseSignIn: Component = defineComponent({
}
};

/**
*
* Reset the formvalues
*/
const resetForm = (): void => {
const fields: FieldDefinition[] = extractFormFields(props.components || []);
const freshValues: Record<string, string> = {};
fields.forEach((f: FieldDefinition) => {
freshValues[f.name] = '';
});
formValues.value = freshValues;
touchedFields.value = {};
isSubmitting.value = false;
apiError.value = null;
clearMessages();
};

const renderComponents = (): VNode[] =>
renderSignInComponents(
props.components || [],
Expand All @@ -294,6 +311,7 @@ const BaseSignIn: Component = defineComponent({
formErrors.value,
isLoading.value,
isFormValid.value,
resetForm,
handleInputChange,
{
additionalData: props.additionalData,
Expand Down
Loading