@basiq/connect-auth 0.1.89 → 0.1.91

package/dist/connect-auth.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, createRef, useEffect } from 'react';
+import React, { useState, useEffect, useCallback, createRef } from 'react';
 import styled, { css, keyframes, createGlobalStyle, ThemeProvider } from 'styled-components';
 import { useTranslation, Trans, initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
@@ -466,6 +466,13 @@ var hexToRGBa = function hexToRGBa(hex, opacity) {
   var opp = opacity > 1 && opacity < 0 ? 1 : opacity;
   return "rgba(" + (hexToRGBA == null ? void 0 : hexToRGBA.concat(opp).join()) + ")";
 };
+var handleUserKeyPress = function handleUserKeyPress(e, onEnter) {
+  var keyCode = e.keyCode;
+
+  if (keyCode === 13) {
+    onEnter();
+  }
+};
 
 var DASHBOARD_API_URL_TEST = 'https://c9joivz12f.execute-api.ap-southeast-2.amazonaws.com/Development/';
 var DASHBOARD_API_URL = 'https://p4c8zn20r9.execute-api.ap-southeast-2.amazonaws.com/Production_v1/';
@@ -527,10 +534,10 @@ var theme = {
   },
   mixin: {
     subtitle: function subtitle() {
-      return " margin-top: 8px;\n                        margin-bottom: 4px;\n                        width: 100%;\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;";
+      return " margin-top: 32px;\n                        margin-bottom: 4px;\n                        width: 100%;\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;";
     },
     title: function title() {
-      return "  font-size: 26px;\n                    line-height: 30px;\n                    letter-spacing: -0.2px;\n                    margin-top: 0;\n                    margin-bottom: 24px;\n                    color: #130f26;\n                    white-space: pre-line;\n  ";
+      return "  font-size: 26px;\n                    line-height: 30px;\n                    letter-spacing: -0.2px;\n                    margin-top: 0;\n                    margin-bottom: 0;\n                    color: #130f26;\n                    white-space: pre-line;\n  ";
     }
   }
 };
@@ -626,13 +633,17 @@ var InputStyled = /*#__PURE__*/styled.input(_templateObject3$3 || (_templateObje
   return error ? theme.color.cerise : theme.color.endeavour;
 });
 var InputContainer = /*#__PURE__*/styled.div(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n"])));
-var DivAsLink = /*#__PURE__*/styled.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tdisplay: inherit;\n\tcursor: pointer;\n"])), function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.color.endeavour;
+var DivAsLink = /*#__PURE__*/styled.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\tdisplay: inherit;\n\tcursor: ", ";\n"])), function (_ref4) {
+  var theme = _ref4.theme,
+      disabled = _ref4.disabled;
+  return disabled ? theme.color.casper : theme.color.endeavour;
+}, function (_ref5) {
+  var disabled = _ref5.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
 });
 
 var _templateObject$5;
-var InnerContainer = /*#__PURE__*/styled.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\tmargin-top: 16px;\n\twidth: 100%;\n"])));
+var InnerContainer = /*#__PURE__*/styled.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\twidth: 100%;\n"])));
 
 var _templateObject$6, _templateObject2$5, _templateObject3$4, _templateObject4$4;
 var PageStatusScreenMain = /*#__PURE__*/styled(PageMainContainer)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\theight: 100%;\n"])));
@@ -691,7 +702,7 @@ var MarkW1GBold = "data:font/otf;base64,T1RUTwANAIAAAwBQQ0ZGICwMZMIAACp0AAFDmERT
 var _templateObject$8;
 var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  \n@font-face {\n            font-family: MarkW1G;\n            src: url(", ") format('opentype');\n        }\n        @font-face {\n            font-family: MarkW1G;\n            font-weight: bold;\n            src: url(", ") format('opentype');\n        }\n\nbody{\n  font-family: 'MarkW1G', sans-serif;\n}\nbody * {\n  font-family: 'MarkW1G', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n}\n"])), MarkW1GBook, MarkW1GBold);
 
