@urbanos/react-discovery-ui 2.1.43

package/lib/auth/auth0-client-provider.test.js

@@ -0,0 +1,33 @@
+import { default as createAuth0Client } from '@auth0/auth0-spa-js'
+import auth0ClientProvider from './auth0-client-provider'
+
+jest.mock('@auth0/auth0-spa-js')
+
+describe('auth0-client-provider', () => {
+  let client
+
+  beforeEach(async () => {
+    createAuth0Client
+      .mockReturnValueOnce(Promise.resolve('first-instance'))
+      .mockReturnValue(Promise.resolve('another-instance'))
+
+    client = await auth0ClientProvider.get()
+  })
+
+  it('initializes with the correct domain and client ID', () => {
+    expect(createAuth0Client).toBeCalledWith({
+      domain: window.AUTH0_DOMAIN,
+      client_id: window.DISCOVERY_AUTH0_CLIENT_ID,
+      audience: window.AUTH0_AUDIENCE,
+      redirect_uri: `${window.location.origin}/oauth`
+    })
+  })
+
+  describe('retrieving again', () => {
+    it('gets the same instance', async () => {
+      const client2 = await auth0ClientProvider.get()
+
+      expect(client2).toBe(client)
+    })
+  })
+})

package/lib/auth/auth0-wrapper.js

