Simple switch between forms on a page on button/link click

[shravanthprasad]

User Story

For a scenario when a form(ex:Sign In) is embedded on a page, As and end user, I have a Sign in/ Login form with user name and password and a link with Register button When I click on Register button, the current form should hide and Register form should be displayed

Description & Motivation

Sign up and Sign In are most used forms on any web application and switching between forms without loading/reloading the page will be helpful

Deliverables

New AEM forms core Component to allow switching between forms OR Update Switch Component to hide current form and display new form on page

Acceptance Criteria

Switching between forms by a simple link/click on button

Verification Steps

A simple switch between forms by clicking on a button without reloading

[rismehta]

New AEM forms core Component to allow switching between forms OR Update Switch Component to hide current form and display new form on page

@shravanthprasad Using core components, you can also create multiple forms on a single page. To achieve the current use-case mentioned in the issue, you can subscribe to the submitSuccess listener of each form using guideBridge and then hide the form using DOM APIs. Here is a sample code to demonstrate this:

const onSubmitSuccess = (event, formid) => {
    // hide the form using form id
    const formElement = document.getElementById(formId);
    if (formElement) {
        formElement.style.display = 'none';
    }
};

const onValidationComplete = (event) => {
    const x = event.payload[0].id;
    // do something with the invalid field
};

const initialGbEvents = (guideBridge) => {
    guideBridge.getFormModel().subscribe((action) => {
        onSubmitSuccess(action, guideBridge.getFormModel().id);
    }, 'submitSuccess');
    guideBridge.getFormModel().subscribe((action) => {
        onValidationComplete(action);
    }, 'validationComplete');
};

const connectGuideBridge = (bridge, formContainerPath, connectFunction) => {
    guideBridge.connect(
        () => connectFunction(bridge),
        null,
        formContainerPath
    );
};

const formContainerConfigurations = [
    {
        path: '<form-container-path-1>',
        connectFunction: initialGbEvents,
    },
    {
        path: '<form-container-path-2>',
        connectFunction: (guideBridge) => {
            // Custom function for form-container-path-2
            console.log('Connected to form-container-path-2');
            // Additional logic for this form
        }
    },
    // Add more form container configurations as needed
];

if (window.guideBridge !== undefined) {
    const bridge = window.guideBridge;
    formContainerConfigurations.forEach((config) => {
        connectGuideBridge(bridge, config.path, config.connectFunction);
    });
} else {
    window.addEventListener("bridgeInitializeStart", (event) => {
        const bridge = event.detail.guideBridge;
        formContainerConfigurations.forEach((config) => {
            connectGuideBridge(bridge, config.path, config.connectFunction);
        });
    });
}