React advice - login form with cancel button?

Support
#1

Hi:

In my web site, the home page is accessible to anyone, but when a “Client Access” link is clicked, the user must log in to see the secure pages.

There is no Cancel button in the standard Login component, so once a user clicks on “Client Access”, they have no way to go back to the home page.

Any suggestions on how to implement this?

I’ve tried using a cancel button, like this:

            <Button
              htmlType="button"
              size="large"
              block={true}
              onClick={this.doCancel}
            >
              <FormattedMessage id="login.cancelBtn" />
            </Button>
          </Form.Item>

with doCancel function of:

  doCancel = (e: FormEvent) => {
    e.preventDefault();
    history.back();
  }

using the History package. The button appears to work since the URL in the browser changes, but the form itself stays displayed.

One solution I considered was using the “visible” property on the Form, but unfortunately the Antd Form definition does not include a visible property.

Is Modal the way to go? Is it possible to wrap the Form in a Modal and still be able to log in? Does anybody have any examples?