-var img = "data:image/svg+xml,%3c!-- Generated by IcoMoon.io --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'%3e%3ctitle%3e%3c/title%3e%3cg id='icomoon-ignore'%3e%3c/g%3e%3cpath fill='black' d='M682.667 469.333h-241.493l53.333-55.893c7.287-7.645 11.77-18.019 11.77-29.44 0-23.584-19.119-42.703-42.703-42.703-12.164 0-23.139 5.085-30.917 13.246l-0.016 0.017-122.027 128c-1.338 1.628-2.607 3.44-3.731 5.347l-0.109 0.199c-1.886 2.326-3.467 5.004-4.62 7.899l-0.073 0.207c-1.426 3.52-2.347 7.596-2.557 11.859l-0.003 0.088-0.853 3.84c0.073 5.873 1.322 11.435 3.52 16.489l-0.107-0.275c2.2 5.299 5.227 9.831 8.968 13.662l127.992 127.992c7.733 7.795 18.45 12.621 30.293 12.621s22.56-4.826 30.291-12.618l0.003-0.003c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003-55.467-54.613h238.507c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667v0z'%3e%3c/path%3e%3cpath fill='black' d='M512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0zM512 853.333c-188.513 0-341.333-152.82-341.333-341.333s152.82-341.333 341.333-341.333c188.513 0 341.333 152.82 341.333 341.333v0c0 188.513-152.82 341.333-341.333 341.333v0z'%3e%3c/path%3e%3c/svg%3e";
+var img = "data:image/svg+xml,%3csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.25 1.75C5.55621 1.75 1.75 5.55621 1.75 10.25C1.75 14.9447 5.55616 18.75 10.25 18.75C14.9438 18.75 18.75 14.9447 18.75 10.25C18.75 5.55621 14.9438 1.75 10.25 1.75ZM0.25 10.25C0.25 4.72779 4.72779 0.25 10.25 0.25C15.7722 0.25 20.25 4.72779 20.25 10.25C20.25 15.7733 15.7722 20.25 10.25 20.25C4.72784 20.25 0.25 15.7733 0.25 10.25ZM12.2238 6.25001C12.516 6.54354 12.515 7.01841 12.2215 7.31067L9.26925 10.2502L12.2215 13.1897C12.515 13.482 12.516 13.9569 12.2238 14.2504C11.9315 14.5439 11.4566 14.5449 11.1631 14.2527L7.67711 10.7817C7.53576 10.6409 7.4563 10.4497 7.4563 10.2502C7.4563 10.0507 7.53576 9.85947 7.67711 9.71873L11.1631 6.24773C11.4566 5.95547 11.9315 5.95649 12.2238 6.25001Z' fill='black'/%3e%3c/svg%3e";
 
 function Button(props) {
   var onClick = props.onClick,
@@ -875,34 +886,35 @@ var authUser = /*#__PURE__*/function () {
               },
               method: method || 'POST'
             };
-            _context2.next = 4;
+            _context2.prev = 2;
+            _context2.next = 5;
             return fetch((test ? DASHBOARD_API_URL_TEST : DASHBOARD_API_URL) + "client_auth/" + authRequestId, reqData);
 
-          case 4:
+          case 5:
             result = _context2.sent;
 
             if (!(result.status >= 200 && result.status < 300)) {
-              _context2.next = 15;
+              _context2.next = 16;
               break;
             }
 
             if (!(result.status === 204)) {
-              _context2.next = 10;
+              _context2.next = 11;
               break;
             }
 
             _context2.t0 = null;
-            _context2.next = 13;
+            _context2.next = 14;
             break;
 
-          case 10:
-            _context2.next = 12;
+          case 11:
+            _context2.next = 13;
             return result.json();
 
-          case 12:
+          case 13:
             _context2.t0 = _context2.sent;
 
