@@ -74,4 +74,12 @@ breakpoint(point, value = 0)

@-webkit-keyframes rotate
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
100%{-webkit-transform: rotate(360deg);}

/*
Calculates container height based on --vh :root property, set using JavaScript.
Includes a fallback to 100vh for browsers that don't support custom properties.
*/
calculateHeight()
height 100vh
height calc(var(--vh, 1vh) * 100)
@@ -148,7 +148,7 @@ loadingSize = 30px
.auth0-lock-cred-pane-internal-wrapper
display: flex
flex-direction: column
height 100vh
calculateHeight()
max-height auto
+breakpoint("mobile")
max-height: calc(100vh - 40px)
@@ -1048,7 +1048,7 @@ loadingSize = 30px
.auth0-lock-widget-container
//mobile view
@media screen and (max-width: 480px)
height 100%
calculateHeight()

.auth0-lock-cred-pane
//mobile view
@@ -1,6 +1,6 @@
{
"name": "auth0-lock",
"version": "11.20.3",
"version": "11.20.4",
"description": "Auth0 Lock",
"author": "Auth0 <support@auth0.com> (http://auth0.com)",
"license": "MIT",
@@ -35,7 +35,14 @@ Array [
]
`;

exports[`passwordless actions login() on webApi.passwordlessVerify() callback formats error when there is an error 1`] = `
exports[`passwordless actions login() on webApi.passwordlessVerify() callback when there is an error emits the "authorization_error" event 1`] = `
Array [
"model",
[Error: foobar],
]
`;

exports[`passwordless actions login() on webApi.passwordlessVerify() callback when there is an error formats the error 1`] = `
Array [
"updateEntity",
"lock",
@@ -45,7 +52,7 @@ Array [
]
`;

exports[`passwordless actions login() on webApi.passwordlessVerify() callback formats error when there is an error 2`] = `
exports[`passwordless actions login() on webApi.passwordlessVerify() callback when there is an error formats the error 2`] = `
Array [
"updateEntity",
"lock",
@@ -46,7 +46,8 @@ describe('passwordless actions', () => {
auth: 'params'
})
})
}
},
emitAuthorizationErrorEvent: jest.fn()
}));
jest.mock('store/index', () => ({
read: jest.fn(() => 'model'),
@@ -195,26 +196,42 @@ describe('passwordless actions', () => {
expectMockToMatch(read, 1);
expectMockToMatch(swap, 1);
});

it('calls webApi.passwordlessVerify() with sms options', () => {
actions.logIn('id');
expectMockToMatch(require('core/web_api').passwordlessVerify, 1);
});

it('calls webApi.passwordlessVerify() with email options', () => {
require('connection/passwordless/index').isEmail = () => true;
actions.logIn('id');
expectMockToMatch(require('core/web_api').passwordlessVerify, 1);
});

describe('on webApi.passwordlessVerify() callback', () => {
it('formats error when there is an error ', () => {
actions.logIn('id');
describe('when there is an error', () => {
it('formats the error', () => {
actions.logIn('id');

const error = new Error('foobar');
error.error = 'some_error_code';
require('core/web_api').passwordlessVerify.mock.calls[0][2](error);
const error = new Error('foobar');
error.error = 'some_error_code';
require('core/web_api').passwordlessVerify.mock.calls[0][2](error);

const { swap } = require('store/index');
expectMockToMatch(swap, 2);
});

it('emits the "authorization_error" event', () => {
actions.logIn('id');

const { swap } = require('store/index');
expectMockToMatch(swap, 2);
const error = new Error('foobar');
error.error = 'some_error_code';
require('core/web_api').passwordlessVerify.mock.calls[0][2](error);

expectMockToMatch(require('core/index').emitAuthorizationErrorEvent, 1);
});
});

it('calls logInSuccess on success', () => {
actions.logIn('id');
require('core/web_api').passwordlessVerify.mock.calls[0][2](null, { result: true });
@@ -141,6 +141,7 @@ export function logIn(id) {
if (error.logToConsole) {
console.error(error.description);
}
l.emitAuthorizationErrorEvent(m, error);
return swap(updateEntity, 'lock', id, l.setSubmitting, false, errorMessage);
} else {
return logInSuccess(id, result);
@@ -224,3 +224,15 @@ export function injectStyles() {
style.innerHTML = css;
}
}

/**
* Calculates the window innerHeight and sets the --vh style property on :root,
* which is then taken advantage of by the CSS.
* This important as `innerHeight` will take into account any UI chrome on mobile devices, fixing
* an issue where the login button is cut off towards the bottom of the screen.
* Values are in pixels multiplied by 1% to convert them to vh.
*/
export function setWindowHeightStyle() {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
@@ -1,10 +1,15 @@
import Core, { injectStyles, css } from './core';
import Core, { injectStyles, setWindowHeightStyle } from './core';
import classic from './engine/classic';

export default class Auth0Lock extends Core {
constructor(clientID, domain, options) {
super(clientID, domain, options, classic);
injectStyles();
setWindowHeightStyle();

window.addEventListener('resize', () => {
setWindowHeightStyle();
});
}
}

@@ -609,7 +609,7 @@ atob@^2.1.1:
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==

auth0-js@^9.12.1:
auth0-js@^9.12.2:
version "9.12.2"
resolved "https://registry.yarnpkg.com/auth0-js/-/auth0-js-9.12.2.tgz#8227259a94e8a47eecf8d7a630d99669049833a6"
integrity sha512-0VfPu5UcgkGKQc7Q8KPqgkqqhLgXGsDCro2tde7hHPYK9JEzOyq82v0szUTHWlwQE1VT8K2/qZAsGDf7hFjI7g==