From c098c31f43d111da50531aec03446934c52b9e26 Mon Sep 17 00:00:00 2001
From: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>
Date: Tue, 14 Jul 2020 23:52:54 +0200
Subject: [PATCH] Fix z-index for all auth wrappers (#12894)
* Add Cypress auth test to for small screen sizes
Note: it should fail on 640x360px.
* Fix z-index for all auth wrappers
Note: all tests in `signin.cy.specs.js` should pass at this point.
---
.../auth/containers/ForgotPasswordApp.jsx | 2 +-
.../auth/containers/PasswordResetApp.jsx | 4 ++--
.../metabase/scenarios/auth/signin.cy.spec.js | 19 +++++++++++++++++++
3 files changed, 22 insertions(+), 3 deletions(-)
diff --git a/frontend/src/metabase/auth/containers/ForgotPasswordApp.jsx b/frontend/src/metabase/auth/containers/ForgotPasswordApp.jsx
index afb0fb35db2..439c676ef7a 100644
--- a/frontend/src/metabase/auth/containers/ForgotPasswordApp.jsx
+++ b/frontend/src/metabase/auth/containers/ForgotPasswordApp.jsx
@@ -29,7 +29,7 @@ export default class ForgotPasswordApp extends Component {
return (
<div className="full-height flex flex-column flex-full md-layout-centered">
- <div className="Login-wrapper wrapper Grid Grid--full md-Grid--1of2">
+ <div className="Login-wrapper wrapper Grid Grid--full md-Grid--1of2 relative z2">
<div className="Grid-cell flex layout-centered text-brand">
<LogoIcon className="Logo my4 sm-my0" height={65} />
</div>
diff --git a/frontend/src/metabase/auth/containers/PasswordResetApp.jsx b/frontend/src/metabase/auth/containers/PasswordResetApp.jsx
index c70f010ab7f..aa47670ad0b 100644
--- a/frontend/src/metabase/auth/containers/PasswordResetApp.jsx
+++ b/frontend/src/metabase/auth/containers/PasswordResetApp.jsx
@@ -72,7 +72,7 @@ export default class PasswordResetApp extends Component {
<div className="full-height">
<div className="full-height flex flex-column flex-full md-layout-centered">
<div className="wrapper">
- <div className="Login-wrapper Grid Grid--full md-Grid--1of2">
+ <div className="Login-wrapper Grid Grid--full md-Grid--1of2 relative z2">
<div className="Grid-cell flex layout-centered text-brand">
<LogoIcon className="Logo my4 sm-my0" height={65} />
</div>
@@ -91,7 +91,7 @@ export default class PasswordResetApp extends Component {
} else {
return (
<div className="full-height bg-white flex flex-column flex-full md-layout-centered">
- <div className="Login-wrapper wrapper Grid Grid--full md-Grid--1of2">
+ <div className="Login-wrapper wrapper Grid Grid--full md-Grid--1of2 relative z2">
<div className="Grid-cell flex layout-centered text-brand">
<LogoIcon className="Logo my4 sm-my0" height={65} />
</div>
diff --git a/frontend/test/metabase/scenarios/auth/signin.cy.spec.js b/frontend/test/metabase/scenarios/auth/signin.cy.spec.js
index e253b63d1b8..d67426c5fd0 100644
--- a/frontend/test/metabase/scenarios/auth/signin.cy.spec.js
+++ b/frontend/test/metabase/scenarios/auth/signin.cy.spec.js
@@ -1,5 +1,7 @@
import { restore, signIn, signOut, USERS } from "__support__/cypress";
+const sizes = [[1280, 800], [640, 360]];
+
describe("scenarios > auth > signin", () => {
before(restore);
beforeEach(signOut);
@@ -53,4 +55,21 @@ describe("scenarios > auth > signin", () => {
// order table should load after login
cy.contains("37.65");
});
+
+ sizes.forEach(size => {
+ it(`should redirect from /auth/forgot_password back to /auth/login (viewport: ${size})`, () => {
+ if (Cypress._.isArray(size)) {
+ cy.viewport(size[0], size[1]);
+ } else {
+ cy.viewport(size);
+ }
+
+ cy.visit("/");
+ cy.url().should("contain", "auth/login");
+ cy.findByText("I seem to have forgotten my password").click();
+ cy.url().should("contain", "auth/forgot_password");
+ cy.findByText("Back to login").click();
+ cy.url().should("contain", "auth/login");
+ });
+ });
});
--
GitLab