-          case 13:
+          case 14:
             json = _context2.t0;
             return _context2.abrupt("return", {
               data: json,
@@ -911,29 +923,29 @@ var authUser = /*#__PURE__*/function () {
               ok: true
             });
 
-          case 15:
+          case 16:
             if (!(result.status >= 400)) {
-              _context2.next = 25;
+              _context2.next = 26;
               break;
             }
 
             if (![403, 404].includes(result.status)) {
-              _context2.next = 20;
+              _context2.next = 21;
               break;
             }
 
             _context2.t1 = null;
-            _context2.next = 23;
+            _context2.next = 24;
             break;
 
-          case 20:
-            _context2.next = 22;
+          case 21:
+            _context2.next = 23;
             return result.json();
 
-          case 22:
+          case 23:
             _context2.t1 = _context2.sent;
 
-          case 23:
+          case 24:
             _json = _context2.t1;
             return _context2.abrupt("return", {
               headers: result.headers,
@@ -942,7 +954,7 @@ var authUser = /*#__PURE__*/function () {
               ok: false
             });
 
-          case 25:
+          case 26:
             return _context2.abrupt("return", {
               headers: result.headers,
               statusCode: result.status,
@@ -950,12 +962,21 @@ var authUser = /*#__PURE__*/function () {
               ok: false
             });
 
-          case 26:
+          case 29:
+            _context2.prev = 29;
+            _context2.t2 = _context2["catch"](2);
+            return _context2.abrupt("return", {
+              statusCode: 500,
+              error: 'Something went wrong',
+              ok: false
+            });
+
+          case 32:
           case "end":
             return _context2.stop();
         }
       }
-    }, _callee2);
+    }, _callee2, null, [[2, 29]]);
   }));
 
   return function authUser(_x2) {
@@ -1018,6 +1039,17 @@ function StartScreen(props) {
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
+  useEffect(function () {
+    window.addEventListener('keydown', function (e) {
+      return handleUserKeyPress(e, onContinue);
+    });
+    return function () {
+      window.removeEventListener('keydown', function (e) {
+        return handleUserKeyPress(e, onContinue);
+      });
+    };
+  }, []);
+
   var handleContinue = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var response;
@@ -1105,9 +1137,13 @@ function StartScreen(props) {
       bold: React.createElement("strong", null)
     }
   }))), React.createElement(H4Styled, null, t('things_you_should_know')), React.createElement("ul", null, React.createElement("li", null, t('we_dont_share_your_data_without_your_consent')), React.createElement("li", null, t('you_can_easily_stop_sharing_your_data_at_any_time')), React.createElement("li", null, t('you_can_choose_to_delete_shared_data_when_we_no_longer_need_it'))), React.createElement(Spacer, null), React.createElement("span", null, React.createElement(React.Fragment, null, t('by_proceeding_you_agree_to_the'), ' ', React.createElement("a", {
-    href: "https://docs.basiq.io/en/articles/415750-basiq-terms-of-service"
+    href: "https://docs.basiq.io/en/articles/415750-basiq-terms-of-service",
+    rel: "noreferrer",
+    target: "_blank"
   }, t('terms_of_service')), " ", t('and'), ' ', React.createElement("a", {
-    href: "https://docs.basiq.io/en/articles/382581-basiq-privacy-policy"
+    href: "https://docs.basiq.io/en/articles/382581-basiq-privacy-policy",
+    rel: "noreferrer",
+    target: "_blank"
   }, t('privacy_notice')))), React.createElement(LoadingModal, {
     isOpen: loading
   })));
@@ -1136,36 +1172,43 @@ function AuthScreen(_ref) {
       setResend = _useState3[1];
 
   var _useState4 = useState(false),
-      loading = _useState4[0],
-      setLoading = _useState4[1];
+      resendLoading = _useState4[0],
+      setResendLoading = _useState4[1];
 
-  var handleCodeApply = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var _response$data;
+  var _useState5 = useState(false),
+      loading = _useState5[0],
+      setLoading = _useState5[1];
 
-      var response, _response$data2;
+  var handleCodeApply = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
+      var _response$data, response, _response$data2;
 
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
+              if (!(smsCode.length === 4 && error.length === 0 && (!e || (e == null ? void 0 : e.charCode) === 13))) {
+                _context.next = 7;
+                break;
+              }
+
               setLoading(true);
-              _context.next = 3;
+              _context.next = 4;
               return verifySmsCode({
                 authRequestId: authRequestId,
                 smsCode: smsCode,
                 test: test
               });
 
-            case 3:
+            case 4:
               response = _context.sent;
-              setLoading(false);
 
               if (response != null && (_response$data = response.data) != null && _response$data.access_token) {
-                window.open("https://consent.basiq.io/home?token=" + (response == null ? void 0 : (_response$data2 = response.data) == null ? void 0 : _response$data2.access_token));
+                window.open("https://consent.basiq.io/home?token=" + (response == null ? void 0 : (_response$data2 = response.data) == null ? void 0 : _response$data2.access_token), "_self");
               }
 
               if (response != null && response.error) {
+                setLoading(false);
                 setError(t('this_code_doesnt_appear_to_be_valid'));
               }
 
@@ -1177,16 +1220,16 @@ function AuthScreen(_ref) {
       }, _callee);
     }));
 