@@ -0,0 +1,155 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _auth0ClientProvider = _interopRequireDefault(require("../auth/auth0-client-provider"));
+var _httpClients = require("../utils/http-clients");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (Object.getPrototypeOf ? Object.getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { throw: 1, return: 2, break: 3, continue: 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, catch: function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && o.reverse()); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
+function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof Symbol && Symbol.iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
+function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
+function _regeneratorAsync(n, e, r, t, o) { var a = _regeneratorAsyncGen(n, e, r, t, o); return a.next().then(function (n) { return n.done ? n.value : a.next(); }); }
+function _regeneratorAsyncGen(r, e, t, o, n) { return new _regeneratorAsyncIterator(_regenerator().w(r, e, t, o), n || Promise); }
+function _regeneratorAsyncIterator(t, e) { function n(r, o, i, f) { try { var c = t[r](o), u = c.value; return u instanceof _OverloadYield ? e.resolve(u.v).then(function (t) { n("next", t, i, f); }, function (t) { n("throw", t, i, f); }) : e.resolve(u).then(function (t) { c.value = t, i(c); }, function (t) { return n("throw", t, i, f); }); } catch (t) { f(t); } } var r; this.next || (_regeneratorDefine2(_regeneratorAsyncIterator.prototype), _regeneratorDefine2(_regeneratorAsyncIterator.prototype, "function" == typeof Symbol && Symbol.asyncIterator || "@asyncIterator", function () { return this; })), _regeneratorDefine2(this, "_invoke", function (t, o, i) { function f() { return new e(function (e, r) { n(t, i, e, r); }); } return r = r ? r.then(f, f) : f(); }, !0); }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function _OverloadYield(e, d) { this.v = e, this.k = d; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var withAuth0 = function withAuth0(WrappedComponent) {
+  var Auth0Wrapper = function Auth0Wrapper(props) {
+    var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      isAuthenticated = _useState2[0],
+      setAuthenticated = _useState2[1];
+    var _useState3 = (0, _react.useState)(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isLoading = _useState4[0],
+      setLoading = _useState4[1];
+    var _useState5 = (0, _react.useState)(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      auth0Client = _useState6[0],
+      setAuth0Client = _useState6[1];
+    var callbackState = {
+      path: window.location.pathname,
+      search: window.location.search
+    };
+    (0, _react.useEffect)(function () {
+      var connectAuth0 = /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var client, authenticated;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                setLoading(true);
+                _context.next = 3;
+                return _auth0ClientProvider.default.get();
+              case 3:
+                client = _context.sent;
+                setAuth0Client(client);
+                _context.next = 7;
+                return client.isAuthenticated();
+              case 7:
+                authenticated = _context.sent;
+                setAuthenticated(authenticated);
+                setLoading(false);
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function connectAuth0() {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      connectAuth0();
+    }, []);
+    var handleRedirectCallback = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var client, callbackReturn;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              setLoading(true);
+              _context2.next = 3;
+              return _auth0ClientProvider.default.get();
+            case 3:
+              client = _context2.sent;
+              _context2.next = 6;
+              return client.handleRedirectCallback();
+            case 6:
+              callbackReturn = _context2.sent;
+              setAuthenticated(true);
+              setLoading(false);
+              return _context2.abrupt("return", callbackReturn);
+            case 10:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function handleRedirectCallback() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var logout = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        var loggedOutReturn,
+          _args3 = arguments;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return _httpClients.AuthenticatedHTTPClient.post('/api/v1/logged-out', '');
+            case 2:
+              loggedOutReturn = _context3.sent;
+              auth0Client.logout.apply(auth0Client, _args3);
+              return _context3.abrupt("return", loggedOutReturn);
+            case 5:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      return function logout() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    var auth0Props = {
+      loginWithRedirect: function loginWithRedirect() {
+        for (var _len = arguments.length, p = new Array(_len), _key = 0; _key < _len; _key++) {
+          p[_key] = arguments[_key];
+        }
+        return auth0Client.loginWithRedirect(_objectSpread({
+          appState: callbackState
+        }, p));
+      },
+      logout: logout,
+      handleRedirectCallback: handleRedirectCallback,
+      isAuthenticated: isAuthenticated,
+      isLoading: isLoading
+    };
+    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
+      auth: auth0Props
+    }, props));
+  };
+  return Auth0Wrapper;
+};
+var _default = exports.default = withAuth0;

package/lib/auth/auth0-wrapper.test.js

@@ -0,0 +1,100 @@
+import { mount } from 'enzyme'
+import { default as createAuth0Client } from '@auth0/auth0-spa-js'
+import withAuth0 from './auth0-wrapper'
+import { AuthenticatedHTTPClient } from '../utils/http-clients'
+
+jest.mock('@auth0/auth0-spa-js')
+jest.mock('axios')
+
+const Wrapped = () => <div />
+
+describe('Auth0 wrapper component', () => {
+  let subject, Auth0Wrapper
+  let loginWithRedirect, logout
+
+  beforeEach(() => {
+    createAuth0Client.mockImplementation(() => {
+      loginWithRedirect = jest.fn()
+      logout = jest.fn()
+
+      return Promise.resolve({
+        isAuthenticated: jest.fn(() => Promise.resolve(false)),
+        handleRedirectCallback: jest.fn(() => Promise.resolve({})),
+        loginWithRedirect,
+        logout
+      })
+    })
+
+    Auth0Wrapper = withAuth0(Wrapped)
+    subject = mount(<Auth0Wrapper />)
+  })
+
+  it('initializes the client with the correct values', () => {
+    expect(createAuth0Client).toBeCalledWith({
+      domain: window.AUTH0_DOMAIN,
+      client_id: window.DISCOVERY_AUTH0_CLIENT_ID,
+      audience: window.AUTH0_AUDIENCE,
+      redirect_uri: `${window.location.origin}/oauth`
+    })
+  })
+
+  it('passes a loading flag', () => {
+    const wrapped = subject.find(Wrapped)
+    expect(wrapped.props().auth.isLoading).not.toBeUndefined()
+  })
+
+  it('eventually passes the authenticated flag to the wrapped component', done => {
+    setTimeout(() => {
+      subject.update()
+      const wrapped = subject.find(Wrapped)
+      expect(wrapped.props().auth.isAuthenticated).toBe(false)
+      done()
+    })
+  })
+
+  describe('provided handleRedirectCallback', () => {
+    it('sets authenticated to true when called', done => {
+      let wrapped = subject.find(Wrapped)
+
+      wrapped.props().auth.handleRedirectCallback()
+
+      setTimeout(() => {
+        subject.update()
+        wrapped = subject.find(Wrapped)
+        expect(wrapped.props().auth.isAuthenticated).toBe(true)
+        done()
+      })
+    })
+  })
+
+  describe('provided logout', () => {
+    const returnTo = 'http://example.com'
+
+    beforeEach(() => {
+      AuthenticatedHTTPClient.post = jest.fn()
+      AuthenticatedHTTPClient.post.mockImplementationOnce(async () => ({
+        status: 200,
+        data: 'OK'
+      }))
+
+      subject.update()
+      const wrapped = subject.find(Wrapped)
+
+      wrapped.props().auth.logout({ returnTo })
+    })
+
+    it('calls auth0 logout', done => {
+      setTimeout(() => {
+        expect(logout).toHaveBeenCalledWith({ returnTo })
+        done()
+      })
+    })
+
+    it('calls logged-out endpoint on the API', done => {
+      setTimeout(() => {
+        expect(AuthenticatedHTTPClient.post).toHaveBeenCalledWith('/api/v1/logged-out', '')
+        done()
+      })
+    })
+  })
+})

package/lib/components/auth0-login-zone/auth0-login-zone.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Auth0LoginZone = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("../login-zone/login-zone.scss");
+var _loginSvgsAndText = _interopRequireDefault(require("../login-zone/login-svgs-and-text"));
+var _routes = _interopRequireDefault(require("../../routes"));
+var _auth0Wrapper = _interopRequireDefault(require("../../auth/auth0-wrapper"));
+var _loadingElement = _interopRequireDefault(require("../generic-elements/loading-element"));
+var _react = require("react");
+var _reactRouterDom = require("react-router-dom");
+var _folderIcon = _interopRequireDefault(require("../generic-elements/folder-icon"));
+var _ExitToApp = _interopRequireDefault(require("@material-ui/icons/ExitToApp"));
+var _Backup = _interopRequireDefault(require("@material-ui/icons/Backup"));
+var _VpnKey = _interopRequireDefault(require("@material-ui/icons/VpnKey"));
+var _reactDeviceDetect = require("react-device-detect");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var returnTo = "".concat(window.location.origin).concat(_routes.default.oauth);
+var Auth0LoginZone = exports.Auth0LoginZone = function Auth0LoginZone(_ref) {
+  var _ref$auth = _ref.auth,
+    isAuthenticated = _ref$auth.isAuthenticated,
+    isLoading = _ref$auth.isLoading,
+    loginWithRedirect = _ref$auth.loginWithRedirect,
+    logout = _ref$auth.logout;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMenuToggled = _useState2[0],
+    setMenuToggled = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isMouseInMenu = _useState4[0],
+    setMouseInMenu = _useState4[1];
+  var wrapperRef = (0, _react.useRef)(null);
+  var mouseEnterMenu = function mouseEnterMenu() {
+    if (!_reactDeviceDetect.isMobile) {
+      setMouseInMenu(true);
+    }
+  };
+  var mouseExitMenu = function mouseExitMenu() {
+    if (!_reactDeviceDetect.isMobile) {
+      setMouseInMenu(false);
+    }
+  };
+  var toggleMenu = function toggleMenu() {
+    setMenuToggled(!isMenuToggled);
+  };
+  var clickOutMenu = function clickOutMenu() {
+    if (_reactDeviceDetect.isMobile) {
+      setMenuToggled(false);
+    }
+  };
+  var isMenuExpanded = isMenuToggled || isMouseInMenu;
+  var regenerateApiKeyFF = window.REGENERATE_API_KEY_FF;
+  useClickOutWatcher(wrapperRef, clickOutMenu);
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement("login-zone", null, /*#__PURE__*/React.createElement(_loadingElement.default, null));
+  }
+  return /*#__PURE__*/React.createElement("login-zone", null, /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "login-block"
+  }, isAuthenticated ? /*#__PURE__*/React.createElement("button", {
+    className: isMenuExpanded ? 'action' : 'status',
+    onClick: toggleMenu,
+    onMouseEnter: mouseEnterMenu,
+    onMouseLeave: mouseExitMenu
+  }, /*#__PURE__*/React.createElement(_loginSvgsAndText.default, {
+    text: "My Account",
+    symbol: isMenuExpanded ? '▴' : '▾'
+  })) : /*#__PURE__*/React.createElement("button", {
+    className: "action clickable",
+    "data-testid": "login-button",
+    onClick: loginWithRedirect
+  }, /*#__PURE__*/React.createElement(_loginSvgsAndText.default, {
+    text: "Log in to your account",
+    symbol: "\u25B8"
+  }))), isAuthenticated && isMenuExpanded && /*#__PURE__*/React.createElement("div", {
+    className: "user-menu",
+    onMouseEnter: mouseEnterMenu,
+    onMouseLeave: mouseExitMenu
+  }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
+    className: "menu-item"
+  }, /*#__PURE__*/React.createElement(_folderIcon.default, null), /*#__PURE__*/React.createElement("span", {
+    className: "menu-text"
+  }, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
+    to: "/user",
+    rel: "noopener noreferrer"
+  }, "Workspaces"))), regenerateApiKeyFF === 'true' && /*#__PURE__*/React.createElement("li", {
+    className: "menu-item"
+  }, /*#__PURE__*/React.createElement(_VpnKey.default, null), /*#__PURE__*/React.createElement("span", {
+    className: "menu-text"
+  }, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
+    to: "/apiKey",
+    rel: "noopener noreferrer"
+  }, "API Key"))), window.CONTRIBUTE_HOST && /*#__PURE__*/React.createElement("li", {
+    className: "menu-item"
+  }, /*#__PURE__*/React.createElement(_Backup.default, null), /*#__PURE__*/React.createElement("span", {
+    className: "menu-text"
+  }, /*#__PURE__*/React.createElement("a", {
+    role: "link",
+    href: window.CONTRIBUTE_HOST
+  }, "My Datasets"))), /*#__PURE__*/React.createElement("li", {
+    className: "menu-item",
+    id: "logout-button",
+    onClick: function onClick() {
+      logout({
+        returnTo: returnTo
+      });
+    }
+  }, /*#__PURE__*/React.createElement(_ExitToApp.default, null), /*#__PURE__*/React.createElement("span", {
+    className: "menu-text"
+  }, /*#__PURE__*/React.createElement("a", {
+    role: "link",
+    href: "#"
+  }, "Log Out")))))));
+};
+function useClickOutWatcher(ref, callback) {
+  (0, _react.useEffect)(function () {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+}
+Auth0LoginZone.propTypes = {
+  auth: _propTypes.default.shape({
+    loginWithRedirect: _propTypes.default.func.isRequired,
+    logout: _propTypes.default.func.isRequired,
+    isAuthenticated: _propTypes.default.bool,
+    isLoading: _propTypes.default.bool
+  }).isRequired
+};
+var _default = exports.default = (0, _auth0Wrapper.default)(Auth0LoginZone);

package/lib/components/auth0-login-zone/auth0-login-zone.test.js

@@ -0,0 +1,177 @@
+import { mount } from 'enzyme'
+import { Auth0LoginZone as Component } from './auth0-login-zone'
+import LoadingElement from '../generic-elements/loading-element'
+import { BrowserRouter as Router } from 'react-router-dom'
+import * as device from 'react-device-detect'
+
+describe('OauthLoginZone component', () => {
+  let subject, button, loginHandler, logoutHandler
+
+  beforeEach(() => {
+    loginHandler = jest.fn()
+    logoutHandler = jest.fn()
+  })
+
+  describe('unauthenticated', () => {
+    beforeEach(() => {
+      subject = createSubject({ isAuthenticated: false, loginWithRedirect: loginHandler, logout: logoutHandler })
+      button = subject.find('button')
+    })
+
+    it('has a login button', () => {
+      expect(button.length).toBe(1)
+      expect(button.text()).toMatch('Log in to your account')
+    })
+
+    it('logs in with redirect when the button is clicked', () => {
+      button.simulate('click')
+
+      expect(loginHandler).toHaveBeenCalled()
+    })
+
+    it('does not have a loading element', () => {
+      expect(subject.find(LoadingElement).length).toBe(0)
+    })
+  })
+
+  describe('authenticated', () => {
+    beforeEach(() => {
+      device.isMobile = false
+      subject = createSubject({ isAuthenticated: true, loginWithRedirect: loginHandler, logout: logoutHandler })
+      button = subject.find('button')
+    })
+
+    it('has an account dropdown', () => {
+      expect(button.length).toBe(1)
+      expect(button.text()).toMatch('My Account')
+    })
+
+    it('displays account dropdown on mouse enter', () => {
+      button.simulate('mouseEnter')
+      const menuItems = subject.find('li')
+      expect(menuItems.length).not.toBe(0)
+    })
+
+    describe('account menu', () => {
+      beforeEach(() => {
+        button.simulate('mouseEnter')
+      })
+
+      it('has the expected menu items', () => {
+        window.REGENERATE_API_KEY_FF = 'true'
+        subject = createSubject({ isAuthenticated: true, loginWithRedirect: loginHandler, logout: logoutHandler })
+        button = subject.find('button')
+        button.simulate('mouseEnter')
+        const menuItems = subject.find('li')
+        expect(menuItems.length).toBe(3)
+        expect(menuItems.at(0).text()).toMatch('Workspaces')
+        expect(menuItems.at(1).text()).toMatch('API Key')
+        expect(menuItems.at(2).text()).toMatch('Log Out')
+      })
+
+      it('does not contain API Key when FF is not active', () => {
+        window.REGENERATE_API_KEY_FF = 'false'
+        subject = createSubject({ isAuthenticated: true, loginWithRedirect: loginHandler, logout: logoutHandler })
+        button = subject.find('button')
+        button.simulate('mouseEnter')
+        const menuItems = subject.find('li')
+        expect(menuItems.length).toBe(2)
+        expect(menuItems.at(0).text()).toMatch('Workspaces')
+        expect(menuItems.at(1).text()).toMatch('Log Out')
+      })
+
+      it('logs out with the correct "returnTo" URL when the button is clicked', () => {
+        const logOut = subject.find('#logout-button')
+        logOut.simulate('click')
+
+        expect(logoutHandler).toHaveBeenCalledWith({ returnTo: `${window.location.origin}/oauth` })
+      })
+
+      it('has a link to the workspaces page', () => {
+        const link = subject.find('a')
+        expect(link.at(0).props().href).toMatch('/user')
+      })
+
+      it('has a link to the apikey page', () => {
+        window.REGENERATE_API_KEY_FF = 'true'
+        subject = createSubject({ isAuthenticated: true, loginWithRedirect: loginHandler, logout: logoutHandler })
+        button = subject.find('button')
+        button.simulate('mouseEnter')
+        const link = subject.find('a')
+        expect(link.at(1).props().href).toMatch('/apiKey')
+      })
+
+      it('does not have a loading element', () => {
+        expect(subject.find(LoadingElement).length).toBe(0)
+      })
+
+      it('closes on mouse exit', () => {
+        button.simulate('mouseLeave')
+        const menuItems = subject.find('li')
+        expect(menuItems.length).toBe(0)
+      })
+    })
+
+    describe('account menu on mobile', () => {
+      beforeEach(() => {
+        device.isMobile = true
+        subject = createSubject({ isAuthenticated: true, loginWithRedirect: loginHandler, logout: logoutHandler })
+        button = subject.find('button')
+      })
+
+      it('toggles account dropdown on mouse click', () => {
+        button.simulate('click')
+        let menuItems = subject.find('li')
+        expect(menuItems.length).not.toBe(0)
+
+        button.simulate('click')
+        menuItems = subject.find('li')
+        expect(menuItems.length).toBe(0)
+      })
+
+      it('does not display account dropdown on mouse enter', () => {
+        button.simulate('mouseEnter')
+        const menuItems = subject.find('li')
+        expect(menuItems.length).toBe(0)
+      })
+    })
+  })
+
+  describe('loading', () => {
+    beforeEach(() => {
+      subject = createSubject({ isLoading: true })
+    })
+
+    it('has a loading element', () => {
+      expect(subject.find(LoadingElement).length).toBe(1)
+    })
+
+    it('does not have a button', () => {
+      expect(subject.find('button').length).toBe(0)
+    })
+  })
+})
+
+const createSubject = (authProps = {}) => {
+  const defaultAuthProps = {
+    isAuthenticated: false,
+    isLoading: false,
+    loginWithRedirect: jest.fn(),
+    logout: jest.fn()
+  }
+
+  const auth0PropsWithDefaults = Object.assign({}, defaultAuthProps, authProps)
+
+  return mount(
+    <Router>
+      <Component
+        auth={{
+          isAuthenticated: auth0PropsWithDefaults.isAuthenticated,
+          isLoading: auth0PropsWithDefaults.isLoading,
+          loginWithRedirect: auth0PropsWithDefaults.loginWithRedirect,
+          logout: auth0PropsWithDefaults.logout
+        }}
+      />
+    </Router>
+  )
+}

package/lib/components/auth0-login-zone/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _auth0LoginZone = _interopRequireDefault(require("./auth0-login-zone"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _auth0LoginZone.default;