diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index 131307ba9..0a61ab5f0 100644
--- a/DEVELOPMENT.md
+++ b/DEVELOPMENT.md
@@ -40,3 +40,30 @@ yarn start
Next, open `https://localhost:3000/support`, which will display a simple web app that allows you to interact with Auth0 to test functionality. The HTML template in `support/index.html` can be modified to test various different pieces of functionality.
This is preconfigured with an Auth0 tenant and client ID but you may change this to your own for testing.
+
+## Testing Lock locally through the Universal Login Page
+
+If you need to test a local build of Lock, but hosted on the ULP, you can do this by modifying the ULP template for a tenant so that the script for Lock points to the locally-served instance at `https://localhost:3000/build/lock.js`.
+
+You can then use another SPA app to log in using this tenant that has this customized version of the Lock template.
+
+You may need to run Lock using HTTPS with a valid certificate if you want to do this testing in Safari, as Safari will not load mixed content pages, and will also not load HTTPS with untrusted testing certificates.
+
+Lock can already support HTTPS just by running `yarn start` if you have `mkcert` installed.
+
+To install `mkcert`:
+
+```
+brew install mkcert
+
+brew install nss # if you use Firefox
+
+mkcert install
+
+# Serve lock
+yarn start
+```
+
+Once Lock has started, use another SPA app to log in using a tenant with the template customized as above.
+
+If you don't have `mkcert`, HTTPS will still be used but it will be untrusted.
\ No newline at end of file
diff --git a/css/index.styl b/css/index.styl
index c46a5483a..443dc7ee4 100644
--- a/css/index.styl
+++ b/css/index.styl
@@ -83,8 +83,6 @@ loadingSize = 30px
height 100%
right 0
z-index 1000000
- +breakpoint("mobile")
- display table
a
text-decoration none
@@ -107,10 +105,11 @@ loadingSize = 30px
transition opacity .2s ease-in .4s
.auth0-lock-center
+ box-sizing border-box
+breakpoint("mobile")
- vertical-align middle
- display table-cell
- margin auto
+ padding 40px
+ height 100%
+ display flex
.auth0-lock-widget
width 300px
@@ -119,7 +118,7 @@ loadingSize = 30px
transform translateY(100%) scale(.8)
-webkit-transition-timing-function cubic-bezier(.3, 0, 0, 1.4)
transition-timing-function cubic-bezier(.3, 0, 0, 1.4)
- margin 0 auto
+ margin auto
border-radius 5px
+breakpoint("mobile")
@@ -150,8 +149,8 @@ loadingSize = 30px
flex-direction: column
calculateHeight()
max-height auto
+
+breakpoint("mobile")
- max-height: calc(100vh - 40px)
min-height auto
height auto
@@ -167,25 +166,24 @@ loadingSize = 30px
overflow hidden
-webkit-box-sizing border-box
box-sizing border-box
- display: flex
- flex-direction: column
- justify-content: center
- flex-shrink: 0
- flex-grow: 0
- flex-basis: auto
- position: absolute
- width: 100%
- z-index: 99
+ display flex
+ flex-direction column
+ justify-content center
+ flex-shrink 0
+ flex-grow 0
+ flex-basis auto
.auth0-lock-content-wrapper
flex-grow: 1
flex-shrink: 1
flex-basis: auto
-webkit-overflow-scrolling touch
- overflow-x: auto
+ overflow-x auto
+ +breakpoint("mobile")
+ overflow-x inherit
.auth0-lock-content-body-wrapper
- // padding-top 10px
+ padding-top 10px
.auth0-lock-close-button, .auth0-lock-back-button
-webkit-box-sizing content-box !important
diff --git a/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap b/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap
index f87b77bf1..e8b968e0b 100644
--- a/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap
+++ b/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap
@@ -23,7 +23,7 @@ exports[`Chrome can dislay all global messages together 1`] = `
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 200,
+ "marginTop": 0,
}
}
>
@@ -159,470 +159,6 @@ exports[`Chrome can dislay all global messages together 1`] = `
`;
-exports[`Chrome correctly sets the header size when the "signin ready" event is triggered 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Chrome correctly sets the header size when the "signin ready" event is triggered 2`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Chrome correctly sets the header size when the "signup ready" event is triggered 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Chrome correctly sets the header size when the "signup ready" event is triggered 2`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
exports[`Chrome renders correctly when there is a global information message 1`] = `
@@ -777,7 +313,7 @@ exports[`Chrome renders correctly when there is a global message 1`] = `
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 200,
+ "marginTop": 0,
}
}
>
@@ -908,7 +444,7 @@ exports[`Chrome renders correctly when there is a global success message 1`] = `
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 200,
+ "marginTop": 0,
}
}
>
@@ -1039,7 +575,7 @@ exports[`Chrome renders correctly with basic props 1`] = `
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 200,
+ "marginTop": 0,
}
}
>
diff --git a/src/__tests__/ui/box/chrome.test.jsx b/src/__tests__/ui/box/chrome.test.jsx
index 78788f623..a5e14c9bd 100644
--- a/src/__tests__/ui/box/chrome.test.jsx
+++ b/src/__tests__/ui/box/chrome.test.jsx
@@ -55,34 +55,6 @@ describe('Chrome', () => {
expectComponent().toMatchSnapshot();
});
- it('correctly sets the header size when the "signin ready" event is triggered', () => {
- const component = create();
- const instance = component.getInstance();
-
- expect(instance.state.headerHeight).toBe(200);
- expect(component).toMatchSnapshot();
-
- Chrome.prototype.getHeaderSize.mockReturnValue(250);
- triggerEvent('signin ready');
-
- expect(instance.state.headerHeight).toBe(250);
- expect(component).toMatchSnapshot();
- });
-
- it('correctly sets the header size when the "signup ready" event is triggered', () => {
- const component = create();
- const instance = component.getInstance();
-
- expect(instance.state.headerHeight).toBe(200);
- expect(component).toMatchSnapshot();
- Chrome.prototype.getHeaderSize.mockReturnValue(250);
-
- triggerEvent('signup ready');
-
- expect(instance.state.headerHeight).toBe(250);
- expect(component).toMatchSnapshot();
- });
-
it('renders correctly when there is a global message', () => {
const props = {
...defaultProps,
diff --git a/src/ui/box/chrome.jsx b/src/ui/box/chrome.jsx
index 1e08c782c..cd1be8bc4 100644
--- a/src/ui/box/chrome.jsx
+++ b/src/ui/box/chrome.jsx
@@ -146,15 +146,6 @@ export default class Chrome extends React.Component {
}
}
- componentDidMount() {
- const fn = () => this.setState({ headerHeight: this.getHeaderSize() });
- const m = this.props.contentProps.model;
-
- l.handleEvent(m, 'signup ready', fn);
- l.handleEvent(m, 'signin ready', fn);
- fn();
- }
-
onWillSlide() {
this.setState({ moving: true });
this.sliding = true;
@@ -166,7 +157,7 @@ export default class Chrome extends React.Component {
}
onDidAppear() {
- this.setState({ moving: false, headerHeight: this.getHeaderSize() });
+ this.setState({ moving: false });
if (this.state.delayingShowSubmitButton) {
this.setState({ delayingShowSubmitButton: false });
@@ -196,19 +187,6 @@ export default class Chrome extends React.Component {
}
}
- // Record the header element so that we can retrieve its size when the
- // component renders
- setHeaderElement(element) {
- this.header = element;
- }
-
- // Get the size (rather than the element itself), as returning
- // the element makes this difficult to test (we can't reasonably enforce the size
- // as it's not rendered to a screen).
- getHeaderSize() {
- return this.header ? this.header.getDOMNode().clientHeight : 0;
- }
-
render() {
const {
avatar,
@@ -293,7 +271,6 @@ export default class Chrome extends React.Component {
backgroundUrl={backgroundUrl}
backgroundColor={primaryColor}
logoUrl={logo}
- ref={::this.setHeaderElement}
/>