-    return function handleCodeApply() {
+    return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }();
-
+  }(), [smsCode, error, authRequestId]);
   var buttons = [{
     label: t('continue'),
     onClick: function onClick() {
       return handleCodeApply();
-    }
+    },
+    disabled: smsCode.length < 4 || !!error
   }];
 
   var handleResend = /*#__PURE__*/function () {
@@ -1198,16 +1241,17 @@ function AuthScreen(_ref) {
             case 0:
               setError('');
               setSmsCode('');
-              setLoading(true);
-              _context2.next = 5;
+              setResend(false);
+              setResendLoading(true);
+              _context2.next = 6;
               return authUser({
                 authRequestId: authRequestId,
                 test: test
               });
 
-            case 5:
+            case 6:
               response = _context2.sent;
-              setLoading(false);
+              setResendLoading(false);
 
               if (response.error) {
                 setError(t('failed_to_send_sms'));
@@ -1215,7 +1259,7 @@ function AuthScreen(_ref) {
                 setResend(true);
               }
 
-            case 8:
+            case 9:
             case "end":
               return _context2.stop();
           }
@@ -1231,7 +1275,10 @@ function AuthScreen(_ref) {
   var handleInput = function handleInput(e) {
     setError('');
     setResend(false);
-    setSmsCode(e.target.value);
+
+    if (/^([0-9]+)$/.test(e.target.value) || e.target.value === '') {
+      setSmsCode(e.target.value);
+    }
   };
 
   return React.createElement(Page, {
@@ -1251,12 +1298,16 @@ function AuthScreen(_ref) {
     onChange: handleInput,
     value: smsCode,
     filled: smsCode.length === 4,
-    error: !!error
+    error: !!error,
+    onKeyPress: function onKeyPress(e) {
+      return handleCodeApply(e);
+    }
   })), React.createElement(PageConnectFooterControl, null, resend && React.createElement(StatusMessage, null, t('new_sms_code_has_been_sent')), !!error && React.createElement(StatusMessage, {
     error: true
   }, error), React.createElement(PageConnectFooterText, null, React.createElement("span", null, React.createElement(React.Fragment, null, t('didnt_receive_the_code'), " ", React.createElement(DivAsLink, {
+    disabled: resendLoading,
     onClick: function onClick() {
-      return handleResend();
+      return !resendLoading && handleResend();
     }
   }, t('resend_sms')))))), React.createElement(LoadingModal, {
     isOpen: loading
@@ -1264,6 +1315,7 @@ function AuthScreen(_ref) {
 }
 
 function App(props) {
+  var test = props.test;
   var ref = createRef();
 
   var _useState = useState(false),
@@ -1302,6 +1354,11 @@ function App(props) {
     setShadow(detectScrollToBottom(event));
   };
 
+  var showErrorScreen = function showErrorScreen(code) {
+    setErrorCode(code);
+    setCurrentScreen(3);
+  };
+
   useEffect(function () {
     var getData = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -1324,7 +1381,7 @@ function App(props) {
                 return authUser({
                   authRequestId: id,
                   method: 'GET',
-                  test: props.test
+                  test: test
                 });
 
               case 6:
@@ -1370,11 +1427,6 @@ function App(props) {
     getData();
   }, []);
 
-  var showErrorScreen = function showErrorScreen(code) {
-    setErrorCode(code);
-    setCurrentScreen(3);
-  };
-
   var getScreen = function getScreen() {
     switch (currentScreen) {
       case 0:
@@ -1394,7 +1446,7 @@ function App(props) {
             return setCurrentScreen(2);
           },
           authRequestId: authId,
-          test: props.test
+          test: test
         });
 
       case 2:
@@ -1405,7 +1457,7 @@ function App(props) {
           },
           shadow: shadow,
           authRequestId: authId,
-          test: props.test
+          test: test
         });
 
       case 3:
@@ -1503,10 +1555,11 @@ i18n.use(initReactI18next) // passes i18n down to react-i18next
 });
 
 function BasiqConnect(props) {
+  var test = props.test;
   return React.createElement(React.StrictMode, null, React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement(App, {
-    test: props.test
+    test: test
   })));
 }