error messages due to failed login are covered by the login button

[amirbey]

Describe the bug
When a login is failed, the error message displayed is covered by the login button due to a margin-top: -40px styling on the button.

To Reproduce

Steps to reproduce the behavior. For example:

1. Attempt to login to www.example.com/admin with credentials that will result in an unsuccessful authentication and will return authorization:github:error:{"message":"Some error message"} in

const script = `
    <script nonce="${res.locals.cspNonce}">
      (function() {
        function receiveMessage(e) {
          window.opener.postMessage(
            'authorization:github:error:{"message":"Some error message"}',
            e.origin
          )
        }
        window.addEventListener("message", receiveMessage, false)
        // Start handshare with parent
        window.opener.postMessage("authorizing:github", "*")
      })()
    </script>
  `;

2. You will see:

Expected behavior
Expect to see a visible and unobstructed error message.

Screenshots
See above

Applicable Versions:

• Netlify CMS version: 2.10
• Git provider: GitHub

CMS configuration
N/A

Additional context

[erezrokah]

Hi @amirbey, can you share a step by step reproduction, possibly in a public repo?
I'm not able to understand the reproduction steps.

Specifically:

Attempt to login to www.example.com/admin with credentials that will result in an unsuccessful authentication and will return authorization:github:error:{"message":"Some error message"}

This points to an example site

Also, I'm not sure in what context the script you shared is executed

[amirbey]

I have experienced this when using a Node.js external oAuth client where the callback is called with an error.

Looking at this example code,
this scenario should be created as long as mess='error'

[erezrokah]

Thanks @amirbey, I'm still not sure how to reproduce this issue, or how the code change in the PR should solve it.

The PR doesn't touch any files related to the GitHub backend.

Can you please provide a step by step reproduction of the issue? e.g.

1. Clone this repo...
2. Run npm run start
3. Go to http://localhost:<port>
4. Click this button
5. See the error

Please make sure the reproduction scenario includes the full CMS configuration you're using.

Without the above information it's very hard to know the cause for the issue, or how the PR fixes it.

[martinjagodic]

Closing as stale.